From 6bf1cbc0efefe7d3a04377b593bc80d2e4774324 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Fri, 7 Apr 2023 17:01:42 -0700
Subject: [PATCH] fix: format script; chore: format

---
 CONTRIBUTING.md                               |    4 +-
 package.json                                  |    2 +-
 packages/client/.prettierrc                   |   15 +
 packages/client/package.json                  |    5 +-
 .../client/src/components/MkAbuseReport.vue   |  120 +-
 .../src/components/MkAbuseReportWindow.vue    |   93 +-
 .../client/src/components/MkAnalogClock.vue   |  245 ++--
 .../client/src/components/MkAutocomplete.vue  |  307 ++--
 packages/client/src/components/MkAvatars.vue  |   16 +-
 packages/client/src/components/MkButton.vue   |   81 +-
 packages/client/src/components/MkCaptcha.vue  |   80 +-
 .../src/components/MkChannelFollowButton.vue  |   61 +-
 .../src/components/MkChannelPreview.vue       |   81 +-
 packages/client/src/components/MkChart.vue    | 1236 ++++++++++-------
 .../client/src/components/MkChartTooltip.vue  |   43 +-
 .../client/src/components/MkChatPreview.vue   |  109 +-
 .../src/components/MkCheatSheetDialog.vue     |   36 +-
 .../client/src/components/MkCode.core.vue     |   25 +-
 packages/client/src/components/MkCode.vue     |    8 +-
 .../client/src/components/MkContainer.vue     |  127 +-
 .../client/src/components/MkContextMenu.vue   |   48 +-
 .../client/src/components/MkCropperDialog.vue |  115 +-
 packages/client/src/components/MkCwButton.vue |   38 +-
 .../src/components/MkDateSeparatedList.vue    |  140 +-
 packages/client/src/components/MkDialog.vue   |  252 +++-
 .../client/src/components/MkDigitalClock.vue  |   75 +-
 .../client/src/components/MkDrive.file.vue    |  246 ++--
 .../client/src/components/MkDrive.folder.vue  |  287 ++--
 .../src/components/MkDrive.navFolder.vue      |   75 +-
 packages/client/src/components/MkDrive.vue    |  633 +++++----
 .../src/components/MkDriveFileThumbnail.vue   |   98 +-
 .../src/components/MkDriveSelectDialog.vue    |   86 +-
 .../client/src/components/MkDriveWindow.vue   |   36 +-
 .../src/components/MkEmojiPicker.section.vue  |   47 +-
 .../client/src/components/MkEmojiPicker.vue   |  358 +++--
 .../src/components/MkEmojiPickerDialog.vue    |   92 +-
 .../src/components/MkFeaturedPhotos.vue       |   14 +-
 .../src/components/MkFileListForAdmin.vue     |  102 +-
 .../client/src/components/MkFileTypeIcon.vue  |   12 +-
 packages/client/src/components/MkFolder.vue   |   87 +-
 .../client/src/components/MkFollowButton.vue  |  154 +-
 .../src/components/MkForgotPassword.vue       |  108 +-
 .../client/src/components/MkFormDialog.vue    |  231 ++-
 packages/client/src/components/MkFormula.vue  |   10 +-
 .../client/src/components/MkFormulaCore.vue   |   20 +-
 .../src/components/MkGalleryPostPreview.vue   |   40 +-
 packages/client/src/components/MkGoogle.vue   |   20 +-
 packages/client/src/components/MkHeatmap.vue  |  169 ++-
 .../client/src/components/MkImageViewer.vue   |   57 +-
 .../src/components/MkImgWithBlurhash.vue      |   62 +-
 packages/client/src/components/MkInfo.vue     |   12 +-
 .../src/components/MkInstanceCardMini.vue     |   80 +-
 .../src/components/MkInstanceSelectDialog.vue |  116 +-
 .../client/src/components/MkInstanceStats.vue |  193 ++-
 .../src/components/MkInstanceTicker.vue       |   54 +-
 packages/client/src/components/MkKeyValue.vue |   49 +-
 .../client/src/components/MkLaunchPad.vue     |  131 +-
 packages/client/src/components/MkLink.vue     |   65 +-
 packages/client/src/components/MkMarquee.vue  |   62 +-
 .../client/src/components/MkMediaBanner.vue   |  120 +-
 .../client/src/components/MkMediaCaption.vue  |  136 +-
 .../client/src/components/MkMediaImage.vue    |   93 +-
 .../client/src/components/MkMediaList.vue     |  160 ++-
 .../client/src/components/MkMediaVideo.vue    |   98 +-
 packages/client/src/components/MkMention.vue  |   74 +-
 .../client/src/components/MkMenu.child.vue    |   48 +-
 packages/client/src/components/MkMenu.vue     |  333 +++--
 .../client/src/components/MkMiniChart.vue     |   69 +-
 packages/client/src/components/MkModal.vue    |  378 +++--
 .../src/components/MkModalPageWindow.vue      |  154 +-
 .../client/src/components/MkModalWindow.vue   |   95 +-
 packages/client/src/components/MkMoved.vue    |   17 +-
 packages/client/src/components/MkNote.vue     |  600 +++++---
 .../client/src/components/MkNoteDetailed.vue  |  622 ++++++---
 .../client/src/components/MkNoteHeader.vue    |   88 +-
 .../client/src/components/MkNotePreview.vue   |   25 +-
 .../client/src/components/MkNoteSimple.vue    |   44 +-
 packages/client/src/components/MkNoteSub.vue  |  440 ++++--
 packages/client/src/components/MkNotes.vue    |   59 +-
 .../client/src/components/MkNotification.vue  |  410 ++++--
 .../MkNotificationSettingWindow.vue           |  116 +-
 .../src/components/MkNotificationToast.vue    |   34 +-
 .../client/src/components/MkNotifications.vue |  119 +-
 packages/client/src/components/MkNumber.vue   |   22 +-
 .../client/src/components/MkNumberDiff.vue    |   11 +-
 .../src/components/MkObjectView.value.vue     |   86 +-
 .../client/src/components/MkObjectView.vue    |   11 +-
 .../client/src/components/MkPagePreview.vue   |   50 +-
 .../client/src/components/MkPageWindow.vue    |  157 ++-
 .../client/src/components/MkPagination.vue    |  695 +++++----
 packages/client/src/components/MkPoll.vue     |  137 +-
 .../client/src/components/MkPollEditor.vue    |  202 +--
 .../client/src/components/MkPopupMenu.vue     |   35 +-
 packages/client/src/components/MkPostForm.vue |  815 +++++++----
 .../src/components/MkPostFormAttaches.vue     |  166 ++-
 .../src/components/MkPostFormDialog.vue       |   30 +-
 .../MkPushNotificationAllowButton.vue         |  183 ++-
 .../client/src/components/MkQuoteButton.vue   |   34 +-
 .../src/components/MkReactedUsersDialog.vue   |  120 +-
 .../client/src/components/MkReactionIcon.vue  |   10 +-
 .../src/components/MkReactionTooltip.vue      |   30 +-
 .../components/MkReactionsViewer.details.vue  |   46 +-
 .../components/MkReactionsViewer.reaction.vue |  105 +-
 .../src/components/MkReactionsViewer.vue      |   25 +-
 .../client/src/components/MkRemoteCaution.vue |   13 +-
 .../client/src/components/MkRenoteButton.vue  |  221 +--
 packages/client/src/components/MkRipple.vue   |  140 +-
 packages/client/src/components/MkSample.vue   |  142 +-
 packages/client/src/components/MkSignin.vue   |  387 ++++--
 .../client/src/components/MkSigninDialog.vue  |   53 +-
 packages/client/src/components/MkSignup.vue   |  568 +++++---
 .../client/src/components/MkSignupDialog.vue  |   55 +-
 packages/client/src/components/MkSparkle.vue  |   93 +-
 .../client/src/components/MkStarButton.vue    |   78 +-
 .../src/components/MkSubNoteContent.vue       |  148 +-
 .../client/src/components/MkSuperMenu.vue     |   73 +-
 packages/client/src/components/MkTab.vue      |   44 +-
 packages/client/src/components/MkTagCloud.vue |   65 +-
 packages/client/src/components/MkTimeline.vue |  130 +-
 packages/client/src/components/MkToast.vue    |   37 +-
 .../src/components/MkTokenGenerateWindow.vue  |  117 +-
 packages/client/src/components/MkTooltip.vue  |   77 +-
 .../src/components/MkTutorialDialog.vue       |  338 +++--
 packages/client/src/components/MkUpdated.vue  |   65 +-
 .../client/src/components/MkUrlPreview.vue    |  204 ++-
 .../src/components/MkUrlPreviewPopup.vue      |   30 +-
 .../client/src/components/MkUserCardMini.vue  |   73 +-
 packages/client/src/components/MkUserInfo.vue |   86 +-
 packages/client/src/components/MkUserList.vue |   45 +-
 .../src/components/MkUserOnlineIndicator.vue  |   20 +-
 .../client/src/components/MkUserPreview.vue   |  165 ++-
 .../src/components/MkUserSelectDialog.vue     |  167 ++-
 .../client/src/components/MkUsersTooltip.vue  |   29 +-
 .../client/src/components/MkVisibility.vue    |   55 +-
 .../src/components/MkVisibilityPicker.vue     |  162 ++-
 .../client/src/components/MkWaitingDialog.vue |   54 +-
 packages/client/src/components/MkWidgets.vue  |  176 ++-
 packages/client/src/components/MkWindow.vue   |  358 +++--
 .../client/src/components/form/checkbox.vue   |   59 +-
 .../client/src/components/form/folder.vue     |   47 +-
 packages/client/src/components/form/input.vue |  162 ++-
 packages/client/src/components/form/link.vue  |   46 +-
 packages/client/src/components/form/radio.vue |   43 +-
 .../client/src/components/form/radios.vue     |   81 +-
 packages/client/src/components/form/range.vue |  162 ++-
 .../client/src/components/form/section.vue    |   13 +-
 .../client/src/components/form/select.vue     |  138 +-
 packages/client/src/components/form/slot.vue  |   14 +-
 packages/client/src/components/form/split.vue |   23 +-
 .../client/src/components/form/suspense.vue   |   56 +-
 .../client/src/components/form/switch.vue     |   51 +-
 .../client/src/components/form/textarea.vue   |   91 +-
 packages/client/src/components/global/MkA.vue |  121 +-
 .../client/src/components/global/MkAcct.vue   |   18 +-
 .../client/src/components/global/MkAd.vue     |   91 +-
 .../client/src/components/global/MkAvatar.vue |  154 +-
 .../src/components/global/MkEllipsis.vue      |    4 +-
 .../client/src/components/global/MkEmoji.vue  |   55 +-
 .../client/src/components/global/MkError.vue  |   27 +-
 .../src/components/global/MkLoading.vue       |   61 +-
 .../global/MkMisskeyFlavoredMarkdown.vue      |  324 +++--
 .../src/components/global/MkPageHeader.vue    |  226 ++-
 .../client/src/components/global/MkSpacer.vue |   44 +-
 .../components/global/MkStickyContainer.vue   |   42 +-
 .../client/src/components/global/MkTime.vue   |   65 +-
 .../client/src/components/global/MkUrl.vue    |   82 +-
 .../src/components/global/MkUserName.vue      |   27 +-
 .../src/components/global/RouterView.vue      |   53 +-
 .../client/src/components/page/page.block.vue |   68 +-
 .../src/components/page/page.button.vue       |   54 +-
 .../src/components/page/page.canvas.vue       |   24 +-
 .../src/components/page/page.counter.vue      |   35 +-
 .../client/src/components/page/page.if.vue    |   28 +-
 .../client/src/components/page/page.image.vue |   31 +-
 .../client/src/components/page/page.note.vue  |   43 +-
 .../src/components/page/page.number-input.vue |   37 +-
 .../client/src/components/page/page.post.vue  |   78 +-
 .../src/components/page/page.radio-button.vue |   37 +-
 .../src/components/page/page.section.vue      |   36 +-
 .../src/components/page/page.switch.vue       |   32 +-
 .../src/components/page/page.text-input.vue   |   37 +-
 .../client/src/components/page/page.text.vue  |   60 +-
 .../components/page/page.textarea-input.vue   |   37 +-
 .../src/components/page/page.textarea.vue     |   28 +-
 packages/client/src/components/page/page.vue  |   57 +-
 .../client/src/components/queue-chart.vue     |  129 --
 packages/client/src/pages/_empty_.vue         |    4 +-
 packages/client/src/pages/_error_.vue         |  100 +-
 packages/client/src/pages/_loading_.vue       |    5 +-
 packages/client/src/pages/about-calckey.vue   |  236 +++-
 packages/client/src/pages/about.emojis.vue    |  106 +-
 .../client/src/pages/about.federation.vue     |  202 ++-
 packages/client/src/pages/about.vue           |  501 ++++---
 packages/client/src/pages/admin-file.vue      |  343 +++--
 packages/client/src/pages/admin/_header_.vue  |  160 ++-
 packages/client/src/pages/admin/abuses.vue    |  142 +-
 .../client/src/pages/admin/announcements.vue  |  163 ++-
 .../client/src/pages/admin/bot-protection.vue |  146 +-
 .../client/src/pages/admin/custom-css.vue     |   38 +-
 packages/client/src/pages/admin/database.vue  |   86 +-
 .../client/src/pages/admin/email-settings.vue |  196 ++-
 .../src/pages/admin/emoji-edit-dialog.vue     |  113 +-
 packages/client/src/pages/admin/emojis.vue    |  503 ++++---
 .../client/src/pages/admin/federation.vue     |   40 +-
 packages/client/src/pages/admin/files.vue     |  203 ++-
 packages/client/src/pages/admin/index.vue     |  484 ++++---
 .../client/src/pages/admin/instance-block.vue |   62 +-
 .../src/pages/admin/integrations.discord.vue  |   71 +-
 .../src/pages/admin/integrations.github.vue   |   73 +-
 .../client/src/pages/admin/integrations.vue   |   75 +-
 packages/client/src/pages/admin/metrics.vue   |  606 ++++----
 .../client/src/pages/admin/object-storage.vue |  232 ++--
 .../client/src/pages/admin/other-settings.vue |   51 +-
 .../src/pages/admin/overview.active-users.vue |  118 +-
 .../src/pages/admin/overview.ap-requests.vue  |  186 +--
 .../src/pages/admin/overview.federation.vue   |  152 +-
 .../src/pages/admin/overview.heatmap.vue      |   32 +-
 .../src/pages/admin/overview.instances.vue    |   43 +-
 .../src/pages/admin/overview.moderators.vue   |   42 +-
 .../client/src/pages/admin/overview.pie.vue   |   58 +-
 .../src/pages/admin/overview.queue-chart.vue  |  133 +-
 .../src/pages/admin/overview.queue.chart.vue  |   91 +-
 .../client/src/pages/admin/overview.queue.vue |   90 +-
 .../client/src/pages/admin/overview.stats.vue |  145 +-
 .../client/src/pages/admin/overview.user.vue  |   37 +-
 .../client/src/pages/admin/overview.users.vue |   42 +-
 packages/client/src/pages/admin/overview.vue  |  138 +-
 .../client/src/pages/admin/promotions.vue     |  153 +-
 .../client/src/pages/admin/proxy-account.vue  |   70 +-
 .../src/pages/admin/queue.chart.chart.vue     |   90 +-
 .../client/src/pages/admin/queue.chart.vue    |  116 +-
 packages/client/src/pages/admin/queue.vue     |   79 +-
 packages/client/src/pages/admin/relays.vue    |  120 +-
 packages/client/src/pages/admin/security.vue  |  412 ++++--
 packages/client/src/pages/admin/settings.vue  |  626 ++++++---
 packages/client/src/pages/admin/users.vue     |  252 ++--
 packages/client/src/pages/announcements.vue   |   71 +-
 .../client/src/pages/antenna-timeline.vue     |  126 +-
 packages/client/src/pages/api-console.vue     |  141 +-
 packages/client/src/pages/apps.vue            |  182 ++-
 packages/client/src/pages/auth.form.vue       |   62 +-
 packages/client/src/pages/auth.vue            |  175 ++-
 packages/client/src/pages/channel-editor.vue  |  126 +-
 packages/client/src/pages/channel.vue         |  198 ++-
 packages/client/src/pages/channels.vue        |  198 ++-
 packages/client/src/pages/clip.vue            |  192 +--
 packages/client/src/pages/drive.vue           |   28 +-
 packages/client/src/pages/emojis.emoji.vue    |   75 +-
 .../client/src/pages/explore.featured.vue     |   41 +-
 packages/client/src/pages/explore.users.vue   |  326 +++--
 packages/client/src/pages/explore.vue         |  123 +-
 packages/client/src/pages/favorites.vue       |    6 +-
 packages/client/src/pages/follow-requests.vue |  128 +-
 packages/client/src/pages/follow.vue          |   41 +-
 packages/client/src/pages/gallery/edit.vue    |  166 ++-
 packages/client/src/pages/gallery/index.vue   |  230 +--
 packages/client/src/pages/gallery/post.vue    |  265 ++--
 packages/client/src/pages/instance-info.vue   |  578 +++++---
 packages/client/src/pages/messaging/index.vue |  316 +++--
 .../pages/messaging/messaging-room.form.vue   |  207 +--
 .../messaging/messaging-room.message.vue      |  131 +-
 .../src/pages/messaging/messaging-room.vue    |  258 ++--
 packages/client/src/pages/mfm-cheat-sheet.vue |  652 +++++----
 packages/client/src/pages/miauth.vue          |  124 +-
 .../client/src/pages/my-antennas/create.vue   |   26 +-
 .../client/src/pages/my-antennas/edit.vue     |   40 +-
 .../client/src/pages/my-antennas/editor.vue   |  261 ++--
 .../client/src/pages/my-antennas/index.vue    |   93 +-
 packages/client/src/pages/my-clips/index.vue  |   74 +-
 packages/client/src/pages/my-groups/group.vue |   67 +-
 packages/client/src/pages/my-groups/index.vue |  104 +-
 packages/client/src/pages/my-lists/index.vue  |   83 +-
 packages/client/src/pages/my-lists/list.vue   |  139 +-
 packages/client/src/pages/not-found.vue       |   20 +-
 packages/client/src/pages/note.vue            |  250 ++--
 packages/client/src/pages/notifications.vue   |  230 +--
 .../page-editor/els/page-editor.el.button.vue |  171 ++-
 .../page-editor/els/page-editor.el.canvas.vue |   74 +-
 .../els/page-editor.el.counter.vue            |   66 +-
 .../page-editor/els/page-editor.el.if.vue     |  101 +-
 .../page-editor/els/page-editor.el.image.vue  |   64 +-
 .../page-editor/els/page-editor.el.note.vue   |  104 +-
 .../els/page-editor.el.number-input.vue       |   66 +-
 .../page-editor/els/page-editor.el.post.vue   |   64 +-
 .../els/page-editor.el.radio-button.vue       |   86 +-
 .../els/page-editor.el.section.vue            |   72 +-
 .../page-editor/els/page-editor.el.switch.vue |   60 +-
 .../els/page-editor.el.text-input.vue         |   58 +-
 .../page-editor/els/page-editor.el.text.vue   |   38 +-
 .../els/page-editor.el.textarea-input.vue     |   60 +-
 .../els/page-editor.el.textarea.vue           |   38 +-
 .../pages/page-editor/page-editor.blocks.vue  |  102 +-
 .../page-editor/page-editor.container.vue     |   73 +-
 .../page-editor/page-editor.script-block.vue  |  405 ++++--
 .../src/pages/page-editor/page-editor.vue     |  536 ++++---
 packages/client/src/pages/page.vue            |  331 +++--
 packages/client/src/pages/pages.vue           |  204 +--
 packages/client/src/pages/preview.vue         |   24 +-
 packages/client/src/pages/registry.keys.vue   |  103 +-
 packages/client/src/pages/registry.value.vue  |  129 +-
 packages/client/src/pages/registry.vue        |   70 +-
 packages/client/src/pages/reset-password.vue  |   78 +-
 packages/client/src/pages/scratchpad.vue      |  161 ++-
 packages/client/src/pages/search.vue          |   94 +-
 packages/client/src/pages/settings/2fa.vue    |  372 +++--
 .../src/pages/settings/account-info.vue       |  312 +++--
 .../client/src/pages/settings/accounts.vue    |  162 ++-
 packages/client/src/pages/settings/api.vue    |   70 +-
 packages/client/src/pages/settings/apps.vue   |  105 +-
 .../client/src/pages/settings/custom-css.vue  |   40 +-
 .../src/pages/settings/custom-katex-macro.vue |   63 +-
 packages/client/src/pages/settings/deck.vue   |   53 +-
 .../src/pages/settings/delete-account.vue     |   44 +-
 packages/client/src/pages/settings/drive.vue  |  164 ++-
 packages/client/src/pages/settings/email.vue  |  177 ++-
 .../client/src/pages/settings/general.vue     |  480 ++++---
 .../src/pages/settings/import-export.vue      |  308 ++--
 packages/client/src/pages/settings/index.vue  |  441 +++---
 .../src/pages/settings/instance-mute.vue      |   58 +-
 .../client/src/pages/settings/integration.vue |  106 +-
 .../client/src/pages/settings/migration.vue   |   86 +-
 .../client/src/pages/settings/mute-block.vue  |   88 +-
 packages/client/src/pages/settings/navbar.vue |  102 +-
 .../src/pages/settings/notifications.vue      |  152 +-
 packages/client/src/pages/settings/other.vue  |   56 +-
 .../src/pages/settings/plugin.install.vue     |  143 +-
 packages/client/src/pages/settings/plugin.vue |  125 +-
 .../pages/settings/preferences-backups.vue    |  453 +++---
 .../client/src/pages/settings/privacy.vue     |  202 ++-
 .../client/src/pages/settings/profile.vue     |  365 +++--
 .../client/src/pages/settings/reaction.vue    |  222 +--
 .../client/src/pages/settings/security.vue    |  124 +-
 packages/client/src/pages/settings/sounds.vue |  110 +-
 .../pages/settings/statusbar.statusbar.vue    |  299 ++--
 .../client/src/pages/settings/statusbar.vue   |   48 +-
 .../src/pages/settings/theme.install.vue      |   64 +-
 .../src/pages/settings/theme.manage.vue       |  116 +-
 packages/client/src/pages/settings/theme.vue  |  353 +++--
 .../src/pages/settings/webhook.edit.vue       |  122 +-
 .../client/src/pages/settings/webhook.new.vue |  110 +-
 .../client/src/pages/settings/webhook.vue     |   96 +-
 .../client/src/pages/settings/word-mute.vue   |  140 +-
 packages/client/src/pages/share.vue           |  185 ++-
 packages/client/src/pages/signup-complete.vue |   30 +-
 packages/client/src/pages/tag.vue             |   32 +-
 packages/client/src/pages/theme-editor.vue    |  381 +++--
 packages/client/src/pages/timeline.vue        |  373 ++---
 packages/client/src/pages/user-info.vue       |  680 ++++++---
 .../client/src/pages/user-list-timeline.vue   |  104 +-
 packages/client/src/pages/user/clips.vue      |   40 +-
 .../client/src/pages/user/follow-list.vue     |   42 +-
 packages/client/src/pages/user/followers.vue  |   94 +-
 packages/client/src/pages/user/following.vue  |   94 +-
 packages/client/src/pages/user/gallery.vue    |   39 +-
 packages/client/src/pages/user/home.vue       |  532 ++++---
 .../client/src/pages/user/index.activity.vue  |   87 +-
 .../client/src/pages/user/index.photos.vue    |   87 +-
 .../client/src/pages/user/index.timeline.vue  |   38 +-
 packages/client/src/pages/user/index.vue      |  179 +--
 packages/client/src/pages/user/pages.vue      |   29 +-
 packages/client/src/pages/user/reactions.vue  |   44 +-
 .../client/src/pages/welcome.entrance.a.vue   |  249 ++--
 .../client/src/pages/welcome.entrance.b.vue   |  218 ++-
 .../client/src/pages/welcome.entrance.c.vue   |  225 +--
 packages/client/src/pages/welcome.setup.vue   |  114 +-
 .../client/src/pages/welcome.timeline.vue     |   63 +-
 packages/client/src/pages/welcome.vue         |   32 +-
 packages/client/src/ui/_common_/common.vue    |   81 +-
 .../src/ui/_common_/navbar-for-mobile.vue     |  238 +++-
 packages/client/src/ui/_common_/navbar.vue    |  292 ++--
 .../src/ui/_common_/statusbar-federation.vue  |   94 +-
 .../client/src/ui/_common_/statusbar-rss.vue  |   64 +-
 .../src/ui/_common_/statusbar-user-list.vue   |   79 +-
 .../client/src/ui/_common_/statusbars.vue     |   77 +-
 .../src/ui/_common_/stream-indicator.vue      |   31 +-
 packages/client/src/ui/_common_/upload.vue    |  188 ++-
 packages/client/src/ui/classic.header.vue     |  175 ++-
 packages/client/src/ui/classic.sidebar.vue    |  293 ++--
 packages/client/src/ui/classic.vue            |  244 ++--
 packages/client/src/ui/classic.widgets.vue    |   92 +-
 packages/client/src/ui/deck.vue               |  381 +++--
 .../client/src/ui/deck/antenna-column.vue     |   62 +-
 packages/client/src/ui/deck/column-core.vue   |   82 +-
 packages/client/src/ui/deck/column.vue        |  333 +++--
 packages/client/src/ui/deck/direct-column.vue |   32 +-
 packages/client/src/ui/deck/list-column.vue   |   62 +-
 packages/client/src/ui/deck/main-column.vue   |   84 +-
 .../client/src/ui/deck/mentions-column.vue    |   27 +-
 .../src/ui/deck/notifications-column.vue      |   69 +-
 packages/client/src/ui/deck/tl-column.vue     |  136 +-
 .../client/src/ui/deck/widgets-column.vue     |   62 +-
 packages/client/src/ui/universal.vue          |  446 +++---
 packages/client/src/ui/universal.widgets.vue  |   75 +-
 packages/client/src/ui/visitor.vue            |   14 +-
 packages/client/src/ui/visitor/a.vue          |  158 ++-
 packages/client/src/ui/visitor/b.vue          |  190 ++-
 packages/client/src/ui/visitor/header.vue     |  180 ++-
 packages/client/src/ui/visitor/kanban.vue     |  157 ++-
 packages/client/src/ui/zen.vue                |   26 +-
 .../client/src/widgets/activity.calendar.vue  |   73 +-
 .../client/src/widgets/activity.chart.vue     |  102 +-
 packages/client/src/widgets/activity.vue      |   85 +-
 packages/client/src/widgets/aiscript.vue      |  157 ++-
 packages/client/src/widgets/button.vue        |   98 +-
 packages/client/src/widgets/calendar.vue      |  116 +-
 packages/client/src/widgets/clock.vue         |  283 ++--
 packages/client/src/widgets/digital-clock.vue |  108 +-
 packages/client/src/widgets/federation.vue    |  120 +-
 .../client/src/widgets/instance-cloud.vue     |  102 +-
 packages/client/src/widgets/job-queue.vue     |  222 ++-
 packages/client/src/widgets/memo.vue          |   71 +-
 packages/client/src/widgets/notifications.vue |   90 +-
 packages/client/src/widgets/online-users.vue  |   56 +-
 packages/client/src/widgets/photos.vue        |   83 +-
 packages/client/src/widgets/post-form.vue     |   30 +-
 packages/client/src/widgets/rss-ticker.vue    |  110 +-
 packages/client/src/widgets/rss.vue           |   68 +-
 .../src/widgets/server-metric/cpu-mem.vue     |  208 +--
 .../client/src/widgets/server-metric/cpu.vue  |   26 +-
 .../client/src/widgets/server-metric/disk.vue |   22 +-
 .../src/widgets/server-metric/index.vue       |  102 +-
 .../client/src/widgets/server-metric/mem.vue  |   30 +-
 .../client/src/widgets/server-metric/net.vue  |  141 +-
 .../client/src/widgets/server-metric/pie.vue  |   50 +-
 packages/client/src/widgets/slideshow.vue     |   80 +-
 packages/client/src/widgets/timeline.vue      |  200 ++-
 packages/client/src/widgets/trends.vue        |   84 +-
 packages/client/src/widgets/unix-clock.vue    |   73 +-
 packages/client/src/widgets/user-list.vue     |   68 +-
 pnpm-lock.yaml                                |   18 +
 430 files changed, 36649 insertions(+), 21793 deletions(-)
 create mode 100644 packages/client/.prettierrc
 delete mode 100644 packages/client/src/components/queue-chart.vue

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index f824432e2..7a1fdee31 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -48,8 +48,8 @@ Thank you for your PR! Before creating a PR, please check the following:
 - If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text. Good examples include `Closing: #21` or `Resolves: #21`
 - Check if there are any documents that need to be created or updated due to this change.
 - If you have added a feature or fixed a bug, please add a test case if possible.
-- Please make sure that tests and Lint are passed in advance.
-  - You can run it with `pnpm run test` and `pnpm run lint`. [See more info](#testing)
+- Please make sure that formatting, tests and Lint are passed in advance.
+  - You can run it with `pnpm run format`, `pnpm run test` and `pnpm run lint`. [See more info](#testing)
 - If this PR includes UI changes, please attach a screenshot in the text.
 
 Thanks for your cooperation 🤗
diff --git a/package.json b/package.json
index e990a5851..3a324fa0b 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
 		"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
 		"mocha": "pnpm --filter backend run mocha",
 		"test": "pnpm run mocha",
-		"format": "gulp format",
+		"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format",
 		"clean": "pnpm node ./scripts/clean.js",
 		"clean-all": "pnpm node ./scripts/clean-all.js",
 		"cleanall": "pnpm run clean-all"
diff --git a/packages/client/.prettierrc b/packages/client/.prettierrc
new file mode 100644
index 000000000..77a5016a4
--- /dev/null
+++ b/packages/client/.prettierrc
@@ -0,0 +1,15 @@
+{
+  "tabWidth": 4,
+  "useTabs": true,
+	"singleQuote": false,
+	"vueIndentScriptAndStyle": false,
+	"plugins": ["vue"],
+	"overrides": [
+		{
+			"files": "*.vue",
+			"options": {
+				"parser": "vue"
+			}
+		}
+	]
+}
diff --git a/packages/client/package.json b/packages/client/package.json
index b1da8e0a0..24af5b143 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -4,7 +4,8 @@
 	"scripts": {
 		"watch": "pnpm vite build --watch --mode development",
 		"build": "pnpm vite build",
-		"lint": "pnpm rome check \"src/**/*.{ts,vue}\""
+		"lint": "pnpm rome check \"src/**/*.{ts,vue}\"",
+		"format": "pnpm prettier --write '**/*.vue'"
 	},
 	"devDependencies": {
 		"@discordapp/twemoji": "14.0.2",
@@ -54,6 +55,8 @@
 		"matter-js": "0.18.0",
 		"mfm-js": "0.23.2",
 		"photoswipe": "5.3.4",
+		"prettier": "2.8.7",
+		"prettier-plugin-vue": "1.1.6",
 		"prismjs": "1.29.0",
 		"punycode": "2.1.1",
 		"querystring": "0.2.1",
diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index 9a3464b64..ccb85d722 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -1,64 +1,93 @@
 <template>
-<div class="bcekxzvu _gap _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"/>
-			<div class="names">
-				<MkUserName class="name" :user="report.targetUser"/>
-				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+	<div class="bcekxzvu _gap _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"
+				/>
+				<div class="names">
+					<MkUserName class="name" :user="report.targetUser" />
+					<MkAcct
+						class="acct"
+						:user="report.targetUser"
+						style="display: block"
+					/>
+				</div>
+			</MkA>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.registeredDate }}</template>
+				<template #value
+					>{{
+						new Date(report.targetUser.createdAt).toLocaleString()
+					}}
+					(<MkTime :time="report.targetUser.createdAt" />)</template
+				>
+			</MkKeyValue>
+		</div>
+		<div class="detail">
+			<div>
+				<Mfm :text="report.comment" />
+			</div>
+			<hr />
+			<div>
+				{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
+			</div>
+			<div v-if="report.assignee">
+				{{ i18n.ts.moderator }}:
+				<MkAcct :user="report.assignee" />
+			</div>
+			<div><MkTime :time="report.createdAt" /></div>
+			<div class="action">
+				<MkSwitch
+					v-model="forward"
+					:disabled="
+						report.targetUser.host == null || report.resolved
+					"
+				>
+					{{ i18n.ts.forwardReport }}
+					<template #caption>{{
+						i18n.ts.forwardReportIsAnonymous
+					}}</template>
+				</MkSwitch>
+				<MkButton v-if="!report.resolved" primary @click="resolve">{{
+					i18n.ts.abuseMarkAsResolved
+				}}</MkButton>
 			</div>
-		</MkA>
-		<MkKeyValue class="_formBlock">
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
-		</MkKeyValue>
-	</div>
-	<div class="detail">
-		<div>
-			<Mfm :text="report.comment"/>
-		</div>
-		<hr/>
-		<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
-		<div v-if="report.assignee">
-			{{ i18n.ts.moderator }}:
-			<MkAcct :user="report.assignee"/>
-		</div>
-		<div><MkTime :time="report.createdAt"/></div>
-		<div class="action">
-			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-				{{ i18n.ts.forwardReport }}
-				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
-			</MkSwitch>
-			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import { acct, userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import MkButton from "@/components/MkButton.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import { acct, userPage } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	report: any;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'resolved', reportId: string): void;
+	(ev: "resolved", reportId: string): void;
 }>();
 
 let forward = $ref(props.report.forwarded);
 
 function resolve() {
-	os.apiWithDialog('admin/resolve-abuse-user-report', {
+	os.apiWithDialog("admin/resolve-abuse-user-report", {
 		forward: forward,
 		reportId: props.report.id,
 	}).then(() => {
-		emit('resolved', props.report.id);
+		emit("resolved", props.report.id);
 	});
 }
 </script>
@@ -81,7 +110,16 @@ function resolve() {
 			padding: 14px;
 			border-radius: 8px;
 			--c: rgb(255 196 0 / 15%);
-			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+			background-image: linear-gradient(
+				45deg,
+				var(--c) 16.67%,
+				transparent 16.67%,
+				transparent 50%,
+				var(--c) 50%,
+				var(--c) 66.67%,
+				transparent 66.67%,
+				transparent 100%
+			);
 			background-size: 16px 16px;
 
 			> .avatar {
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index f1b3ae431..19b8ba526 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -1,35 +1,52 @@
 <template>
-<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
-	<template #header>
-		<i class="ph-warning-circle ph-bold ph-lg" style="margin-right: 0.5em;"></i>
-		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
-			<template #name>
-				<b><MkAcct :user="user"/></b>
-			</template>
-		</I18n>
-	</template>
-	<div class="dpvffvvy _monolithic_">
-		<div class="_section">
-			<MkTextarea v-model="comment">
-				<template #label>{{ i18n.ts.details }}</template>
-				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
-			</MkTextarea>
+	<XWindow
+		ref="uiWindow"
+		:initial-width="400"
+		:initial-height="500"
+		:can-resize="true"
+		@closed="emit('closed')"
+	>
+		<template #header>
+			<i
+				class="ph-warning-circle ph-bold ph-lg"
+				style="margin-right: 0.5em"
+			></i>
+			<I18n :src="i18n.ts.reportAbuseOf" tag="span">
+				<template #name>
+					<b><MkAcct :user="user" /></b>
+				</template>
+			</I18n>
+		</template>
+		<div class="dpvffvvy _monolithic_">
+			<div class="_section">
+				<MkTextarea v-model="comment">
+					<template #label>{{ i18n.ts.details }}</template>
+					<template #caption>{{
+						i18n.ts.fillAbuseReportDescription
+					}}</template>
+				</MkTextarea>
+			</div>
+			<div class="_section">
+				<MkButton
+					primary
+					full
+					:disabled="comment.length === 0"
+					@click="send"
+					>{{ i18n.ts.send }}</MkButton
+				>
+			</div>
 		</div>
-		<div class="_section">
-			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
-		</div>
-	</div>
-</XWindow>
+	</XWindow>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import XWindow from '@/components/MkWindow.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import XWindow from "@/components/MkWindow.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: Misskey.entities.User;
@@ -37,23 +54,27 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const uiWindow = ref<InstanceType<typeof XWindow>>();
-const comment = ref(props.initialComment || '');
+const comment = ref(props.initialComment || "");
 
 function send() {
-	os.apiWithDialog('users/report-abuse', {
-		userId: props.user.id,
-		comment: comment.value,
-	}, undefined).then(res => {
+	os.apiWithDialog(
+		"users/report-abuse",
+		{
+			userId: props.user.id,
+			comment: comment.value,
+		},
+		undefined
+	).then((res) => {
 		os.alert({
-			type: 'success',
-			text: i18n.ts.abuseReported
+			type: "success",
+			text: i18n.ts.abuseReported,
 		});
 		uiWindow.value?.close();
-		emit('closed');
+		emit("closed");
 	});
 }
 </script>
diff --git a/packages/client/src/components/MkAnalogClock.vue b/packages/client/src/components/MkAnalogClock.vue
index 40ef626ae..43d81f2a9 100644
--- a/packages/client/src/components/MkAnalogClock.vue
+++ b/packages/client/src/components/MkAnalogClock.vue
@@ -1,32 +1,62 @@
 <template>
-<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
-	<template v-if="props.graduations === 'dots'">
-		<circle
-			v-for="(angle, i) in graduationsMajor"
-			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
-			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
-			:r="0.125"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
-		/>
-	</template>
-	<template v-else-if="props.graduations === 'numbers'">
-		<text
-			v-for="(angle, i) in texts"
-			:x="5 + (Math.sin(angle) * (5 - textsPadding))"
-			:y="5 - (Math.cos(angle) * (5 - textsPadding))"
-			text-anchor="middle"
-			dominant-baseline="middle"
-			:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
-			:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
-		>
-			{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
-		</text>
-	</template>
+	<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
+		<template v-if="props.graduations === 'dots'">
+			<circle
+				v-for="(angle, i) in graduationsMajor"
+				:cx="5 + Math.sin(angle) * (5 - graduationsPadding)"
+				:cy="5 - Math.cos(angle) * (5 - graduationsPadding)"
+				:r="0.125"
+				:fill="
+					(props.twentyfour ? h : h % 12) === i
+						? nowColor
+						: majorGraduationColor
+				"
+				:opacity="
+					!props.fadeGraduations ||
+					(props.twentyfour ? h : h % 12) === i
+						? 1
+						: Math.max(
+								0,
+								1 -
+									angleDiff(hAngle, angle) / Math.PI -
+									numbersOpacityFactor
+						  )
+				"
+			/>
+		</template>
+		<template v-else-if="props.graduations === 'numbers'">
+			<text
+				v-for="(angle, i) in texts"
+				:x="5 + Math.sin(angle) * (5 - textsPadding)"
+				:y="5 - Math.cos(angle) * (5 - textsPadding)"
+				text-anchor="middle"
+				dominant-baseline="middle"
+				:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
+				:font-weight="
+					(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'
+				"
+				:fill="
+					(props.twentyfour ? h : h % 12) === i
+						? nowColor
+						: 'currentColor'
+				"
+				:opacity="
+					!props.fadeGraduations ||
+					(props.twentyfour ? h : h % 12) === i
+						? 1
+						: Math.max(
+								0,
+								1 -
+									angleDiff(hAngle, angle) / Math.PI -
+									numbersOpacityFactor
+						  )
+				"
+			>
+				{{ i === 0 ? (props.twentyfour ? "24" : "12") : i }}
+			</text>
+		</template>
 
-	<!--
+		<!--
 	<line
 		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
@@ -38,50 +68,61 @@
 	/>
 	-->
 
-	<line
-		class="s"
-		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
-		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
-		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
-		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
-		:stroke="sHandColor"
-		:stroke-width="thickness / 2"
-		:style="`transform: rotateZ(${sAngle}rad)`"
-		stroke-linecap="round"
-	/>
+		<line
+			class="s"
+			:class="{
+				animate: !disableSAnimate && sAnimation !== 'none',
+				elastic: sAnimation === 'elastic',
+				easeOut: sAnimation === 'easeOut',
+			}"
+			:x1="5 - 0 * (sHandLengthRatio * handsTailLength)"
+			:y1="5 + 1 * (sHandLengthRatio * handsTailLength)"
+			:x2="5 + 0 * (sHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - 1 * (sHandLengthRatio * 5 - handsPadding)"
+			:stroke="sHandColor"
+			:stroke-width="thickness / 2"
+			:style="`transform: rotateZ(${sAngle}rad)`"
+			stroke-linecap="round"
+		/>
 
-	<line
-		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:stroke="mHandColor"
-		:stroke-width="thickness"
-		stroke-linecap="round"
-	/>
+		<line
+			:x1="5 - Math.sin(mAngle) * (mHandLengthRatio * handsTailLength)"
+			:y1="5 + Math.cos(mAngle) * (mHandLengthRatio * handsTailLength)"
+			:x2="5 + Math.sin(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - Math.cos(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
+			:stroke="mHandColor"
+			:stroke-width="thickness"
+			stroke-linecap="round"
+		/>
 
-	<line
-		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:stroke="hHandColor"
-		:stroke-width="thickness"
-		stroke-linecap="round"
-	/>
-</svg>
+		<line
+			:x1="5 - Math.sin(hAngle) * (hHandLengthRatio * handsTailLength)"
+			:y1="5 + Math.cos(hAngle) * (hHandLengthRatio * handsTailLength)"
+			:x2="5 + Math.sin(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
+			:y2="5 - Math.cos(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
+			:stroke="hHandColor"
+			:stroke-width="thickness"
+			stroke-linecap="round"
+		/>
+	</svg>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { globalEvents } from '@/events.js';
+import {
+	ref,
+	computed,
+	onMounted,
+	onBeforeUnmount,
+	shallowRef,
+	nextTick,
+} from "vue";
+import tinycolor from "tinycolor2";
+import { globalEvents } from "@/events.js";
 
 // https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
 const angleDiff = (a: number, b: number) => {
 	const x = Math.abs(a - b);
-	return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
+	return Math.abs(((x + Math.PI) % (Math.PI * 2)) - Math.PI);
 };
 
 const graduationsPadding = 0.5;
@@ -93,28 +134,31 @@ const mHandLengthRatio = 1;
 const sHandLengthRatio = 1;
 const numbersOpacityFactor = 0.35;
 
-const props = withDefaults(defineProps<{
-	thickness?: number;
-	offset?: number;
-	twentyfour?: boolean;
-	graduations?: 'none' | 'dots' | 'numbers';
-	fadeGraduations?: boolean;
-	sAnimation?: 'none' | 'elastic' | 'easeOut';
-}>(), {
-	numbers: false,
-	thickness: 0.1,
-	offset: 0 - new Date().getTimezoneOffset(),
-	twentyfour: false,
-	graduations: 'dots',
-	fadeGraduations: true,
-	sAnimation: 'elastic',
-});
+const props = withDefaults(
+	defineProps<{
+		thickness?: number;
+		offset?: number;
+		twentyfour?: boolean;
+		graduations?: "none" | "dots" | "numbers";
+		fadeGraduations?: boolean;
+		sAnimation?: "none" | "elastic" | "easeOut";
+	}>(),
+	{
+		numbers: false,
+		thickness: 0.1,
+		offset: 0 - new Date().getTimezoneOffset(),
+		twentyfour: false,
+		graduations: "dots",
+		fadeGraduations: true,
+		sAnimation: "elastic",
+	}
+);
 
 const graduationsMajor = computed(() => {
 	const angles: number[] = [];
 	const times = props.twentyfour ? 24 : 12;
 	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
+		const angle = (Math.PI * i) / (times / 2);
 		angles.push(angle);
 	}
 	return angles;
@@ -123,7 +167,7 @@ const texts = computed(() => {
 	const angles: number[] = [];
 	const times = props.twentyfour ? 24 : 12;
 	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
+		const angle = (Math.PI * i) / (times / 2);
 		angles.push(angle);
 	}
 	return angles;
@@ -147,14 +191,19 @@ let sOneRound = false;
 
 function tick() {
 	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	now.setMinutes(
+		now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
+	);
 	s = now.getSeconds();
 	m = now.getMinutes();
 	h = now.getHours();
-	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
-	mAngle = Math.PI * (m + s / 60) / 30;
-	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
-		sAngle = Math.PI * 60 / 30;
+	hAngle =
+		(Math.PI * ((h % (props.twentyfour ? 24 : 12)) + (m + s / 60) / 60)) /
+		(props.twentyfour ? 12 : 6);
+	mAngle = (Math.PI * (m + s / 60)) / 30;
+	if (sOneRound) {
+		// 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
+		sAngle = (Math.PI * 60) / 30;
 		window.setTimeout(() => {
 			disableSAnimate = true;
 			window.setTimeout(() => {
@@ -165,7 +214,7 @@ function tick() {
 			}, 100);
 		}, 700);
 	} else {
-		sAngle = Math.PI * s / 30;
+		sAngle = (Math.PI * s) / 30;
 	}
 	sOneRound = s === 59;
 }
@@ -174,12 +223,18 @@ tick();
 
 function calcColors() {
 	const computedStyle = getComputedStyle(document.documentElement);
-	const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
-	const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
-	majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
+	const dark = tinycolor(computedStyle.getPropertyValue("--bg")).isDark();
+	const accent = tinycolor(
+		computedStyle.getPropertyValue("--accent")
+	).toHexString();
+	majorGraduationColor = dark
+		? "rgba(255, 255, 255, 0.3)"
+		: "rgba(0, 0, 0, 0.3)";
 	//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
-	mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
+	sHandColor = dark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.3)";
+	mHandColor = tinycolor(
+		computedStyle.getPropertyValue("--fg")
+	).toHexString();
 	hHandColor = accent;
 	nowColor = accent;
 }
@@ -195,13 +250,13 @@ onMounted(() => {
 	};
 	update();
 
-	globalEvents.on('themeChanged', calcColors);
+	globalEvents.on("themeChanged", calcColors);
 });
 
 onBeforeUnmount(() => {
 	enabled = false;
 
-	globalEvents.off('themeChanged', calcColors);
+	globalEvents.off("themeChanged", calcColors);
 });
 </script>
 
@@ -214,11 +269,11 @@ onBeforeUnmount(() => {
 		transform-origin: 50% 50%;
 
 		&.animate.elastic {
-			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+			transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
 		}
 
 		&.animate.easeOut {
-			transition: transform .7s cubic-bezier(0,.7,.3,1);
+			transition: transform 0.7s cubic-bezier(0, 0.7, 0.3, 1);
 		}
 	}
 }
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index ae708026e..0455bd9d5 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -1,49 +1,107 @@
 <template>
-<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
-	<ol v-if="type === 'user'" ref="suggests" class="users">
-		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
-			<img class="avatar" :src="user.avatarUrl"/>
-			<span class="name">
-				<MkUserName :key="user.id" :user="user"/>
-			</span>
-			<span class="username">@{{ acct(user) }}</span>
-		</li>
-		<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
-	</ol>
-	<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
-		<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
-			<span class="name">{{ hashtag }}</span>
-		</li>
-	</ol>
-	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
-		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else class="emoji">{{ emoji.emoji }}</span>
-			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
-			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
-		</li>
-	</ol>
-	<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
-		<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
-			<span class="tag">{{ tag }}</span>
-		</li>
-	</ol>
-</div>
+	<div
+		ref="rootEl"
+		class="swhvrteh _popup _shadow"
+		:style="{ zIndex }"
+		@contextmenu.prevent="() => {}"
+	>
+		<ol v-if="type === 'user'" ref="suggests" class="users">
+			<li
+				v-for="user in users"
+				tabindex="-1"
+				class="user"
+				@click="complete(type, user)"
+				@keydown="onKeydown"
+			>
+				<img class="avatar" :src="user.avatarUrl" />
+				<span class="name">
+					<MkUserName :key="user.id" :user="user" />
+				</span>
+				<span class="username">@{{ acct(user) }}</span>
+			</li>
+			<li
+				tabindex="-1"
+				class="choose"
+				@click="chooseUser()"
+				@keydown="onKeydown"
+			>
+				{{ i18n.ts.selectUser }}
+			</li>
+		</ol>
+		<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
+			<li
+				v-for="hashtag in hashtags"
+				tabindex="-1"
+				@click="complete(type, hashtag)"
+				@keydown="onKeydown"
+			>
+				<span class="name">{{ hashtag }}</span>
+			</li>
+		</ol>
+		<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
+			<li
+				v-for="emoji in emojis"
+				tabindex="-1"
+				@click="complete(type, emoji.emoji)"
+				@keydown="onKeydown"
+			>
+				<span v-if="emoji.isCustomEmoji" class="emoji"
+					><img
+						:src="
+							defaultStore.state.disableShowingAnimatedImages
+								? getStaticImageUrl(emoji.url)
+								: emoji.url
+						"
+						:alt="emoji.emoji"
+				/></span>
+				<span
+					v-else-if="!defaultStore.state.useOsNativeEmojis"
+					class="emoji"
+					><img :src="emoji.url" :alt="emoji.emoji"
+				/></span>
+				<span v-else class="emoji">{{ emoji.emoji }}</span>
+				<span
+					class="name"
+					v-html="emoji.name.replace(q, `<b>${q}</b>`)"
+				></span>
+				<span v-if="emoji.aliasOf" class="alias"
+					>({{ emoji.aliasOf }})</span
+				>
+			</li>
+		</ol>
+		<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
+			<li
+				v-for="tag in mfmTags"
+				tabindex="-1"
+				@click="complete(type, tag)"
+				@keydown="onKeydown"
+			>
+				<span class="tag">{{ tag }}</span>
+			</li>
+		</ol>
+	</div>
 </template>
 
 <script lang="ts">
-import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import contains from '@/scripts/contains';
-import { char2filePath } from '@/scripts/twemoji-base';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { acct } from '@/filters/user';
-import * as os from '@/os';
-import { MFM_TAGS } from '@/scripts/mfm-tags';
-import { defaultStore } from '@/store';
-import { emojilist } from '@/scripts/emojilist';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {
+	markRaw,
+	ref,
+	onUpdated,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+	watch,
+} from "vue";
+import contains from "@/scripts/contains";
+import { char2filePath } from "@/scripts/twemoji-base";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { acct } from "@/filters/user";
+import * as os from "@/os";
+import { MFM_TAGS } from "@/scripts/mfm-tags";
+import { defaultStore } from "@/store";
+import { emojilist } from "@/scripts/emojilist";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 type EmojiDef = {
 	emoji: string;
@@ -53,9 +111,9 @@ type EmojiDef = {
 	isCustomEmoji?: boolean;
 };
 
-const lib = emojilist.filter(x => x.category !== 'flags');
+const lib = emojilist.filter((x) => x.category !== "flags");
 
-const emjdb: EmojiDef[] = lib.map(x => ({
+const emjdb: EmojiDef[] = lib.map((x) => ({
 	emoji: x.char,
 	name: x.name,
 	url: char2filePath(x.char),
@@ -85,7 +143,7 @@ for (const x of customEmojis) {
 		name: x.name,
 		emoji: `:${x.name}:`,
 		url: x.url,
-		isCustomEmoji: true
+		isCustomEmoji: true,
 	});
 
 	if (x.aliases) {
@@ -95,7 +153,7 @@ for (const x of customEmojis) {
 				aliasOf: x.name,
 				emoji: `:${x.name}:`,
 				url: x.url,
-				isCustomEmoji: true
+				isCustomEmoji: true,
 			});
 		}
 	}
@@ -125,8 +183,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(event: 'done', value: { type: string; value: any }): void;
-	(event: 'closed'): void;
+	(event: "done", value: { type: string; value: any }): void;
+	(event: "closed"): void;
 }>();
 
 const suggests = ref<Element>();
@@ -135,36 +193,37 @@ const rootEl = ref<HTMLDivElement>();
 const fetching = ref(true);
 const users = ref<any[]>([]);
 const hashtags = ref<any[]>([]);
-const emojis = ref<(EmojiDef)[]>([]);
+const emojis = ref<EmojiDef[]>([]);
 const items = ref<Element[] | HTMLCollection>([]);
 const mfmTags = ref<string[]>([]);
 const select = ref(-1);
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 
 function complete(type: string, value: any) {
-	emit('done', { type, value });
-	emit('closed');
-	if (type === 'emoji') {
+	emit("done", { type, value });
+	emit("closed");
+	if (type === "emoji") {
 		let recents = defaultStore.state.recentlyUsedEmojis;
 		recents = recents.filter((emoji: any) => emoji !== value);
 		recents.unshift(value);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+		defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
 	}
 }
 
 function setPosition() {
 	if (!rootEl.value) return;
 	if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
-		rootEl.value.style.left = (window.innerWidth - rootEl.value.offsetWidth) + 'px';
+		rootEl.value.style.left =
+			window.innerWidth - rootEl.value.offsetWidth + "px";
 	} else {
 		rootEl.value.style.left = `${props.x}px`;
 	}
 	if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
-		rootEl.value.style.top = (props.y - rootEl.value.offsetHeight) + 'px';
-		rootEl.value.style.marginTop = '0';
+		rootEl.value.style.top = props.y - rootEl.value.offsetHeight + "px";
+		rootEl.value.style.marginTop = "0";
 	} else {
-		rootEl.value.style.top = props.y + 'px';
-		rootEl.value.style.marginTop = 'calc(1em + 8px)';
+		rootEl.value.style.top = props.y + "px";
+		rootEl.value.style.marginTop = "calc(1em + 8px)";
 	}
 }
 
@@ -172,10 +231,10 @@ function exec() {
 	select.value = -1;
 	if (suggests.value) {
 		for (const el of Array.from(items.value)) {
-			el.removeAttribute('data-selected');
+			el.removeAttribute("data-selected");
 		}
 	}
-	if (props.type === 'user') {
+	if (props.type === "user") {
 		if (!props.q) {
 			users.value = [];
 			fetching.value = false;
@@ -189,20 +248,22 @@ function exec() {
 			users.value = JSON.parse(cache);
 			fetching.value = false;
 		} else {
-			os.api('users/search-by-username-and-host', {
+			os.api("users/search-by-username-and-host", {
 				username: props.q,
 				limit: 10,
-				detail: false
-			}).then(searchedUsers => {
+				detail: false,
+			}).then((searchedUsers) => {
 				users.value = searchedUsers as any[];
 				fetching.value = false;
 				// キャッシュ
 				sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
 			});
 		}
-	} else if (props.type === 'hashtag') {
-		if (!props.q || props.q === '') {
-			hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
+	} else if (props.type === "hashtag") {
+		if (!props.q || props.q === "") {
+			hashtags.value = JSON.parse(
+				localStorage.getItem("hashtags") || "[]"
+			);
 			fetching.value = false;
 		} else {
 			const cacheKey = `autocomplete:hashtag:${props.q}`;
@@ -212,59 +273,80 @@ function exec() {
 				hashtags.value = hashtags;
 				fetching.value = false;
 			} else {
-				os.api('hashtags/search', {
+				os.api("hashtags/search", {
 					query: props.q,
-					limit: 30
-				}).then(searchedHashtags => {
+					limit: 30,
+				}).then((searchedHashtags) => {
 					hashtags.value = searchedHashtags as any[];
 					fetching.value = false;
 					// キャッシュ
-					sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
+					sessionStorage.setItem(
+						cacheKey,
+						JSON.stringify(searchedHashtags)
+					);
 				});
 			}
 		}
-	} else if (props.type === 'emoji') {
-		if (!props.q || props.q === '') {
+	} else if (props.type === "emoji") {
+		if (!props.q || props.q === "") {
 			// 最近使った絵文字をサジェスト
-			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
+			emojis.value = defaultStore.state.recentlyUsedEmojis
+				.map((emoji) =>
+					emojiDb.find((dbEmoji) => dbEmoji.emoji === emoji)
+				)
+				.filter((x) => x) as EmojiDef[];
 			return;
 		}
 
 		const matched: EmojiDef[] = [];
 		const max = 30;
 
-		emojiDb.some(x => {
-			if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+		emojiDb.some((x) => {
+			if (
+				x.name.startsWith(props.q ?? "") &&
+				!x.aliasOf &&
+				!matched.some((y) => y.emoji === x.emoji)
+			)
+				matched.push(x);
 			return matched.length === max;
 		});
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+			emojiDb.some((x) => {
+				if (
+					x.name.startsWith(props.q ?? "") &&
+					!matched.some((y) => y.emoji === x.emoji)
+				)
+					matched.push(x);
 				return matched.length === max;
 			});
 		}
 
 		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+			emojiDb.some((x) => {
+				if (
+					x.name.includes(props.q ?? "") &&
+					!matched.some((y) => y.emoji === x.emoji)
+				)
+					matched.push(x);
 				return matched.length === max;
 			});
 		}
 
 		emojis.value = matched;
-	} else if (props.type === 'mfmTag') {
-		if (!props.q || props.q === '') {
+	} else if (props.type === "mfmTag") {
+		if (!props.q || props.q === "") {
 			mfmTags.value = MFM_TAGS;
 			return;
 		}
 
-		mfmTags.value = MFM_TAGS.filter(tag => tag.startsWith(props.q ?? ''));
+		mfmTags.value = MFM_TAGS.filter((tag) => tag.startsWith(props.q ?? ""));
 	}
 }
 
 function onMousedown(event: Event) {
-	if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close();
+	if (!contains(rootEl.value, event.target) && rootEl.value !== event.target)
+		props.close();
 }
 
 function onKeydown(event: KeyboardEvent) {
@@ -274,7 +356,7 @@ function onKeydown(event: KeyboardEvent) {
 	};
 
 	switch (event.key) {
-		case 'Enter':
+		case "Enter":
 			if (select.value !== -1) {
 				cancel();
 				(items.value[select.value] as any).click();
@@ -283,12 +365,12 @@ function onKeydown(event: KeyboardEvent) {
 			}
 			break;
 
-		case 'Escape':
+		case "Escape":
 			cancel();
 			props.close();
 			break;
 
-		case 'ArrowUp':
+		case "ArrowUp":
 			if (select.value !== -1) {
 				cancel();
 				selectPrev();
@@ -297,8 +379,8 @@ function onKeydown(event: KeyboardEvent) {
 			}
 			break;
 
-		case 'Tab':
-		case 'ArrowDown':
+		case "Tab":
+		case "ArrowDown":
 			cancel();
 			selectNext();
 			break;
@@ -322,19 +404,19 @@ function selectPrev() {
 
 function applySelect() {
 	for (const el of Array.from(items.value)) {
-		el.removeAttribute('data-selected');
+		el.removeAttribute("data-selected");
 	}
 
 	if (select.value !== -1) {
-		items.value[select.value].setAttribute('data-selected', 'true');
+		items.value[select.value].setAttribute("data-selected", "true");
 		(items.value[select.value] as any).focus();
 	}
 }
 
 function chooseUser() {
 	props.close();
-	os.selectUser().then(user => {
-		complete('user', user);
+	os.selectUser().then((user) => {
+		complete("user", user);
 		props.textarea.focus();
 	});
 }
@@ -347,28 +429,31 @@ onUpdated(() => {
 onMounted(() => {
 	setPosition();
 
-	props.textarea.addEventListener('keydown', onKeydown);
+	props.textarea.addEventListener("keydown", onKeydown);
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.addEventListener("mousedown", onMousedown);
 	}
 
 	nextTick(() => {
 		exec();
 
-		watch(() => props.q, () => {
-			nextTick(() => {
-				exec();
-			});
-		});
+		watch(
+			() => props.q,
+			() => {
+				nextTick(() => {
+					exec();
+				});
+			}
+		);
 	});
 });
 
 onBeforeUnmount(() => {
-	props.textarea.removeEventListener('keydown', onKeydown);
+	props.textarea.removeEventListener("keydown", onKeydown);
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.removeEventListener("mousedown", onMousedown);
 	}
 });
 </script>
@@ -399,7 +484,8 @@ onBeforeUnmount(() => {
 			font-size: 0.9em;
 			cursor: default;
 
-			&, * {
+			&,
+			* {
 				user-select: none;
 			}
 
@@ -412,10 +498,11 @@ onBeforeUnmount(() => {
 				background: var(--X3);
 			}
 
-			&[data-selected='true'] {
+			&[data-selected="true"] {
 				background: var(--accent);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
@@ -423,7 +510,8 @@ onBeforeUnmount(() => {
 			&:active {
 				background: var(--accentDarken);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
@@ -431,7 +519,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .users > li {
-
 		.avatar {
 			min-width: 28px;
 			min-height: 28px;
@@ -447,7 +534,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .emojis > li {
-
 		.emoji {
 			display: inline-block;
 			margin: 0 4px 0 0;
@@ -465,7 +551,6 @@ onBeforeUnmount(() => {
 	}
 
 	> .mfmTags > li {
-
 		.name {
 		}
 	}
diff --git a/packages/client/src/components/MkAvatars.vue b/packages/client/src/components/MkAvatars.vue
index 52fda8b1d..d92eee22c 100644
--- a/packages/client/src/components/MkAvatars.vue
+++ b/packages/client/src/components/MkAvatars.vue
@@ -1,14 +1,14 @@
 <template>
-<div class="defgtij">
-	<div v-for="user in users" :key="user.id" class="avatar-holder">
-		<MkAvatar :user="user" :show-indicator="true" class="avatar"/>
+	<div class="defgtij">
+		<div v-for="user in users" :key="user.id" class="avatar-holder">
+			<MkAvatar :user="user" :show-indicator="true" class="avatar" />
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as os from '@/os';
+import { onMounted, ref } from "vue";
+import * as os from "@/os";
 
 const props = defineProps<{
 	userIds: string[];
@@ -17,8 +17,8 @@ const props = defineProps<{
 const users = ref([]);
 
 onMounted(async () => {
-	users.value = await os.api('users/show', {
-		userIds: props.userIds
+	users.value = await os.api("users/show", {
+		userIds: props.userIds,
 	});
 });
 </script>
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 9042500b4..5f1a5bdb7 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -1,34 +1,36 @@
 <template>
-<button
-	v-if="!link" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:type="type"
-	@click="emit('click', $event)"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</button>
-<MkA
-	v-else class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:to="to"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</MkA>
+	<button
+		v-if="!link"
+		class="bghgjjyj _button"
+		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:type="type"
+		@click="emit('click', $event)"
+		@mousedown="onMousedown"
+	>
+		<div ref="ripples" class="ripples"></div>
+		<div class="content">
+			<slot></slot>
+		</div>
+	</button>
+	<MkA
+		v-else
+		class="bghgjjyj _button"
+		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:to="to"
+		@mousedown="onMousedown"
+	>
+		<div ref="ripples" class="ripples"></div>
+		<div class="content">
+			<slot></slot>
+		</div>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import { nextTick, onMounted } from "vue";
 
 const props = defineProps<{
-	type?: 'button' | 'submit' | 'reset';
+	type?: "button" | "submit" | "reset";
 	primary?: boolean;
 	gradate?: boolean;
 	rounded?: boolean;
@@ -42,7 +44,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'click', payload: MouseEvent): void;
+	(ev: "click", payload: MouseEvent): void;
 }>();
 
 let el = $ref<HTMLElement | null>(null);
@@ -73,23 +75,28 @@ function onMousedown(evt: MouseEvent): void {
 	const target = evt.target! as HTMLElement;
 	const rect = target.getBoundingClientRect();
 
-	const ripple = document.createElement('div');
-	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
-	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
+	const ripple = document.createElement("div");
+	ripple.style.top = (evt.clientY - rect.top - 1).toString() + "px";
+	ripple.style.left = (evt.clientX - rect.left - 1).toString() + "px";
 
 	ripples!.appendChild(ripple);
 
 	const circleCenterX = evt.clientX - rect.left;
 	const circleCenterY = evt.clientY - rect.top;
 
-	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
+	const scale = calcCircleScale(
+		target.clientWidth,
+		target.clientHeight,
+		circleCenterX,
+		circleCenterY
+	);
 
 	window.setTimeout(() => {
-		ripple.style.transform = 'scale(' + (scale / 2) + ')';
+		ripple.style.transform = "scale(" + scale / 2 + ")";
 	}, 1);
 	window.setTimeout(() => {
-		ripple.style.transition = 'all 1s ease';
-		ripple.style.opacity = '0';
+		ripple.style.transition = "all 1s ease";
+		ripple.style.opacity = "0";
 	}, 1000);
 	window.setTimeout(() => {
 		if (ripples) ripples.removeChild(ripple);
@@ -151,7 +158,11 @@ function onMousedown(evt: MouseEvent): void {
 	&.gradate {
 		font-weight: bold;
 		color: var(--fgOnAccent) !important;
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+		background: linear-gradient(
+			90deg,
+			var(--buttonGradateA),
+			var(--buttonGradateB)
+		);
 
 		&:not(:disabled):hover {
 			background: linear-gradient(90deg, var(--X8), var(--X8));
@@ -212,7 +223,7 @@ function onMousedown(evt: MouseEvent): void {
 			background: rgba(0, 0, 0, 0.1);
 			opacity: 1;
 			transform: scale(1);
-			transition: all 0.5s cubic-bezier(0,.5,0,1);
+			transition: all 0.5s cubic-bezier(0, 0.5, 0, 1);
 		}
 	}
 
diff --git a/packages/client/src/components/MkCaptcha.vue b/packages/client/src/components/MkCaptcha.vue
index 736073491..554d4ac3a 100644
--- a/packages/client/src/components/MkCaptcha.vue
+++ b/packages/client/src/components/MkCaptcha.vue
@@ -1,33 +1,46 @@
 <template>
-<div>
-	<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-	<div ref="captchaEl"></div>
-</div>
+	<div>
+		<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span>
+		<div ref="captchaEl"></div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 type Captcha = {
-	render(container: string | Node, options: {
-		readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
-	}): string;
+	render(
+		container: string | Node,
+		options: {
+			readonly [_ in
+				| "sitekey"
+				| "theme"
+				| "type"
+				| "size"
+				| "tabindex"
+				| "callback"
+				| "expired"
+				| "expired-callback"
+				| "error-callback"
+				| "endpoint"]?: unknown;
+		}
+	): string;
 	remove(id: string): void;
 	execute(id: string): void;
 	reset(id?: string): void;
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'recaptcha';
+type CaptchaProvider = "hcaptcha" | "recaptcha";
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
 };
 
 declare global {
-	interface Window extends CaptchaContainer { }
+	interface Window extends CaptchaContainer {}
 }
 
 const props = defineProps<{
@@ -37,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: string | null): void;
+	(ev: "update:modelValue", v: string | null): void;
 }>();
 
 const available = ref(false);
@@ -46,8 +59,10 @@ const captchaEl = ref<HTMLDivElement | undefined>();
 
 const variable = computed(() => {
 	switch (props.provider) {
-		case 'hcaptcha': return 'hcaptcha';
-		case 'recaptcha': return 'grecaptcha';
+		case "hcaptcha":
+			return "hcaptcha";
+		case "recaptcha":
+			return "grecaptcha";
 	}
 });
 
@@ -55,22 +70,30 @@ const loaded = !!window[variable.value];
 
 const src = computed(() => {
 	switch (props.provider) {
-		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
-		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
+		case "hcaptcha":
+			return "https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off";
+		case "recaptcha":
+			return "https://www.recaptcha.net/recaptcha/api.js?render=explicit";
 	}
 });
 
-const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
+const captcha = computed<Captcha>(
+	() => window[variable.value] || ({} as unknown as Captcha)
+);
 
 if (loaded) {
 	available.value = true;
 } else {
-	(document.getElementById(props.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
-		async: true,
-		id: props.provider,
-		src: src.value,
-	})))
-		.addEventListener('load', () => available.value = true);
+	(
+		document.getElementById(props.provider) ||
+		document.head.appendChild(
+			Object.assign(document.createElement("script"), {
+				async: true,
+				id: props.provider,
+				src: src.value,
+			})
+		)
+	).addEventListener("load", () => (available.value = true));
 }
 
 function reset() {
@@ -81,10 +104,10 @@ function requestRender() {
 	if (captcha.value.render && captchaEl.value instanceof Element) {
 		captcha.value.render(captchaEl.value, {
 			sitekey: props.sitekey,
-			theme: defaultStore.state.darkMode ? 'dark' : 'light',
+			theme: defaultStore.state.darkMode ? "dark" : "light",
 			callback: callback,
-			'expired-callback': callback,
-			'error-callback': callback,
+			"expired-callback": callback,
+			"error-callback": callback,
 		});
 	} else {
 		window.setTimeout(requestRender, 1);
@@ -92,7 +115,7 @@ function requestRender() {
 }
 
 function callback(response?: string) {
-	emit('update:modelValue', typeof response === 'string' ? response : null);
+	emit("update:modelValue", typeof response === "string" ? response : null);
 }
 
 onMounted(() => {
@@ -110,5 +133,4 @@ onBeforeUnmount(() => {
 defineExpose({
 	reset,
 });
-
 </script>
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index 7c23b91ed..b4cb1a87f 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -1,34 +1,41 @@
 <template>
-<button class="hdcaacmi _button"
-	:class="{ wait, active: isFollowing, full }"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
+	<button
+		class="hdcaacmi _button"
+		:class="{ wait, active: isFollowing, full }"
+		:disabled="wait"
+		@click="onClick"
+	>
+		<template v-if="!wait">
+			<template v-if="isFollowing">
+				<span v-if="full">{{ i18n.ts.unfollow }}</span
+				><i class="ph-minus ph-bold ph-lg"></i>
+			</template>
+			<template v-else>
+				<span v-if="full">{{ i18n.ts.follow }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
+			</template>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
+			<span v-if="full">{{ i18n.ts.processing }}</span
+			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
-	</template>
-	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-	</template>
-</button>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	channel: Record<string, any>;
-	full?: boolean;
-}>(), {
-	full: false,
-});
+const props = withDefaults(
+	defineProps<{
+		channel: Record<string, any>;
+		full?: boolean;
+	}>(),
+	{
+		full: false,
+	}
+);
 
 const isFollowing = ref<boolean>(props.channel.isFollowing);
 const wait = ref(false);
@@ -38,13 +45,13 @@ async function onClick() {
 
 	try {
 		if (isFollowing.value) {
-			await os.api('channels/unfollow', {
-				channelId: props.channel.id
+			await os.api("channels/unfollow", {
+				channelId: props.channel.id,
 			});
 			isFollowing.value = false;
 		} else {
-			await os.api('channels/follow', {
-				channelId: props.channel.id
+			await os.api("channels/follow", {
+				channelId: props.channel.id,
 			});
 			isFollowing.value = true;
 		}
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index 6af2a7b64..12df63bf0 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -1,41 +1,57 @@
 <template>
-<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
-	<div class="banner" :style="bannerStyle">
-		<div class="fade"></div>
-		<div class="name"><i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}</div>
-		<div class="status">
-			<div>
-				<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
-				<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
-					<template #n>
-						<b>{{ channel.usersCount }}</b>
-					</template>
-				</I18n>
+	<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+		<div class="banner" :style="bannerStyle">
+			<div class="fade"></div>
+			<div class="name">
+				<i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}
 			</div>
-			<div>
-				<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
-				<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
-					<template #n>
-						<b>{{ channel.notesCount }}</b>
-					</template>
-				</I18n>
+			<div class="status">
+				<div>
+					<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
+					<I18n
+						:src="i18n.ts._channel.usersCount"
+						tag="span"
+						style="margin-left: 4px"
+					>
+						<template #n>
+							<b>{{ channel.usersCount }}</b>
+						</template>
+					</I18n>
+				</div>
+				<div>
+					<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
+					<I18n
+						:src="i18n.ts._channel.notesCount"
+						tag="span"
+						style="margin-left: 4px"
+					>
+						<template #n>
+							<b>{{ channel.notesCount }}</b>
+						</template>
+					</I18n>
+				</div>
 			</div>
 		</div>
-	</div>
-	<article v-if="channel.description">
-		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
-	</article>
-	<footer>
-		<span v-if="channel.lastNotedAt">
-			{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
-		</span>
-	</footer>
-</MkA>
+		<article v-if="channel.description">
+			<p :title="channel.description">
+				{{
+					channel.description.length > 85
+						? channel.description.slice(0, 85) + "…"
+						: channel.description
+				}}
+			</p>
+		</article>
+		<footer>
+			<span v-if="channel.lastNotedAt">
+				{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" />
+			</span>
+		</footer>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	channel: Record<string, any>;
@@ -45,7 +61,7 @@ const bannerStyle = computed(() => {
 	if (props.channel.bannerUrl) {
 		return { backgroundImage: `url(${props.channel.bannerUrl})` };
 	} else {
-		return { backgroundColor: '#4c5e6d' };
+		return { backgroundColor: "#4c5e6d" };
 	}
 });
 </script>
@@ -155,5 +171,4 @@ const bannerStyle = computed(() => {
 		}
 	}
 }
-
 </style>
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index 2ff45a229..310d980b4 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -1,14 +1,14 @@
 <template>
-<div class="cbbedffa">
-	<canvas ref="chartEl"></canvas>
-	<div v-if="fetching" class="fetching">
-		<MkLoading/>
+	<div class="cbbedffa">
+		<canvas ref="chartEl"></canvas>
+		<div v-if="fetching" class="fetching">
+			<MkLoading />
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch, PropType, onUnmounted } from 'vue';
+import { onMounted, ref, watch, PropType, onUnmounted } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -25,16 +25,16 @@ import {
 	Tooltip,
 	SubTitle,
 	Filler,
-} from 'chart.js';
-import 'chartjs-adapter-date-fns';
-import { enUS } from 'date-fns/locale';
-import zoomPlugin from 'chartjs-plugin-zoom';
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { enUS } from "date-fns/locale";
+import zoomPlugin from "chartjs-plugin-zoom";
 // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114242002
 // We can't use gradient because Vite throws a error.
 //import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 const props = defineProps({
 	src: {
@@ -51,7 +51,7 @@ const props = defineProps({
 		default: 90,
 	},
 	span: {
-		type: String as PropType<'hour' | 'day'>,
+		type: String as PropType<"hour" | "day">,
 		required: true,
 	},
 	detailed: {
@@ -91,12 +91,12 @@ Chart.register(
 	Tooltip,
 	SubTitle,
 	Filler,
-	zoomPlugin,
+	zoomPlugin
 	//gradient,
 );
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
-const negate = arr => arr.map(x => -x);
+const negate = (arr) => arr.map((x) => -x);
 const alpha = (hex, a) => {
 	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
 	const r = parseInt(result[1], 16);
@@ -106,16 +106,22 @@ const alpha = (hex, a) => {
 };
 
 const colors = {
-	blue: '#31748f',
-	green: '#9ccfd8',
-	yellow: '#f6c177',
-	red: '#eb6f92',
-	purple: '#c4a7e7',
-	orange: '#ebbcba',
-	lime: '#56949f',
-	cyan: '#9ccfd8',
+	blue: "#31748f",
+	green: "#9ccfd8",
+	yellow: "#f6c177",
+	red: "#eb6f92",
+	purple: "#c4a7e7",
+	orange: "#ebbcba",
+	lime: "#56949f",
+	cyan: "#9ccfd8",
 };
-const colorSets = [colors.blue, colors.green, colors.yellow, colors.red, colors.purple];
+const colorSets = [
+	colors.blue,
+	colors.green,
+	colors.yellow,
+	colors.red,
+	colors.purple,
+];
 const getColor = (i) => {
 	return colorSets[i % colorSets.length];
 };
@@ -125,7 +131,7 @@ let chartInstance: Chart = null;
 let chartData: {
 	series: {
 		name: string;
-		type: 'line' | 'area';
+		type: "line" | "area";
 		color?: string;
 		dashed?: boolean;
 		hidden?: boolean;
@@ -145,7 +151,9 @@ const getDate = (ago: number) => {
 	const d = now.getDate();
 	const h = now.getHours();
 
-	return props.span === 'day' ? new Date(y, m, d - ago) : new Date(y, m, d, h - ago);
+	return props.span === "day"
+		? new Date(y, m, d - ago)
+		: new Date(y, m, d, h - ago);
 };
 
 const format = (arr) => {
@@ -162,18 +170,30 @@ const render = () => {
 		chartInstance.destroy();
 	}
 
-	const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	const gridColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.1)"
+		: "rgba(0, 0, 0, 0.1)";
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
 
 	// フォントカラー
-	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+	Chart.defaults.color = getComputedStyle(
+		document.documentElement
+	).getPropertyValue("--fg");
 
-	const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));
+	const maxes = chartData.series.map((x, i) =>
+		Math.max(...x.data.map((d) => d.y))
+	);
 
 	chartInstance = new Chart(chartEl.value, {
-		type: props.bar ? 'bar' : 'line',
+		type: props.bar ? "bar" : "line",
 		data: {
-			labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
+			labels: new Array(props.limit)
+				.fill(0)
+				.map((_, i) => getDate(i).toLocaleString())
+				.slice()
+				.reverse(),
 			datasets: chartData.series.map((x, i) => ({
 				parsing: false,
 				label: x.name,
@@ -183,9 +203,13 @@ const render = () => {
 				borderWidth: props.bar ? 0 : 2,
 				borderColor: x.color ? x.color : getColor(i),
 				borderDash: x.dashed ? [5, 5] : [],
-				borderJoinStyle: 'round',
+				borderJoinStyle: "round",
 				borderRadius: props.bar ? 3 : undefined,
-				backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
+				backgroundColor: props.bar
+					? x.color
+						? x.color
+						: getColor(i)
+					: alpha(x.color ? x.color : getColor(i), 0.1),
 				/*gradient: props.bar ? undefined : {
 					backgroundColor: {
 						axis: 'y',
@@ -197,7 +221,7 @@ const render = () => {
 				},*/
 				barPercentage: 0.9,
 				categoryPercentage: 0.9,
-				fill: x.type === 'area',
+				fill: x.type === "area",
 				clip: 8,
 				hidden: !!x.hidden,
 			})),
@@ -214,16 +238,16 @@ const render = () => {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					stacked: props.stacked,
 					offset: false,
 					time: {
 						stepSize: 1,
-						unit: props.span === 'day' ? 'month' : 'day',
+						unit: props.span === "day" ? "month" : "day",
 					},
 					grid: {
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 					ticks: {
 						display: props.detailed,
@@ -238,12 +262,12 @@ const render = () => {
 					min: getDate(props.limit).getTime(),
 				},
 				y: {
-					position: 'left',
+					position: "left",
 					stacked: props.stacked,
 					suggestedMax: 50,
 					grid: {
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 					ticks: {
 						display: props.detailed,
@@ -253,7 +277,7 @@ const render = () => {
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			elements: {
 				point: {
@@ -265,70 +289,74 @@ const render = () => {
 			plugins: {
 				legend: {
 					display: props.detailed,
-					position: 'bottom',
+					position: "bottom",
 					labels: {
 						boxWidth: 16,
 					},
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
 					external: externalTooltipHandler,
 				},
-				zoom: props.detailed ? {
-					pan: {
-						enabled: true,
-					},
-					zoom: {
-						wheel: {
-							enabled: true,
-						},
-						pinch: {
-							enabled: true,
-						},
-						drag: {
-							enabled: false,
-						},
-						mode: 'x',
-					},
-					limits: {
-						x: {
-							min: 'original',
-							max: 'original',
-						},
-						y: {
-							min: 'original',
-							max: 'original',
-						},
-					},
-				} : undefined,
+				zoom: props.detailed
+					? {
+							pan: {
+								enabled: true,
+							},
+							zoom: {
+								wheel: {
+									enabled: true,
+								},
+								pinch: {
+									enabled: true,
+								},
+								drag: {
+									enabled: false,
+								},
+								mode: "x",
+							},
+							limits: {
+								x: {
+									min: "original",
+									max: "original",
+								},
+								y: {
+									min: "original",
+									max: "original",
+								},
+							},
+					  }
+					: undefined,
 				//gradient,
 			},
 		},
-		plugins: [{
-			id: 'vLine',
-			beforeDraw(chart, args, options) {
-				if (chart.tooltip?._active?.length) {
-					const activePoint = chart.tooltip._active[0];
-					const ctx = chart.ctx;
-					const x = activePoint.element.x;
-					const topY = chart.scales.y.top;
-					const bottomY = chart.scales.y.bottom;
+		plugins: [
+			{
+				id: "vLine",
+				beforeDraw(chart, args, options) {
+					if (chart.tooltip?._active?.length) {
+						const activePoint = chart.tooltip._active[0];
+						const ctx = chart.ctx;
+						const x = activePoint.element.x;
+						const topY = chart.scales.y.top;
+						const bottomY = chart.scales.y.bottom;
 
-					ctx.save();
-					ctx.beginPath();
-					ctx.moveTo(x, bottomY);
-					ctx.lineTo(x, topY);
-					ctx.lineWidth = 1;
-					ctx.strokeStyle = vLineColor;
-					ctx.stroke();
-					ctx.restore();
-				}
+						ctx.save();
+						ctx.beginPath();
+						ctx.moveTo(x, bottomY);
+						ctx.lineTo(x, topY);
+						ctx.lineWidth = 1;
+						ctx.strokeStyle = vLineColor;
+						ctx.stroke();
+						ctx.restore();
+					}
+				},
 			},
-		}],
+		],
 	});
 };
 
@@ -337,507 +365,717 @@ const exportData = () => {
 };
 
 const fetchFederationChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/federation', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/federation", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Received',
-			type: 'area',
-			data: format(raw.inboxInstances),
-			color: colors.blue,
-		}, {
-			name: 'Delivered',
-			type: 'area',
-			data: format(raw.deliveredInstances),
-			color: colors.green,
-		}, {
-			name: 'Stalled',
-			type: 'area',
-			data: format(raw.stalled),
-			color: colors.red,
-		}, {
-			name: 'Pub Active',
-			type: 'line',
-			data: format(raw.pubActive),
-			color: colors.purple,
-		}, {
-			name: 'Sub Active',
-			type: 'line',
-			data: format(raw.subActive),
-			color: colors.orange,
-		}, {
-			name: 'Pub & Sub',
-			type: 'line',
-			data: format(raw.pubsub),
-			dashed: true,
-			color: colors.cyan,
-		}, {
-			name: 'Pub',
-			type: 'line',
-			data: format(raw.pub),
-			dashed: true,
-			color: colors.purple,
-		}, {
-			name: 'Sub',
-			type: 'line',
-			data: format(raw.sub),
-			dashed: true,
-			color: colors.orange,
-		}],
+		series: [
+			{
+				name: "Received",
+				type: "area",
+				data: format(raw.inboxInstances),
+				color: colors.blue,
+			},
+			{
+				name: "Delivered",
+				type: "area",
+				data: format(raw.deliveredInstances),
+				color: colors.green,
+			},
+			{
+				name: "Stalled",
+				type: "area",
+				data: format(raw.stalled),
+				color: colors.red,
+			},
+			{
+				name: "Pub Active",
+				type: "line",
+				data: format(raw.pubActive),
+				color: colors.purple,
+			},
+			{
+				name: "Sub Active",
+				type: "line",
+				data: format(raw.subActive),
+				color: colors.orange,
+			},
+			{
+				name: "Pub & Sub",
+				type: "line",
+				data: format(raw.pubsub),
+				dashed: true,
+				color: colors.cyan,
+			},
+			{
+				name: "Pub",
+				type: "line",
+				data: format(raw.pub),
+				dashed: true,
+				color: colors.purple,
+			},
+			{
+				name: "Sub",
+				type: "line",
+				data: format(raw.sub),
+				dashed: true,
+				color: colors.orange,
+			},
+		],
 	};
 };
 
 const fetchApRequestChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/ap-request', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/ap-request", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'In',
-			type: 'area',
-			color: '#31748f',
-			data: format(raw.inboxReceived),
-		}, {
-			name: 'Out (succ)',
-			type: 'area',
-			color: '#c4a7e7',
-			data: format(raw.deliverSucceeded),
-		}, {
-			name: 'Out (fail)',
-			type: 'area',
-			color: '#f6c177',
-			data: format(raw.deliverFailed),
-		}],
+		series: [
+			{
+				name: "In",
+				type: "area",
+				color: "#31748f",
+				data: format(raw.inboxReceived),
+			},
+			{
+				name: "Out (succ)",
+				type: "area",
+				color: "#c4a7e7",
+				data: format(raw.deliverSucceeded),
+			},
+			{
+				name: "Out (fail)",
+				type: "area",
+				color: "#f6c177",
+				data: format(raw.deliverFailed),
+			},
+		],
 	};
 };
 
 const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/notes", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'All',
-			type: 'line',
-			data: format(type === 'combined'
-				? sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec))
-				: sum(raw[type].inc, negate(raw[type].dec)),
-			),
-			color: '#888888',
-		}, {
-			name: 'Renotes',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
-				: raw[type].diffs.renote,
-			),
-			color: colors.green,
-		}, {
-			name: 'Replies',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
-				: raw[type].diffs.reply,
-			),
-			color: colors.yellow,
-		}, {
-			name: 'Normal',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
-				: raw[type].diffs.normal,
-			),
-			color: colors.blue,
-		}, {
-			name: 'With file',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.withFile, raw.remote.diffs.withFile)
-				: raw[type].diffs.withFile,
-			),
-			color: colors.purple,
-		}],
+		series: [
+			{
+				name: "All",
+				type: "line",
+				data: format(
+					type === "combined"
+						? sum(
+								raw.local.inc,
+								negate(raw.local.dec),
+								raw.remote.inc,
+								negate(raw.remote.dec)
+						  )
+						: sum(raw[type].inc, negate(raw[type].dec))
+				),
+				color: "#888888",
+			},
+			{
+				name: "Renotes",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
+						: raw[type].diffs.renote
+				),
+				color: colors.green,
+			},
+			{
+				name: "Replies",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
+						: raw[type].diffs.reply
+				),
+				color: colors.yellow,
+			},
+			{
+				name: "Normal",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
+						: raw[type].diffs.normal
+				),
+				color: colors.blue,
+			},
+			{
+				name: "With file",
+				type: "area",
+				data: format(
+					type === "combined"
+						? sum(
+								raw.local.diffs.withFile,
+								raw.remote.diffs.withFile
+						  )
+						: raw[type].diffs.withFile
+				),
+				color: colors.purple,
+			},
+		],
 	};
 };
 
 const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/notes", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Combined',
-			type: 'line',
-			data: format(sum(raw.local.total, raw.remote.total)),
-		}, {
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.total),
-		}],
+		series: [
+			{
+				name: "Combined",
+				type: "line",
+				data: format(sum(raw.local.total, raw.remote.total)),
+			},
+			{
+				name: "Local",
+				type: "area",
+				data: format(raw.local.total),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(raw.remote.total),
+			},
+		],
 	};
 };
 
 const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/users', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/users", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Combined',
-			type: 'line',
-			data: format(total
-				? sum(raw.local.total, raw.remote.total)
-				: sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec)),
-			),
-		}, {
-			name: 'Local',
-			type: 'area',
-			data: format(total
-				? raw.local.total
-				: sum(raw.local.inc, negate(raw.local.dec)),
-			),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(total
-				? raw.remote.total
-				: sum(raw.remote.inc, negate(raw.remote.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Combined",
+				type: "line",
+				data: format(
+					total
+						? sum(raw.local.total, raw.remote.total)
+						: sum(
+								raw.local.inc,
+								negate(raw.local.dec),
+								raw.remote.inc,
+								negate(raw.remote.dec)
+						  )
+				),
+			},
+			{
+				name: "Local",
+				type: "area",
+				data: format(
+					total
+						? raw.local.total
+						: sum(raw.local.inc, negate(raw.local.dec))
+				),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(
+					total
+						? raw.remote.total
+						: sum(raw.remote.inc, negate(raw.remote.dec))
+				),
+			},
+		],
 	};
 };
 
 const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/active-users', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/active-users", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Read & Write',
-			type: 'area',
-			data: format(raw.readWrite),
-			color: colors.orange,
-		}, {
-			name: 'Write',
-			type: 'area',
-			data: format(raw.write),
-			color: colors.lime,
-		}, {
-			name: 'Read',
-			type: 'area',
-			data: format(raw.read),
-			color: colors.blue,
-		}, {
-			name: '< Week',
-			type: 'area',
-			data: format(raw.registeredWithinWeek),
-			color: colors.green,
-		}, {
-			name: '< Month',
-			type: 'area',
-			data: format(raw.registeredWithinMonth),
-			color: colors.yellow,
-		}, {
-			name: '< Year',
-			type: 'area',
-			data: format(raw.registeredWithinYear),
-			color: colors.red,
-		}, {
-			name: '> Week',
-			type: 'area',
-			data: format(raw.registeredOutsideWeek),
-			color: colors.yellow,
-		}, {
-			name: '> Month',
-			type: 'area',
-			data: format(raw.registeredOutsideMonth),
-			color: colors.red,
-		}, {
-			name: '> Year',
-			type: 'area',
-			data: format(raw.registeredOutsideYear),
-			color: colors.purple,
-		}],
+		series: [
+			{
+				name: "Read & Write",
+				type: "area",
+				data: format(raw.readWrite),
+				color: colors.orange,
+			},
+			{
+				name: "Write",
+				type: "area",
+				data: format(raw.write),
+				color: colors.lime,
+			},
+			{
+				name: "Read",
+				type: "area",
+				data: format(raw.read),
+				color: colors.blue,
+			},
+			{
+				name: "< Week",
+				type: "area",
+				data: format(raw.registeredWithinWeek),
+				color: colors.green,
+			},
+			{
+				name: "< Month",
+				type: "area",
+				data: format(raw.registeredWithinMonth),
+				color: colors.yellow,
+			},
+			{
+				name: "< Year",
+				type: "area",
+				data: format(raw.registeredWithinYear),
+				color: colors.red,
+			},
+			{
+				name: "> Week",
+				type: "area",
+				data: format(raw.registeredOutsideWeek),
+				color: colors.yellow,
+			},
+			{
+				name: "> Month",
+				type: "area",
+				data: format(raw.registeredOutsideMonth),
+				color: colors.red,
+			},
+			{
+				name: "> Year",
+				type: "area",
+				data: format(raw.registeredOutsideYear),
+				color: colors.purple,
+			},
+		],
 	};
 };
 
 const fetchDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/drive", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
 		bytes: true,
-		series: [{
-			name: 'All',
-			type: 'line',
-			dashed: true,
-			data: format(
-				sum(
-					raw.local.incSize,
-					negate(raw.local.decSize),
-					raw.remote.incSize,
-					negate(raw.remote.decSize),
+		series: [
+			{
+				name: "All",
+				type: "line",
+				dashed: true,
+				data: format(
+					sum(
+						raw.local.incSize,
+						negate(raw.local.decSize),
+						raw.remote.incSize,
+						negate(raw.remote.decSize)
+					)
 				),
-			),
-		}, {
-			name: 'Local +',
-			type: 'area',
-			data: format(raw.local.incSize),
-		}, {
-			name: 'Local -',
-			type: 'area',
-			data: format(negate(raw.local.decSize)),
-		}, {
-			name: 'Remote +',
-			type: 'area',
-			data: format(raw.remote.incSize),
-		}, {
-			name: 'Remote -',
-			type: 'area',
-			data: format(negate(raw.remote.decSize)),
-		}],
+			},
+			{
+				name: "Local +",
+				type: "area",
+				data: format(raw.local.incSize),
+			},
+			{
+				name: "Local -",
+				type: "area",
+				data: format(negate(raw.local.decSize)),
+			},
+			{
+				name: "Remote +",
+				type: "area",
+				data: format(raw.remote.incSize),
+			},
+			{
+				name: "Remote -",
+				type: "area",
+				data: format(negate(raw.remote.decSize)),
+			},
+		],
 	};
 };
 
 const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/drive", {
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'All',
-			type: 'line',
-			dashed: true,
-			data: format(
-				sum(
-					raw.local.incCount,
-					negate(raw.local.decCount),
-					raw.remote.incCount,
-					negate(raw.remote.decCount),
+		series: [
+			{
+				name: "All",
+				type: "line",
+				dashed: true,
+				data: format(
+					sum(
+						raw.local.incCount,
+						negate(raw.local.decCount),
+						raw.remote.incCount,
+						negate(raw.remote.decCount)
+					)
 				),
-			),
-		}, {
-			name: 'Local +',
-			type: 'area',
-			data: format(raw.local.incCount),
-		}, {
-			name: 'Local -',
-			type: 'area',
-			data: format(negate(raw.local.decCount)),
-		}, {
-			name: 'Remote +',
-			type: 'area',
-			data: format(raw.remote.incCount),
-		}, {
-			name: 'Remote -',
-			type: 'area',
-			data: format(negate(raw.remote.decCount)),
-		}],
+			},
+			{
+				name: "Local +",
+				type: "area",
+				data: format(raw.local.incCount),
+			},
+			{
+				name: "Local -",
+				type: "area",
+				data: format(negate(raw.local.decCount)),
+			},
+			{
+				name: "Remote +",
+				type: "area",
+				data: format(raw.remote.incCount),
+			},
+			{
+				name: "Remote -",
+				type: "area",
+				data: format(negate(raw.remote.decCount)),
+			},
+		],
 	};
 };
 
 const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'In',
-			type: 'area',
-			color: '#31748f',
-			data: format(raw.requests.received),
-		}, {
-			name: 'Out (succ)',
-			type: 'area',
-			color: '#c4a7e7',
-			data: format(raw.requests.succeeded),
-		}, {
-			name: 'Out (fail)',
-			type: 'area',
-			color: '#f6c177',
-			data: format(raw.requests.failed),
-		}],
+		series: [
+			{
+				name: "In",
+				type: "area",
+				color: "#31748f",
+				data: format(raw.requests.received),
+			},
+			{
+				name: "Out (succ)",
+				type: "area",
+				color: "#c4a7e7",
+				data: format(raw.requests.succeeded),
+			},
+			{
+				name: "Out (fail)",
+				type: "area",
+				color: "#f6c177",
+				data: format(raw.requests.failed),
+			},
+		],
 	};
 };
 
-const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceUsersChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Users',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.users.total
-				: sum(raw.users.inc, negate(raw.users.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Users",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.users.total
+						: sum(raw.users.inc, negate(raw.users.dec))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceNotesChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Posts',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.notes.total
-				: sum(raw.notes.inc, negate(raw.notes.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Posts",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.notes.total
+						: sum(raw.notes.inc, negate(raw.notes.dec))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceFfChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Following',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.following.total
-				: sum(raw.following.inc, negate(raw.following.dec)),
-			),
-		}, {
-			name: 'Followers',
-			type: 'area',
-			color: '#c4a7e7',
-			data: format(total
-				? raw.followers.total
-				: sum(raw.followers.inc, negate(raw.followers.dec)),
-			),
-		}],
+		series: [
+			{
+				name: "Following",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.following.total
+						: sum(raw.following.inc, negate(raw.following.dec))
+				),
+			},
+			{
+				name: "Followers",
+				type: "area",
+				color: "#c4a7e7",
+				data: format(
+					total
+						? raw.followers.total
+						: sum(raw.followers.inc, negate(raw.followers.dec))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceDriveUsageChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
 		bytes: true,
-		series: [{
-			name: 'Drive usage',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.drive.totalUsage
-				: sum(raw.drive.incUsage, negate(raw.drive.decUsage)),
-			),
-		}],
+		series: [
+			{
+				name: "Drive usage",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.drive.totalUsage
+						: sum(raw.drive.incUsage, negate(raw.drive.decUsage))
+				),
+			},
+		],
 	};
 };
 
-const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+const fetchInstanceDriveFilesChart = async (
+	total: boolean
+): Promise<typeof chartData> => {
+	const raw = await os.apiGet("charts/instance", {
+		host: props.args.host,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Drive files',
-			type: 'area',
-			color: '#31748f',
-			data: format(total
-				? raw.drive.totalFiles
-				: sum(raw.drive.incFiles, negate(raw.drive.decFiles)),
-			),
-		}],
+		series: [
+			{
+				name: "Drive files",
+				type: "area",
+				color: "#31748f",
+				data: format(
+					total
+						? raw.drive.totalFiles
+						: sum(raw.drive.incFiles, negate(raw.drive.decFiles))
+				),
+			},
+		],
 	};
 };
 
 const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/notes", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [...(props.args.withoutAll ? [] : [{
-			name: 'All',
-			type: 'line',
-			data: format(sum(raw.inc, negate(raw.dec))),
-			color: '#888888',
-		}]), {
-			name: 'With file',
-			type: 'area',
-			data: format(raw.diffs.withFile),
-			color: colors.purple,
-		}, {
-			name: 'Renotes',
-			type: 'area',
-			data: format(raw.diffs.renote),
-			color: colors.green,
-		}, {
-			name: 'Replies',
-			type: 'area',
-			data: format(raw.diffs.reply),
-			color: colors.yellow,
-		}, {
-			name: 'Normal',
-			type: 'area',
-			data: format(raw.diffs.normal),
-			color: colors.blue,
-		}],
+		series: [
+			...(props.args.withoutAll
+				? []
+				: [
+						{
+							name: "All",
+							type: "line",
+							data: format(sum(raw.inc, negate(raw.dec))),
+							color: "#888888",
+						},
+				  ]),
+			{
+				name: "With file",
+				type: "area",
+				data: format(raw.diffs.withFile),
+				color: colors.purple,
+			},
+			{
+				name: "Renotes",
+				type: "area",
+				data: format(raw.diffs.renote),
+				color: colors.green,
+			},
+			{
+				name: "Replies",
+				type: "area",
+				data: format(raw.diffs.reply),
+				color: colors.yellow,
+			},
+			{
+				name: "Normal",
+				type: "area",
+				data: format(raw.diffs.normal),
+				color: colors.blue,
+			},
+		],
 	};
 };
 
 const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/following", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.followings.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.followings.total),
-		}],
+		series: [
+			{
+				name: "Local",
+				type: "area",
+				data: format(raw.local.followings.total),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(raw.remote.followings.total),
+			},
+		],
 	};
 };
 
 const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/following", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.followers.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.followers.total),
-		}],
+		series: [
+			{
+				name: "Local",
+				type: "area",
+				data: format(raw.local.followers.total),
+			},
+			{
+				name: "Remote",
+				type: "area",
+				data: format(raw.remote.followers.total),
+			},
+		],
 	};
 };
 
 const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	const raw = await os.apiGet("charts/user/drive", {
+		userId: props.args.user.id,
+		limit: props.limit,
+		span: props.span,
+	});
 	return {
-		series: [{
-			name: 'Inc',
-			type: 'area',
-			data: format(raw.incSize),
-		}, {
-			name: 'Dec',
-			type: 'area',
-			data: format(raw.decSize),
-		}],
+		series: [
+			{
+				name: "Inc",
+				type: "area",
+				data: format(raw.incSize),
+			},
+			{
+				name: "Dec",
+				type: "area",
+				data: format(raw.decSize),
+			},
+		],
 	};
 };
 
 const fetchAndRender = async () => {
 	const fetchData = () => {
 		switch (props.src) {
-			case 'federation': return fetchFederationChart();
-			case 'ap-request': return fetchApRequestChart();
-			case 'users': return fetchUsersChart(false);
-			case 'users-total': return fetchUsersChart(true);
-			case 'active-users': return fetchActiveUsersChart();
-			case 'notes': return fetchNotesChart('combined');
-			case 'local-notes': return fetchNotesChart('local');
-			case 'remote-notes': return fetchNotesChart('remote');
-			case 'notes-total': return fetchNotesTotalChart();
-			case 'drive': return fetchDriveChart();
-			case 'drive-files': return fetchDriveFilesChart();
-			case 'instance-requests': return fetchInstanceRequestsChart();
-			case 'instance-users': return fetchInstanceUsersChart(false);
-			case 'instance-users-total': return fetchInstanceUsersChart(true);
-			case 'instance-notes': return fetchInstanceNotesChart(false);
-			case 'instance-notes-total': return fetchInstanceNotesChart(true);
-			case 'instance-ff': return fetchInstanceFfChart(false);
-			case 'instance-ff-total': return fetchInstanceFfChart(true);
-			case 'instance-drive-usage': return fetchInstanceDriveUsageChart(false);
-			case 'instance-drive-usage-total': return fetchInstanceDriveUsageChart(true);
-			case 'instance-drive-files': return fetchInstanceDriveFilesChart(false);
-			case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
+			case "federation":
+				return fetchFederationChart();
+			case "ap-request":
+				return fetchApRequestChart();
+			case "users":
+				return fetchUsersChart(false);
+			case "users-total":
+				return fetchUsersChart(true);
+			case "active-users":
+				return fetchActiveUsersChart();
+			case "notes":
+				return fetchNotesChart("combined");
+			case "local-notes":
+				return fetchNotesChart("local");
+			case "remote-notes":
+				return fetchNotesChart("remote");
+			case "notes-total":
+				return fetchNotesTotalChart();
+			case "drive":
+				return fetchDriveChart();
+			case "drive-files":
+				return fetchDriveFilesChart();
+			case "instance-requests":
+				return fetchInstanceRequestsChart();
+			case "instance-users":
+				return fetchInstanceUsersChart(false);
+			case "instance-users-total":
+				return fetchInstanceUsersChart(true);
+			case "instance-notes":
+				return fetchInstanceNotesChart(false);
+			case "instance-notes-total":
+				return fetchInstanceNotesChart(true);
+			case "instance-ff":
+				return fetchInstanceFfChart(false);
+			case "instance-ff-total":
+				return fetchInstanceFfChart(true);
+			case "instance-drive-usage":
+				return fetchInstanceDriveUsageChart(false);
+			case "instance-drive-usage-total":
+				return fetchInstanceDriveUsageChart(true);
+			case "instance-drive-files":
+				return fetchInstanceDriveFilesChart(false);
+			case "instance-drive-files-total":
+				return fetchInstanceDriveFilesChart(true);
 
-			case 'per-user-notes': return fetchPerUserNotesChart();
-			case 'per-user-following': return fetchPerUserFollowingChart();
-			case 'per-user-followers': return fetchPerUserFollowersChart();
-			case 'per-user-drive': return fetchPerUserDriveChart();
+			case "per-user-notes":
+				return fetchPerUserNotesChart();
+			case "per-user-following":
+				return fetchPerUserFollowingChart();
+			case "per-user-followers":
+				return fetchPerUserFollowersChart();
+			case "per-user-drive":
+				return fetchPerUserDriveChart();
 		}
 	};
 	fetching.value = true;
diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
index a92dd36b6..659dc6d39 100644
--- a/packages/client/src/components/MkChartTooltip.vue
+++ b/packages/client/src/components/MkChartTooltip.vue
@@ -1,20 +1,35 @@
 <template>
-<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
-	<div v-if="title || series" class="qpcyisrl">
-		<div v-if="title" class="title">{{ title }}</div>
-		<template v-if="series">
-			<div v-for="x in series" class="series">
-				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
-				<span>{{ x.text }}</span>
-			</div>
-		</template>
-	</div>
-</MkTooltip>
+	<MkTooltip
+		ref="tooltip"
+		:showing="showing"
+		:x="x"
+		:y="y"
+		:max-width="340"
+		:direction="'top'"
+		:inner-margin="16"
+		@closed="emit('closed')"
+	>
+		<div v-if="title || series" class="qpcyisrl">
+			<div v-if="title" class="title">{{ title }}</div>
+			<template v-if="series">
+				<div v-for="x in series" class="series">
+					<span
+						class="color"
+						:style="{
+							background: x.backgroundColor,
+							borderColor: x.borderColor,
+						}"
+					></span>
+					<span>{{ x.text }}</span>
+				</div>
+			</template>
+		</div>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
 	showing: boolean;
@@ -29,7 +44,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkChatPreview.vue b/packages/client/src/components/MkChatPreview.vue
index 131498e09..6cd79d74c 100644
--- a/packages/client/src/components/MkChatPreview.vue
+++ b/packages/client/src/components/MkChatPreview.vue
@@ -1,56 +1,72 @@
 <template>
-<MkA
-	class="rivslvers"
-	tabindex="-1"
-	:class="{
-		isMe: isMe(message),
-		isRead: message.groupId ? message.reads.includes($i?.id) : message.isRead,
-	}"
-	:to="
-		message.groupId
-			? `/my/messaging/group/${message.groupId}`
-			: `/my/messaging/${getAcct(
-				isMe(message) ? message.recipient : message.user
-			)}`
-	"
->
-	<div class="message _block">
-		<MkAvatar
-			class="avatar"
-			:user="
-				message.groupId
-					? message.user
-					: isMe(message)
+	<MkA
+		class="rivslvers"
+		tabindex="-1"
+		:class="{
+			isMe: isMe(message),
+			isRead: message.groupId
+				? message.reads.includes($i?.id)
+				: message.isRead,
+		}"
+		:to="
+			message.groupId
+				? `/my/messaging/group/${message.groupId}`
+				: `/my/messaging/${getAcct(
+						isMe(message) ? message.recipient : message.user
+				  )}`
+		"
+	>
+		<div class="message _block">
+			<MkAvatar
+				class="avatar"
+				:user="
+					message.groupId
+						? message.user
+						: isMe(message)
 						? message.recipient
 						: message.user
-			"
-			:show-indicator="true"
-		/>
-		<header v-if="message.groupId">
-			<span class="name">{{ message.group.name }}</span>
-			<MkTime :time="message.createdAt" class="time"/>
-		</header>
-		<header v-else>
-			<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-			<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-			<MkTime :time="message.createdAt" class="time"/>
-		</header>
-		<div class="body">
-			<p class="text">
-				<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
-				<Mfm v-if="message.text != null && message.text.length > 0" :text="message.text"/>
-				<span v-else> 📎</span>
-			</p>
+				"
+				:show-indicator="true"
+			/>
+			<header v-if="message.groupId">
+				<span class="name">{{ message.group.name }}</span>
+				<MkTime :time="message.createdAt" class="time" />
+			</header>
+			<header v-else>
+				<span class="name"
+					><MkUserName
+						:user="
+							isMe(message) ? message.recipient : message.user
+						"
+				/></span>
+				<span class="username"
+					>@{{
+						acct(isMe(message) ? message.recipient : message.user)
+					}}</span
+				>
+				<MkTime :time="message.createdAt" class="time" />
+			</header>
+			<div class="body">
+				<p class="text">
+					<span v-if="isMe(message)" class="me"
+						>{{ i18n.ts.you }}:
+					</span>
+					<Mfm
+						v-if="message.text != null && message.text.length > 0"
+						:text="message.text"
+					/>
+					<span v-else> 📎</span>
+				</p>
+			</div>
 		</div>
-	</div>
-</MkA>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import * as Acct from 'calckey-js/built/acct';
-import { i18n } from '@/i18n';
-import { acct } from '@/filters/user';
-import { $i } from '@/account';
+import * as Acct from "calckey-js/built/acct";
+import { i18n } from "@/i18n";
+import { acct } from "@/filters/user";
+import { $i } from "@/account";
 
 const getAcct = Acct.toString;
 
@@ -138,7 +154,6 @@ function isMe(message): boolean {
 		}
 
 		> .body {
-
 			> .text {
 				display: block;
 				margin: 0 0 0 0;
diff --git a/packages/client/src/components/MkCheatSheetDialog.vue b/packages/client/src/components/MkCheatSheetDialog.vue
index b2ee6dd9a..04b8cec6e 100644
--- a/packages/client/src/components/MkCheatSheetDialog.vue
+++ b/packages/client/src/components/MkCheatSheetDialog.vue
@@ -1,28 +1,28 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="600"
-	@close="dialog?.close()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="600"
+		@close="dialog?.close()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
 
-	<div class="_monolithic_">
-		<div class="_section">
-			<XCheatSheet/>
+		<div class="_monolithic_">
+			<div class="_section">
+				<XCheatSheet />
+			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import XModalWindow from '@/components/MkModalWindow.vue';
-import XCheatSheet from '@/pages/mfm-cheat-sheet.vue';
-import { i18n } from '@/i18n';
+import XModalWindow from "@/components/MkModalWindow.vue";
+import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
@@ -41,6 +41,4 @@ function close(res) {
 .fade-leave-to {
 	opacity: 0;
 }
-
 </style>
-
diff --git a/packages/client/src/components/MkCode.core.vue b/packages/client/src/components/MkCode.core.vue
index 934e0a158..c397a950c 100644
--- a/packages/client/src/components/MkCode.core.vue
+++ b/packages/client/src/components/MkCode.core.vue
@@ -1,12 +1,15 @@
 <template>
-<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
-<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
+	<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
+	<pre
+		v-else
+		:class="`language-${prismLang}`"
+	><code :class="`language-${prismLang}`" v-html="html"></code></pre>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism-okaidia.css';
+import { computed } from "vue";
+import Prism from "prismjs";
+import "prismjs/themes/prism-okaidia.css";
 
 const props = defineProps<{
 	code: string;
@@ -14,6 +17,14 @@ const props = defineProps<{
 	inline?: boolean;
 }>();
 
-const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
-const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
+const prismLang = computed(() =>
+	Prism.languages[props.lang] ? props.lang : "js"
+);
+const html = computed(() =>
+	Prism.highlight(
+		props.code,
+		Prism.languages[prismLang.value],
+		prismLang.value
+	)
+);
 </script>
diff --git a/packages/client/src/components/MkCode.vue b/packages/client/src/components/MkCode.vue
index 1640258d5..f012b5312 100644
--- a/packages/client/src/components/MkCode.vue
+++ b/packages/client/src/components/MkCode.vue
@@ -1,9 +1,9 @@
 <template>
-<XCode :code="code" :lang="lang" :inline="inline"/>
+	<XCode :code="code" :lang="lang" :inline="inline" />
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent } from "vue";
 
 defineProps<{
 	code: string;
@@ -11,5 +11,7 @@ defineProps<{
 	inline?: boolean;
 }>();
 
-const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
+const XCode = defineAsyncComponent(
+	() => import("@/components/MkCode.core.vue")
+);
 </script>
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index e601dd56b..62c198cb1 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -1,35 +1,67 @@
 <template>
-<div v-size="{ max: [380] }" 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">
-			<slot name="func"></slot>
-			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
-				<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-				<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-			</button>
-		</div>
-	</header>
-	<transition
-		:name="$store.state.animation ? 'container-toggle' : ''"
-		@enter="enter"
-		@after-enter="afterEnter"
-		@leave="leave"
-		@after-leave="afterLeave"
+	<div
+		v-size="{ max: [380] }"
+		class="ukygtjoj _panel"
+		:class="{
+			naked,
+			thin,
+			hideHeader: !showHeader,
+			scrollable,
+			closed: !showBody,
+		}"
 	>
-		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
-			<slot></slot>
-			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ i18n.ts.showMore }}</span>
-			</button>
-		</div>
-	</transition>
-</div>
+		<header v-if="showHeader" ref="header">
+			<div class="title"><slot name="header"></slot></div>
+			<div class="sub">
+				<slot name="func"></slot>
+				<button
+					v-if="foldable"
+					class="_button"
+					@click="() => (showBody = !showBody)"
+				>
+					<template v-if="showBody"
+						><i class="ph-caret-up ph-bold ph-lg"></i
+					></template>
+					<template v-else
+						><i class="ph-caret-down ph-bold ph-lg"></i
+					></template>
+				</button>
+			</div>
+		</header>
+		<transition
+			:name="$store.state.animation ? 'container-toggle' : ''"
+			@enter="enter"
+			@after-enter="afterEnter"
+			@leave="leave"
+			@after-leave="afterLeave"
+		>
+			<div
+				v-show="showBody"
+				ref="content"
+				class="content"
+				:class="{ omitted }"
+			>
+				<slot></slot>
+				<button
+					v-if="omitted"
+					class="fade _button"
+					@click="
+						() => {
+							ignoreOmit = true;
+							omitted = false;
+						}
+					"
+				>
+					<span>{{ i18n.ts.showMore }}</span>
+				</button>
+			</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	props: {
@@ -78,22 +110,29 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.$watch('showBody', showBody => {
-			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
-			this.$el.style.minHeight = `${headerHeight}px`;
-			if (showBody) {
-				this.$el.style.flexBasis = 'auto';
-			} else {
-				this.$el.style.flexBasis = `${headerHeight}px`;
+		this.$watch(
+			"showBody",
+			(showBody) => {
+				const headerHeight = this.showHeader
+					? this.$refs.header.offsetHeight
+					: 0;
+				this.$el.style.minHeight = `${headerHeight}px`;
+				if (showBody) {
+					this.$el.style.flexBasis = "auto";
+				} else {
+					this.$el.style.flexBasis = `${headerHeight}px`;
+				}
+			},
+			{
+				immediate: true,
 			}
-		}, {
-			immediate: true,
-		});
+		);
 
-		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
+		this.$el.style.setProperty("--maxHeight", this.maxHeight + "px");
 
 		const calcOmit = () => {
-			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
+			if (this.omitted || this.ignoreOmit || this.maxHeight == null)
+				return;
 			const height = this.$refs.content.offsetHeight;
 			this.omitted = height > this.maxHeight;
 		};
@@ -113,14 +152,14 @@ export default defineComponent({
 			const elementHeight = el.getBoundingClientRect().height;
 			el.style.height = 0;
 			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 		},
 		afterEnter(el) {
 			el.style.height = null;
 		},
 		leave(el) {
 			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 			el.offsetHeight; // reflow
 			el.style.height = 0;
 		},
@@ -132,7 +171,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.container-toggle-enter-active, .container-toggle-leave-active {
+.container-toggle-enter-active,
+.container-toggle-leave-active {
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
@@ -236,7 +276,8 @@ export default defineComponent({
 		}
 	}
 
-	&.max-width_380px, &.thin {
+	&.max-width_380px,
+	&.thin {
 		> header {
 			> .title {
 				padding: 8px 10px;
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
index cfc9502b4..3e94dd59d 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -1,17 +1,22 @@
 <template>
-<transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
-	</div>
-</transition>
+	<transition :name="$store.state.animation ? 'fade' : ''" appear>
+		<div
+			ref="rootEl"
+			class="nvlagfpb"
+			:style="{ zIndex }"
+			@contextmenu.prevent.stop="() => {}"
+		>
+			<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from './types/menu.vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
+import { onMounted, onBeforeUnmount } from "vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "./types/menu.vue";
+import contains from "@/scripts/contains";
+import * as os from "@/os";
 
 const props = defineProps<{
 	items: MenuItem[];
@@ -19,12 +24,12 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 let rootEl = $ref<HTMLDivElement>();
 
-let zIndex = $ref<number>(os.claimZIndex('high'));
+let zIndex = $ref<number>(os.claimZIndex("high"));
 
 onMounted(() => {
 	let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
@@ -52,19 +57,19 @@ onMounted(() => {
 	rootEl.style.top = `${top}px`;
 	rootEl.style.left = `${left}px`;
 
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.addEventListener("mousedown", onMousedown);
 	}
 });
 
 onBeforeUnmount(() => {
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
+	for (const el of Array.from(document.querySelectorAll("body *"))) {
+		el.removeEventListener("mousedown", onMousedown);
 	}
 });
 
 function onMousedown(evt: Event) {
-	if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
+	if (!contains(rootEl, evt.target) && rootEl !== evt.target) emit("closed");
 }
 </script>
 
@@ -73,12 +78,15 @@ function onMousedown(evt: Event) {
 	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);
+.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;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index ec1226262..cce948572 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -1,47 +1,55 @@
 <template>
-<XModalWindow
-	ref="dialogEl"
-	:width="800"
-	:height="500"
-	:scroll="false"
-	:with-ok-button="true"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.cropImage }}</template>
-	<template #default="{ width, height }">
-		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
-			<Transition name="fade">
-				<div v-if="loading" class="loading">
-					<MkLoading/>
+	<XModalWindow
+		ref="dialogEl"
+		:width="800"
+		:height="500"
+		:scroll="false"
+		:with-ok-button="true"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.cropImage }}</template>
+		<template #default="{ width, height }">
+			<div
+				class="mk-cropper-dialog"
+				:style="`--vw: ${width}px; --vh: ${height}px;`"
+			>
+				<Transition name="fade">
+					<div v-if="loading" class="loading">
+						<MkLoading />
+					</div>
+				</Transition>
+				<div class="container">
+					<img
+						ref="imgEl"
+						:src="imgUrl"
+						style="display: none"
+						@load="onImageLoad"
+					/>
 				</div>
-			</Transition>
-			<div class="container">
-				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
 			</div>
-		</div>
-	</template>
-</XModalWindow>
+		</template>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-import * as misskey from 'calckey-js';
-import Cropper from 'cropperjs';
-import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { apiUrl, url } from '@/config';
-import { query } from '@/scripts/url';
-import { i18n } from '@/i18n';
+import { nextTick, onMounted } from "vue";
+import * as misskey from "calckey-js";
+import Cropper from "cropperjs";
+import tinycolor from "tinycolor2";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
+import { apiUrl, url } from "@/config";
+import { query } from "@/scripts/url";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", cropped: misskey.entities.DriveFile): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
 const props = defineProps<{
@@ -60,24 +68,24 @@ let loading = $ref(true);
 const ok = async () => {
 	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
 		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
-		croppedCanvas.toBlob(blob => {
+		croppedCanvas.toBlob((blob) => {
 			const formData = new FormData();
-			formData.append('file', blob);
+			formData.append("file", blob);
 			if (defaultStore.state.uploadFolder) {
-				formData.append('folderId', defaultStore.state.uploadFolder);
+				formData.append("folderId", defaultStore.state.uploadFolder);
 			}
 
-			fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
+			fetch(apiUrl + "/drive/files/create", {
+				method: "POST",
 				body: formData,
 				headers: {
 					authorization: `Bearer ${$i.token}`,
 				},
 			})
-			.then(response => response.json())
-			.then(f => {
-				res(f);
-			});
+				.then((response) => response.json())
+				.then((f) => {
+					res(f);
+				});
 		});
 	});
 
@@ -85,12 +93,12 @@ const ok = async () => {
 
 	const f = await promise;
 
-	emit('ok', f);
+	emit("ok", f);
 	dialogEl.close();
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl.close();
 };
 
@@ -98,31 +106,32 @@ const onImageLoad = () => {
 	loading = false;
 
 	if (cropper) {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		cropper.getCropperSelection()!.$center();
 	}
 };
 
 onMounted(() => {
-	cropper = new Cropper(imgEl, {
-	});
+	cropper = new Cropper(imgEl, {});
 
 	const computedStyle = getComputedStyle(document.documentElement);
 
 	const selection = cropper.getCropperSelection()!;
-	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
+	selection.themeColor = tinycolor(
+		computedStyle.getPropertyValue("--accent")
+	).toHexString();
 	selection.aspectRatio = props.aspectRatio;
 	selection.initialAspectRatio = props.aspectRatio;
 	selection.outlined = true;
 
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		selection.$center();
 	}, 100);
 
 	// モーダルオープンアニメーションが終わったあとで再度調整
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperImage()!.$center("contain");
 		selection.$center();
 	}, 500);
 });
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 909f0cca9..b4a69ac6a 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -1,16 +1,16 @@
 <template>
-<button class="nrvgflfu _button" @click.stop="toggle">
-	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
-	<span v-if="!modelValue">{{ label }}</span>
-</button>
+	<button class="nrvgflfu _button" @click.stop="toggle">
+		<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
+		<span v-if="!modelValue">{{ label }}</span>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { length } from 'stringz';
-import * as misskey from 'calckey-js';
-import { concat } from '@/scripts/array';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import { length } from "stringz";
+import * as misskey from "calckey-js";
+import { concat } from "@/scripts/array";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -18,19 +18,23 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
+	(ev: "update:modelValue", v: boolean): void;
 }>();
 
 const label = computed(() => {
 	return concat([
-		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
-		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
-		props.note.poll != null ? [i18n.ts.poll] : []
-	] as string[][]).join(' / ');
+		props.note.text
+			? [i18n.t("_cw.chars", { count: length(props.note.text) })]
+			: [],
+		props.note.files && props.note.files.length !== 0
+			? [i18n.t("_cw.files", { count: props.note.files.length })]
+			: [],
+		props.note.poll != null ? [i18n.ts.poll] : [],
+	] as string[][]).join(" / ");
 });
 
 const toggle = () => {
-	emit('update:modelValue', !props.modelValue);
+	emit("update:modelValue", !props.modelValue);
 };
 </script>
 
@@ -60,11 +64,11 @@ const toggle = () => {
 		margin-left: 4px;
 
 		&:before {
-			content: '(';
+			content: "(";
 		}
 
 		&:after {
-			content: ')';
+			content: ")";
 		}
 	}
 }
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index 41e7ac376..29c7c518a 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -1,19 +1,21 @@
 <script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
-import MkAd from '@/components/global/MkAd.vue';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { defineComponent, h, PropType, TransitionGroup } from "vue";
+import MkAd from "@/components/global/MkAd.vue";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			type: Array as PropType<
+				{ id: string; createdAt: string; _shouldInsertAd_: boolean }[]
+			>,
 			required: true,
 		},
 		direction: {
 			type: String,
 			required: false,
-			default: 'down',
+			default: "down",
 		},
 		reversed: {
 			type: Boolean,
@@ -36,7 +38,7 @@ export default defineComponent({
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
-			return i18n.t('monthAndDay', {
+			return i18n.t("monthAndDay", {
 				month: month.toString(),
 				day: date.toString(),
 			});
@@ -44,64 +46,81 @@ export default defineComponent({
 
 		if (props.items.length === 0) return;
 
-		const renderChildren = () => props.items.map((item, i) => {
-			if (!slots || !slots.default) return;
+		const renderChildren = () =>
+			props.items.map((item, i) => {
+				if (!slots || !slots.default) return;
 
-			const el = slots.default({
-				item: item,
-			})[0];
-			if (el.key == null && item.id) el.key = item.id;
+				const el = slots.default({
+					item: item,
+				})[0];
+				if (el.key == null && item.id) el.key = item.id;
 
-			if (
-				i !== props.items.length - 1 &&
-				new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
-			) {
-				const separator = h('div', {
-					class: 'separator',
-					key: item.id + ':separator',
-				}, h('p', {
-					class: 'date',
-				}, [
-					h('span', [
-						h('i', {
-							class: 'ph-caret-up ph-bold ph-lg icon',
-						}),
-						getDateText(item.createdAt),
-					]),
-					h('span', [
-						getDateText(props.items[i + 1].createdAt),
-						h('i', {
-							class: 'ph-caret-down ph-bold ph-lg icon',
-						}),
-					]),
-				]));
+				if (
+					i !== props.items.length - 1 &&
+					new Date(item.createdAt).getDate() !==
+						new Date(props.items[i + 1].createdAt).getDate()
+				) {
+					const separator = h(
+						"div",
+						{
+							class: "separator",
+							key: item.id + ":separator",
+						},
+						h(
+							"p",
+							{
+								class: "date",
+							},
+							[
+								h("span", [
+									h("i", {
+										class: "ph-caret-up ph-bold ph-lg icon",
+									}),
+									getDateText(item.createdAt),
+								]),
+								h("span", [
+									getDateText(props.items[i + 1].createdAt),
+									h("i", {
+										class: "ph-caret-down ph-bold ph-lg icon",
+									}),
+								]),
+							]
+						)
+					);
 
-				return [el, separator];
-			} else {
-				if (props.ad && item._shouldInsertAd_) {
-					return [h(MkAd, {
-						class: 'a', // advertiseの意(ブロッカー対策)
-						key: item.id + ':ad',
-						prefer: ['horizontal', 'horizontal-big'],
-					}), el];
+					return [el, separator];
 				} else {
-					return el;
+					if (props.ad && item._shouldInsertAd_) {
+						return [
+							h(MkAd, {
+								class: "a", // advertiseの意(ブロッカー対策)
+								key: item.id + ":ad",
+								prefer: ["horizontal", "horizontal-big"],
+							}),
+							el,
+						];
+					} else {
+						return el;
+					}
 				}
-			}
-		});
+			});
 
-		return () => h(
-			defaultStore.state.animation ? TransitionGroup : 'div',
-			defaultStore.state.animation ? {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				name: 'list',
-				tag: 'div',
-				'data-direction': props.direction,
-				'data-reversed': props.reversed ? 'true' : 'false',
-			} : {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-			},
-			{ default: renderChildren });
+		return () =>
+			h(
+				defaultStore.state.animation ? TransitionGroup : "div",
+				defaultStore.state.animation
+					? {
+							class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
+							name: "list",
+							tag: "div",
+							"data-direction": props.direction,
+							"data-reversed": props.reversed ? "true" : "false",
+					  }
+					: {
+							class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
+					  },
+				{ default: renderChildren }
+			);
 	},
 });
 </script>
@@ -121,7 +140,8 @@ export default defineComponent({
 	}
 
 	> .list-enter-active {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
+			opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
 
 	&[data-direction="up"] {
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index de9cbe810..557442b5b 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -1,63 +1,171 @@
 <template>
-	<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		:z-priority="'high'"
+		@click="done(true)"
+		@closed="emit('closed')"
+	>
 		<div :class="$style.root">
 			<div v-if="icon" :class="$style.icon">
 				<i :class="icon"></i>
 			</div>
-			<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
-				<i v-if="type === 'success'" :class="$style.iconInner" class="ph-check ph-bold ph-lg"></i>
-				<i v-else-if="type === 'error'" :class="$style.iconInner" class="ph-circle-wavy-warning ph-bold ph-lg"></i>
-				<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ph-warning ph-bold ph-lg"></i>
-				<i v-else-if="type === 'info'" :class="$style.iconInner" class="ph-info ph-bold ph-lg"></i>
-				<i v-else-if="type === 'question'" :class="$style.iconInner" class="ph-circle-question ph-bold ph-lg"></i>
-				<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
+			<div
+				v-else-if="!input && !select"
+				:class="[$style.icon, $style['type_' + type]]"
+			>
+				<i
+					v-if="type === 'success'"
+					:class="$style.iconInner"
+					class="ph-check ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'error'"
+					:class="$style.iconInner"
+					class="ph-circle-wavy-warning ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'warning'"
+					:class="$style.iconInner"
+					class="ph-warning ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'info'"
+					:class="$style.iconInner"
+					class="ph-info ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="type === 'question'"
+					:class="$style.iconInner"
+					class="ph-circle-question ph-bold ph-lg"
+				></i>
+				<MkLoading
+					v-else-if="type === 'waiting'"
+					:class="$style.iconInner"
+					:em="true"
+				/>
 			</div>
-			<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
-			<header v-if="title == null && (input && input.type === 'password')" :class="$style.title"><Mfm :text="i18n.ts.password"/></header>
-			<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
-			<MkInput v-if="input && input.type !== 'paragraph'" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
-				<template v-if="input.type === 'password'" #prefix><i class="ph-password ph-bold ph-lg"></i></template>
+			<header v-if="title" :class="$style.title">
+				<Mfm :text="title" />
+			</header>
+			<header
+				v-if="title == null && input && input.type === 'password'"
+				:class="$style.title"
+			>
+				<Mfm :text="i18n.ts.password" />
+			</header>
+			<div v-if="text" :class="$style.text"><Mfm :text="text" /></div>
+			<MkInput
+				v-if="input && input.type !== 'paragraph'"
+				v-model="inputValue"
+				autofocus
+				:type="input.type || 'text'"
+				:placeholder="input.placeholder || undefined"
+				@keydown="onInputKeydown"
+			>
+				<template v-if="input.type === 'password'" #prefix
+					><i class="ph-password ph-bold ph-lg"></i
+				></template>
 			</MkInput>
-			<MkTextarea v-if="input && input.type === 'paragraph'" v-model="inputValue" autofocus :type="paragraph" :placeholder="input.placeholder || undefined">
+			<MkTextarea
+				v-if="input && input.type === 'paragraph'"
+				v-model="inputValue"
+				autofocus
+				:type="paragraph"
+				:placeholder="input.placeholder || undefined"
+			>
 			</MkTextarea>
 			<MkSelect v-if="select" v-model="selectedValue" autofocus>
 				<template v-if="select.items">
-					<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
+					<option v-for="item in select.items" :value="item.value">
+						{{ item.text }}
+					</option>
 				</template>
 				<template v-else>
-					<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-						<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+					<optgroup
+						v-for="groupedItem in select.groupedItems"
+						:label="groupedItem.label"
+					>
+						<option
+							v-for="item in groupedItem.items"
+							:value="item.value"
+						>
+							{{ item.text }}
+						</option>
 					</optgroup>
 				</template>
 			</MkSelect>
-			<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
+			<div
+				v-if="(showOkButton || showCancelButton) && !actions"
+				:class="$style.buttons"
+			>
 				<div v-if="!isYesNo">
-					<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
-					<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+					<MkButton
+						v-if="showOkButton"
+						inline
+						primary
+						:autofocus="!input && !select"
+						@click="ok"
+						>{{
+							showCancelButton || input || select
+								? i18n.ts.ok
+								: i18n.ts.gotIt
+						}}</MkButton
+					>
+					<MkButton
+						v-if="showCancelButton || input || select"
+						inline
+						@click="cancel"
+						>{{ i18n.ts.cancel }}</MkButton
+					>
 				</div>
 				<div v-else>
-					<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ i18n.ts.yes }}</MkButton>
-					<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
+					<MkButton
+						v-if="showOkButton"
+						inline
+						primary
+						:autofocus="!input && !select"
+						@click="ok"
+						>{{ i18n.ts.yes }}</MkButton
+					>
+					<MkButton
+						v-if="showCancelButton || input || select"
+						inline
+						@click="cancel"
+						>{{ i18n.ts.no }}</MkButton
+					>
 				</div>
 			</div>
 			<div v-if="actions" :class="$style.buttons">
-				<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
+				<MkButton
+					v-for="action in actions"
+					:key="action.text"
+					inline
+					:primary="action.primary"
+					@click="
+						() => {
+							action.callback();
+							modal?.close();
+						}
+					"
+					>{{ action.text }}</MkButton
+				>
 			</div>
 		</div>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
-import { i18n } from '@/i18n';
+import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSelect from "@/components/form/select.vue";
+import { i18n } from "@/i18n";
 
 type Input = {
-	type: HTMLInputElement['type'];
+	type: HTMLInputElement["type"];
 	placeholder?: string | null;
 	default: any | null;
 };
@@ -77,37 +185,46 @@ type Select = {
 	default: string | null;
 };
 
-const props = withDefaults(defineProps<{
-	type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
-	title: string;
-	text?: string;
-	input?: Input;
-	select?: Select;
-	icon?: string;
-	actions?: {
-		text: string;
-		primary?: boolean,
-		callback: (...args: any[]) => void;
-	}[];
-	showOkButton?: boolean;
-	showCancelButton?: boolean;
-	isYesNo?: boolean;
+const props = withDefaults(
+	defineProps<{
+		type?:
+			| "success"
+			| "error"
+			| "warning"
+			| "info"
+			| "question"
+			| "waiting";
+		title: string;
+		text?: string;
+		input?: Input;
+		select?: Select;
+		icon?: string;
+		actions?: {
+			text: string;
+			primary?: boolean;
+			callback: (...args: any[]) => void;
+		}[];
+		showOkButton?: boolean;
+		showCancelButton?: boolean;
+		isYesNo?: boolean;
 
-	cancelableByBgClick?: boolean;
-	okText?: string;
-	cancelText?: string;
-}>(), {
-	type: 'info',
-	showOkButton: true,
-	showCancelButton: false,
-	isYesNo: false,
+		cancelableByBgClick?: boolean;
+		okText?: string;
+		cancelText?: string;
+	}>(),
+	{
+		type: "info",
+		showOkButton: true,
+		showCancelButton: false,
+		isYesNo: false,
 
-	cancelableByBgClick: true,
-});
+		cancelableByBgClick: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', v: { canceled: boolean; result: any }): void;
-	(ev: 'closed'): void;
+	(ev: "done", v: { canceled: boolean; result: any }): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
@@ -116,17 +233,18 @@ const inputValue = ref(props.input?.default || null);
 const selectedValue = ref(props.select?.default || null);
 
 function done(canceled: boolean, result?) {
-	emit('done', { canceled, result });
+	emit("done", { canceled, result });
 	modal.value?.close();
 }
 
 async function ok() {
 	if (!props.showOkButton) return;
 
-	const result =
-		props.input ? inputValue.value :
-		props.select ? selectedValue.value :
-		true;
+	const result = props.input
+		? inputValue.value
+		: props.select
+		? selectedValue.value
+		: true;
 	done(false, result);
 }
 
@@ -139,11 +257,11 @@ function onBgClick() {
 }
 */
 function onKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Escape') cancel();
+	if (evt.key === "Escape") cancel();
 }
 
 function onInputKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Enter') {
+	if (evt.key === "Enter") {
 		evt.preventDefault();
 		evt.stopPropagation();
 		ok();
@@ -151,11 +269,11 @@ function onInputKeydown(evt: KeyboardEvent) {
 }
 
 onMounted(() => {
-	document.addEventListener('keydown', onKeydown);
+	document.addEventListener("keydown", onKeydown);
 });
 
 onBeforeUnmount(() => {
-	document.removeEventListener('keydown', onKeydown);
+	document.removeEventListener("keydown", onKeydown);
 });
 </script>
 
diff --git a/packages/client/src/components/MkDigitalClock.vue b/packages/client/src/components/MkDigitalClock.vue
index 9ed8d63d1..c4edecbec 100644
--- a/packages/client/src/components/MkDigitalClock.vue
+++ b/packages/client/src/components/MkDigitalClock.vue
@@ -1,33 +1,36 @@
 <template>
-<span class="zjobosdg">
-	<span v-text="hh"></span>
-	<span class="colon" :class="{ showColon }">:</span>
-	<span v-text="mm"></span>
-	<span v-if="showS" class="colon" :class="{ showColon }">:</span>
-	<span v-if="showS" v-text="ss"></span>
-	<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
-	<span v-if="showMs" v-text="ms"></span>
-</span>
+	<span class="zjobosdg">
+		<span v-text="hh"></span>
+		<span class="colon" :class="{ showColon }">:</span>
+		<span v-text="mm"></span>
+		<span v-if="showS" class="colon" :class="{ showColon }">:</span>
+		<span v-if="showS" v-text="ss"></span>
+		<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
+		<span v-if="showMs" v-text="ms"></span>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
+import { onUnmounted, ref, watch } from "vue";
 
-const props = withDefaults(defineProps<{
-	showS?: boolean;
-	showMs?: boolean;
-	offset?: number;
-}>(), {
-	showS: true,
-	showMs: false,
-	offset: 0 - new Date().getTimezoneOffset(),
-});
+const props = withDefaults(
+	defineProps<{
+		showS?: boolean;
+		showMs?: boolean;
+		offset?: number;
+	}>(),
+	{
+		showS: true,
+		showMs: false,
+		offset: 0 - new Date().getTimezoneOffset(),
+	}
+);
 
 let intervalId;
-const hh = ref('');
-const mm = ref('');
-const ss = ref('');
-const ms = ref('');
+const hh = ref("");
+const mm = ref("");
+const ss = ref("");
+const ms = ref("");
 const showColon = ref(false);
 let prevSec: number | null = null;
 
@@ -41,21 +44,29 @@ watch(showColon, (v) => {
 
 const tick = () => {
 	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
-	hh.value = now.getHours().toString().padStart(2, '0');
-	mm.value = now.getMinutes().toString().padStart(2, '0');
-	ss.value = now.getSeconds().toString().padStart(2, '0');
-	ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
+	now.setMinutes(
+		now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
+	);
+	hh.value = now.getHours().toString().padStart(2, "0");
+	mm.value = now.getMinutes().toString().padStart(2, "0");
+	ss.value = now.getSeconds().toString().padStart(2, "0");
+	ms.value = Math.floor(now.getMilliseconds() / 10)
+		.toString()
+		.padStart(2, "0");
 	if (now.getSeconds() !== prevSec) showColon.value = true;
 	prevSec = now.getSeconds();
 };
 
 tick();
 
-watch(() => props.showMs, () => {
-	if (intervalId) window.clearInterval(intervalId);
-	intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
-}, { immediate: true });
+watch(
+	() => props.showMs,
+	() => {
+		if (intervalId) window.clearInterval(intervalId);
+		intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
+	},
+	{ immediate: true }
+);
 
 onUnmounted(() => {
 	window.clearInterval(intervalId);
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 4ebf74199..667a5c754 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -1,102 +1,131 @@
 <template>
-<div
-	class="ncvczrfv"
-	:class="{ isSelected }"
-	draggable="true"
-	:title="title"
-	@click="onClick"
-	@contextmenu.stop="onContextmenu"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
->
-	<div v-if="$i?.avatarId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.avatar }}</p>
-	</div>
-	<div v-if="$i?.bannerId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.banner }}</p>
-	</div>
-	<div v-if="file.isSensitive" class="label red">
-		<img src="/client-assets/label-red.svg"/>
-		<p>{{ i18n.ts.nsfw }}</p>
-	</div>
+	<div
+		class="ncvczrfv"
+		:class="{ isSelected }"
+		draggable="true"
+		:title="title"
+		@click="onClick"
+		@contextmenu.stop="onContextmenu"
+		@dragstart="onDragstart"
+		@dragend="onDragend"
+	>
+		<div v-if="$i?.avatarId == file.id" class="label">
+			<img src="/client-assets/label.svg" />
+			<p>{{ i18n.ts.avatar }}</p>
+		</div>
+		<div v-if="$i?.bannerId == file.id" class="label">
+			<img src="/client-assets/label.svg" />
+			<p>{{ i18n.ts.banner }}</p>
+		</div>
+		<div v-if="file.isSensitive" class="label red">
+			<img src="/client-assets/label-red.svg" />
+			<p>{{ i18n.ts.nsfw }}</p>
+		</div>
 
-	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
 
-	<p class="name">
-		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
-	</p>
-</div>
+		<p class="name">
+			<span>{{
+				file.name.lastIndexOf(".") != -1
+					? file.name.substr(0, file.name.lastIndexOf("."))
+					: file.name
+			}}</span>
+			<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{
+				file.name.substr(file.name.lastIndexOf("."))
+			}}</span>
+		</p>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { computed, defineAsyncComponent, ref } from "vue";
+import * as Misskey from "calckey-js";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
-const props = withDefaults(defineProps<{
-	file: Misskey.entities.DriveFile;
-	isSelected?: boolean;
-	selectMode?: boolean;
-}>(), {
-	isSelected: false,
-	selectMode: false,
-});
+const props = withDefaults(
+	defineProps<{
+		file: Misskey.entities.DriveFile;
+		isSelected?: boolean;
+		selectMode?: boolean;
+	}>(),
+	{
+		isSelected: false,
+		selectMode: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
+	(ev: "chosen", r: Misskey.entities.DriveFile): void;
+	(ev: "dragstart"): void;
+	(ev: "dragend"): void;
 }>();
 
 const isDragging = ref(false);
 
-const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
+const title = computed(
+	() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`
+);
 
 function getMenu() {
-	return [{
-		text: i18n.ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: rename,
-	}, {
-		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-		icon: props.file.isSensitive ? 'ph-eye ph-bold ph-lg' : 'ph-eye-slash ph-bold ph-lg',
-		action: toggleSensitive,
-	}, {
-		text: i18n.ts.describeFile,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: describe,
-	}, null, {
-		text: i18n.ts.copyUrl,
-		icon: 'ph-link-simple ph-bold ph-lg',
-		action: copyUrl,
-	}, {
-		type: 'a',
-		href: props.file.url,
-		target: '_blank',
-		text: i18n.ts.download,
-		icon: 'ph-download-simple ph-bold ph-lg',
-		download: props.file.name,
-	}, null, {
-		text: i18n.ts.delete,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: deleteFile,
-	}];
+	return [
+		{
+			text: i18n.ts.rename,
+			icon: "ph-cursor-text ph-bold ph-lg",
+			action: rename,
+		},
+		{
+			text: props.file.isSensitive
+				? i18n.ts.unmarkAsSensitive
+				: i18n.ts.markAsSensitive,
+			icon: props.file.isSensitive
+				? "ph-eye ph-bold ph-lg"
+				: "ph-eye-slash ph-bold ph-lg",
+			action: toggleSensitive,
+		},
+		{
+			text: i18n.ts.describeFile,
+			icon: "ph-cursor-text ph-bold ph-lg",
+			action: describe,
+		},
+		null,
+		{
+			text: i18n.ts.copyUrl,
+			icon: "ph-link-simple ph-bold ph-lg",
+			action: copyUrl,
+		},
+		{
+			type: "a",
+			href: props.file.url,
+			target: "_blank",
+			text: i18n.ts.download,
+			icon: "ph-download-simple ph-bold ph-lg",
+			download: props.file.name,
+		},
+		null,
+		{
+			text: i18n.ts.delete,
+			icon: "ph-trash ph-bold ph-lg",
+			danger: true,
+			action: deleteFile,
+		},
+	];
 }
 
 function onClick(ev: MouseEvent) {
 	if (props.selectMode) {
-		emit('chosen', props.file);
+		emit("chosen", props.file);
 	} else {
-		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+		os.popupMenu(
+			getMenu(),
+			(ev.currentTarget ?? ev.target ?? undefined) as
+				| HTMLElement
+				| undefined
+		);
 	}
 }
 
@@ -106,17 +135,20 @@ function onContextmenu(ev: MouseEvent) {
 
 function onDragstart(ev: DragEvent) {
 	if (ev.dataTransfer) {
-		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
+		ev.dataTransfer.effectAllowed = "move";
+		ev.dataTransfer.setData(
+			_DATA_TRANSFER_DRIVE_FILE_,
+			JSON.stringify(props.file)
+		);
 	}
 	isDragging.value = true;
 
-	emit('dragstart');
+	emit("dragstart");
 }
 
 function onDragend() {
 	isDragging.value = false;
-	emit('dragend');
+	emit("dragend");
 }
 
 function rename() {
@@ -126,7 +158,7 @@ function rename() {
 		default: props.file.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/files/update', {
+		os.api("drive/files/update", {
 			fileId: props.file.id,
 			name: name,
 		});
@@ -134,27 +166,32 @@ function rename() {
 }
 
 function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-		title: i18n.ts.describeFile,
-		input: {
-			placeholder: i18n.ts.inputNewDescription,
-			default: props.file.comment != null ? props.file.comment : '',
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
+		{
+			title: i18n.ts.describeFile,
+			input: {
+				placeholder: i18n.ts.inputNewDescription,
+				default: props.file.comment != null ? props.file.comment : "",
+			},
+			image: props.file,
 		},
-		image: props.file,
-	}, {
-		done: result => {
-			if (!result || result.canceled) return;
-			let comment = result.result;
-			os.api('drive/files/update', {
-				fileId: props.file.id,
-				comment: comment.length === 0 ? null : comment,
-			});
+		{
+			done: (result) => {
+				if (!result || result.canceled) return;
+				let comment = result.result;
+				os.api("drive/files/update", {
+					fileId: props.file.id,
+					comment: comment.length === 0 ? null : comment,
+				});
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 function toggleSensitive() {
-	os.api('drive/files/update', {
+	os.api("drive/files/update", {
 		fileId: props.file.id,
 		isSensitive: !props.file.isSensitive,
 	});
@@ -171,12 +208,12 @@ function addApp() {
 */
 async function deleteFile() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
+		type: "warning",
+		text: i18n.t("driveFileDeleteConfirm", { name: props.file.name }),
 	});
 
 	if (canceled) return;
-	os.api('drive/files/delete', {
+	os.api("drive/files/delete", {
 		fileId: props.file.id,
 	});
 }
@@ -189,7 +226,8 @@ async function deleteFile() {
 	min-height: 180px;
 	border-radius: 8px;
 
-	&, * {
+	&,
+	* {
 		cursor: pointer;
 	}
 
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index a36ab2673..aff6219f5 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -1,56 +1,68 @@
 <template>
-<div
-	class="rghtznwe"
-	:class="{ draghover }"
-	draggable="true"
-	:title="title"
-	@click="onClick"
-	@contextmenu.stop="onContextmenu"
-	@mouseover="onMouseover"
-	@mouseout="onMouseout"
-	@dragover.prevent.stop="onDragover"
-	@dragenter.prevent="onDragenter"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
->
-	<p class="name">
-		<template v-if="hover"><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i></template>
-		<template v-if="!hover"><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i></template>
-		{{ folder.name }}
-	</p>
-	<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
-		{{ i18n.ts.uploadFolder }}
-	</p>
-	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
-</div>
+	<div
+		class="rghtznwe"
+		:class="{ draghover }"
+		draggable="true"
+		:title="title"
+		@click="onClick"
+		@contextmenu.stop="onContextmenu"
+		@mouseover="onMouseover"
+		@mouseout="onMouseout"
+		@dragover.prevent.stop="onDragover"
+		@dragenter.prevent="onDragenter"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
+		@dragstart="onDragstart"
+		@dragend="onDragend"
+	>
+		<p class="name">
+			<template v-if="hover"
+				><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i
+			></template>
+			<template v-if="!hover"
+				><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i
+			></template>
+			{{ folder.name }}
+		</p>
+		<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
+			{{ i18n.ts.uploadFolder }}
+		</p>
+		<button
+			v-if="selectMode"
+			class="checkbox _button"
+			:class="{ checked: isSelected }"
+			@click.prevent.stop="checkboxClicked"
+		></button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { computed, defineAsyncComponent, ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
-	folder: Misskey.entities.DriveFolder;
-	isSelected?: boolean;
-	selectMode?: boolean;
-}>(), {
-	isSelected: false,
-	selectMode: false,
-});
+const props = withDefaults(
+	defineProps<{
+		folder: Misskey.entities.DriveFolder;
+		isSelected?: boolean;
+		selectMode?: boolean;
+	}>(),
+	{
+		isSelected: false,
+		selectMode: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
-	(ev: 'move', v: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
+	(ev: "chosen", v: Misskey.entities.DriveFolder): void;
+	(ev: "move", v: Misskey.entities.DriveFolder): void;
+	(ev: "upload", file: File, folder: Misskey.entities.DriveFolder);
+	(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
+	(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
+	(ev: "dragstart"): void;
+	(ev: "dragend"): void;
 }>();
 
 const hover = ref(false);
@@ -60,11 +72,11 @@ const isDragging = ref(false);
 const title = computed(() => props.folder.name);
 
 function checkboxClicked() {
-	emit('chosen', props.folder);
+	emit("chosen", props.folder);
 }
 
 function onClick() {
-	emit('move', props.folder);
+	emit("move", props.folder);
 }
 
 function onMouseover() {
@@ -81,18 +93,20 @@ function onDragover(ev: DragEvent) {
 	// 自分自身がドラッグされている場合
 	if (isDragging.value) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 		return;
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 }
 
@@ -112,17 +126,17 @@ function onDrop(ev: DragEvent) {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
 		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
+			emit("upload", file, props.folder);
 		}
 		return;
 	}
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		emit("removeFile", file.id);
+		os.api("drive/files/update", {
 			fileId: file.id,
 			folderId: props.folder.id,
 		});
@@ -131,33 +145,35 @@ function onDrop(ev: DragEvent) {
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
 
 		// 移動先が自分自身ならreject
 		if (folder.id === props.folder.id) return;
 
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		emit("removeFolder", folder.id);
+		os.api("drive/folders/update", {
 			folderId: folder.id,
 			parentId: props.folder.id,
-		}).then(() => {
-			// noop
-		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
-					os.alert({
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
+		})
+			.then(() => {
+				// noop
+			})
+			.catch((err) => {
+				switch (err) {
+					case "detected-circular-definition":
+						os.alert({
+							title: i18n.ts.unableToProcess,
+							text: i18n.ts.circularReferenceFolder,
+						});
+						break;
+					default:
+						os.alert({
+							type: "error",
+							text: i18n.ts.somethingHappened,
+						});
+				}
+			});
 	}
 	//#endregion
 }
@@ -165,22 +181,25 @@ function onDrop(ev: DragEvent) {
 function onDragstart(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
-	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
+	ev.dataTransfer.effectAllowed = "move";
+	ev.dataTransfer.setData(
+		_DATA_TRANSFER_DRIVE_FOLDER_,
+		JSON.stringify(props.folder)
+	);
 	isDragging.value = true;
 
 	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
 	// (=あなたの子供が、ドラッグを開始しましたよ)
-	emit('dragstart');
+	emit("dragstart");
 }
 
 function onDragend() {
 	isDragging.value = false;
-	emit('dragend');
+	emit("dragend");
 }
 
 function go() {
-	emit('move', props.folder.id);
+	emit("move", props.folder.id);
 }
 
 function rename() {
@@ -190,7 +209,7 @@ function rename() {
 		default: props.folder.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: props.folder.id,
 			name: name,
 		});
@@ -198,54 +217,71 @@ function rename() {
 }
 
 function deleteFolder() {
-	os.api('drive/folders/delete', {
+	os.api("drive/folders/delete", {
 		folderId: props.folder.id,
-	}).then(() => {
-		if (defaultStore.state.uploadFolder === props.folder.id) {
-			defaultStore.set('uploadFolder', null);
-		}
-	}).catch(err => {
-		switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-				os.alert({
-					type: 'error',
-					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders,
-				});
-				break;
-			default:
-				os.alert({
-					type: 'error',
-					text: i18n.ts.unableToDelete,
-				});
-		}
-	});
+	})
+		.then(() => {
+			if (defaultStore.state.uploadFolder === props.folder.id) {
+				defaultStore.set("uploadFolder", null);
+			}
+		})
+		.catch((err) => {
+			switch (err.id) {
+				case "b0fc8a17-963c-405d-bfbc-859a487295e1":
+					os.alert({
+						type: "error",
+						title: i18n.ts.unableToDelete,
+						text: i18n.ts.hasChildFilesOrFolders,
+					});
+					break;
+				default:
+					os.alert({
+						type: "error",
+						text: i18n.ts.unableToDelete,
+					});
+			}
+		});
 }
 
 function setAsUploadFolder() {
-	defaultStore.set('uploadFolder', props.folder.id);
+	defaultStore.set("uploadFolder", props.folder.id);
 }
 
 function onContextmenu(ev: MouseEvent) {
-	os.contextMenu([{
-		text: i18n.ts.openInWindow,
-		icon: 'ph-copy ph-bold ph-lg',
-		action: () => {
-			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
-				initialFolder: props.folder,
-			}, {
-			}, 'closed');
-		},
-	}, null, {
-		text: i18n.ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: rename,
-	}, null, {
-		text: i18n.ts.delete,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: deleteFolder,
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				text: i18n.ts.openInWindow,
+				icon: "ph-copy ph-bold ph-lg",
+				action: () => {
+					os.popup(
+						defineAsyncComponent(
+							() => import("@/components/MkDriveWindow.vue")
+						),
+						{
+							initialFolder: props.folder,
+						},
+						{},
+						"closed"
+					);
+				},
+			},
+			null,
+			{
+				text: i18n.ts.rename,
+				icon: "ph-cursor-text ph-bold ph-lg",
+				action: rename,
+			},
+			null,
+			{
+				text: i18n.ts.delete,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: deleteFolder,
+			},
+		],
+		ev
+	);
 }
 </script>
 
@@ -257,7 +293,8 @@ function onContextmenu(ev: MouseEvent) {
 	background: var(--driveFolderBg);
 	border-radius: 4px;
 
-	&, * {
+	&,
+	* {
 		cursor: pointer;
 	}
 
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index 38fd76877..aa0bea192 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -1,22 +1,23 @@
 <template>
-<div class="drylbebk"
-	:class="{ draghover }"
-	@click="onClick"
-	@dragover.prevent.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
-	<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
-</div>
+	<div
+		class="drylbebk"
+		:class="{ draghover }"
+		@click="onClick"
+		@dragover.prevent.stop="onDragover"
+		@dragenter="onDragenter"
+		@dragleave="onDragleave"
+		@drop.stop="onDrop"
+	>
+		<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
+		<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	folder?: Misskey.entities.DriveFolder;
@@ -24,17 +25,21 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'move', v?: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
+	(ev: "move", v?: Misskey.entities.DriveFolder): void;
+	(
+		ev: "upload",
+		file: File,
+		folder?: Misskey.entities.DriveFolder | null
+	): void;
+	(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
+	(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
 }>();
 
 const hover = ref(false);
 const draghover = ref(false);
 
 function onClick() {
-	emit('move', props.folder);
+	emit("move", props.folder);
 }
 
 function onMouseover() {
@@ -50,17 +55,19 @@ function onDragover(ev: DragEvent) {
 
 	// このフォルダがルートかつカレントディレクトリならドロップ禁止
 	if (props.folder == null && props.parentFolder == null) {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
 	return false;
@@ -82,33 +89,33 @@ function onDrop(ev: DragEvent) {
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
 		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
+			emit("upload", file, props.folder);
 		}
 		return;
 	}
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
+		emit("removeFile", file.id);
+		os.api("drive/files/update", {
 			fileId: file.id,
-			folderId: props.folder ? props.folder.id : null
+			folderId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
 		// 移動先が自分自身ならreject
 		if (props.folder && folder.id === props.folder.id) return;
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
+		emit("removeFolder", folder.id);
+		os.api("drive/folders/update", {
 			folderId: folder.id,
-			parentId: props.folder ? props.folder.id : null
+			parentId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 24c400c3e..d52e796e5 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -1,121 +1,181 @@
 <template>
-<div class="yfudmmck">
-	<nav>
-		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<XNavFolder
-				:class="{ current: folder == null }"
-				:parent-folder="folder"
-				@move="move"
-				@upload="upload"
-				@removeFile="removeFile"
-				@removeFolder="removeFolder"
-			/>
-			<template v-for="f in hierarchyFolders">
-				<span class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
+	<div class="yfudmmck">
+		<nav>
+			<div class="path" @contextmenu.prevent.stop="() => {}">
 				<XNavFolder
-					:folder="f"
+					:class="{ current: folder == null }"
 					:parent-folder="folder"
 					@move="move"
 					@upload="upload"
 					@removeFile="removeFile"
 					@removeFolder="removeFolder"
 				/>
-			</template>
-			<span v-if="folder != null" class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
-			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
+				<template v-for="f in hierarchyFolders">
+					<span class="separator"
+						><i class="ph-caret-right ph-bold ph-lg"></i
+					></span>
+					<XNavFolder
+						:folder="f"
+						:parent-folder="folder"
+						@move="move"
+						@upload="upload"
+						@removeFile="removeFile"
+						@removeFolder="removeFolder"
+					/>
+				</template>
+				<span v-if="folder != null" class="separator"
+					><i class="ph-caret-right ph-bold ph-lg"></i
+				></span>
+				<span v-if="folder != null" class="folder current">{{
+					folder.name
+				}}</span>
+			</div>
+			<button class="menu _button" @click="showMenu">
+				<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+			</button>
+		</nav>
+		<div
+			ref="main"
+			class="main"
+			:class="{ uploading: uploadings.length > 0, fetching }"
+			@dragover.prevent.stop="onDragover"
+			@dragenter="onDragenter"
+			@dragleave="onDragleave"
+			@drop.prevent.stop="onDrop"
+			@contextmenu.stop="onContextmenu"
+		>
+			<div ref="contents" class="contents">
+				<div
+					v-show="folders.length > 0"
+					ref="foldersContainer"
+					class="folders"
+				>
+					<XFolder
+						v-for="(f, i) in folders"
+						:key="f.id"
+						v-anim="i"
+						class="folder"
+						:folder="f"
+						:select-mode="select === 'folder'"
+						:is-selected="
+							selectedFolders.some((x) => x.id === f.id)
+						"
+						@chosen="chooseFolder"
+						@move="move"
+						@upload="upload"
+						@removeFile="removeFile"
+						@removeFolder="removeFolder"
+						@dragstart="isDragSource = true"
+						@dragend="isDragSource = false"
+					/>
+					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
+					<MkButton v-if="moreFolders" ref="moreFolders">{{
+						i18n.ts.loadMore
+					}}</MkButton>
+				</div>
+				<div
+					v-show="files.length > 0"
+					ref="filesContainer"
+					class="files"
+				>
+					<XFile
+						v-for="(file, i) in files"
+						:key="file.id"
+						v-anim="i"
+						class="file"
+						:file="file"
+						:select-mode="select === 'file'"
+						:is-selected="
+							selectedFiles.some((x) => x.id === file.id)
+						"
+						@chosen="chooseFile"
+						@dragstart="isDragSource = true"
+						@dragend="isDragSource = false"
+					/>
+					<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
+					<MkButton
+						v-show="moreFiles"
+						ref="loadMoreFiles"
+						@click="fetchMoreFiles"
+						>{{ i18n.ts.loadMore }}</MkButton
+					>
+				</div>
+				<div
+					v-if="files.length == 0 && folders.length == 0 && !fetching"
+					class="empty"
+				>
+					<p v-if="draghover">{{ i18n.t("empty-draghover") }}</p>
+					<p v-if="!draghover && folder == null">
+						<strong>{{ i18n.ts.emptyDrive }}</strong
+						><br />{{ i18n.t("empty-drive-description") }}
+					</p>
+					<p v-if="!draghover && folder != null">
+						{{ i18n.ts.emptyFolder }}
+					</p>
+				</div>
+			</div>
+			<MkLoading v-if="fetching" />
 		</div>
-		<button class="menu _button" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
-	</nav>
-	<div
-		ref="main" class="main"
-		:class="{ uploading: uploadings.length > 0, fetching }"
-		@dragover.prevent.stop="onDragover"
-		@dragenter="onDragenter"
-		@dragleave="onDragleave"
-		@drop.prevent.stop="onDrop"
-		@contextmenu.stop="onContextmenu"
-	>
-		<div ref="contents" class="contents">
-			<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
-				<XFolder
-					v-for="(f, i) in folders"
-					:key="f.id"
-					v-anim="i"
-					class="folder"
-					:folder="f"
-					:select-mode="select === 'folder'"
-					:is-selected="selectedFolders.some(x => x.id === f.id)"
-					@chosen="chooseFolder"
-					@move="move"
-					@upload="upload"
-					@removeFile="removeFile"
-					@removeFolder="removeFolder"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-			<div v-show="files.length > 0" ref="filesContainer" class="files">
-				<XFile
-					v-for="(file, i) in files"
-					:key="file.id"
-					v-anim="i"
-					class="file"
-					:file="file"
-					:select-mode="select === 'file'"
-					:is-selected="selectedFiles.some(x => x.id === file.id)"
-					@chosen="chooseFile"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-			<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
-				<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
-				<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
-				<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
-			</div>
-		</div>
-		<MkLoading v-if="fetching"/>
+		<div v-if="draghover" class="dropzone"></div>
+		<input
+			ref="fileInput"
+			type="file"
+			accept="*/*"
+			multiple
+			tabindex="-1"
+			@change="onChangeFileInput"
+		/>
 	</div>
-	<div v-if="draghover" class="dropzone"></div>
-	<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import * as Misskey from 'calckey-js';
-import MkButton from './MkButton.vue';
-import XNavFolder from '@/components/MkDrive.navFolder.vue';
-import XFolder from '@/components/MkDrive.folder.vue';
-import XFile from '@/components/MkDrive.file.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { uploadFile, uploads } from '@/scripts/upload';
+import {
+	markRaw,
+	nextTick,
+	onActivated,
+	onBeforeUnmount,
+	onMounted,
+	ref,
+	watch,
+} from "vue";
+import * as Misskey from "calckey-js";
+import MkButton from "./MkButton.vue";
+import XNavFolder from "@/components/MkDrive.navFolder.vue";
+import XFolder from "@/components/MkDrive.folder.vue";
+import XFile from "@/components/MkDrive.file.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { uploadFile, uploads } from "@/scripts/upload";
 
-const props = withDefaults(defineProps<{
-	initialFolder?: Misskey.entities.DriveFolder;
-	type?: string;
-	multiple?: boolean;
-	select?: 'file' | 'folder' | null;
-}>(), {
-	multiple: false,
-	select: null,
-});
+const props = withDefaults(
+	defineProps<{
+		initialFolder?: Misskey.entities.DriveFolder;
+		type?: string;
+		multiple?: boolean;
+		select?: "file" | "folder" | null;
+	}>(),
+	{
+		multiple: false,
+		select: null,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
-	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
-	(ev: 'move-root'): void;
-	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
-	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
+	(
+		ev: "selected",
+		v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder
+	): void;
+	(
+		ev: "change-selection",
+		v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]
+	): void;
+	(ev: "move-root"): void;
+	(ev: "cd", v: Misskey.entities.DriveFolder | null): void;
+	(ev: "open-folder", v: Misskey.entities.DriveFolder): void;
 }>();
 
 const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
@@ -130,7 +190,7 @@ const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const uploadings = uploads;
-const connection = stream.useChannel('drive');
+const connection = stream.useChannel("drive");
 const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
 
 // ドロップされようとしているか
@@ -143,10 +203,14 @@ const isDragSource = ref(false);
 const fetching = ref(true);
 
 const ilFilesObserver = new IntersectionObserver(
-	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
+	(entries) =>
+		entries.some((entry) => entry.isIntersecting) &&
+		!fetching.value &&
+		moreFiles.value &&
+		fetchMoreFiles()
 );
 
-watch(folder, () => emit('cd', folder.value));
+watch(folder, () => emit("cd", folder.value));
 
 function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
 	addFile(file, true);
@@ -165,11 +229,15 @@ function onStreamDriveFileDeleted(fileId: string) {
 	removeFile(fileId);
 }
 
-function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
+function onStreamDriveFolderCreated(
+	createdFolder: Misskey.entities.DriveFolder
+) {
 	addFolder(createdFolder, true);
 }
 
-function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
+function onStreamDriveFolderUpdated(
+	updatedFolder: Misskey.entities.DriveFolder
+) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== updatedFolder.parentId) {
 		removeFolder(updatedFolder);
@@ -188,17 +256,19 @@ function onDragover(ev: DragEvent): any {
 	// ドラッグ元が自分自身の所有するアイテムだったら
 	if (isDragSource.value) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 		return;
 	}
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	const isDriveFolder =
+		ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 
 	return false;
@@ -227,11 +297,11 @@ function onDrop(ev: DragEvent): any {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		if (files.value.some(f => f.id === file.id)) return;
+		if (files.value.some((f) => f.id === file.id)) return;
 		removeFile(file.id);
-		os.api('drive/files/update', {
+		os.api("drive/files/update", {
 			fileId: file.id,
 			folderId: folder.value ? folder.value.id : null,
 		});
@@ -240,33 +310,35 @@ function onDrop(ev: DragEvent): any {
 
 	//#region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
+	if (driveFolder != null && driveFolder !== "") {
 		const droppedFolder = JSON.parse(driveFolder);
 
 		// 移動先が自分自身ならreject
 		if (folder.value && droppedFolder.id === folder.value.id) return false;
-		if (folders.value.some(f => f.id === droppedFolder.id)) return false;
+		if (folders.value.some((f) => f.id === droppedFolder.id)) return false;
 		removeFolder(droppedFolder.id);
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: droppedFolder.id,
 			parentId: folder.value ? folder.value.id : null,
-		}).then(() => {
-			// noop
-		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
-					os.alert({
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
+		})
+			.then(() => {
+				// noop
+			})
+			.catch((err) => {
+				switch (err) {
+					case "detected-circular-definition":
+						os.alert({
+							title: i18n.ts.unableToProcess,
+							text: i18n.ts.circularReferenceFolder,
+						});
+						break;
+					default:
+						os.alert({
+							type: "error",
+							text: i18n.ts.somethingHappened,
+						});
+				}
+			});
 	}
 	//#endregion
 }
@@ -278,11 +350,11 @@ function selectLocalFile() {
 function urlUpload() {
 	os.inputText({
 		title: i18n.ts.uploadFromUrl,
-		type: 'url',
+		type: "url",
 		placeholder: i18n.ts.uploadFromUrlDescription,
 	}).then(({ canceled, result: url }) => {
 		if (canceled || !url) return;
-		os.api('drive/files/upload-from-url', {
+		os.api("drive/files/upload-from-url", {
 			url: url,
 			folderId: folder.value ? folder.value.id : undefined,
 		});
@@ -300,10 +372,10 @@ function createFolder() {
 		placeholder: i18n.ts.folderName,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/create', {
+		os.api("drive/folders/create", {
 			name: name,
 			parentId: folder.value ? folder.value.id : undefined,
-		}).then(createdFolder => {
+		}).then((createdFolder) => {
 			addFolder(createdFolder, true);
 		});
 	});
@@ -316,10 +388,10 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 		default: folderToRename.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
-		os.api('drive/folders/update', {
+		os.api("drive/folders/update", {
 			folderId: folderToRename.id,
 			name: name,
-		}).then(updatedFolder => {
+		}).then((updatedFolder) => {
 			// FIXME: 画面を更新するために自分自身に移動
 			move(updatedFolder);
 		});
@@ -327,27 +399,29 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 }
 
 function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
-	os.api('drive/folders/delete', {
+	os.api("drive/folders/delete", {
 		folderId: folderToDelete.id,
-	}).then(() => {
-		// 削除時に親フォルダに移動
-		move(folderToDelete.parentId);
-	}).catch(err => {
-		switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-				os.alert({
-					type: 'error',
-					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders,
-				});
-				break;
-			default:
-				os.alert({
-					type: 'error',
-					text: i18n.ts.unableToDelete,
-				});
-		}
-	});
+	})
+		.then(() => {
+			// 削除時に親フォルダに移動
+			move(folderToDelete.parentId);
+		})
+		.catch((err) => {
+			switch (err.id) {
+				case "b0fc8a17-963c-405d-bfbc-859a487295e1":
+					os.alert({
+						type: "error",
+						title: i18n.ts.unableToDelete,
+						text: i18n.ts.hasChildFilesOrFolders,
+					});
+					break;
+				default:
+					os.alert({
+						type: "error",
+						text: i18n.ts.unableToDelete,
+					});
+			}
+		});
 }
 
 function onChangeFileInput() {
@@ -357,46 +431,62 @@ function onChangeFileInput() {
 	}
 }
 
-function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
-	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
+function upload(
+	file: File,
+	folderToUpload?: Misskey.entities.DriveFolder | null
+) {
+	uploadFile(
+		file,
+		folderToUpload && typeof folderToUpload === "object"
+			? folderToUpload.id
+			: null,
+		undefined,
+		keepOriginal.value
+	).then((res) => {
 		addFile(res, true);
 	});
 }
 
 function chooseFile(file: Misskey.entities.DriveFile) {
-	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
+	const isAlreadySelected = selectedFiles.value.some((f) => f.id === file.id);
 	if (props.multiple) {
 		if (isAlreadySelected) {
-			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+			selectedFiles.value = selectedFiles.value.filter(
+				(f) => f.id !== file.id
+			);
 		} else {
 			selectedFiles.value.push(file);
 		}
-		emit('change-selection', selectedFiles.value);
+		emit("change-selection", selectedFiles.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', file);
+			emit("selected", file);
 		} else {
 			selectedFiles.value = [file];
-			emit('change-selection', [file]);
+			emit("change-selection", [file]);
 		}
 	}
 }
 
 function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
-	const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
+	const isAlreadySelected = selectedFolders.value.some(
+		(f) => f.id === folderToChoose.id
+	);
 	if (props.multiple) {
 		if (isAlreadySelected) {
-			selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
+			selectedFolders.value = selectedFolders.value.filter(
+				(f) => f.id !== folderToChoose.id
+			);
 		} else {
 			selectedFolders.value.push(folderToChoose);
 		}
-		emit('change-selection', selectedFolders.value);
+		emit("change-selection", selectedFolders.value);
 	} else {
 		if (isAlreadySelected) {
-			emit('selected', folderToChoose);
+			emit("selected", folderToChoose);
 		} else {
 			selectedFolders.value = [folderToChoose];
-			emit('change-selection', [folderToChoose]);
+			emit("change-selection", [folderToChoose]);
 		}
 	}
 }
@@ -405,26 +495,26 @@ function move(target?: Misskey.entities.DriveFolder) {
 	if (!target) {
 		goRoot();
 		return;
-	} else if (typeof target === 'object') {
+	} else if (typeof target === "object") {
 		target = target.id;
 	}
 
 	fetching.value = true;
 
-	os.api('drive/folders/show', {
+	os.api("drive/folders/show", {
 		folderId: target,
-	}).then(folderToMove => {
+	}).then((folderToMove) => {
 		folder.value = folderToMove;
 		hierarchyFolders.value = [];
 
-		const dive = folderToDive => {
+		const dive = (folderToDive) => {
 			hierarchyFolders.value.unshift(folderToDive);
 			if (folderToDive.parent) dive(folderToDive.parent);
 		};
 
 		if (folderToMove.parent) dive(folderToMove.parent);
 
-		emit('open-folder', folderToMove);
+		emit("open-folder", folderToMove);
 		fetch();
 	});
 }
@@ -433,8 +523,8 @@ function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== folderToAdd.parentId) return;
 
-	if (folders.value.some(f => f.id === folderToAdd.id)) {
-		const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
+	if (folders.value.some((f) => f.id === folderToAdd.id)) {
+		const exist = folders.value.map((f) => f.id).indexOf(folderToAdd.id);
 		folders.value[exist] = folderToAdd;
 		return;
 	}
@@ -450,8 +540,8 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 	const current = folder.value ? folder.value.id : null;
 	if (current !== fileToAdd.folderId) return;
 
-	if (files.value.some(f => f.id === fileToAdd.id)) {
-		const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
+	if (files.value.some((f) => f.id === fileToAdd.id)) {
+		const exist = files.value.map((f) => f.id).indexOf(fileToAdd.id);
 		files.value[exist] = fileToAdd;
 		return;
 	}
@@ -464,13 +554,14 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
 }
 
 function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
-	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
-	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
+	const folderIdToRemove =
+		typeof folderToRemove === "object" ? folderToRemove.id : folderToRemove;
+	folders.value = folders.value.filter((f) => f.id !== folderIdToRemove);
 }
 
 function removeFile(file: Misskey.entities.DriveFile | string) {
-	const fileId = typeof file === 'object' ? file.id : file;
-	files.value = files.value.filter(f => f.id !== fileId);
+	const fileId = typeof file === "object" ? file.id : file;
+	files.value = files.value.filter((f) => f.id !== fileId);
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -495,7 +586,7 @@ function goRoot() {
 
 	folder.value = null;
 	hierarchyFolders.value = [];
-	emit('move-root');
+	emit("move-root");
 	fetch();
 }
 
@@ -509,30 +600,37 @@ async function fetch() {
 	const foldersMax = 30;
 	const filesMax = 30;
 
-	const foldersPromise = os.api('drive/folders', {
-		folderId: folder.value ? folder.value.id : null,
-		limit: foldersMax + 1,
-	}).then(fetchedFolders => {
-		if (fetchedFolders.length === foldersMax + 1) {
-			moreFolders.value = true;
-			fetchedFolders.pop();
-		}
-		return fetchedFolders;
-	});
+	const foldersPromise = os
+		.api("drive/folders", {
+			folderId: folder.value ? folder.value.id : null,
+			limit: foldersMax + 1,
+		})
+		.then((fetchedFolders) => {
+			if (fetchedFolders.length === foldersMax + 1) {
+				moreFolders.value = true;
+				fetchedFolders.pop();
+			}
+			return fetchedFolders;
+		});
 
-	const filesPromise = os.api('drive/files', {
-		folderId: folder.value ? folder.value.id : null,
-		type: props.type,
-		limit: filesMax + 1,
-	}).then(fetchedFiles => {
-		if (fetchedFiles.length === filesMax + 1) {
-			moreFiles.value = true;
-			fetchedFiles.pop();
-		}
-		return fetchedFiles;
-	});
+	const filesPromise = os
+		.api("drive/files", {
+			folderId: folder.value ? folder.value.id : null,
+			type: props.type,
+			limit: filesMax + 1,
+		})
+		.then((fetchedFiles) => {
+			if (fetchedFiles.length === filesMax + 1) {
+				moreFiles.value = true;
+				fetchedFiles.pop();
+			}
+			return fetchedFiles;
+		});
 
-	const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
+	const [fetchedFolders, fetchedFiles] = await Promise.all([
+		foldersPromise,
+		filesPromise,
+	]);
 
 	for (const x of fetchedFolders) appendFolder(x);
 	for (const x of fetchedFiles) appendFile(x);
@@ -546,12 +644,12 @@ function fetchMoreFiles() {
 	const max = 30;
 
 	// ファイル一覧取得
-	os.api('drive/files', {
+	os.api("drive/files", {
 		folderId: folder.value ? folder.value.id : null,
 		type: props.type,
 		untilId: files.value[files.value.length - 1].id,
 		limit: max + 1,
-	}).then(files => {
+	}).then((files) => {
 		if (files.length === max + 1) {
 			moreFiles.value = true;
 			files.pop();
@@ -564,41 +662,71 @@ function fetchMoreFiles() {
 }
 
 function getMenu() {
-	return [{
-		type: 'switch',
-		text: i18n.ts.keepOriginalUploading,
-		ref: keepOriginal,
-	}, null, {
-		text: i18n.ts.addFile,
-		type: 'label',
-	}, {
-		text: i18n.ts.upload,
-		icon: 'ph-upload-simple ph-bold ph-lg',
-		action: () => { selectLocalFile(); },
-	}, {
-		text: i18n.ts.fromUrl,
-		icon: 'ph-link-simple ph-bold ph-lg',
-		action: () => { urlUpload(); },
-	}, null, {
-		text: folder.value ? folder.value.name : i18n.ts.drive,
-		type: 'label',
-	}, folder.value ? {
-		text: i18n.ts.renameFolder,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: () => { renameFolder(folder.value); },
-	} : undefined, folder.value ? {
-		text: i18n.ts.deleteFolder,
-		icon: 'ph-trash ph-bold ph-lg',
-		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
-	} : undefined, {
-		text: i18n.ts.createFolder,
-		icon: 'ph-folder-notch-plus ph-bold ph-lg',
-		action: () => { createFolder(); },
-	}];
+	return [
+		{
+			type: "switch",
+			text: i18n.ts.keepOriginalUploading,
+			ref: keepOriginal,
+		},
+		null,
+		{
+			text: i18n.ts.addFile,
+			type: "label",
+		},
+		{
+			text: i18n.ts.upload,
+			icon: "ph-upload-simple ph-bold ph-lg",
+			action: () => {
+				selectLocalFile();
+			},
+		},
+		{
+			text: i18n.ts.fromUrl,
+			icon: "ph-link-simple ph-bold ph-lg",
+			action: () => {
+				urlUpload();
+			},
+		},
+		null,
+		{
+			text: folder.value ? folder.value.name : i18n.ts.drive,
+			type: "label",
+		},
+		folder.value
+			? {
+					text: i18n.ts.renameFolder,
+					icon: "ph-cursor-text ph-bold ph-lg",
+					action: () => {
+						renameFolder(folder.value);
+					},
+			  }
+			: undefined,
+		folder.value
+			? {
+					text: i18n.ts.deleteFolder,
+					icon: "ph-trash ph-bold ph-lg",
+					action: () => {
+						deleteFolder(
+							folder.value as Misskey.entities.DriveFolder
+						);
+					},
+			  }
+			: undefined,
+		{
+			text: i18n.ts.createFolder,
+			icon: "ph-folder-notch-plus ph-bold ph-lg",
+			action: () => {
+				createFolder();
+			},
+		},
+	];
 }
 
 function showMenu(ev: MouseEvent) {
-	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	os.popupMenu(
+		getMenu(),
+		(ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined
+	);
 }
 
 function onContextmenu(ev: MouseEvent) {
@@ -612,12 +740,12 @@ onMounted(() => {
 		});
 	}
 
-	connection.on('fileCreated', onStreamDriveFileCreated);
-	connection.on('fileUpdated', onStreamDriveFileUpdated);
-	connection.on('fileDeleted', onStreamDriveFileDeleted);
-	connection.on('folderCreated', onStreamDriveFolderCreated);
-	connection.on('folderUpdated', onStreamDriveFolderUpdated);
-	connection.on('folderDeleted', onStreamDriveFolderDeleted);
+	connection.on("fileCreated", onStreamDriveFileCreated);
+	connection.on("fileUpdated", onStreamDriveFileUpdated);
+	connection.on("fileDeleted", onStreamDriveFileDeleted);
+	connection.on("folderCreated", onStreamDriveFolderCreated);
+	connection.on("folderUpdated", onStreamDriveFolderUpdated);
+	connection.on("folderDeleted", onStreamDriveFolderDeleted);
 
 	if (props.initialFolder) {
 		move(props.initialFolder);
@@ -656,7 +784,8 @@ onBeforeUnmount(() => {
 		font-size: 0.9em;
 		box-shadow: 0 1px 0 var(--divider);
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -714,7 +843,8 @@ onBeforeUnmount(() => {
 		overflow: auto;
 		padding: var(--margin);
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -735,7 +865,6 @@ onBeforeUnmount(() => {
 		}
 
 		> .contents {
-
 			> .folders,
 			> .files {
 				display: flex;
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index da8137774..39150c10c 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -1,23 +1,48 @@
 <template>
-<div ref="thumbnail" class="zdjebgpv">
-	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
-	<i v-else-if="is === 'image'" class="ph-file-image ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'video'" class="ph-file-video ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg icon"></i>
-	<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg icon"></i>
-	<i v-else class="ph-file ph-bold ph-lg icon"></i>
+	<div ref="thumbnail" class="zdjebgpv">
+		<ImgWithBlurhash
+			v-if="isThumbnailAvailable"
+			:hash="file.blurhash"
+			:src="file.thumbnailUrl"
+			:alt="file.name"
+			:title="file.name"
+			:cover="fit !== 'contain'"
+		/>
+		<i
+			v-else-if="is === 'image'"
+			class="ph-file-image ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'video'"
+			class="ph-file-video ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'audio' || is === 'midi'"
+			class="ph-file-audio ph-bold ph-lg icon"
+		></i>
+		<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
+		<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
+		<i
+			v-else-if="is === 'textfile'"
+			class="ph-file-text ph-bold ph-lg icon"
+		></i>
+		<i
+			v-else-if="is === 'archive'"
+			class="ph-file-zip ph-bold ph-lg icon"
+		></i>
+		<i v-else class="ph-file ph-bold ph-lg icon"></i>
 
-	<i v-if="isThumbnailAvailable && is === 'video'" class="ph-file-video ph-bold ph-lg icon-sub"></i>
-</div>
+		<i
+			v-if="isThumbnailAvailable && is === 'video'"
+			class="ph-file-video ph-bold ph-lg icon-sub"
+		></i>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type * as Misskey from 'calckey-js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { computed } from "vue";
+import type * as Misskey from "calckey-js";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;
@@ -25,30 +50,33 @@ const props = defineProps<{
 }>();
 
 const is = computed(() => {
-	if (props.file.type.startsWith('image/')) return 'image';
-	if (props.file.type.startsWith('video/')) return 'video';
-	if (props.file.type === 'audio/midi') return 'midi';
-	if (props.file.type.startsWith('audio/')) return 'audio';
-	if (props.file.type.endsWith('/csv')) return 'csv';
-	if (props.file.type.endsWith('/pdf')) return 'pdf';
-	if (props.file.type.startsWith('text/')) return 'textfile';
-	if ([
-		'application/zip',
-		'application/x-cpio',
-		'application/x-bzip',
-		'application/x-bzip2',
-		'application/java-archive',
-		'application/x-rar-compressed',
-		'application/x-tar',
-		'application/gzip',
-		'application/x-7z-compressed',
-	].some(archiveType => archiveType === props.file.type)) return 'archive';
-	return 'unknown';
+	if (props.file.type.startsWith("image/")) return "image";
+	if (props.file.type.startsWith("video/")) return "video";
+	if (props.file.type === "audio/midi") return "midi";
+	if (props.file.type.startsWith("audio/")) return "audio";
+	if (props.file.type.endsWith("/csv")) return "csv";
+	if (props.file.type.endsWith("/pdf")) return "pdf";
+	if (props.file.type.startsWith("text/")) return "textfile";
+	if (
+		[
+			"application/zip",
+			"application/x-cpio",
+			"application/x-bzip",
+			"application/x-bzip2",
+			"application/java-archive",
+			"application/x-rar-compressed",
+			"application/x-tar",
+			"application/gzip",
+			"application/x-7z-compressed",
+		].some((archiveType) => archiveType === props.file.type)
+	)
+		return "archive";
+	return "unknown";
 });
 
 const isThumbnailAvailable = computed(() => {
 	return props.file.thumbnailUrl
-		? (is.value === 'image' as const || is.value === 'video')
+		? is.value === ("image" as const) || is.value === "video"
 		: false;
 });
 </script>
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
index b9abcf7ec..6b419e253 100644
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -1,41 +1,61 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="800"
-	:height="500"
-	:with-ok-button="true"
-	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="emit('closed')"
->
-	<template #header>
-		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
-	</template>
-	<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
-</XModalWindow>
+	<XModalWindow
+		ref="dialog"
+		:width="800"
+		:height="500"
+		:with-ok-button="true"
+		:ok-button-disabled="type === 'file' && selected.length === 0"
+		@click="cancel()"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="emit('closed')"
+	>
+		<template #header>
+			{{
+				multiple
+					? type === "file"
+						? i18n.ts.selectFiles
+						: i18n.ts.selectFolders
+					: type === "file"
+					? i18n.ts.selectFile
+					: i18n.ts.selectFolder
+			}}
+			<span
+				v-if="selected.length > 0"
+				style="margin-left: 8px; opacity: 0.5"
+				>({{ number(selected.length) }})</span
+			>
+		</template>
+		<XDrive
+			:multiple="multiple"
+			:select="type"
+			@changeSelection="onChangeSelection"
+			@selected="ok()"
+		/>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import XDrive from "@/components/MkDrive.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
-withDefaults(defineProps<{
-	type?: 'file' | 'folder';
-	multiple: boolean;
-}>(), {
-	type: 'file',
-});
+withDefaults(
+	defineProps<{
+		type?: "file" | "folder";
+		multiple: boolean;
+	}>(),
+	{
+		type: "file",
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
-	(ev: 'closed'): void;
+	(ev: "done", r?: Misskey.entities.DriveFile[]): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = ref<InstanceType<typeof XModalWindow>>();
@@ -43,12 +63,12 @@ const dialog = ref<InstanceType<typeof XModalWindow>>();
 const selected = ref<Misskey.entities.DriveFile[]>([]);
 
 function ok() {
-	emit('done', selected.value);
+	emit("done", selected.value);
 	dialog.value?.close();
 }
 
 function cancel() {
-	emit('done');
+	emit("done");
 	dialog.value?.close();
 }
 
diff --git a/packages/client/src/components/MkDriveWindow.vue b/packages/client/src/components/MkDriveWindow.vue
index e5e7ed540..9b94e67f8 100644
--- a/packages/client/src/components/MkDriveWindow.vue
+++ b/packages/client/src/components/MkDriveWindow.vue
@@ -1,30 +1,30 @@
 <template>
-<XWindow
-	ref="window"
-	:initial-width="800"
-	:initial-height="500"
-	:can-resize="true"
-	@closed="emit('closed')"
->
-	<template #header>
-		{{ i18n.ts.drive }}
-	</template>
-	<XDrive :initial-folder="initialFolder"/>
-</XWindow>
+	<XWindow
+		ref="window"
+		:initial-width="800"
+		:initial-height="500"
+		:can-resize="true"
+		@closed="emit('closed')"
+	>
+		<template #header>
+			{{ i18n.ts.drive }}
+		</template>
+		<XDrive :initial-folder="initialFolder" />
+	</XWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as Misskey from 'calckey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XWindow from '@/components/MkWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as Misskey from "calckey-js";
+import XDrive from "@/components/MkDrive.vue";
+import XWindow from "@/components/MkWindow.vue";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	initialFolder?: Misskey.entities.DriveFolder;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index c9aea124b..12e869e04 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -1,24 +1,32 @@
 <template>
-<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
-<section>
-	<header class="_acrylic" @click="shown = !shown">
-		<i class="toggle ph-fw ph-lg" :class="shown ? 'ph-caret-down-bold ph-lg' : 'ph-caret-up ph-bold ph-lg'"></i> <slot></slot> ({{ emojis.length }})
-	</header>
-	<div v-if="shown" class="body">
-		<button
-			v-for="emoji in emojis"
-			:key="emoji"
-			class="_button item"
-			@click="emit('chosen', emoji, $event)"
-		>
-			<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
-		</button>
-	</div>
-</section>
+	<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
+	<section>
+		<header class="_acrylic" @click="shown = !shown">
+			<i
+				class="toggle ph-fw ph-lg"
+				:class="
+					shown
+						? 'ph-caret-down-bold ph-lg'
+						: 'ph-caret-up ph-bold ph-lg'
+				"
+			></i>
+			<slot></slot> ({{ emojis.length }})
+		</header>
+		<div v-if="shown" class="body">
+			<button
+				v-for="emoji in emojis"
+				:key="emoji"
+				class="_button item"
+				@click="emit('chosen', emoji, $event)"
+			>
+				<MkEmoji class="emoji" :emoji="emoji" :normal="true" />
+			</button>
+		</div>
+	</section>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const props = defineProps<{
 	emojis: string[];
@@ -26,11 +34,10 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: string, event: MouseEvent): void;
+	(ev: "chosen", v: string, event: MouseEvent): void;
 }>();
 
 const shown = ref(!!props.initialShown);
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 2790965db..a22006951 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -1,107 +1,191 @@
 <template>
-<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
-	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
-	<div ref="emojis" class="emojis">
-		<section class="result">
-			<div v-if="searchResultCustom.length > 0" class="body">
-				<button
-					v-for="emoji in searchResultCustom"
-					:key="emoji.id"
-					class="_button item"
-					:title="emoji.name"
-					tabindex="0"
-					@click="chosen(emoji, $event)"
-				>
-					<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
-					<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
-				</button>
-			</div>
-			<div v-if="searchResultUnicode.length > 0" class="body">
-				<button
-					v-for="emoji in searchResultUnicode"
-					:key="emoji.name"
-					class="_button item"
-					:title="emoji.name"
-					tabindex="0"
-					@click="chosen(emoji, $event)"
-				>
-					<MkEmoji class="emoji" :emoji="emoji.char"/>
-				</button>
-			</div>
-		</section>
-
-		<div v-if="tab === 'index'" class="group index">
-			<section v-if="showPinned">
-				<div class="body">
+	<div
+		class="omfetrab"
+		:class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]"
+		:style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
+	>
+		<input
+			ref="search"
+			v-model.trim="q"
+			class="search"
+			data-prevent-emoji-insert
+			:class="{ filled: q != null && q != '' }"
+			:placeholder="i18n.ts.search"
+			type="search"
+			@paste.stop="paste"
+			@keyup.enter="done()"
+		/>
+		<div ref="emojis" class="emojis">
+			<section class="result">
+				<div v-if="searchResultCustom.length > 0" class="body">
 					<button
-						v-for="emoji in pinned"
-						:key="emoji"
+						v-for="emoji in searchResultCustom"
+						:key="emoji.id"
 						class="_button item"
+						:title="emoji.name"
 						tabindex="0"
 						@click="chosen(emoji, $event)"
 					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+						<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
+						<img
+							class="emoji"
+							:src="
+								disableShowingAnimatedImages
+									? getStaticImageUrl(emoji.url)
+									: emoji.url
+							"
+						/>
+					</button>
+				</div>
+				<div v-if="searchResultUnicode.length > 0" class="body">
+					<button
+						v-for="emoji in searchResultUnicode"
+						:key="emoji.name"
+						class="_button item"
+						:title="emoji.name"
+						tabindex="0"
+						@click="chosen(emoji, $event)"
+					>
+						<MkEmoji class="emoji" :emoji="emoji.char" />
 					</button>
 				</div>
 			</section>
 
-			<section>
-				<header class="_acrylic"><i class="ph-alarm ph-bold ph-fw ph-lg"></i> {{ i18n.ts.recentUsed }}</header>
-				<div class="body">
-					<button
-						v-for="emoji in recentlyUsedEmojis"
-						:key="emoji"
-						class="_button item"
-						@click="chosen(emoji, $event)"
-					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
-					</button>
-				</div>
-			</section>
+			<div v-if="tab === 'index'" class="group index">
+				<section v-if="showPinned">
+					<div class="body">
+						<button
+							v-for="emoji in pinned"
+							:key="emoji"
+							class="_button item"
+							tabindex="0"
+							@click="chosen(emoji, $event)"
+						>
+							<MkEmoji
+								class="emoji"
+								:emoji="emoji"
+								:normal="true"
+							/>
+						</button>
+					</div>
+				</section>
+
+				<section>
+					<header class="_acrylic">
+						<i class="ph-alarm ph-bold ph-fw ph-lg"></i>
+						{{ i18n.ts.recentUsed }}
+					</header>
+					<div class="body">
+						<button
+							v-for="emoji in recentlyUsedEmojis"
+							:key="emoji"
+							class="_button item"
+							@click="chosen(emoji, $event)"
+						>
+							<MkEmoji
+								class="emoji"
+								:emoji="emoji"
+								:normal="true"
+							/>
+						</button>
+					</div>
+				</section>
+			</div>
+			<div v-once class="group">
+				<header>{{ i18n.ts.customEmojis }}</header>
+				<XSection
+					v-for="category in customEmojiCategories"
+					:key="'custom:' + category"
+					:initial-shown="false"
+					:emojis="
+						customEmojis
+							.filter((e) => e.category === category)
+							.map((e) => ':' + e.name + ':')
+					"
+					@chosen="chosen"
+					>{{ category || i18n.ts.other }}</XSection
+				>
+			</div>
+			<div v-once class="group">
+				<header>{{ i18n.ts.emoji }}</header>
+				<XSection
+					v-for="category in categories"
+					:key="category"
+					:emojis="
+						emojilist
+							.filter((e) => e.category === category)
+							.map((e) => e.char)
+					"
+					@chosen="chosen"
+					>{{ category }}</XSection
+				>
+			</div>
 		</div>
-		<div v-once class="group">
-			<header>{{ i18n.ts.customEmojis }}</header>
-			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
-		</div>
-		<div v-once class="group">
-			<header>{{ i18n.ts.emoji }}</header>
-			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
+		<div class="tabs">
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'index' }"
+				@click="tab = 'index'"
+			>
+				<i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'custom' }"
+				@click="tab = 'custom'"
+			>
+				<i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'unicode' }"
+				@click="tab = 'unicode'"
+			>
+				<i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
+			<button
+				class="_button tab"
+				:class="{ active: tab === 'tags' }"
+				@click="tab = 'tags'"
+			>
+				<i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i>
+			</button>
 		</div>
 	</div>
-	<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i></button>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import * as Misskey from 'calckey-js';
-import XSection from '@/components/MkEmojiPicker.section.vue';
-import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import Ripple from '@/components/MkRipple.vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { deviceKind } from '@/scripts/device-kind';
-import { emojiCategories, instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { ref, computed, watch, onMounted } from "vue";
+import * as Misskey from "calckey-js";
+import XSection from "@/components/MkEmojiPicker.section.vue";
+import {
+	emojilist,
+	UnicodeEmojiDef,
+	unicodeEmojiCategories as categories,
+} from "@/scripts/emojilist";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import Ripple from "@/components/MkRipple.vue";
+import * as os from "@/os";
+import { isTouchUsing } from "@/scripts/touch";
+import { deviceKind } from "@/scripts/device-kind";
+import { emojiCategories, instance } from "@/instance";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-	maxHeight?: number;
-	asDrawer?: boolean;
-}>(), {
-	showPinned: true,
-});
+const props = withDefaults(
+	defineProps<{
+		showPinned?: boolean;
+		asReactionPicker?: boolean;
+		maxHeight?: number;
+		asDrawer?: boolean;
+	}>(),
+	{
+		showPinned: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'chosen', v: string): void;
+	(ev: "chosen", v: string): void;
 }>();
 
 const search = ref<HTMLInputElement>();
@@ -116,41 +200,48 @@ const {
 	recentlyUsedEmojis,
 } = defaultStore.reactiveState;
 
-const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
-const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
-const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
+const size = computed(() =>
+	props.asReactionPicker ? reactionPickerSize.value : 1
+);
+const width = computed(() =>
+	props.asReactionPicker ? reactionPickerWidth.value : 3
+);
+const height = computed(() =>
+	props.asReactionPicker ? reactionPickerHeight.value : 2
+);
 const customEmojiCategories = emojiCategories;
 const customEmojis = instance.emojis;
 const q = ref<string | null>(null);
 const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
-const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
+const tab = ref<"index" | "custom" | "unicode" | "tags">("index");
 
 watch(q, () => {
 	if (emojis.value) emojis.value.scrollTop = 0;
 
-	if (q.value == null || q.value === '') {
+	if (q.value == null || q.value === "") {
 		searchResultCustom.value = [];
 		searchResultUnicode.value = [];
 		return;
 	}
 
-	const newQ = q.value.replace(/:/g, '').toLowerCase();
+	const newQ = q.value.replace(/:/g, "").toLowerCase();
 
 	const searchCustom = () => {
 		const max = 8;
 		const emojis = customEmojis;
 		const matches = new Set<Misskey.entities.CustomEmoji>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		const exactMatch = emojis.find((emoji) => emoji.name === newQ);
 		if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+		if (newQ.includes(" ")) {
+			// AND検索
+			const keywords = newQ.split(" ");
 
 			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+				if (keywords.every((keyword) => emoji.name.includes(keyword))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -159,7 +250,15 @@ watch(q, () => {
 
 			// 名前またはエイリアスにキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
+				if (
+					keywords.every(
+						(keyword) =>
+							emoji.name.includes(keyword) ||
+							emoji.aliases.some((alias) =>
+								alias.includes(keyword)
+							)
+					)
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -174,7 +273,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
+				if (emoji.aliases.some((alias) => alias.startsWith(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -190,7 +289,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.includes(newQ))) {
+				if (emoji.aliases.some((alias) => alias.includes(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -205,15 +304,16 @@ watch(q, () => {
 		const emojis = emojilist;
 		const matches = new Set<UnicodeEmojiDef>();
 
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		const exactMatch = emojis.find((emoji) => emoji.name === newQ);
 		if (exactMatch) matches.add(exactMatch);
 
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
+		if (newQ.includes(" ")) {
+			// AND検索
+			const keywords = newQ.split(" ");
 
 			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+				if (keywords.every((keyword) => emoji.name.includes(keyword))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -222,7 +322,15 @@ watch(q, () => {
 
 			// 名前またはエイリアスにキーワードが含まれている
 			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
+				if (
+					keywords.every(
+						(keyword) =>
+							emoji.name.includes(keyword) ||
+							emoji.keywords.some((alias) =>
+								alias.includes(keyword)
+							)
+					)
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -237,7 +345,9 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
+				if (
+					emoji.keywords.some((keyword) => keyword.startsWith(newQ))
+				) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -253,7 +363,7 @@ watch(q, () => {
 			if (matches.size >= max) return matches;
 
 			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
+				if (emoji.keywords.some((keyword) => keyword.includes(newQ))) {
 					matches.add(emoji);
 					if (matches.size >= max) break;
 				}
@@ -268,7 +378,7 @@ watch(q, () => {
 });
 
 function focus() {
-	if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
+	if (!["smartphone", "tablet"].includes(deviceKind) && !isTouchUsing) {
 		search.value?.focus({
 			preventScroll: true,
 		});
@@ -277,36 +387,40 @@ function focus() {
 
 function reset() {
 	if (emojis.value) emojis.value.scrollTop = 0;
-	q.value = '';
+	q.value = "";
 }
 
-function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
-	return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
+function getKey(
+	emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef
+): string {
+	return typeof emoji === "string" ? emoji : emoji.char || `:${emoji.name}:`;
 }
 
 function chosen(emoji: any, ev?: MouseEvent) {
-	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+	const el =
+		ev &&
+		((ev.currentTarget ?? ev.target) as HTMLElement | null | undefined);
 	if (el) {
 		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(Ripple, { x, y }, {}, 'end');
+		const x = rect.left + el.offsetWidth / 2;
+		const y = rect.top + el.offsetHeight / 2;
+		os.popup(Ripple, { x, y }, {}, "end");
 	}
 
 	const key = getKey(emoji);
-	emit('chosen', key);
+	emit("chosen", key);
 
 	// 最近使った絵文字更新
 	if (!pinned.value.includes(key)) {
 		let recents = defaultStore.state.recentlyUsedEmojis;
 		recents = recents.filter((emoji: any) => emoji !== key);
 		recents.unshift(key);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+		defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
 	}
 }
 
 function paste(event: ClipboardEvent) {
-	const paste = (event.clipboardData || window.clipboardData).getData('text');
+	const paste = (event.clipboardData || window.clipboardData).getData("text");
 	if (done(paste)) {
 		event.preventDefault();
 	}
@@ -314,15 +428,17 @@ function paste(event: ClipboardEvent) {
 
 function done(query?: any): boolean | void {
 	if (query == null) query = q.value;
-	if (query == null || typeof query !== 'string') return;
+	if (query == null || typeof query !== "string") return;
 
-	const q2 = query.replaceAll(':', '');
-	const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
+	const q2 = query.replaceAll(":", "");
+	const exactMatchCustom = customEmojis.find((emoji) => emoji.name === q2);
 	if (exactMatchCustom) {
 		chosen(exactMatchCustom);
 		return true;
 	}
-	const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
+	const exactMatchUnicode = emojilist.find(
+		(emoji) => emoji.char === q2 || emoji.name === q2
+	);
 	if (exactMatchUnicode) {
 		chosen(exactMatchUnicode);
 		return true;
@@ -543,7 +659,7 @@ defineExpose({
 
 					> .emoji {
 						height: 1.25em;
-						vertical-align: -.25em;
+						vertical-align: -0.25em;
 						pointer-events: none;
 					}
 				}
diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
index 3b41f9d75..4cff9f275 100644
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -1,58 +1,66 @@
 <template>
-<MkModal
-	ref="modal"
-	v-slot="{ type, maxHeight }"
-	:z-priority="'middle'"
-	:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
-	:transparent-bg="true"
-	:manual-showing="manualShowing"
-	:src="src"
-	@click="modal?.close()"
-	@opening="opening"
-	@close="emit('close')"
-	@closed="emit('closed')"
->
-	<MkEmojiPicker
-		ref="picker"
-		class="ryghynhb _popup _shadow"
-		:class="{ drawer: type === 'drawer' }"
-		:show-pinned="showPinned"
-		:as-reaction-picker="asReactionPicker"
-		:as-drawer="type === 'drawer'"
-		:max-height="maxHeight"
-		@chosen="chosen"
-	/>
-</MkModal>
+	<MkModal
+		ref="modal"
+		v-slot="{ type, maxHeight }"
+		:z-priority="'middle'"
+		:prefer-type="
+			asReactionPicker &&
+			defaultStore.state.reactionPickerUseDrawerForMobile === false
+				? 'popup'
+				: 'auto'
+		"
+		:transparent-bg="true"
+		:manual-showing="manualShowing"
+		:src="src"
+		@click="modal?.close()"
+		@opening="opening"
+		@close="emit('close')"
+		@closed="emit('closed')"
+	>
+		<MkEmojiPicker
+			ref="picker"
+			class="ryghynhb _popup _shadow"
+			:class="{ drawer: type === 'drawer' }"
+			:show-pinned="showPinned"
+			:as-reaction-picker="asReactionPicker"
+			:as-drawer="type === 'drawer'"
+			:max-height="maxHeight"
+			@chosen="chosen"
+		/>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
-import { defaultStore } from '@/store';
+import { ref } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
+import { defaultStore } from "@/store";
 
-withDefaults(defineProps<{
-	manualShowing?: boolean | null;
-	src?: HTMLElement;
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-}>(), {
-	manualShowing: null,
-	showPinned: true,
-	asReactionPicker: false,
-});
+withDefaults(
+	defineProps<{
+		manualShowing?: boolean | null;
+		src?: HTMLElement;
+		showPinned?: boolean;
+		asReactionPicker?: boolean;
+	}>(),
+	{
+		manualShowing: null,
+		showPinned: true,
+		asReactionPicker: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done', v: any): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
+	(ev: "done", v: any): void;
+	(ev: "close"): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = ref<InstanceType<typeof MkModal>>();
 const picker = ref<InstanceType<typeof MkEmojiPicker>>();
 
 function chosen(emoji: any) {
-	emit('done', emoji);
+	emit("done", emoji);
 	modal.value?.close();
 }
 
diff --git a/packages/client/src/components/MkFeaturedPhotos.vue b/packages/client/src/components/MkFeaturedPhotos.vue
index a5c920dd9..3faf38c65 100644
--- a/packages/client/src/components/MkFeaturedPhotos.vue
+++ b/packages/client/src/components/MkFeaturedPhotos.vue
@@ -1,15 +1,19 @@
 <template>
-<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+	<div
+		v-if="meta"
+		class="xfbouadm"
+		:style="{ backgroundImage: `url(${meta.backgroundImageUrl})` }"
+	></div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as os from '@/os';
+import { ref } from "vue";
+import * as Misskey from "calckey-js";
+import * as os from "@/os";
 
 const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
 
-os.api('meta', { detail: true }).then(gotMeta => {
+os.api("meta", { detail: true }).then((gotMeta) => {
 	meta.value = gotMeta;
 });
 </script>
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
index 3c23e2e2f..1d485a1d6 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -1,56 +1,80 @@
 <template>
-<div>
-	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
-		<MkA
-			v-for="file in items"
-			:key="file.id"
-			v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
-			:to="`/admin/file/${file.id}`"
-			class="file _button"
+	<div>
+		<MkPagination
+			v-slot="{ items }"
+			:pagination="pagination"
+			class="urempief"
+			:class="{ grid: viewMode === 'grid' }"
 		>
-			<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
-			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-			<div v-if="viewMode === 'list'" class="body">
-				<div>
-					<small style="opacity: 0.7;">{{ file.name }}</small>
+			<MkA
+				v-for="file in items"
+				:key="file.id"
+				v-tooltip.mfm="
+					`${file.type}\n${bytes(file.size)}\n${new Date(
+						file.createdAt
+					).toLocaleString()}\nby ${
+						file.user ? '@' + Acct.toString(file.user) : 'system'
+					}`
+				"
+				:to="`/admin/file/${file.id}`"
+				class="file _button"
+			>
+				<div v-if="file.isSensitive" class="sensitive-label">
+					{{ i18n.ts.sensitive }}
 				</div>
-				<div>
-					<MkAcct v-if="file.user" :user="file.user"/>
-					<div v-else>{{ i18n.ts.system }}</div>
+				<MkDriveFileThumbnail
+					class="thumbnail"
+					:file="file"
+					fit="contain"
+				/>
+				<div v-if="viewMode === 'list'" class="body">
+					<div>
+						<small style="opacity: 0.7">{{ file.name }}</small>
+					</div>
+					<div>
+						<MkAcct v-if="file.user" :user="file.user" />
+						<div v-else>{{ i18n.ts.system }}</div>
+					</div>
+					<div>
+						<span style="margin-right: 1em">{{ file.type }}</span>
+						<span>{{ bytes(file.size) }}</span>
+					</div>
+					<div>
+						<span
+							>{{ i18n.ts.registeredDate }}:
+							<MkTime :time="file.createdAt" mode="detail"
+						/></span>
+					</div>
 				</div>
-				<div>
-					<span style="margin-right: 1em;">{{ file.type }}</span>
-					<span>{{ bytes(file.size) }}</span>
-				</div>
-				<div>
-					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
-				</div>
-			</div>
-		</MkA>
-	</MkPagination>
-</div>
+			</MkA>
+		</MkPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import MkSwitch from '@/components/ui/switch.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import MkSwitch from "@/components/ui/switch.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	pagination: any;
-	viewMode: 'grid' | 'list';
+	viewMode: "grid" | "list";
 }>();
 </script>
 
 <style lang="scss" scoped>
 @keyframes sensitive-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
 }
 
 .urempief {
@@ -94,7 +118,7 @@ const props = defineProps<{
 		> .file {
 			position: relative;
 			aspect-ratio: 1;
-		
+
 			> .thumbnail {
 				width: 100%;
 				height: 100%;
diff --git a/packages/client/src/components/MkFileTypeIcon.vue b/packages/client/src/components/MkFileTypeIcon.vue
index 3e0761ae1..388b6d7fc 100644
--- a/packages/client/src/components/MkFileTypeIcon.vue
+++ b/packages/client/src/components/MkFileTypeIcon.vue
@@ -1,15 +1,17 @@
 <template>
-<span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><i class="ph-file-image ph-bold ph-lg"></i></template>
-</span>
+	<span class="mk-file-type-icon">
+		<template v-if="kind == 'image'"
+			><i class="ph-file-image ph-bold ph-lg"></i
+		></template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
 const props = defineProps<{
 	type: string;
 }>();
 
-const kind = computed(() => props.type.split('/')[0]);
+const kind = computed(() => props.type.split("/")[0]);
 </script>
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index a0be2e856..337873fc1 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -1,33 +1,40 @@
 <template>
-<div v-size="{ max: [500] }" class="ssazuxis">
-	<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
-		<div class="title"><slot name="header"></slot></div>
-		<div class="divider"></div>
-		<button class="_button">
-			<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-			<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-		</button>
-	</header>
-	<transition
-		:name="$store.state.animation ? 'folder-toggle' : ''"
-		@enter="enter"
-		@after-enter="afterEnter"
-		@leave="leave"
-		@after-leave="afterLeave"
-	>
-		<div v-show="showBody">
-			<slot></slot>
-		</div>
-	</transition>
-</div>
+	<div v-size="{ max: [500] }" class="ssazuxis">
+		<header
+			class="_button"
+			:style="{ background: bg }"
+			@click="showBody = !showBody"
+		>
+			<div class="title"><slot name="header"></slot></div>
+			<div class="divider"></div>
+			<button class="_button">
+				<template v-if="showBody"
+					><i class="ph-caret-up ph-bold ph-lg"></i
+				></template>
+				<template v-else
+					><i class="ph-caret-down ph-bold ph-lg"></i
+				></template>
+			</button>
+		</header>
+		<transition
+			:name="$store.state.animation ? 'folder-toggle' : ''"
+			@enter="enter"
+			@after-enter="afterEnter"
+			@leave="leave"
+			@after-leave="afterLeave"
+		>
+			<div v-show="showBody">
+				<slot></slot>
+			</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import tinycolor from 'tinycolor2';
-
-const localStoragePrefix = 'ui:folder:';
+import { defineComponent } from "vue";
+import tinycolor from "tinycolor2";
 
+const localStoragePrefix = "ui:folder:";
 
 export default defineComponent({
 	props: {
@@ -45,19 +52,28 @@ export default defineComponent({
 	data() {
 		return {
 			bg: null,
-			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
+			showBody:
+				this.persistKey &&
+				localStorage.getItem(localStoragePrefix + this.persistKey)
+					? localStorage.getItem(
+							localStoragePrefix + this.persistKey
+					  ) === "t"
+					: this.expanded,
 		};
 	},
 	watch: {
 		showBody() {
 			if (this.persistKey) {
-				localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
+				localStorage.setItem(
+					localStoragePrefix + this.persistKey,
+					this.showBody ? "t" : "f"
+				);
 			}
 		},
 	},
 	mounted() {
 		function getParentBg(el: Element | null): string {
-			if (el == null || el.tagName === 'BODY') return 'var(--bg)';
+			if (el == null || el.tagName === "BODY") return "var(--bg)";
 			const bg = el.style.background || el.style.backgroundColor;
 			if (bg) {
 				return bg;
@@ -66,7 +82,13 @@ export default defineComponent({
 			}
 		}
 		const rawBg = getParentBg(this.$el);
-		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+		const bg = tinycolor(
+			rawBg.startsWith("var(")
+				? getComputedStyle(document.documentElement).getPropertyValue(
+						rawBg.slice(4, -1)
+				  )
+				: rawBg
+		);
 		bg.setAlpha(0.85);
 		this.bg = bg.toRgbString();
 	},
@@ -79,14 +101,14 @@ export default defineComponent({
 			const elementHeight = el.getBoundingClientRect().height;
 			el.style.height = 0;
 			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 		},
 		afterEnter(el) {
 			el.style.height = null;
 		},
 		leave(el) {
 			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
+			el.style.height = elementHeight + "px";
 			el.offsetHeight; // reflow
 			el.style.height = 0;
 		},
@@ -98,7 +120,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.folder-toggle-enter-active, .folder-toggle-leave-active {
+.folder-toggle-enter-active,
+.folder-toggle-leave-active {
 	overflow-y: hidden;
 	transition: opacity 0.5s, height 0.5s !important;
 }
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index ba8c8170e..12491f6ad 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -1,72 +1,87 @@
 <template>
-<button
-	class="kpoogebi _button"
-	:class="{
-		wait,
-		active: isFollowing || hasPendingFollowRequestFromYou,
-		full,
-		large,
-		blocking: isBlocking
-	}"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="isBlocking">
-			<span v-if="full">{{ i18n.ts.blocked }}</span><i class="ph-prohibit ph-bold ph-lg"></i>
+	<button
+		class="kpoogebi _button"
+		:class="{
+			wait,
+			active: isFollowing || hasPendingFollowRequestFromYou,
+			full,
+			large,
+			blocking: isBlocking,
+		}"
+		:disabled="wait"
+		@click="onClick"
+	>
+		<template v-if="!wait">
+			<template v-if="isBlocking">
+				<span v-if="full">{{ i18n.ts.blocked }}</span
+				><i class="ph-prohibit ph-bold ph-lg"></i>
+			</template>
+			<template
+				v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
+			>
+				<span v-if="full">{{ i18n.ts.followRequestPending }}</span
+				><i class="ph-hourglass-medium ph-bold ph-lg"></i>
+			</template>
+			<template
+				v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
+			>
+				<!-- つまりリモートフォローの場合。 -->
+				<span v-if="full">{{ i18n.ts.processing }}</span
+				><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
+			</template>
+			<template v-else-if="isFollowing">
+				<span v-if="full">{{ i18n.ts.unfollow }}</span
+				><i class="ph-minus ph-bold ph-lg"></i>
+			</template>
+			<template v-else-if="!isFollowing && user.isLocked">
+				<span v-if="full">{{ i18n.ts.followRequest }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
+			</template>
+			<template v-else-if="!isFollowing && !user.isLocked">
+				<span v-if="full">{{ i18n.ts.follow }}</span
+				><i class="ph-plus ph-bold ph-lg"></i>
+			</template>
 		</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass-medium ph-bold ph-lg"></i>
+		<template v-else>
+			<span v-if="full">{{ i18n.ts.processing }}</span
+			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
-			<!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
-		</template>
-		<template v-else-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
-		</template>
-		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ph-plus ph-bold ph-lg"></i>
-		</template>
-		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
-		</template>
-	</template>
-	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-	</template>
-</button>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted } from 'vue';
-import type * as Misskey from 'calckey-js';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import type * as Misskey from "calckey-js";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const emit = defineEmits(['refresh'])
-const props = withDefaults(defineProps<{
-		user: Misskey.entities.UserDetailed,
-		full?: boolean,
-		large?: boolean,
-	}>(), {
-	full: false,
-	large: false,
-});
+const emit = defineEmits(["refresh"]);
+const props = withDefaults(
+	defineProps<{
+		user: Misskey.entities.UserDetailed;
+		full?: boolean;
+		large?: boolean;
+	}>(),
+	{
+		full: false,
+		large: false,
+	}
+);
 
 const isBlocking = computed(() => props.user.isBlocking);
 
 let isFollowing = $ref(props.user.isFollowing);
-let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
+let hasPendingFollowRequestFromYou = $ref(
+	props.user.hasPendingFollowRequestFromYou
+);
 let wait = $ref(false);
-const connection = stream.useChannel('main');
+const connection = stream.useChannel("main");
 
 if (props.user.isFollowing == null) {
-	os.api('users/show', {
+	os.api("users/show", {
 		userId: props.user.id,
-	})
-		.then(onFollowChange);
+	}).then(onFollowChange);
 }
 
 function onFollowChange(user: Misskey.entities.UserDetailed) {
@@ -82,40 +97,41 @@ async function onClick() {
 	try {
 		if (isBlocking.value) {
 			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unblockConfirm'),
+				type: "warning",
+				text: i18n.t("unblockConfirm"),
 			});
-			if (canceled) return
+			if (canceled) return;
 
 			await os.api("blocking/delete", {
 				userId: props.user.id,
-			})
+			});
 			if (props.user.isMuted) {
 				await os.api("mute/delete", {
 					userId: props.user.id,
-				})
+				});
 			}
-			emit('refresh')
-		}
-		else if (isFollowing) {
+			emit("refresh");
+		} else if (isFollowing) {
 			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
+				type: "warning",
+				text: i18n.t("unfollowConfirm", {
+					name: props.user.name || props.user.username,
+				}),
 			});
 
 			if (canceled) return;
 
-			await os.api('following/delete', {
+			await os.api("following/delete", {
 				userId: props.user.id,
 			});
 		} else {
 			if (hasPendingFollowRequestFromYou) {
-				await os.api('following/requests/cancel', {
+				await os.api("following/requests/cancel", {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = false;
 			} else {
-				await os.api('following/create', {
+				await os.api("following/create", {
 					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = true;
@@ -129,8 +145,8 @@ async function onClick() {
 }
 
 onMounted(() => {
-	connection.on('follow', onFollowChange);
-	connection.on('unfollow', onFollowChange);
+	connection.on("follow", onFollowChange);
+	connection.on("unfollow", onFollowChange);
 });
 
 onBeforeUnmount(() => {
diff --git a/packages/client/src/components/MkForgotPassword.vue b/packages/client/src/components/MkForgotPassword.vue
index 1b55451c9..07f086601 100644
--- a/packages/client/src/components/MkForgotPassword.vue
+++ b/packages/client/src/components/MkForgotPassword.vue
@@ -1,63 +1,93 @@
 <template>
-<XModalWindow ref="dialog"
-	:width="370"
-	:height="400"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.forgotPassword }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="370"
+		:height="400"
+		@close="dialog.close()"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.forgotPassword }}</template>
 
-	<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
-		<div class="main _formRoot">
-			<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
-				<template #label>{{ i18n.ts.username }}</template>
-				<template #prefix>@</template>
-			</MkInput>
+		<form
+			v-if="instance.enableEmail"
+			class="bafeceda"
+			@submit.prevent="onSubmit"
+		>
+			<div class="main _formRoot">
+				<MkInput
+					v-model="username"
+					class="_formBlock"
+					type="text"
+					pattern="^[a-zA-Z0-9_]+$"
+					:spellcheck="false"
+					autofocus
+					required
+				>
+					<template #label>{{ i18n.ts.username }}</template>
+					<template #prefix>@</template>
+				</MkInput>
 
-			<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
-				<template #label>{{ i18n.ts.emailAddress }}</template>
-				<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
-			</MkInput>
+				<MkInput
+					v-model="email"
+					class="_formBlock"
+					type="email"
+					:spellcheck="false"
+					required
+				>
+					<template #label>{{ i18n.ts.emailAddress }}</template>
+					<template #caption>{{
+						i18n.ts._forgotPassword.enterEmail
+					}}</template>
+				</MkInput>
 
-			<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
+				<MkButton
+					class="_formBlock"
+					type="submit"
+					:disabled="processing"
+					primary
+					style="margin: 0 auto"
+					>{{ i18n.ts.send }}</MkButton
+				>
+			</div>
+			<div class="sub">
+				<MkA to="/about" class="_link">{{
+					i18n.ts._forgotPassword.ifNoEmail
+				}}</MkA>
+			</div>
+		</form>
+		<div v-else class="bafecedb">
+			{{ i18n.ts._forgotPassword.contactAdmin }}
 		</div>
-		<div class="sub">
-			<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
-		</div>
-	</form>
-	<div v-else class="bafecedb">
-		{{ i18n.ts._forgotPassword.contactAdmin }}
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import * as os from "@/os";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 let dialog: InstanceType<typeof XModalWindow> = $ref();
 
-let username = $ref('');
-let email = $ref('');
+let username = $ref("");
+let email = $ref("");
 let processing = $ref(false);
 
 async function onSubmit() {
 	processing = true;
-	await os.apiWithDialog('request-reset-password', {
+	await os.apiWithDialog("request-reset-password", {
 		username,
 		email,
 	});
-	emit('done');
+	emit("done");
 	dialog.close();
 }
 </script>
diff --git a/packages/client/src/components/MkFormDialog.vue b/packages/client/src/components/MkFormDialog.vue
index a92f39d5d..9b1cab73f 100644
--- a/packages/client/src/components/MkFormDialog.vue
+++ b/packages/client/src/components/MkFormDialog.vue
@@ -1,70 +1,170 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="450"
-	:can-close="false"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	@click="cancel()"
-	@ok="ok()"
-	@close="cancel()"
-	@closed="$emit('closed')"
->
-	<template #header>
-		{{ title }}
-	</template>
+	<XModalWindow
+		ref="dialog"
+		:width="450"
+		:can-close="false"
+		:with-ok-button="true"
+		:ok-button-disabled="false"
+		@click="cancel()"
+		@ok="ok()"
+		@close="cancel()"
+		@closed="$emit('closed')"
+	>
+		<template #header>
+			{{ title }}
+		</template>
 
-	<MkSpacer :margin-min="20" :margin-max="32">
-		<div class="xkpnjxcv _formRoot">
-			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
-				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormTextarea>
-				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
-					<span v-text="form[item].label || item"></span>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormSwitch>
-				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
-				</FormSelect>
-				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
-				</FormRadios>
-				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormRange>
-				<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
-					<span v-text="form[item].content || item"></span>
-				</MkButton>
-			</template>
-		</div>
-	</MkSpacer>
-</XModalWindow>
+		<MkSpacer :margin-min="20" :margin-max="32">
+			<div class="xkpnjxcv _formRoot">
+				<template
+					v-for="item in Object.keys(form).filter(
+						(item) => !form[item].hidden
+					)"
+				>
+					<FormInput
+						v-if="form[item].type === 'number'"
+						v-model="values[item]"
+						type="number"
+						:step="form[item].step || 1"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormInput>
+					<FormInput
+						v-else-if="
+							form[item].type === 'string' &&
+							!form[item].multiline
+						"
+						v-model="values[item]"
+						type="text"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormInput>
+					<FormTextarea
+						v-else-if="
+							form[item].type === 'string' && form[item].multiline
+						"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormTextarea>
+					<FormSwitch
+						v-else-if="form[item].type === 'boolean'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<span v-text="form[item].label || item"></span>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormSwitch>
+					<FormSelect
+						v-else-if="form[item].type === 'enum'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<option
+							v-for="item in form[item].enum"
+							:key="item.value"
+							:value="item.value"
+						>
+							{{ item.label }}
+						</option>
+					</FormSelect>
+					<FormRadios
+						v-else-if="form[item].type === 'radio'"
+						v-model="values[item]"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<option
+							v-for="item in form[item].options"
+							:key="item.value"
+							:value="item.value"
+						>
+							{{ item.label }}
+						</option>
+					</FormRadios>
+					<FormRange
+						v-else-if="form[item].type === 'range'"
+						v-model="values[item]"
+						:min="form[item].min"
+						:max="form[item].max"
+						:step="form[item].step"
+						:text-converter="form[item].textConverter"
+						class="_formBlock"
+					>
+						<template #label
+							><span v-text="form[item].label || item"></span
+							><span v-if="form[item].required === false">
+								({{ i18n.ts.optional }})</span
+							></template
+						>
+						<template v-if="form[item].description" #caption>{{
+							form[item].description
+						}}</template>
+					</FormRange>
+					<MkButton
+						v-else-if="form[item].type === 'button'"
+						class="_formBlock"
+						@click="form[item].action($event, values)"
+					>
+						<span v-text="form[item].content || item"></span>
+					</MkButton>
+				</template>
+			</div>
+		</MkSpacer>
+	</XModalWindow>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import FormInput from './form/input.vue';
-import FormTextarea from './form/textarea.vue';
-import FormSwitch from './form/switch.vue';
-import FormSelect from './form/select.vue';
-import FormRange from './form/range.vue';
-import MkButton from './MkButton.vue';
-import FormRadios from './form/radios.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import FormInput from "./form/input.vue";
+import FormTextarea from "./form/textarea.vue";
+import FormSwitch from "./form/switch.vue";
+import FormSelect from "./form/select.vue";
+import FormRange from "./form/range.vue";
+import MkButton from "./MkButton.vue";
+import FormRadios from "./form/radios.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -89,7 +189,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done'],
+	emits: ["done"],
 
 	data() {
 		return {
@@ -106,14 +206,14 @@ export default defineComponent({
 
 	methods: {
 		ok() {
-			this.$emit('done', {
+			this.$emit("done", {
 				result: this.values,
 			});
 			this.$refs.dialog.close();
 		},
 
 		cancel() {
-			this.$emit('done', {
+			this.$emit("done", {
 				canceled: true,
 			});
 			this.$refs.dialog.close();
@@ -124,6 +224,5 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xkpnjxcv {
-
 }
 </style>
diff --git a/packages/client/src/components/MkFormula.vue b/packages/client/src/components/MkFormula.vue
index 65a2fee93..2dacad167 100644
--- a/packages/client/src/components/MkFormula.vue
+++ b/packages/client/src/components/MkFormula.vue
@@ -1,14 +1,16 @@
 <template>
-<XFormula :formula="formula" :block="block"/>
+	<XFormula :formula="formula" :block="block" />
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import * as os from '@/os';
+import { defineComponent, defineAsyncComponent } from "vue";
+import * as os from "@/os";
 
 export default defineComponent({
 	components: {
-		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
+		XFormula: defineAsyncComponent(
+			() => import("@/components/MkFormulaCore.vue")
+		),
 	},
 	props: {
 		formula: {
diff --git a/packages/client/src/components/MkFormulaCore.vue b/packages/client/src/components/MkFormulaCore.vue
index de24befed..5675dbfa0 100644
--- a/packages/client/src/components/MkFormulaCore.vue
+++ b/packages/client/src/components/MkFormulaCore.vue
@@ -1,30 +1,30 @@
 <template>
-<div v-if="block" v-html="compiledFormula"></div>
-<span v-else v-html="compiledFormula"></span>
+	<div v-if="block" v-html="compiledFormula"></div>
+	<span v-else v-html="compiledFormula"></span>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import katex from 'katex';
+import { defineComponent } from "vue";
+import katex from "katex";
 
 export default defineComponent({
 	props: {
 		formula: {
 			type: String,
-			required: true
+			required: true,
 		},
 		block: {
 			type: Boolean,
-			required: true
-		}
+			required: true,
+		},
 	},
 	computed: {
 		compiledFormula(): any {
 			return katex.renderToString(this.formula, {
-				throwOnError: false
+				throwOnError: false,
 			} as any);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index 056f1dff4..f4f694383 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -1,27 +1,31 @@
 <template>
-<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
-	<div class="thumbnail">
-		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
-	</div>
-	<article>
-		<header>
-			<MkAvatar :user="post.user" class="avatar"/>
-		</header>
-		<footer>
-			<span class="title">{{ post.title }}</span>
-		</footer>
-	</article>
-</MkA>
+	<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
+		<div class="thumbnail">
+			<ImgWithBlurhash
+				class="img"
+				:src="post.files[0].thumbnailUrl"
+				:hash="post.files[0].blurhash"
+			/>
+		</div>
+		<article>
+			<header>
+				<MkAvatar :user="post.user" class="avatar" />
+			</header>
+			<footer>
+				<span class="title">{{ post.title }}</span>
+			</footer>
+		</article>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { userName } from '@/filters/user';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import {} from "vue";
+import { userName } from "@/filters/user";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 
 const props = defineProps<{
-		post: any;
-	}>();
+	post: any;
+}>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index 274f851a6..2599aea47 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -1,13 +1,16 @@
 <template>
-<div class="mk-google">
-	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="ph-magnifying-glass ph-bold ph-lg"></i> {{ i18n.ts.searchByGoogle }}</button>
-</div>
+	<div class="mk-google">
+		<input v-model="query" type="search" :placeholder="q" />
+		<button @click="search">
+			<i class="ph-magnifying-glass ph-bold ph-lg"></i>
+			{{ i18n.ts.searchByGoogle }}
+		</button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	q: string;
@@ -16,7 +19,10 @@ const props = defineProps<{
 const query = ref(props.q);
 
 const search = () => {
-	window.open(`https://search.annoyingorange.xyz/search?q=${query.value}`, '_blank');
+	window.open(
+		`https://search.annoyingorange.xyz/search?q=${query.value}`,
+		"_blank"
+	);
 };
 </script>
 
diff --git a/packages/client/src/components/MkHeatmap.vue b/packages/client/src/components/MkHeatmap.vue
index 02f5c7aed..1af278b23 100644
--- a/packages/client/src/components/MkHeatmap.vue
+++ b/packages/client/src/components/MkHeatmap.vue
@@ -1,23 +1,30 @@
 <template>
 	<div ref="rootEl">
-		<MkLoading v-if="fetching"/>
+		<MkLoading v-if="fetching" />
 		<div v-else>
 			<canvas ref="chartEl"></canvas>
 		</div>
 	</div>
-	</template>
+</template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import { Chart } from 'chart.js';
-import tinycolor from 'tinycolor2';
-import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import {
+	markRaw,
+	version as vueVersion,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+	watch,
+} from "vue";
+import { Chart } from "chart.js";
+import tinycolor from "tinycolor2";
+import { MatrixController, MatrixElement } from "chartjs-chart-matrix";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -32,7 +39,7 @@ let chartInstance: Chart = null;
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 async function renderChart() {
@@ -57,7 +64,9 @@ async function renderChart() {
 	const format = (arr) => {
 		return arr.map((v, i) => {
 			const dt = getDate(i);
-			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
+			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1)
+				.toString()
+				.padStart(2, "0")}-${dt.getDate().toString().padStart(2, "0")}`;
 			return {
 				x: iso,
 				y: dt.getDay(),
@@ -69,20 +78,35 @@ async function renderChart() {
 
 	let values;
 
-	if (props.src === 'active-users') {
-		const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+	if (props.src === "active-users") {
+		const raw = await os.api("charts/active-users", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.readWrite;
-	} else if (props.src === 'notes') {
-		const raw = await os.api('charts/notes', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "notes") {
+		const raw = await os.api("charts/notes", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.local.inc;
-	} else if (props.src === 'ap-requests-inbox-received') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-inbox-received") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.inboxReceived;
-	} else if (props.src === 'ap-requests-deliver-succeeded') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-deliver-succeeded") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.deliverSucceeded;
-	} else if (props.src === 'ap-requests-deliver-failed') {
-		const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	} else if (props.src === "ap-requests-deliver-failed") {
+		const raw = await os.api("charts/ap-request", {
+			limit: chartLimit,
+			span: "day",
+		});
 		values = raw.deliverFailed;
 	}
 
@@ -90,43 +114,51 @@ async function renderChart() {
 
 	await nextTick();
 
-	const color = defaultStore.state.darkMode ? '#ebbcba' : '#d7827e';
+	const color = defaultStore.state.darkMode ? "#ebbcba" : "#d7827e";
 
 	// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
-	const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;
+	const max =
+		values
+			.slice()
+			.sort((a, b) => b - a)
+			.slice(0, 3)
+			.reduce((a, b) => a + b, 0) / 3;
 
 	const min = Math.max(0, Math.min(...values) - 1);
 
 	const marginEachCell = 4;
 
 	chartInstance = new Chart(chartEl, {
-		type: 'matrix',
+		type: "matrix",
 		data: {
-			datasets: [{
-				label: 'Read & Write',
-				data: format(values),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 3,
-				backgroundColor(c) {
-					const value = c.dataset.data[c.dataIndex].v;
-					let a = (value - min) / max;
-					if (value !== 0) { // 0でない限りは完全に不可視にはしない
-						a = Math.max(a, 0.05);
-					}
-					return alpha(color, a);
+			datasets: [
+				{
+					label: "Read & Write",
+					data: format(values),
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 3,
+					backgroundColor(c) {
+						const value = c.dataset.data[c.dataIndex].v;
+						let a = (value - min) / max;
+						if (value !== 0) {
+							// 0でない限りは完全に不可視にはしない
+							a = Math.max(a, 0.05);
+						}
+						return alpha(color, a);
+					},
+					fill: true,
+					width(c) {
+						const a = c.chart.chartArea ?? {};
+						return (a.right - a.left) / weeks - marginEachCell;
+					},
+					height(c) {
+						const a = c.chart.chartArea ?? {};
+						return (a.bottom - a.top) / 7 - marginEachCell;
+					},
 				},
-				fill: true,
-				width(c) {
-					const a = c.chart.chartArea ?? {};
-					return (a.right - a.left) / weeks - marginEachCell;
-				},
-				height(c) {
-					const a = c.chart.chartArea ?? {};
-					return (a.bottom - a.top) / 7 - marginEachCell;
-				},
-			}],
+			],
 		},
 		options: {
 			aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
@@ -140,17 +172,17 @@ async function renderChart() {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					offset: true,
-					position: 'bottom',
+					position: "bottom",
 					time: {
-						unit: 'week',
-						round: 'week',
+						unit: "week",
+						round: "week",
 						isoWeekday: 0,
 						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
-							week: 'M/d',
+							day: "M/d",
+							month: "Y/M",
+							week: "M/d",
 						},
 					},
 					grid: {
@@ -165,7 +197,7 @@ async function renderChart() {
 				y: {
 					offset: true,
 					reverse: true,
-					position: 'right',
+					position: "right",
 					grid: {
 						display: false,
 					},
@@ -176,7 +208,8 @@ async function renderChart() {
 						font: {
 							size: 9,
 						},
-						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
+						callback: (value, index, values) =>
+							["", "Mon", "", "Wed", "", "Fri", ""][value],
 					},
 				},
 			},
@@ -188,12 +221,13 @@ async function renderChart() {
 					enabled: false,
 					callbacks: {
 						title(context) {
-							const v = context[0].dataset.data[context[0].dataIndex];
+							const v =
+								context[0].dataset.data[context[0].dataIndex];
 							return v.d;
 						},
 						label(context) {
 							const v = context.dataset.data[context.dataIndex];
-							return ['Active: ' + v.v];
+							return ["Active: " + v.v];
 						},
 					},
 					//mode: 'index',
@@ -207,10 +241,13 @@ async function renderChart() {
 	});
 }
 
-watch(() => props.src, () => {
-	fetching = true;
-	renderChart();
-});
+watch(
+	() => props.src,
+	() => {
+		fetching = true;
+		renderChart();
+	}
+);
 
 onMounted(async () => {
 	renderChart();
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
index 263ce7c0a..51173d99d 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -1,31 +1,46 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
-	<div class="xubzgfga">
-		<header>{{ image.name }}</header>
-		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
-		<footer>
-			<span>{{ image.type }}</span>
-			<span>{{ bytes(image.size) }}</span>
-			<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
-		</footer>
-	</div>
-</MkModal>
+	<MkModal
+		ref="modal"
+		:z-priority="'middle'"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
+		<div class="xubzgfga">
+			<header>{{ image.name }}</header>
+			<img
+				:src="image.url"
+				:alt="image.comment"
+				:title="image.comment"
+				@click="modal.close()"
+			/>
+			<footer>
+				<span>{{ image.type }}</span>
+				<span>{{ bytes(image.size) }}</span>
+				<span v-if="image.properties && image.properties.width"
+					>{{ number(image.properties.width) }}px ×
+					{{ number(image.properties.height) }}px</span
+				>
+			</footer>
+		</div>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import type * as misskey from 'calckey-js';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import MkModal from '@/components/MkModal.vue';
+import {} from "vue";
+import type * as misskey from "calckey-js";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import MkModal from "@/components/MkModal.vue";
 
-const props = withDefaults(defineProps<{
-	image: misskey.entities.DriveFile;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		image: misskey.entities.DriveFile;
+	}>(),
+	{}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const modal = $ref<InstanceType<typeof MkModal>>();
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index b6eae622d..c7652f476 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -1,30 +1,46 @@
 <template>
-<div class="xubzgfgb" :class="{ cover }" :title="title">
-	<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
-	<img v-if="src" :src="src" :title="title" :type="type" :alt="alt" @load="onLoad"/>
-</div>
+	<div class="xubzgfgb" :class="{ cover }" :title="title">
+		<canvas
+			v-if="!loaded"
+			ref="canvas"
+			:width="size"
+			:height="size"
+			:title="title"
+		/>
+		<img
+			v-if="src"
+			:src="src"
+			:title="title"
+			:type="type"
+			:alt="alt"
+			@load="onLoad"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { decode } from 'blurhash';
+import { onMounted } from "vue";
+import { decode } from "blurhash";
 
-const props = withDefaults(defineProps<{
-	src?: string | null;
-	hash?: string;
-	alt?: string;
-	type?: string | null;
-	title?: string | null;
-	size?: number;
-	cover?: boolean;
-}>(), {
-	src: null,
-	type: null,
-	alt: '',
-	title: null,
-	size: 64,
-	cover: true,
-});
+const props = withDefaults(
+	defineProps<{
+		src?: string | null;
+		hash?: string;
+		alt?: string;
+		type?: string | null;
+		title?: string | null;
+		size?: number;
+		cover?: boolean;
+	}>(),
+	{
+		src: null,
+		type: null,
+		alt: "",
+		title: null,
+		size: 64,
+		cover: true,
+	}
+);
 
 const canvas = $ref<HTMLCanvasElement>();
 let loaded = $ref(false);
@@ -32,7 +48,7 @@ let loaded = $ref(false);
 function draw() {
 	if (props.hash == null) return;
 	const pixels = decode(props.hash, props.size, props.size);
-	const ctx = canvas.getContext('2d');
+	const ctx = canvas.getContext("2d");
 	const imageData = ctx!.createImageData(props.size, props.size);
 	imageData.data.set(pixels);
 	ctx!.putImageData(imageData, 0, 0);
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 005ac53ff..43f2de29e 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -1,13 +1,13 @@
 <template>
-<div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
-	<i v-else class="ph-info ph-bold ph-lg"></i>
-	<slot></slot>
-</div>
+	<div class="fpezltsf" :class="{ warn }">
+		<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
+		<i v-else class="ph-info ph-bold ph-lg"></i>
+		<slot></slot>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 defineProps<{
 	warn?: boolean;
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index 11952e46c..0a3fbbea2 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -1,19 +1,32 @@
 <template>
-<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
-	<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
-	<div class="body">
-		<span class="host">{{ instance.name ?? instance.host }}</span>
-		<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
+	<div
+		:class="[
+			$style.root,
+			{
+				yellow: instance.isNotResponding,
+				red: instance.isBlocked,
+				gray: instance.isSuspended,
+			},
+		]"
+	>
+		<img class="icon" :src="getInstanceIcon(instance)" alt="" />
+		<div class="body">
+			<span class="host">{{ instance.name ?? instance.host }}</span>
+			<span class="sub _monospace"
+				><b>{{ instance.host }}</b> /
+				{{ instance.softwareName || "?" }}
+				{{ instance.softwareVersion }}</span
+			>
+		</div>
+		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
 	</div>
-	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import * as misskey from "calckey-js";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
 	instance: misskey.entities.Instance;
@@ -21,14 +34,22 @@ const props = defineProps<{
 
 let chartValues = $ref<number[] | null>(null);
 
-os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
+os.apiGet("charts/instance", {
+	host: props.instance.host,
+	limit: 16 + 1,
+	span: "day",
+}).then((res) => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 	res.requests.received.splice(0, 1);
 	chartValues = res.requests.received;
 });
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
@@ -86,19 +107,46 @@ function getInstanceIcon(instance): string {
 
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.red) {
 		--c: rgb(255 0 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.gray) {
 		--c: var(--bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 }
diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue
index 0d0123f0f..c79879d14 100644
--- a/packages/client/src/components/MkInstanceSelectDialog.vue
+++ b/packages/client/src/components/MkInstanceSelectDialog.vue
@@ -1,87 +1,113 @@
 <template>
-<XModalWindow
-	ref="dialogEl"
-	:with-ok-button="true"
-	:ok-button-disabled="selected == null"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.selectInstance }}</template>
-	<div class="mehkoush">
-		<div class="form">
-				<MkInput v-model="hostname" :autofocus="true" @update:modelValue="search">
+	<XModalWindow
+		ref="dialogEl"
+		:with-ok-button="true"
+		:ok-button-disabled="selected == null"
+		@click="cancel()"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.selectInstance }}</template>
+		<div class="mehkoush">
+			<div class="form">
+				<MkInput
+					v-model="hostname"
+					:autofocus="true"
+					@update:modelValue="search"
+				>
 					<template #label>{{ i18n.ts.instance }}</template>
 				</MkInput>
-		</div>
-		<div v-if="hostname != ''" class="result" :class="{ hit: instances.length > 0 }">
-			<div v-if="instances.length > 0" class="instances">
-				<div v-for="item in instances" :key="item.id" class="instance" :class="{ selected: selected && selected.id === item.id }" @click="selected = item" @dblclick="ok()">
-					<div class="body">
-						<img class="icon" :src="item.iconUrl ?? '/client-assets/dummy.png'" aria-hidden="true"/>
-						<span class="name">{{ item.host }}</span>
+			</div>
+			<div
+				v-if="hostname != ''"
+				class="result"
+				:class="{ hit: instances.length > 0 }"
+			>
+				<div v-if="instances.length > 0" class="instances">
+					<div
+						v-for="item in instances"
+						:key="item.id"
+						class="instance"
+						:class="{
+							selected: selected && selected.id === item.id,
+						}"
+						@click="selected = item"
+						@dblclick="ok()"
+					>
+						<div class="body">
+							<img
+								class="icon"
+								:src="
+									item.iconUrl ?? '/client-assets/dummy.png'
+								"
+								aria-hidden="true"
+							/>
+							<span class="name">{{ item.host }}</span>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div v-else class="empty">
-				<span>{{ i18n.ts.noInstances }}</span>
+				<div v-else class="empty">
+					<span>{{ i18n.ts.noInstances }}</span>
+				</div>
 			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import MkInput from '@/components/form/input.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { Instance } from 'calckey-js/built/entities';
+import MkInput from "@/components/form/input.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { Instance } from "calckey-js/built/entities";
 
 const emit = defineEmits<{
-	(ev: 'ok', selected: Instance): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", selected: Instance): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
-let hostname = $ref('');
+let hostname = $ref("");
 let instances: Instance[] = $ref([]);
 let selected: Instance | null = $ref(null);
 let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
 
 let searchOrderLatch = 0;
 const search = () => {
-	if (hostname === '') {
+	if (hostname === "") {
 		instances = [];
 		return;
 	}
 
 	const searchId = ++searchOrderLatch;
-	os.api('federation/instances', {
+	os.api("federation/instances", {
 		host: hostname,
 		limit: 10,
 		blocked: false,
 		suspended: false,
-		sort: '+pubSub',
-	}).then(_instances => {
+		sort: "+pubSub",
+	}).then((_instances) => {
 		if (searchId !== searchOrderLatch) return;
-		instances = _instances.map(x => ({
-			id: x.id,
-			host: x.host,
-			iconUrl: x.iconUrl,
-		} as Instance));
+		instances = _instances.map(
+			(x) =>
+				({
+					id: x.id,
+					host: x.host,
+					iconUrl: x.iconUrl,
+				} as Instance)
+		);
 	});
 };
 
 const ok = () => {
 	if (selected == null) return;
-	emit('ok', selected);
+	emit("ok", selected);
 	dialogEl?.close();
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl?.close();
 };
 </script>
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index a9cb7977a..f73580fd6 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -4,49 +4,82 @@
 			<template #header>Chart</template>
 			<div :class="$style.chart">
 				<div class="selects">
-					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
+					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
 						<optgroup :label="i18n.ts.federation">
-							<option value="federation">{{ i18n.ts._charts.federation }}</option>
-							<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
+							<option value="federation">
+								{{ i18n.ts._charts.federation }}
+							</option>
+							<option value="ap-request">
+								{{ i18n.ts._charts.apRequest }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.users">
-							<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
-							<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
-							<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
+							<option value="users">
+								{{ i18n.ts._charts.usersIncDec }}
+							</option>
+							<option value="users-total">
+								{{ i18n.ts._charts.usersTotal }}
+							</option>
+							<option value="active-users">
+								{{ i18n.ts._charts.activeUsers }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.notes">
-							<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
-							<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
-							<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
-							<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
+							<option value="notes">
+								{{ i18n.ts._charts.notesIncDec }}
+							</option>
+							<option value="local-notes">
+								{{ i18n.ts._charts.localNotesIncDec }}
+							</option>
+							<option value="remote-notes">
+								{{ i18n.ts._charts.remoteNotesIncDec }}
+							</option>
+							<option value="notes-total">
+								{{ i18n.ts._charts.notesTotal }}
+							</option>
 						</optgroup>
 						<optgroup :label="i18n.ts.drive">
-							<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
-							<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
+							<option value="drive-files">
+								{{ i18n.ts._charts.filesIncDec }}
+							</option>
+							<option value="drive">
+								{{ i18n.ts._charts.storageUsageIncDec }}
+							</option>
 						</optgroup>
 					</MkSelect>
-					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
+					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
 						<option value="hour">{{ i18n.ts.perHour }}</option>
 						<option value="day">{{ i18n.ts.perDay }}</option>
 					</MkSelect>
 				</div>
 				<div class="chart _panel">
-					<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
+					<MkChart
+						:src="chartSrc"
+						:span="chartSpan"
+						:limit="chartLimit"
+						:detailed="true"
+					></MkChart>
 				</div>
 			</div>
 		</MkFolder>
 
 		<MkFolder class="item">
 			<template #header>Active users heatmap</template>
-			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
+			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
 				<option value="active-users">Active users</option>
 				<option value="notes">Notes</option>
-				<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
-				<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
-				<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
+				<option value="ap-requests-inbox-received">
+					Fediverse Requests: inboxReceived
+				</option>
+				<option value="ap-requests-deliver-succeeded">
+					Fediverse Requests: deliverSucceeded
+				</option>
+				<option value="ap-requests-deliver-failed">
+					Fediverse Requests: deliverFailed
+				</option>
 			</MkSelect>
 			<div class="_panel" :class="$style.heatmap">
-				<MkHeatmap :src="heatmapSrc"/>
+				<MkHeatmap :src="heatmapSrc" />
 			</div>
 		</MkFolder>
 
@@ -69,45 +102,49 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { Chart } from 'chart.js';
-import MkSelect from '@/components/form/select.vue';
-import MkChart from '@/components/MkChart.vue';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import MkHeatmap from '@/components/MkHeatmap.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import { initChart } from '@/scripts/init-chart';
+import { onMounted } from "vue";
+import { Chart } from "chart.js";
+import MkSelect from "@/components/form/select.vue";
+import MkChart from "@/components/MkChart.vue";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import MkHeatmap from "@/components/MkHeatmap.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
 const chartLimit = 500;
-let chartSpan = $ref<'hour' | 'day'>('hour');
-let chartSrc = $ref('active-users');
-let heatmapSrc = $ref('active-users');
+let chartSpan = $ref<"hour" | "day">("hour");
+let chartSrc = $ref("active-users");
+let heatmapSrc = $ref("active-users");
 let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
 let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
 
 const { handler: externalTooltipHandler1 } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 const { handler: externalTooltipHandler2 } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 function createDoughnut(chartEl, tooltip, data) {
 	const chartInstance = new Chart(chartEl, {
-		type: 'doughnut',
+		type: "doughnut",
 		data: {
-			labels: data.map(x => x.name),
-			datasets: [{
-				backgroundColor: data.map(x => x.color),
-				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
-				borderWidth: 2,
-				hoverOffset: 0,
-				data: data.map(x => x.value),
-			}],
+			labels: data.map((x) => x.name),
+			datasets: [
+				{
+					backgroundColor: data.map((x) => x.color),
+					borderColor: getComputedStyle(
+						document.documentElement
+					).getPropertyValue("--panel"),
+					borderWidth: 2,
+					hoverOffset: 0,
+					data: data.map((x) => x.value),
+				},
+			],
 		},
 		options: {
 			maintainAspectRatio: false,
@@ -120,7 +157,12 @@ function createDoughnut(chartEl, tooltip, data) {
 				},
 			},
 			onClick: (ev) => {
-				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
+				const hit = chartInstance.getElementsAtEventForMode(
+					ev,
+					"nearest",
+					{ intersect: true },
+					false
+				)[0];
 				if (hit && data[hit.index].onClick) {
 					data[hit.index].onClick();
 				}
@@ -131,7 +173,7 @@ function createDoughnut(chartEl, tooltip, data) {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -145,24 +187,48 @@ function createDoughnut(chartEl, tooltip, data) {
 }
 
 onMounted(() => {
-	os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
-		createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
+	os.apiGet("federation/stats", { limit: 30 }).then((fedStats) => {
+		createDoughnut(
+			subDoughnutEl,
+			externalTooltipHandler1,
+			fedStats.topSubInstances
+				.map((x) => ({
+					name: x.host,
+					color: x.themeColor,
+					value: x.followersCount,
+					onClick: () => {
+						os.pageWindow(`/instance-info/${x.host}`);
+					},
+				}))
+				.concat([
+					{
+						name: "(other)",
+						color: "#80808080",
+						value: fedStats.otherFollowersCount,
+					},
+				])
+		);
 
-		createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
+		createDoughnut(
+			pubDoughnutEl,
+			externalTooltipHandler2,
+			fedStats.topPubInstances
+				.map((x) => ({
+					name: x.host,
+					color: x.themeColor,
+					value: x.followingCount,
+					onClick: () => {
+						os.pageWindow(`/instance-info/${x.host}`);
+					},
+				}))
+				.concat([
+					{
+						name: "(other)",
+						color: "#80808080",
+						value: fedStats.otherFollowingCount,
+					},
+				])
+		);
 	});
 });
 </script>
@@ -205,7 +271,8 @@ onMounted(() => {
 			display: flex;
 			gap: 16px;
 
-			> .sub, > .pub {
+			> .sub,
+			> .pub {
 				flex: 1;
 				min-width: 0;
 				position: relative;
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 6e2912965..8e2d17b2a 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -1,41 +1,50 @@
 <template>
-<div class="hpaizdrt" ref="ticker" :style="bg">
-	<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
-	<span class="name">{{ instance.name }}</span>
-</div>
+	<div class="hpaizdrt" ref="ticker" :style="bg">
+		<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true" />
+		<span class="name">{{ instance.name }}</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { instanceName } from '@/config';
-import { instance as Instance } from '@/instance';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { instanceName } from "@/config";
+import { instance as Instance } from "@/instance";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
 	instance?: {
-		faviconUrl?: string
-		name: string
-		themeColor?: string
-	}
+		faviconUrl?: string;
+		name: string;
+		themeColor?: string;
+	};
 }>();
 
 let ticker = $ref<HTMLElement | null>(null);
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
-	faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
+	faviconUrl: Instance.iconUrl || Instance.faviconUrl || "/favicon.ico",
 	name: instanceName,
-	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+	themeColor: (
+		document.querySelector(
+			'meta[name="theme-color-orig"]'
+		) as HTMLMetaElement
+	)?.content,
 };
 
 const computedStyle = getComputedStyle(document.documentElement);
-const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
+const themeColor =
+	instance.themeColor ?? computedStyle.getPropertyValue("--bg");
 
 const bg = {
 	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
 };
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
@@ -48,10 +57,10 @@ function getInstanceIcon(instance): string {
 	align-items: center;
 	height: 1.1em;
 	justify-self: flex-end;
-	padding: .2em .4em;
-	padding: .2em .4em;
+	padding: 0.2em 0.4em;
+	padding: 0.2em 0.4em;
 	border-radius: 100px;
-	font-size: .8em;
+	font-size: 0.8em;
 	text-shadow: 0 2px 2px var(--shadow);
 	overflow: hidden;
 	.header > .body & {
@@ -80,11 +89,14 @@ function getInstanceIcon(instance): string {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
-		.article > .main &, .header > .body & {
+		text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg),
+			-1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
+		.article > .main &,
+		.header > .body & {
 			display: unset;
 		}
-		.article > .main &, .header > .body & {
+		.article > .main &,
+		.header > .body & {
 			display: unset;
 		}
 	}
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index de4673ffe..3db05f0f4 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -1,28 +1,39 @@
 <template>
-<div class="alqyeyti" :class="{ oneline }">
-	<div class="key">
-		<slot name="key"></slot>
+	<div class="alqyeyti" :class="{ oneline }">
+		<div class="key">
+			<slot name="key"></slot>
+		</div>
+		<div class="value">
+			<slot name="value"></slot>
+			<button
+				v-if="copy"
+				v-tooltip="i18n.ts.copy"
+				class="_textButton"
+				style="margin-left: 0.5em"
+				@click="copy_"
+			>
+				<i class="ph-clipboard-text ph-bold"></i>
+			</button>
+		</div>
 	</div>
-	<div class="value">
-		<slot name="value"></slot>
-		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ph-clipboard-text ph-bold"></i></button>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	copy?: string | null;
-	oneline?: boolean;
-}>(), {
-	copy: null,
-	oneline: false,
-});
+const props = withDefaults(
+	defineProps<{
+		copy?: string | null;
+		oneline?: boolean;
+	}>(),
+	{
+		copy: null,
+		oneline: false,
+	}
+);
 
 const copy_ = () => {
 	copyToClipboard(props.copy);
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index 39e99e6c2..f713b4c41 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -1,61 +1,103 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
-		<div class="main">
-			<template v-for="item in items">
-				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
-					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-				</button>
-				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
-					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-				</MkA>
-			</template>
+	<MkModal
+		ref="modal"
+		v-slot="{ type, maxHeight }"
+		:prefer-type="preferedModalType"
+		:anchor="anchor"
+		:transparent-bg="true"
+		:src="src"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
+		<div
+			class="szkkfdyq _popup _shadow"
+			:class="{ asDrawer: type === 'drawer' }"
+			:style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"
+		>
+			<div class="main">
+				<template v-for="item in items">
+					<button
+						v-if="item.action"
+						v-click-anime
+						class="_button"
+						@click="
+							($event) => {
+								item.action($event);
+								close();
+							}
+						"
+					>
+						<i class="icon" :class="item.icon"></i>
+						<div class="text">{{ item.text }}</div>
+						<span v-if="item.indicate" class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</button>
+					<MkA
+						v-else
+						v-click-anime
+						:to="item.to"
+						@click.passive="close()"
+					>
+						<i class="icon" :class="item.icon"></i>
+						<div class="text">{{ item.text }}</div>
+						<span v-if="item.indicate" class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</MkA>
+				</template>
+			</div>
 		</div>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import { navbarItemDef } from '@/navbar';
-import { instanceName } from '@/config';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { deviceKind } from '@/scripts/device-kind';
-import * as os from '@/os';
+import {} from "vue";
+import MkModal from "@/components/MkModal.vue";
+import { navbarItemDef } from "@/navbar";
+import { instanceName } from "@/config";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { deviceKind } from "@/scripts/device-kind";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	src?: HTMLElement;
-	anchor?: { x: string; y: string; };
-}>(), {
-	anchor: () => ({ x: 'right', y: 'center' }),
-});
+const props = withDefaults(
+	defineProps<{
+		src?: HTMLElement;
+		anchor?: { x: string; y: string };
+	}>(),
+	{
+		anchor: () => ({ x: "right", y: "center" }),
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
-	deviceKind === 'smartphone' ? 'drawer' :
-	'dialog';
+const preferedModalType =
+	deviceKind === "desktop" && props.src != null
+		? "popup"
+		: deviceKind === "smartphone"
+		? "drawer"
+		: "dialog";
 
 const modal = $ref<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 
-const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
-	type: def.to ? 'link' : 'button',
-	text: i18n.ts[def.title],
-	icon: def.icon,
-	to: def.to,
-	action: def.action,
-	indicate: def.indicated,
-}));
+const items = Object.keys(navbarItemDef)
+	.filter((k) => !menu.includes(k))
+	.map((k) => navbarItemDef[k])
+	.filter((def) => (def.show == null ? true : def.show))
+	.map((def) => ({
+		type: def.to ? "link" : "button",
+		text: i18n.ts[def.title],
+		icon: def.icon,
+		to: def.to,
+		action: def.action,
+		indicate: def.indicated,
+	}));
 
 function close() {
 	modal.close();
@@ -82,7 +124,8 @@ function close() {
 		text-align: center;
 	}
 
-	> .main, > .sub {
+	> .main,
+	> .sub {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
 
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index 753628489..e26e1ed24 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -1,36 +1,55 @@
 <template>
-<component :is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	:title="url" @click.stop
->
-	<slot></slot>
-	<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
-</component>
+	<component
+		:is="self ? 'MkA' : 'a'"
+		ref="el"
+		class="xlcxczvw _link"
+		:[attr]="self ? url.substr(local.length) : url"
+		:rel="rel"
+		:target="target"
+		:title="url"
+		@click.stop
+	>
+		<slot></slot>
+		<i
+			v-if="target === '_blank'"
+			class="ph-arrow-square-out ph-bold ph-lg icon"
+		></i>
+	</component>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { url as local } from '@/config';
-import { useTooltip } from '@/scripts/use-tooltip';
-import * as os from '@/os';
+import { defineAsyncComponent } from "vue";
+import { url as local } from "@/config";
+import { useTooltip } from "@/scripts/use-tooltip";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	url: string;
-	rel?: null | string;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		url: string;
+		rel?: null | string;
+	}>(),
+	{}
+);
 
 const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
+const attr = self ? "to" : "href";
+const target = self ? null : "_blank";
 
 const el = $ref();
 
 useTooltip($$(el), (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
-		showing,
-		url: props.url,
-		source: el,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkUrlPreviewPopup.vue")
+		),
+		{
+			showing,
+			url: props.url,
+			source: el,
+		},
+		{},
+		"closed"
+	);
 });
 </script>
 
@@ -40,7 +59,7 @@ useTooltip($$(el), (showing) => {
 
 	> .icon {
 		padding-left: 2px;
-		font-size: .9em;
+		font-size: 0.9em;
 	}
 }
 </style>
diff --git a/packages/client/src/components/MkMarquee.vue b/packages/client/src/components/MkMarquee.vue
index 5ca04b0b4..d99ad95b6 100644
--- a/packages/client/src/components/MkMarquee.vue
+++ b/packages/client/src/components/MkMarquee.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
-import { h, onMounted, onUnmounted, ref, watch } from 'vue';
+import { h, onMounted, onUnmounted, ref, watch } from "vue";
 
 export default {
-	name: 'MarqueeText',
+	name: "MarqueeText",
 	props: {
 		duration: {
 			type: Number,
@@ -38,37 +38,35 @@ export default {
 			calc();
 		});
 
-		onUnmounted(() => {
-		});
+		onUnmounted(() => {});
 
 		return {
 			contentEl,
 		};
 	},
-	render({
-		$slots, $style, $props: {
-			duration, repeat, paused, reverse,
-		},
-	}) {
-		return h('div', { class: [$style.wrap] }, [
-			h('span', {
-				ref: 'contentEl',
-				class: [
-					paused
-						? $style.paused
-						: undefined,
-					$style.content,
-				],
-			}, Array(repeat).fill(
-				h('span', {
-					class: $style.text,
-					style: {
-						animationDirection: reverse
-							? 'reverse'
-							: undefined,
-					},
-				}, $slots.default()),
-			)),
+	render({ $slots, $style, $props: { duration, repeat, paused, reverse } }) {
+		return h("div", { class: [$style.wrap] }, [
+			h(
+				"span",
+				{
+					ref: "contentEl",
+					class: [paused ? $style.paused : undefined, $style.content],
+				},
+				Array(repeat).fill(
+					h(
+						"span",
+						{
+							class: $style.text,
+							style: {
+								animationDirection: reverse
+									? "reverse"
+									: undefined,
+							},
+						},
+						$slots.default()
+					)
+				)
+			),
 		]);
 	},
 };
@@ -100,7 +98,11 @@ export default {
 	animation-play-state: paused;
 }
 @keyframes marquee {
-	0% { transform:translateX(0); }
-	100% { transform:translateX(-100%); }
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-100%);
+	}
 }
 </style>
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index b09e61d37..833100843 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -1,70 +1,84 @@
 <template>
-<div class="mk-media-banner">
-	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
-		<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
-		<b>{{ i18n.ts.sensitive }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<VuePlyr
-			:options="{
-				controls: [
-					'play-large',
-					'play',
-					'progress',
-					'current-time',
-					'mute',
-					'volume',
-					'download',
-				],
-				disableContextMenu: false,
-			}"
+	<div class="mk-media-banner">
+		<div
+			v-if="media.isSensitive && hide"
+			class="sensitive"
+			@click="hide = false"
 		>
-			<audio
-				ref="audioEl"
-				class="audio"
-				:src="media.url"
-				:title="media.name"
-				controls
-				preload="metadata"
-				@volumechange="volumechange"
-			/>
-		</VuePlyr>
+			<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
+			<b>{{ i18n.ts.sensitive }}</b>
+			<span>{{ i18n.ts.clickToShow }}</span>
+		</div>
+		<div
+			v-else-if="
+				media.type.startsWith('audio') && media.type !== 'audio/midi'
+			"
+			class="audio"
+		>
+			<VuePlyr
+				:options="{
+					controls: [
+						'play-large',
+						'play',
+						'progress',
+						'current-time',
+						'mute',
+						'volume',
+						'download',
+					],
+					disableContextMenu: false,
+				}"
+			>
+				<audio
+					ref="audioEl"
+					class="audio"
+					:src="media.url"
+					:title="media.name"
+					controls
+					preload="metadata"
+					@volumechange="volumechange"
+				/>
+			</VuePlyr>
+		</div>
+		<a
+			v-else
+			class="download"
+			:href="media.url"
+			:title="media.name"
+			:download="media.name"
+		>
+			<span class="icon"
+				><i class="ph-download-simple ph-bold ph-lg"></i
+			></span>
+			<b>{{ media.name }}</b>
+		</a>
 	</div>
-	<a
-		v-else class="download"
-		:href="media.url"
-		:title="media.name"
-		:download="media.name"
-	>
-		<span class="icon"><i class="ph-download-simple ph-bold ph-lg"></i></span>
-		<b>{{ media.name }}</b>
-	</a>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import VuePlyr from 'vue-plyr';
-import type * as misskey from 'calckey-js';
-import { ColdDeviceStorage } from '@/store';
-import 'vue-plyr/dist/vue-plyr.css';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import VuePlyr from "vue-plyr";
+import type * as misskey from "calckey-js";
+import { ColdDeviceStorage } from "@/store";
+import "vue-plyr/dist/vue-plyr.css";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	media: misskey.entities.DriveFile;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		media: misskey.entities.DriveFile;
+	}>(),
+	{}
+);
 
 const audioEl = $ref<HTMLAudioElement | null>();
 let hide = $ref(true);
 
 function volumechange() {
-	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
+	if (audioEl) ColdDeviceStorage.set("mediaVolume", audioEl.volume);
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+	if (audioEl) audioEl.volume = ColdDeviceStorage.get("mediaVolume");
 });
 </script>
 
@@ -97,7 +111,7 @@ onMounted(() => {
 		}
 
 		> *:not(:last-child) {
-			margin-right: .2em;
+			margin-right: 0.2em;
 		}
 
 		> .icon {
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 7168d8723..44f7b55a6 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -1,45 +1,81 @@
 <template>
-<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
-	<div class="container">
-		<div class="fullwidth top-caption">
-			<div class="mk-dialog">
-				<header>
-					<Mfm v-if="title" class="title" :text="title"/>
-					<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
-					<br/>
-				</header>
-				<textarea id="captioninput" v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
-				<div v-if="(showOkButton || showCaptionButton || showCancelButton)" class="buttons">
-					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
-					<MkButton inline @click="caption">{{ i18n.ts.caption }}</MkButton>
-					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+	<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
+		<div class="container">
+			<div class="fullwidth top-caption">
+				<div class="mk-dialog">
+					<header>
+						<Mfm v-if="title" class="title" :text="title" />
+						<span
+							class="text-count"
+							:class="{ over: remainingLength < 0 }"
+							>{{ remainingLength }}</span
+						>
+						<br />
+					</header>
+					<textarea
+						id="captioninput"
+						v-model="inputValue"
+						autofocus
+						:placeholder="input.placeholder"
+						@keydown="onInputKeydown"
+					></textarea>
+					<div
+						v-if="
+							showOkButton ||
+							showCaptionButton ||
+							showCancelButton
+						"
+						class="buttons"
+					>
+						<MkButton
+							inline
+							primary
+							:disabled="remainingLength < 0"
+							@click="ok"
+							>{{ i18n.ts.ok }}</MkButton
+						>
+						<MkButton inline @click="caption">{{
+							i18n.ts.caption
+						}}</MkButton>
+						<MkButton inline @click="cancel">{{
+							i18n.ts.cancel
+						}}</MkButton>
+					</div>
 				</div>
 			</div>
+			<div class="hdrwpsaf fullwidth">
+				<header>{{ image.name }}</header>
+				<img
+					id="imgtocaption"
+					:src="image.url"
+					:alt="image.comment"
+					:title="image.comment"
+					@click="$refs.modal.close()"
+				/>
+				<footer>
+					<span>{{ image.type }}</span>
+					<span>{{ bytes(image.size) }}</span>
+					<span v-if="image.properties && image.properties.width"
+						>{{ number(image.properties.width) }}px ×
+						{{ number(image.properties.height) }}px</span
+					>
+				</footer>
+			</div>
 		</div>
-		<div class="hdrwpsaf fullwidth">
-			<header>{{ image.name }}</header>
-			<img id="imgtocaption" :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
-			<footer>
-				<span>{{ image.type }}</span>
-				<span>{{ bytes(image.size) }}</span>
-				<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
-			</footer>
-		</div>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import * as os from '@/os';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import { defineComponent } from "vue";
+import insertTextAtCursor from "insert-text-at-cursor";
+import { length } from "stringz";
+import * as os from "@/os";
+import MkModal from "@/components/MkModal.vue";
+import MkButton from "@/components/MkButton.vue";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
 export default defineComponent({
 	components: {
@@ -77,7 +113,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['done', 'closed'],
+	emits: ["done", "closed"],
 
 	data() {
 		return {
@@ -91,15 +127,15 @@ export default defineComponent({
 			const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
 			if (typeof this.inputValue !== "string") return maxCaptionLength;
 			return maxCaptionLength - length(this.inputValue);
-		}
+		},
 	},
 
 	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
+		document.addEventListener("keydown", this.onKeydown);
 	},
 
 	beforeUnmount() {
-		document.removeEventListener('keydown', this.onKeydown);
+		document.removeEventListener("keydown", this.onKeydown);
 	},
 
 	methods: {
@@ -107,7 +143,7 @@ export default defineComponent({
 		number,
 
 		done(canceled, result?) {
-			this.$emit('done', { canceled, result });
+			this.$emit("done", { canceled, result });
 			this.$refs.modal.close();
 		},
 
@@ -129,13 +165,15 @@ export default defineComponent({
 		},
 
 		onKeydown(evt) {
-			if (evt.which === 27) { // ESC
+			if (evt.which === 27) {
+				// ESC
 				this.cancel();
 			}
 		},
 
 		onInputKeydown(evt) {
-			if (evt.which === 13) { // Enter
+			if (evt.which === 13) {
+				// Enter
 				if (evt.ctrlKey) {
 					evt.preventDefault();
 					evt.stopPropagation();
@@ -145,12 +183,16 @@ export default defineComponent({
 		},
 
 		caption() {
-			const img = document.getElementById('imgtocaption') as HTMLImageElement;
-			const ta = document.getElementById('captioninput') as HTMLTextAreaElement;
-			os.api('drive/files/caption-image', {
+			const img = document.getElementById(
+				"imgtocaption"
+			) as HTMLImageElement;
+			const ta = document.getElementById(
+				"captioninput"
+			) as HTMLTextAreaElement;
+			os.api("drive/files/caption-image", {
 				url: img.src,
-			}).then(text => {
-				insertTextAtCursor(ta, text.slice(0, (512 - ta.value.length)));
+			}).then((text) => {
+				insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
 			});
 		},
 	},
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 4ad4ffaa7..882908040 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -1,32 +1,50 @@
 <template>
-<div v-if="hide" class="qjewsnkg" @click="hide = false">
-	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
-	<div class="text">
-		<div class="wrapper">
-			<b style="display: block;"><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
-			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
+	<div v-if="hide" class="qjewsnkg" @click="hide = false">
+		<ImgWithBlurhash
+			class="bg"
+			:hash="image.blurhash"
+			:title="image.comment"
+			:alt="image.comment"
+		/>
+		<div class="text">
+			<div class="wrapper">
+				<b style="display: block"
+					><i class="ph-warning ph-bold ph-lg"></i>
+					{{ i18n.ts.sensitive }}</b
+				>
+				<span style="display: block">{{ i18n.ts.clickToShow }}</span>
+			</div>
 		</div>
 	</div>
-</div>
-<div v-else class="gqnyydlz">
-	<a
-		:href="image.url"
-		:title="image.name"
-	>
-		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :type="image.type" :title="image.comment" :cover="false"/>
-		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
-	</a>
-	<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash ph-bold ph-lg"></i></button>
-</div>
+	<div v-else class="gqnyydlz">
+		<a :href="image.url" :title="image.name">
+			<ImgWithBlurhash
+				:hash="image.blurhash"
+				:src="url"
+				:alt="image.comment"
+				:type="image.type"
+				:title="image.comment"
+				:cover="false"
+			/>
+			<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
+		</a>
+		<button
+			v-tooltip="i18n.ts.hide"
+			class="_button hide"
+			@click="hide = true"
+		>
+			<i class="ph-eye-slash ph-bold ph-lg"></i>
+		</button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import type * as misskey from 'calckey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { watch } from "vue";
+import type * as misskey from "calckey-js";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -35,19 +53,28 @@ const props = defineProps<{
 
 let hide = $ref(true);
 
-const url = (props.raw || defaultStore.state.loadRawImages)
-	? props.image.url
-	: defaultStore.state.disableShowingAnimatedImages
+const url =
+	props.raw || defaultStore.state.loadRawImages
+		? props.image.url
+		: defaultStore.state.disableShowingAnimatedImages
 		? getStaticImageUrl(props.image.thumbnailUrl)
 		: props.image.thumbnailUrl;
 
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
-watch(() => props.image, () => {
-	hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
-}, {
-	deep: true,
-	immediate: true,
-});
+watch(
+	() => props.image,
+	() => {
+		hide =
+			defaultStore.state.nsfw === "force"
+				? true
+				: props.image.isSensitive &&
+				  defaultStore.state.nsfw !== "ignore";
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
+);
 </script>
 
 <style lang="scss" scoped>
@@ -120,7 +147,7 @@ watch(() => props.image, () => {
 			font-size: 14px;
 			font-weight: bold;
 			left: 12px;
-			opacity: .5;
+			opacity: 0.5;
 			padding: 0 6px;
 			text-align: center;
 			top: 12px;
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 8b6d2c2c9..ec23ca5d0 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -1,29 +1,58 @@
 <template>
-<div class="hoawjimk">
-	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
-	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
-		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop>
-			<template v-for="media in mediaList.filter(media => previewable(media))">
-				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
-				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
-			</template>
+	<div class="hoawjimk">
+		<XBanner
+			v-for="media in mediaList.filter((media) => !previewable(media))"
+			:key="media.id"
+			:media="media"
+		/>
+		<div
+			v-if="mediaList.filter((media) => previewable(media)).length > 0"
+			class="gird-container"
+			:class="{ dmWidth: inDm }"
+		>
+			<div
+				ref="gallery"
+				:data-count="
+					mediaList.filter((media) => previewable(media)).length
+				"
+				@click.stop
+			>
+				<template
+					v-for="media in mediaList.filter((media) =>
+						previewable(media)
+					)"
+				>
+					<XVideo
+						v-if="media.type.startsWith('video')"
+						:key="media.id"
+						:video="media"
+					/>
+					<XImage
+						v-else-if="media.type.startsWith('image')"
+						:key="media.id"
+						class="image"
+						:data-id="media.id"
+						:image="media"
+						:raw="raw"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as misskey from 'calckey-js';
-import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipe from 'photoswipe';
-import 'photoswipe/style.css';
-import XBanner from '@/components/MkMediaBanner.vue';
-import XImage from '@/components/MkMediaImage.vue';
-import XVideo from '@/components/MkMediaVideo.vue';
-import * as os from '@/os';
-import { FILE_TYPE_BROWSERSAFE } from '@/const';
-import { defaultStore } from '@/store';
+import { onMounted, ref } from "vue";
+import * as misskey from "calckey-js";
+import PhotoSwipeLightbox from "photoswipe/lightbox";
+import PhotoSwipe from "photoswipe";
+import "photoswipe/style.css";
+import XBanner from "@/components/MkMediaBanner.vue";
+import XImage from "@/components/MkMediaImage.vue";
+import XVideo from "@/components/MkMediaVideo.vue";
+import * as os from "@/os";
+import { FILE_TYPE_BROWSERSAFE } from "@/const";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	mediaList: misskey.entities.DriveFile[];
@@ -32,60 +61,72 @@ const props = defineProps<{
 }>();
 
 const gallery = ref(null);
-const pswpZIndex = os.claimZIndex('middle');
+const pswpZIndex = os.claimZIndex("middle");
 
 onMounted(() => {
 	const lightbox = new PhotoSwipeLightbox({
 		dataSource: props.mediaList
-			.filter(media => {
-				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
-				return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
+			.filter((media) => {
+				if (media.type === "image/svg+xml") return true; // svgのwebpublicはpngなのでtrue
+				return (
+					media.type.startsWith("image") &&
+					FILE_TYPE_BROWSERSAFE.includes(media.type)
+				);
 			})
-			.map(media => {
+			.map((media) => {
 				const item = {
 					src: media.url,
 					w: media.properties.width,
 					h: media.properties.height,
 					alt: media.comment,
 				};
-				if (media.properties.orientation != null && media.properties.orientation >= 5) {
+				if (
+					media.properties.orientation != null &&
+					media.properties.orientation >= 5
+				) {
 					[item.w, item.h] = [item.h, item.w];
 				}
 				return item;
 			}),
 		gallery: gallery.value,
-		children: '.image',
-		thumbSelector: '.image',
+		children: ".image",
+		thumbSelector: ".image",
 		loop: false,
-		padding: window.innerWidth > 500 ? {
-			top: 32,
-			bottom: 32,
-			left: 32,
-			right: 32,
-		} : {
-			top: 0,
-			bottom: 0,
-			left: 0,
-			right: 0,
-		},
-		imageClickAction: 'close',
-		tapAction: 'toggle-controls',
+		padding:
+			window.innerWidth > 500
+				? {
+						top: 32,
+						bottom: 32,
+						left: 32,
+						right: 32,
+				  }
+				: {
+						top: 0,
+						bottom: 0,
+						left: 0,
+						right: 0,
+				  },
+		imageClickAction: "close",
+		tapAction: "toggle-controls",
 		pswpModule: PhotoSwipe,
 	});
 
-	lightbox.on('itemData', (ev) => {
+	lightbox.on("itemData", (ev) => {
 		const { itemData } = ev;
 
 		// element is children
 		const { element } = itemData;
 
 		const id = element.dataset.id;
-		const file = props.mediaList.find(media => media.id === id);
+		const file = props.mediaList.find((media) => media.id === id);
 
 		itemData.src = file.url;
 		itemData.w = Number(file.properties.width);
 		itemData.h = Number(file.properties.height);
-		if (file.properties.orientation != null && file.properties.orientation >= 5) {
+		if (
+			file.properties.orientation != null &&
+			file.properties.orientation >= 5
+		) {
 			[itemData.w, itemData.h] = [itemData.h, itemData.w];
 		}
 		itemData.msrc = file.thumbnailUrl;
@@ -93,17 +134,17 @@ onMounted(() => {
 		itemData.thumbCropped = true;
 	});
 
-	lightbox.on('uiRegister', () => {
+	lightbox.on("uiRegister", () => {
 		lightbox.pswp.ui.registerElement({
-			name: 'altText',
-			className: 'pwsp__alt-text-container',
-			appendTo: 'wrapper',
+			name: "altText",
+			className: "pwsp__alt-text-container",
+			appendTo: "wrapper",
 			onInit: (el, pwsp) => {
-				let textBox = document.createElement('p');
-				textBox.className = 'pwsp__alt-text';
+				let textBox = document.createElement("p");
+				textBox.className = "pwsp__alt-text";
 				el.appendChild(textBox);
 
-				let preventProp = function(ev: Event): void {
+				let preventProp = function (ev: Event): void {
 					ev.stopPropagation();
 				};
 
@@ -114,7 +155,7 @@ onMounted(() => {
 				el.onpointercancel = preventProp;
 				el.onpointermove = preventProp;
 
-				pwsp.on('change', () => {
+				pwsp.on("change", () => {
 					textBox.textContent = pwsp.currSlide.data.alt?.trim();
 				});
 			},
@@ -125,15 +166,17 @@ onMounted(() => {
 });
 
 const previewable = (file: misskey.entities.DriveFile): boolean => {
-	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
+	if (file.type === "image/svg+xml") return true; // svgのwebpublic/thumbnailはpngなのでtrue
 	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
-	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
+	return (
+		(file.type.startsWith("video") || file.type.startsWith("image")) &&
+		FILE_TYPE_BROWSERSAFE.includes(file.type)
+	);
 };
 </script>
 
 <style lang="scss" scoped>
 .hoawjimk {
-
 	> .dmWidth {
 		min-width: 20rem;
 		max-width: 40rem;
@@ -147,9 +190,9 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 		overflow: hidden;
 
 		&:before {
-			content: '';
+			content: "";
 			display: block;
-			padding-top: 56.25% // 16:9;
+			padding-top: 56.25%; // 16:9;
 		}
 
 		> div {
@@ -221,7 +264,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 <style lang="scss">
 .pswp {
 	// なぜか機能しない
-  //z-index: v-bind(pswpZIndex);
+	//z-index: v-bind(pswpZIndex);
 	z-index: 2000000;
 }
 .pwsp__alt-text-container {
@@ -254,5 +297,4 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 .pwsp__alt-text:empty {
 	display: none;
 }
-
 </style>
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index 48a599407..7440fb2cb 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -1,58 +1,66 @@
 <template>
-<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
-	<div>
-		<b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
-		<span>{{ i18n.ts.clickToShow }}</span>
-	</div>
-</div>
-<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<VuePlyr
-		:options="{
-			controls: [
-				'play-large',
-				'play',
-				'progress',
-				'current-time',
-				'mute',
-				'volume',
-				'pip',
-				'download',
-				'fullscreen'
-			],
-			disableContextMenu: false,
-		}"
+	<div
+		v-if="hide"
+		class="icozogqfvdetwohsdglrbswgrejoxbdj"
+		@click="hide = false"
 	>
-		<video
-			:poster="video.thumbnailUrl"
-			:title="video.comment"
-			:aria-label="video.comment"
-			preload="none"
-			controls
-			@contextmenu.stop
-		>
-			<source
-				:src="video.url"
-				:type="video.type"
+		<div>
+			<b
+				><i class="ph-warning ph-bold ph-lg"></i>
+				{{ i18n.ts.sensitive }}</b
 			>
-		</video>
-	</VuePlyr>
-	<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
-</div>
+			<span>{{ i18n.ts.clickToShow }}</span>
+		</div>
+	</div>
+	<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
+		<VuePlyr
+			:options="{
+				controls: [
+					'play-large',
+					'play',
+					'progress',
+					'current-time',
+					'mute',
+					'volume',
+					'pip',
+					'download',
+					'fullscreen',
+				],
+				disableContextMenu: false,
+			}"
+		>
+			<video
+				:poster="video.thumbnailUrl"
+				:title="video.comment"
+				:aria-label="video.comment"
+				preload="none"
+				controls
+				@contextmenu.stop
+			>
+				<source :src="video.url" :type="video.type" />
+			</video>
+		</VuePlyr>
+		<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import VuePlyr from 'vue-plyr';
-import type * as misskey from 'calckey-js';
-import { defaultStore } from '@/store';
-import 'vue-plyr/dist/vue-plyr.css';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import VuePlyr from "vue-plyr";
+import type * as misskey from "calckey-js";
+import { defaultStore } from "@/store";
+import "vue-plyr/dist/vue-plyr.css";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
 }>();
 
-const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
+const hide = ref(
+	defaultStore.state.nsfw === "force"
+		? true
+		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
+);
 </script>
 
 <style lang="scss" scoped>
@@ -67,7 +75,7 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
 		background-color: var(--fg);
 		color: var(--accentLighten);
 		font-size: 14px;
-		opacity: .5;
+		opacity: 0.5;
 		padding: 3px 6px;
 		text-align: center;
 		cursor: pointer;
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
index 2a7340421..4a336c941 100644
--- a/packages/client/src/components/MkMention.vue
+++ b/packages/client/src/components/MkMention.vue
@@ -1,40 +1,68 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
-	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</a>
+	<MkA
+		v-if="url.startsWith('/')"
+		v-user-preview="canonical"
+		class="akbvjaqn"
+		:class="{ isMe }"
+		:to="url"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
+		<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
+		<span class="main">
+			<span class="username">@{{ username }}</span>
+			<span
+				v-if="host != localHost || $store.state.showFullAcct"
+				class="host"
+				>@{{ toUnicode(host) }}</span
+			>
+		</span>
+	</MkA>
+	<a
+		v-else
+		class="akbvjaqn"
+		:href="url"
+		target="_blank"
+		rel="noopener"
+		:style="{ background: bgCss }"
+		@click.stop
+	>
+		<span class="main">
+			<span class="username">@{{ username }}</span>
+			<span class="host">@{{ toUnicode(host) }}</span>
+		</span>
+	</a>
 </template>
 
 <script lang="ts" setup>
-import { toUnicode } from 'punycode';
-import { } from 'vue';
-import tinycolor from 'tinycolor2';
-import { host as localHost } from '@/config';
-import { $i } from '@/account';
+import { toUnicode } from "punycode";
+import {} from "vue";
+import tinycolor from "tinycolor2";
+import { host as localHost } from "@/config";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	username: string;
 	host: string;
 }>();
 
-const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
+const canonical =
+	props.host === localHost
+		? `@${props.username}`
+		: `@${props.username}@${toUnicode(props.host)}`;
 
 const url = `/${canonical}`;
 
-const isMe = $i && (
-	`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
-);
+const isMe =
+	$i &&
+	`@${props.username}@${toUnicode(props.host)}` ===
+		`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
 
-const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
+const bg = tinycolor(
+	getComputedStyle(document.documentElement).getPropertyValue(
+		isMe ? "--mentionMe" : "--mention"
+	)
+);
 bg.setAlpha(0.1);
 const bgCss = bg.toRgbString();
 </script>
diff --git a/packages/client/src/components/MkMenu.child.vue b/packages/client/src/components/MkMenu.child.vue
index 3ada4afbd..6b05ab447 100644
--- a/packages/client/src/components/MkMenu.child.vue
+++ b/packages/client/src/components/MkMenu.child.vue
@@ -1,15 +1,29 @@
 <template>
-<div ref="el" class="sfhdhdhr">
-	<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
-</div>
+	<div ref="el" class="sfhdhdhr">
+		<MkMenu
+			ref="menu"
+			:items="items"
+			:align="align"
+			:width="width"
+			:as-drawer="false"
+			@close="onChildClosed"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { on } from 'events';
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from '@/types/menu';
-import * as os from '@/os';
+import { on } from "events";
+import {
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	ref,
+	watch,
+} from "vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "@/types/menu";
+import * as os from "@/os";
 
 const props = defineProps<{
 	items: MenuItem[];
@@ -20,27 +34,27 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'actioned'): void;
+	(ev: "closed"): void;
+	(ev: "actioned"): void;
 }>();
 
 const el = ref<HTMLElement>();
-const align = 'left';
+const align = "left";
 
 function setPosition() {
 	const rootRect = props.rootElement.getBoundingClientRect();
 	const rect = props.targetElement.getBoundingClientRect();
 	const left = props.targetElement.offsetWidth;
-	const top = (rect.top - rootRect.top) - 8;
-	el.value.style.left = left + 'px';
-	el.value.style.top = top + 'px';
+	const top = rect.top - rootRect.top - 8;
+	el.value.style.left = left + "px";
+	el.value.style.top = top + "px";
 }
 
 function onChildClosed(actioned?: boolean) {
 	if (actioned) {
-		emit('actioned');
+		emit("actioned");
 	} else {
-		emit('closed');
+		emit("closed");
 	}
 }
 
@@ -53,7 +67,7 @@ onMounted(() => {
 
 defineExpose({
 	checkHit: (ev: MouseEvent) => {
-		return (ev.target === el.value || el.value.contains(ev.target));
+		return ev.target === el.value || el.value.contains(ev.target);
 	},
 });
 </script>
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index c0502387a..88c8af1c5 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -1,93 +1,225 @@
 <template>
-<div>
-	<div
-		ref="itemsEl" v-hotkey="keymap"
-		class="rrevdjwt _popup _shadow"
-		:class="{ center: align === 'center', asDrawer }"
-		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
-		@contextmenu.self="e => e.preventDefault()"
-	>
-		<template v-for="(item, i) in items2">
-			<div v-if="item === null" class="divider"></div>
-			<span v-else-if="item.type === 'label'" class="label item">
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
+	<div>
+		<div
+			ref="itemsEl"
+			v-hotkey="keymap"
+			class="rrevdjwt _popup _shadow"
+			:class="{ center: align === 'center', asDrawer }"
+			:style="{
+				width: width && !asDrawer ? width + 'px' : '',
+				maxHeight: maxHeight ? maxHeight + 'px' : '',
+			}"
+			@contextmenu.self="(e) => e.preventDefault()"
+		>
+			<template v-for="(item, i) in items2">
+				<div v-if="item === null" class="divider"></div>
+				<span v-else-if="item.type === 'label'" class="label item">
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+				</span>
+				<span
+					v-else-if="item.type === 'pending'"
+					:tabindex="i"
+					class="pending item"
+				>
+					<span><MkEllipsis /></span>
+				</span>
+				<MkA
+					v-else-if="item.type === 'link'"
+					:to="item.to"
+					:tabindex="i"
+					class="_button item"
+					@click.passive="close(true)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<MkAvatar
+						v-if="item.avatar"
+						:user="item.avatar"
+						class="avatar"
+					/>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</MkA>
+				<a
+					v-else-if="item.type === 'a'"
+					:href="item.href"
+					:target="item.target"
+					:download="item.download"
+					:tabindex="i"
+					class="_button item"
+					@click="close(true)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</a>
+				<button
+					v-else-if="item.type === 'user' && !items.hidden"
+					:tabindex="i"
+					class="_button item"
+					:class="{ active: item.active }"
+					:disabled="item.active"
+					@click="clicked(item.action, $event)"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<MkAvatar :user="item.user" class="avatar" /><MkUserName
+						:user="item.user"
+					/>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</button>
+				<span
+					v-else-if="item.type === 'switch'"
+					:tabindex="i"
+					class="item"
+					@mouseenter.passive="onItemMouseEnter(item)"
+					@mouseleave.passive="onItemMouseLeave(item)"
+				>
+					<FormSwitch
+						v-model="item.ref"
+						:disabled="item.disabled"
+						class="form-switch"
+						:style="item.textStyle || ''"
+						>{{ item.text }}</FormSwitch
+					>
+				</span>
+				<button
+					v-else-if="item.type === 'parent'"
+					:tabindex="i"
+					class="_button item parent"
+					:class="{ childShowing: childShowingItem === item }"
+					@mouseenter="showChildren(item, $event)"
+				>
+					<i
+						v-if="item.icon"
+						class="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span class="caret"
+						><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i
+					></span>
+				</button>
+				<button
+					v-else-if="!item.hidden"
+					:tabindex="i"
+					class="_button item"
+					:class="{ danger: item.danger, 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="ph-fw ph-lg"
+						:class="item.icon"
+					></i>
+					<span v-else-if="item.icons">
+						<i
+							v-for="icon in item.icons"
+							class="ph-fw ph-lg"
+							:class="icon"
+						></i>
+					</span>
+					<MkAvatar
+						v-if="item.avatar"
+						:user="item.avatar"
+						class="avatar"
+					/>
+					<span :style="item.textStyle || ''">{{ item.text }}</span>
+					<span v-if="item.indicate" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</button>
+			</template>
+			<span v-if="items2.length === 0" class="none item">
+				<span>{{ i18n.ts.none }}</span>
 			</span>
-			<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
-				<span><MkEllipsis/></span>
-			</span>
-			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</MkA>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</a>
-			<button v-else-if="item.type === 'user' && !items.hidden" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</button>
-			<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch" :style="item.textStyle || ''">{{ item.text }}</FormSwitch>
-			</span>
-			<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
-				<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span class="caret"><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i></span>
-			</button>
-			<button v-else-if="!item.hidden" :tabindex="i" class="_button item" :class="{ danger: item.danger, 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="ph-fw ph-lg" :class="item.icon"></i>
-				<span v-else-if="item.icons">
-					<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
-				</span>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span :style="item.textStyle || ''">{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</button>
-		</template>
-		<span v-if="items2.length === 0" class="none item">
-			<span>{{ i18n.ts.none }}</span>
-		</span>
+		</div>
+		<div v-if="childMenu" class="child">
+			<XChild
+				ref="child"
+				:items="childMenu"
+				:target-element="childTarget"
+				:root-element="itemsEl"
+				showing
+				@actioned="childActioned"
+			/>
+		</div>
 	</div>
-	<div v-if="childMenu" class="child">
-		<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, menu, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { focusPrev, focusNext } from '@/scripts/focus';
-import FormSwitch from '@/components/form/switch.vue';
-import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {
+	computed,
+	menu,
+	defineAsyncComponent,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	Ref,
+	ref,
+	watch,
+} from "vue";
+import { focusPrev, focusNext } from "@/scripts/focus";
+import FormSwitch from "@/components/form/switch.vue";
+import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
+const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
 
 const props = defineProps<{
 	items: MenuItem[];
 	viaKeyboard?: boolean;
 	asDrawer?: boolean;
-	align?: 'center' | string;
+	align?: "center" | string;
 	width?: number;
 	maxHeight?: number;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'close', actioned?: boolean): void;
+	(ev: "close", actioned?: boolean): void;
 }>();
 
 let itemsEl = $ref<HTMLDivElement>();
@@ -97,31 +229,38 @@ let items2: InnerMenuItem[] = $ref([]);
 let child = $ref<InstanceType<typeof XChild>>();
 
 let keymap = computed(() => ({
-	'up|k|shift+tab': focusUp,
-	'down|j|tab': focusDown,
-	'esc': close,
+	"up|k|shift+tab": focusUp,
+	"down|j|tab": focusDown,
+	esc: close,
 }));
 
 let childShowingItem = $ref<MenuItem | null>();
 
-watch(() => props.items, () => {
-	const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
+watch(
+	() => props.items,
+	() => {
+		const items: (MenuItem | MenuPending)[] = [...props.items].filter(
+			(item) => item !== undefined
+		);
 
-	for (let i = 0; i < items.length; i++) {
-		const item = items[i];
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
 
-		if (item && 'then' in item) { // if item is Promise
-			items[i] = { type: 'pending' };
-			item.then(actualItem => {
-				items2[i] = actualItem;
-			});
+			if (item && "then" in item) {
+				// if item is Promise
+				items[i] = { type: "pending" };
+				item.then((actualItem) => {
+					items2[i] = actualItem;
+				});
+			}
 		}
-	}
 
-	items2 = items as InnerMenuItem[];
-}, {
-	immediate: true,
-});
+		items2 = items as InnerMenuItem[];
+	},
+	{
+		immediate: true,
+	}
+);
 
 let childMenu = $ref<MenuItem[] | null>();
 let childTarget = $ref<HTMLElement | null>();
@@ -137,7 +276,11 @@ function childActioned() {
 }
 
 function onGlobalMousedown(event: MouseEvent) {
-	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
+	if (
+		childTarget &&
+		(event.target === childTarget || childTarget.contains(event.target))
+	)
+		return;
 	if (child && child.checkHit(event)) return;
 	closeChild();
 }
@@ -169,7 +312,7 @@ function clicked(fn: MenuAction, ev: MouseEvent) {
 }
 
 function close(actioned = false) {
-	emit('close', actioned);
+	emit("close", actioned);
 }
 
 function focusUp() {
@@ -187,11 +330,13 @@ onMounted(() => {
 		});
 	}
 
-	document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
+	document.addEventListener("mousedown", onGlobalMousedown, {
+		passive: true,
+	});
 });
 
 onBeforeUnmount(() => {
-	document.removeEventListener('mousedown', onGlobalMousedown);
+	document.removeEventListener("mousedown", onGlobalMousedown);
 });
 </script>
 
diff --git a/packages/client/src/components/MkMiniChart.vue b/packages/client/src/components/MkMiniChart.vue
index c64ce163f..b7db265ac 100644
--- a/packages/client/src/components/MkMiniChart.vue
+++ b/packages/client/src/components/MkMiniChart.vue
@@ -1,35 +1,34 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
-	<defs>
-		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
-			<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
-			<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
-		</linearGradient>
-	</defs>
-	<polygon
-		:points="polygonPoints"
-		:style="`stroke: none; fill: url(#${ gradientId });`"
-	/>
-	<polyline
-		:points="polylinePoints"
-		fill="none"
-		:stroke="color"
-		stroke-width="2"
-	/>
-	<circle
-		:cx="headX"
-		:cy="headY"
-		r="3"
-		:fill="color"
-	/>
-</svg>
+	<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`" style="overflow: visible">
+		<defs>
+			<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
+				<stop
+					offset="100%"
+					:stop-color="color"
+					stop-opacity="0.65"
+				></stop>
+			</linearGradient>
+		</defs>
+		<polygon
+			:points="polygonPoints"
+			:style="`stroke: none; fill: url(#${gradientId});`"
+		/>
+		<polyline
+			:points="polylinePoints"
+			fill="none"
+			:stroke="color"
+			stroke-width="2"
+		/>
+		<circle :cx="headX" :cy="headY" r="3" :fill="color" />
+	</svg>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import tinycolor from 'tinycolor2';
-import { useInterval } from '@/scripts/use-interval';
+import { onUnmounted, watch } from "vue";
+import { v4 as uuid } from "uuid";
+import tinycolor from "tinycolor2";
+import { useInterval } from "@/scripts/use-interval";
 
 const props = defineProps<{
 	src: number[];
@@ -38,12 +37,14 @@ const props = defineProps<{
 const viewBoxX = 50;
 const viewBoxY = 50;
 const gradientId = uuid();
-let polylinePoints = $ref('');
-let polygonPoints = $ref('');
+let polylinePoints = $ref("");
+let polygonPoints = $ref("");
 let headX = $ref<number | null>(null);
 let headY = $ref<number | null>(null);
 let clock = $ref<number | null>(null);
-const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
+const accent = tinycolor(
+	getComputedStyle(document.documentElement).getPropertyValue("--accent")
+);
 const color = accent.toRgbString();
 
 function draw(): void {
@@ -52,12 +53,12 @@ function draw(): void {
 
 	const _polylinePoints = stats.map((n, i) => [
 		i * (viewBoxX / (stats.length - 1)),
-		(1 - (n / peak)) * viewBoxY,
+		(1 - n / peak) * viewBoxY,
 	]);
 
-	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	polylinePoints = _polylinePoints.map((xy) => `${xy[0]},${xy[1]}`).join(" ");
 
-	polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`;
+	polygonPoints = `0,${viewBoxY} ${polylinePoints} ${viewBoxX},${viewBoxY}`;
 
 	headX = _polylinePoints[_polylinePoints.length - 1][0];
 	headY = _polylinePoints[_polylinePoints.length - 1][1];
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 80cfaf8da..d9cd56f95 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -1,15 +1,64 @@
 <template>
 	<Transition
 		:name="transitionName"
-		:enter-active-class="$style['transition_' + transitionName + '_enterActive']"
-		:leave-active-class="$style['transition_' + transitionName + '_leaveActive']"
-		:enter-from-class="$style['transition_' + transitionName + '_enterFrom']"
+		:enter-active-class="
+			$style['transition_' + transitionName + '_enterActive']
+		"
+		:leave-active-class="
+			$style['transition_' + transitionName + '_leaveActive']
+		"
+		:enter-from-class="
+			$style['transition_' + transitionName + '_enterFrom']
+		"
 		:leave-to-class="$style['transition_' + transitionName + '_leaveTo']"
-		:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
+		:duration="transitionDuration"
+		appear
+		@after-leave="emit('closed')"
+		@enter="emit('opening')"
+		@after-enter="onOpened"
 	>
-		<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-			<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
-			<div ref="content" :class="[$style.content, { [$style.fixed]: fixed, top: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick">
+		<div
+			v-show="manualShowing != null ? manualShowing : showing"
+			v-hotkey.global="keymap"
+			:class="[
+				$style.root,
+				{
+					[$style.drawer]: type === 'drawer',
+					[$style.dialog]: type === 'dialog' || type === 'dialog:top',
+					[$style.popup]: type === 'popup',
+				},
+			]"
+			:style="{
+				zIndex,
+				pointerEvents: (manualShowing != null ? manualShowing : showing)
+					? 'auto'
+					: 'none',
+				'--transformOrigin': transformOrigin,
+			}"
+		>
+			<div
+				class="_modalBg data-cy-bg"
+				:class="[
+					$style.bg,
+					{
+						[$style.bgTransparent]: isEnableBgTransparent,
+						'data-cy-transparent': isEnableBgTransparent,
+					},
+				]"
+				:style="{ zIndex }"
+				@click="onBgClick"
+				@mousedown="onBgClick"
+				@contextmenu.prevent.stop="() => {}"
+			></div>
+			<div
+				ref="content"
+				:class="[
+					$style.content,
+					{ [$style.fixed]: fixed, top: type === 'dialog:top' },
+				]"
+				:style="{ zIndex }"
+				@click.self="onBgClick"
+			>
 				<slot :max-height="maxHeight" :type="type"></slot>
 			</div>
 		</div>
@@ -17,94 +66,103 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide } from 'vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { defaultStore } from '@/store';
-import { deviceKind } from '@/scripts/device-kind';
+import { nextTick, onMounted, watch, provide } from "vue";
+import * as os from "@/os";
+import { isTouchUsing } from "@/scripts/touch";
+import { defaultStore } from "@/store";
+import { deviceKind } from "@/scripts/device-kind";
 
 function getFixedContainer(el: Element | null): Element | null {
-	if (el == null || el.tagName === 'BODY') return null;
-	const position = window.getComputedStyle(el).getPropertyValue('position');
-	if (position === 'fixed') {
+	if (el == null || el.tagName === "BODY") return null;
+	const position = window.getComputedStyle(el).getPropertyValue("position");
+	if (position === "fixed") {
 		return el;
 	} else {
 		return getFixedContainer(el.parentElement);
 	}
 }
 
-type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
+type ModalTypes = "popup" | "dialog" | "dialog:top" | "drawer";
 
-const props = withDefaults(defineProps<{
-	manualShowing?: boolean | null;
-	anchor?: { x: string; y: string; };
-	src?: HTMLElement;
-	preferType?: ModalTypes | 'auto';
-	zPriority?: 'low' | 'middle' | 'high';
-	noOverlap?: boolean;
-	transparentBg?: boolean;
-}>(), {
-	manualShowing: null,
-	src: null,
-	anchor: () => ({ x: 'center', y: 'bottom' }),
-	preferType: 'auto',
-	zPriority: 'low',
-	noOverlap: true,
-	transparentBg: false,
-});
+const props = withDefaults(
+	defineProps<{
+		manualShowing?: boolean | null;
+		anchor?: { x: string; y: string };
+		src?: HTMLElement;
+		preferType?: ModalTypes | "auto";
+		zPriority?: "low" | "middle" | "high";
+		noOverlap?: boolean;
+		transparentBg?: boolean;
+	}>(),
+	{
+		manualShowing: null,
+		src: null,
+		anchor: () => ({ x: "center", y: "bottom" }),
+		preferType: "auto",
+		zPriority: "low",
+		noOverlap: true,
+		transparentBg: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'opening'): void;
-	(ev: 'opened'): void;
-	(ev: 'click'): void;
-	(ev: 'esc'): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
+	(ev: "opening"): void;
+	(ev: "opened"): void;
+	(ev: "click"): void;
+	(ev: "esc"): void;
+	(ev: "close"): void;
+	(ev: "closed"): void;
 }>();
 
-provide('modal', true);
+provide("modal", true);
 
 let maxHeight = $ref<number>();
 let fixed = $ref(false);
-let transformOrigin = $ref('center');
+let transformOrigin = $ref("center");
 let showing = $ref(true);
 let content = $shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
 let useSendAnime = $ref(false);
 const type = $computed<ModalTypes>(() => {
-	if (props.preferType === 'auto') {
-		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
-			return 'drawer';
+	if (props.preferType === "auto") {
+		if (
+			!defaultStore.state.disableDrawer &&
+			isTouchUsing &&
+			deviceKind === "smartphone"
+		) {
+			return "drawer";
 		} else {
-			return props.src != null ? 'popup' : 'dialog';
+			return props.src != null ? "popup" : "dialog";
 		}
 	} else {
 		return props.preferType!;
 	}
 });
-const isEnableBgTransparent = $computed(() => props.transparentBg && (type === 'popup'));
-let transitionName = $computed((() =>
+const isEnableBgTransparent = $computed(
+	() => props.transparentBg && type === "popup"
+);
+let transitionName = $computed(() =>
 	defaultStore.state.animation
 		? useSendAnime
-			? 'send'
-			: type === 'drawer'
-				? 'modal-drawer'
-				: type === 'popup'
-					? 'modal-popup'
-					: 'modal'
-		: ''
-));
-let transitionDuration = $computed((() =>
-	transitionName === 'send'
+			? "send"
+			: type === "drawer"
+			? "modal-drawer"
+			: type === "popup"
+			? "modal-popup"
+			: "modal"
+		: ""
+);
+let transitionDuration = $computed(() =>
+	transitionName === "send"
 		? 400
-		: transitionName === 'modal-popup'
-			? 100
-			: transitionName === 'modal'
-				? 200
-				: transitionName === 'modal-drawer'
-					? 200
-					: 0
-));
+		: transitionName === "modal-popup"
+		? 100
+		: transitionName === "modal"
+		? 200
+		: transitionName === "modal-drawer"
+		? 200
+		: 0
+);
 
 let contentClicking = false;
 
@@ -114,30 +172,30 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
 	}
 
 	// eslint-disable-next-line vue/no-mutating-props
-	if (props.src) props.src.style.pointerEvents = 'auto';
+	if (props.src) props.src.style.pointerEvents = "auto";
 	showing = false;
-	emit('close');
+	emit("close");
 }
 
 function onBgClick() {
 	if (contentClicking) return;
-	emit('click');
+	emit("click");
 }
 
-if (type === 'drawer') {
+if (type === "drawer") {
 	maxHeight = window.innerHeight / 1.5;
 }
 
 const keymap = {
-	'esc': () => emit('esc'),
+	esc: () => emit("esc"),
 };
 
 const MARGIN = 16;
 
 const align = () => {
 	if (props.src == null) return;
-	if (type === 'drawer') return;
-	if (type === 'dialog') return;
+	if (type === "drawer") return;
+	if (type === "dialog") return;
 
 	if (content == null) return;
 
@@ -152,19 +210,19 @@ const align = () => {
 	const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
 	const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
 
-	if (props.anchor.x === 'center') {
-		left = x + (props.src.offsetWidth / 2) - (width / 2);
-	} else if (props.anchor.x === 'left') {
+	if (props.anchor.x === "center") {
+		left = x + props.src.offsetWidth / 2 - width / 2;
+	} else if (props.anchor.x === "left") {
 		// TODO
-	} else if (props.anchor.x === 'right') {
+	} else if (props.anchor.x === "right") {
 		left = x + props.src.offsetWidth;
 	}
 
-	if (props.anchor.y === 'center') {
-		top = (y - (height / 2));
-	} else if (props.anchor.y === 'top') {
+	if (props.anchor.y === "center") {
+		top = y - height / 2;
+	} else if (props.anchor.y === "top") {
 		// TODO
-	} else if (props.anchor.y === 'bottom') {
+	} else if (props.anchor.y === "bottom") {
 		top = y + props.src.offsetHeight;
 	}
 
@@ -174,20 +232,20 @@ const align = () => {
 			left = window.innerWidth - width;
 		}
 
-		const underSpace = (window.innerHeight - MARGIN) - top;
-		const upperSpace = (srcRect.top - MARGIN);
+		const underSpace = window.innerHeight - MARGIN - top;
+		const upperSpace = srcRect.top - MARGIN;
 
 		// 画面から縦にはみ出る場合
-		if (top + height > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
+		if (top + height > window.innerHeight - MARGIN) {
+			if (props.noOverlap && props.anchor.x === "center") {
+				if (underSpace >= upperSpace / 3) {
 					maxHeight = underSpace;
 				} else {
 					maxHeight = upperSpace;
-					top = (upperSpace + MARGIN) - height;
+					top = upperSpace + MARGIN - height;
 				}
 			} else {
-				top = (window.innerHeight - MARGIN) - height;
+				top = window.innerHeight - MARGIN - height;
 			}
 		} else {
 			maxHeight = underSpace;
@@ -198,20 +256,26 @@ const align = () => {
 			left = window.innerWidth - width + window.scrollX - 1;
 		}
 
-		const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
-		const upperSpace = (srcRect.top - MARGIN);
+		const underSpace =
+			window.innerHeight - MARGIN - (top - window.pageYOffset);
+		const upperSpace = srcRect.top - MARGIN;
 
 		// 画面から縦にはみ出る場合
-		if (top + height - window.scrollY > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
+		if (top + height - window.scrollY > window.innerHeight - MARGIN) {
+			if (props.noOverlap && props.anchor.x === "center") {
+				if (underSpace >= upperSpace / 3) {
 					maxHeight = underSpace;
 				} else {
 					maxHeight = upperSpace;
-					top = window.scrollY + ((upperSpace + MARGIN) - height);
+					top = window.scrollY + (upperSpace + MARGIN - height);
 				}
 			} else {
-				top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
+				top =
+					window.innerHeight -
+					MARGIN -
+					height +
+					window.pageYOffset -
+					1;
 			}
 		} else {
 			maxHeight = underSpace;
@@ -226,55 +290,76 @@ const align = () => {
 		left = 0;
 	}
 
-	let transformOriginX = 'center';
-	let transformOriginY = 'center';
+	let transformOriginX = "center";
+	let transformOriginY = "center";
 
-	if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'top';
-	} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'bottom';
+	if (
+		top >=
+		srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)
+	) {
+		transformOriginY = "top";
+	} else if (top + height <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
+		transformOriginY = "bottom";
 	}
 
-	if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'left';
-	} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'right';
+	if (
+		left >=
+		srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)
+	) {
+		transformOriginX = "left";
+	} else if (
+		left + width <=
+		srcRect.left + (fixed ? 0 : window.pageXOffset)
+	) {
+		transformOriginX = "right";
 	}
 
 	transformOrigin = `${transformOriginX} ${transformOriginY}`;
 
-	content.style.left = left + 'px';
-	content.style.top = top + 'px';
+	content.style.left = left + "px";
+	content.style.top = top + "px";
 };
 
 const onOpened = () => {
-	emit('opened');
+	emit("opened");
 
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
 	const el = content!.children[0];
-	el.addEventListener('mousedown', ev => {
-		contentClicking = true;
-		window.addEventListener('mouseup', ev => {
-			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
-			window.setTimeout(() => {
-				contentClicking = false;
-			}, 100);
-		}, { passive: true, once: true });
-	}, { passive: true });
+	el.addEventListener(
+		"mousedown",
+		(ev) => {
+			contentClicking = true;
+			window.addEventListener(
+				"mouseup",
+				(ev) => {
+					// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
+					window.setTimeout(() => {
+						contentClicking = false;
+					}, 100);
+				},
+				{ passive: true, once: true }
+			);
+		},
+		{ passive: true }
+	);
 };
 
 onMounted(() => {
-	watch(() => props.src, async () => {
-		if (props.src) {
-			// eslint-disable-next-line vue/no-mutating-props
-			props.src.style.pointerEvents = 'none';
-		}
-		fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
+	watch(
+		() => props.src,
+		async () => {
+			if (props.src) {
+				// eslint-disable-next-line vue/no-mutating-props
+				props.src.style.pointerEvents = "none";
+			}
+			fixed = type === "drawer" || getFixedContainer(props.src) != null;
 
-		await nextTick();
+			await nextTick();
 
-		align();
-	}, { immediate: true });
+			align();
+		},
+		{ immediate: true }
+	);
 
 	nextTick(() => {
 		new ResizeObserver((entries, observer) => {
@@ -297,7 +382,8 @@ defineExpose({
 
 	> .content {
 		transform: translateY(0px);
-		transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(.5,-0.5,1,.5) !important;
+		transition: opacity 0.3s ease-in,
+			transform 0.3s cubic-bezier(0.5, -0.5, 1, 0.5) !important;
 	}
 }
 .transition_send_enterFrom,
@@ -346,7 +432,8 @@ defineExpose({
 
 	> .content {
 		transform-origin: var(--transformOrigin);
-		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
+		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+			transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
 	}
 }
 .transition_modal-popup_enterFrom,
@@ -369,7 +456,7 @@ defineExpose({
 	}
 
 	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+		transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
 	}
 }
 .transition_modal-drawer_leaveActive {
@@ -378,7 +465,7 @@ defineExpose({
 	}
 
 	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+		transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
 	}
 }
 .transition_modal-drawer_enterFrom,
@@ -404,15 +491,39 @@ defineExpose({
 			margin: auto;
 			padding: 32px;
 			// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
+			-webkit-mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 32px,
+				rgba(0, 0, 0, 1) calc(100% - 32px),
+				rgba(0, 0, 0, 0) 100%
+			);
+			mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 32px,
+				rgba(0, 0, 0, 1) calc(100% - 32px),
+				rgba(0, 0, 0, 0) 100%
+			);
 			overflow: auto;
 			display: flex;
 
 			@media (max-width: 500px) {
 				padding: 16px;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
+				-webkit-mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 0%,
+					rgba(0, 0, 0, 1) 16px,
+					rgba(0, 0, 0, 1) calc(100% - 16px),
+					rgba(0, 0, 0, 0) 100%
+				);
+				mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 0%,
+					rgba(0, 0, 0, 1) 16px,
+					rgba(0, 0, 0, 1) calc(100% - 16px),
+					rgba(0, 0, 0, 0) 100%
+				);
 			}
 
 			> ::v-deep(*) {
@@ -424,7 +535,6 @@ defineExpose({
 					margin-top: 0;
 				}
 			}
-
 		}
 	}
 
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index 7d2a0e569..361128464 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -1,51 +1,80 @@
 <template>
-<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
-		<div class="header" @contextmenu="onContextmenu">
-			<button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ph-caret-left ph-bold ph-lg"></i></button>
-			<span v-else style="display: inline-block; width: 20px"></span>
-			<span v-if="pageMetadata?.value" class="title">
-				<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
-				<span>{{ pageMetadata?.value.title }}</span>
-			</span>
-			<button class="_button" @click="$refs.modal.close()"><i class="ph-x ph-bold ph-lg"></i></button>
+	<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
+		<div
+			ref="rootEl"
+			class="hrmcaedk _narrow_"
+			:style="{
+				width: `${width}px`,
+				height: height ? `min(${height}px, 100%)` : '100%',
+			}"
+		>
+			<div class="header" @contextmenu="onContextmenu">
+				<button
+					v-if="history.length > 0"
+					v-tooltip="i18n.ts.goBack"
+					class="_button"
+					@click="back()"
+				>
+					<i class="ph-caret-left ph-bold ph-lg"></i>
+				</button>
+				<span v-else style="display: inline-block; width: 20px"></span>
+				<span v-if="pageMetadata?.value" class="title">
+					<i
+						v-if="pageMetadata?.value.icon"
+						class="icon"
+						:class="pageMetadata?.value.icon"
+					></i>
+					<span>{{ pageMetadata?.value.title }}</span>
+				</span>
+				<button class="_button" @click="$refs.modal.close()">
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+			</div>
+			<div class="body">
+				<MkStickyContainer>
+					<template #header
+						><MkPageHeader
+							v-if="
+								pageMetadata?.value &&
+								!pageMetadata?.value.hideHeader
+							"
+							:info="pageMetadata?.value"
+					/></template>
+					<RouterView :router="router" />
+				</MkStickyContainer>
+			</div>
 		</div>
-		<div class="body">
-			<MkStickyContainer>
-				<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
-				<RouterView :router="router"/>
-			</MkStickyContainer>
-		</div>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import { popout as _popout } from '@/scripts/popout';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import * as os from '@/os';
-import { mainRouter, routes } from '@/router';
-import { i18n } from '@/i18n';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { Router } from '@/nirax';
+import { ComputedRef, provide } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import { popout as _popout } from "@/scripts/popout";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { url } from "@/config";
+import * as os from "@/os";
+import { mainRouter, routes } from "@/router";
+import { i18n } from "@/i18n";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { Router } from "@/nirax";
 
 const props = defineProps<{
 	initialPath: string;
 }>();
 
 defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'click'): void;
+	(ev: "closed"): void;
+	(ev: "click"): void;
 }>();
 
 const router = new Router(routes, props.initialPath);
 
-router.addListener('push', ctx => {
-
-});
+router.addListener("push", (ctx) => {});
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let rootEl = $ref();
@@ -55,40 +84,47 @@ let width = $ref(860);
 let height = $ref(660);
 const history = [];
 
-provide('router', router);
+provide("router", router);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 });
-provide('shouldOmitHeaderTitle', true);
-provide('shouldHeaderThin', true);
+provide("shouldOmitHeaderTitle", true);
+provide("shouldHeaderThin", true);
 
 const pageUrl = $computed(() => url + path);
 const contextmenu = $computed(() => {
-	return [{
-		type: 'label',
-		text: path,
-	}, {
-		icon: 'ph-arrows-out-simple ph-bold ph-lg',
-		text: i18n.ts.showInPage,
-		action: expand,
-	}, {
-		icon: 'ph-arrow-square-out ph-bold ph-lg',
-		text: i18n.ts.popout,
-		action: popout,
-	}, null, {
-		icon: 'ph-arrow-square-out ph-bold ph-lg',
-		text: i18n.ts.openInNewTab,
-		action: () => {
-			window.open(pageUrl, '_blank');
-			modal.close();
+	return [
+		{
+			type: "label",
+			text: path,
 		},
-	}, {
-		icon: 'ph-link-simple ph-bold ph-lg',
-		text: i18n.ts.copyLink,
-		action: () => {
-			copyToClipboard(pageUrl);
+		{
+			icon: "ph-arrows-out-simple ph-bold ph-lg",
+			text: i18n.ts.showInPage,
+			action: expand,
 		},
-	}];
+		{
+			icon: "ph-arrow-square-out ph-bold ph-lg",
+			text: i18n.ts.popout,
+			action: popout,
+		},
+		null,
+		{
+			icon: "ph-arrow-square-out ph-bold ph-lg",
+			text: i18n.ts.openInNewTab,
+			action: () => {
+				window.open(pageUrl, "_blank");
+				modal.close();
+			},
+		},
+		{
+			icon: "ph-link-simple ph-bold ph-lg",
+			text: i18n.ts.copyLink,
+			action: () => {
+				copyToClipboard(pageUrl);
+			},
+		},
+	];
 });
 
 function navigate(path, record = true) {
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 1d10eba77..3afcff6cb 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -1,13 +1,51 @@
 <template>
-	<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
-		<div ref="rootEl" class="ebkgoccj" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) : (height ? `min(${height}px, 100%)` : '100%') }" @keydown="onKeydown">
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		@click="onBgClick"
+		@closed="$emit('closed')"
+	>
+		<div
+			ref="rootEl"
+			class="ebkgoccj"
+			:style="{
+				width: `${width}px`,
+				height: scroll
+					? height
+						? `${height}px`
+						: null
+					: height
+					? `min(${height}px, 100%)`
+					: '100%',
+			}"
+			@keydown="onKeydown"
+		>
 			<div ref="headerEl" class="header">
-				<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ph-x ph-bold ph-lg"></i></button>
+				<button
+					v-if="withOkButton"
+					class="_button"
+					@click="$emit('close')"
+				>
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
 				<span class="title">
 					<slot name="header"></slot>
 				</span>
-				<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ph-x ph-bold ph-lg"></i></button>
-				<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ph-check ph-bold ph-lg"></i></button>
+				<button
+					v-if="!withOkButton"
+					class="_button"
+					@click="$emit('close')"
+				>
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-if="withOkButton"
+					class="_button"
+					:disabled="okButtonDisabled"
+					@click="$emit('ok')"
+				>
+					<i class="ph-check ph-bold ph-lg"></i>
+				</button>
 			</div>
 			<div class="body">
 				<slot :width="bodyWidth" :height="bodyHeight"></slot>
@@ -17,28 +55,31 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import MkModal from './MkModal.vue';
+import { onMounted, onUnmounted } from "vue";
+import MkModal from "./MkModal.vue";
 
-const props = withDefaults(defineProps<{
-	withOkButton: boolean;
-	okButtonDisabled: boolean;
-	width: number;
-	height: number | null;
-	scroll: boolean;
-}>(), {
-	withOkButton: false,
-	okButtonDisabled: false,
-	width: 400,
-	height: null,
-	scroll: true,
-});
+const props = withDefaults(
+	defineProps<{
+		withOkButton: boolean;
+		okButtonDisabled: boolean;
+		width: number;
+		height: number | null;
+		scroll: boolean;
+	}>(),
+	{
+		withOkButton: false,
+		okButtonDisabled: false,
+		width: 400,
+		height: null,
+		scroll: true,
+	}
+);
 
 const emit = defineEmits<{
-	(event: 'click'): void;
-	(event: 'close'): void;
-	(event: 'closed'): void;
-	(event: 'ok'): void;
+	(event: "click"): void;
+	(event: "close"): void;
+	(event: "closed"): void;
+	(event: "ok"): void;
 }>();
 
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
@@ -52,11 +93,12 @@ const close = () => {
 };
 
 const onBgClick = () => {
-	emit('click');
+	emit("click");
 };
 
 const onKeydown = (evt) => {
-	if (evt.which === 27) { // Esc
+	if (evt.which === 27) {
+		// Esc
 		evt.preventDefault();
 		evt.stopPropagation();
 		close();
@@ -146,4 +188,3 @@ defineExpose({
 	}
 }
 </style>
-	
\ No newline at end of file
diff --git a/packages/client/src/components/MkMoved.vue b/packages/client/src/components/MkMoved.vue
index d50d49faa..b2f8095a2 100644
--- a/packages/client/src/components/MkMoved.vue
+++ b/packages/client/src/components/MkMoved.vue
@@ -1,14 +1,17 @@
 <template>
-<div class="msjugskd _block">
-	<i class="ph-airplane-takeoff ph-bold ph-lg" style="margin-right: 8px;"/>
-	{{ i18n.ts.accountMoved }}
-	<MkMention class="link" :username="acct" :host="host"/>
-</div>
+	<div class="msjugskd _block">
+		<i
+			class="ph-airplane-takeoff ph-bold ph-lg"
+			style="margin-right: 8px"
+		/>
+		{{ i18n.ts.accountMoved }}
+		<MkMention class="link" :username="acct" :host="host" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import MkMention from './MkMention.vue';
-import { i18n } from '@/i18n';
+import MkMention from "./MkMention.vue";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	acct: string;
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 79dcef6e4..658e799b8 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -1,147 +1,286 @@
 <template>
-<div
-	v-if="!muted.muted"
-	v-show="!isDeleted"
-	ref="el"
-	v-hotkey="keymap"
-	v-size="{ max: [500, 450, 350, 300] }"
-	class="tkcbzcuz"
-	:tabindex="!isDeleted ? '-1' : null"
-	:class="{ renote: isRenote }"
->
-	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div class="note-context" @click="noteClick">
-		<div class="line"></div>
-		<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click.stop="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
-		<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
-		<div v-if="pinned" class="info"><i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div>
-		<div v-if="isRenote" class="renote">
-			<i class="ph-repeat ph-bold ph-lg"></i>
-			<I18n :src="i18n.ts.renotedBy" tag="span">
-				<template #user>
-					<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
-						<MkUserName :user="note.user"/>
-					</MkA>
-				</template>
-			</I18n>
-			<div class="info">
-				<button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
-					<i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
-					<MkTime :time="note.createdAt"/>
+	<div
+		v-if="!muted.muted"
+		v-show="!isDeleted"
+		ref="el"
+		v-hotkey="keymap"
+		v-size="{ max: [500, 450, 350, 300] }"
+		class="tkcbzcuz"
+		:tabindex="!isDeleted ? '-1' : null"
+		:class="{ renote: isRenote }"
+	>
+		<MkNoteSub
+			v-if="appearNote.reply"
+			:note="appearNote.reply"
+			class="reply-to"
+		/>
+		<div class="note-context" @click="noteClick">
+			<div class="line"></div>
+			<div v-if="appearNote._prId_" class="info">
+				<i class="ph-megaphone-simple-bold ph-lg"></i>
+				{{ i18n.ts.promotion
+				}}<button class="_textButton hide" @click.stop="readPromo()">
+					{{ i18n.ts.hideThisNote }}
+					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
-				<MkVisibility :note="note"/>
+			</div>
+			<div v-if="appearNote._featuredId_" class="info">
+				<i class="ph-lightning ph-bold ph-lg"></i>
+				{{ i18n.ts.featured }}
+			</div>
+			<div v-if="pinned" class="info">
+				<i class="ph-push-pin ph-bold ph-lg"></i
+				>{{ i18n.ts.pinnedNote }}
+			</div>
+			<div v-if="isRenote" class="renote">
+				<i class="ph-repeat ph-bold ph-lg"></i>
+				<I18n :src="i18n.ts.renotedBy" tag="span">
+					<template #user>
+						<MkA
+							v-user-preview="note.userId"
+							class="name"
+							:to="userPage(note.user)"
+							@click.stop
+						>
+							<MkUserName :user="note.user" />
+						</MkA>
+					</template>
+				</I18n>
+				<div class="info">
+					<button
+						ref="renoteTime"
+						class="_button time"
+						@click.stop="showRenoteMenu()"
+					>
+						<i
+							v-if="isMyRenote"
+							class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
+						></i>
+						<MkTime :time="note.createdAt" />
+					</button>
+					<MkVisibility :note="note" />
+				</div>
 			</div>
 		</div>
-	</div>
-	<article class="article" @contextmenu.stop="onContextmenu" @click="noteClick">
-		<div class="main">
-			<div class="header-container">
-				<MkAvatar class="avatar" :user="appearNote.user"/>
-				<XNoteHeader class="header" :note="appearNote" :mini="true"/>
-			</div>
-			<div class="body">
-				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :custom-emojis="appearNote.emojis" :i="$i"/>
-					<br/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
-				</p>
-				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
-					<div class="text">
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<!-- <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>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+		<article
+			class="article"
+			@contextmenu.stop="onContextmenu"
+			@click="noteClick"
+		>
+			<div class="main">
+				<div class="header-container">
+					<MkAvatar class="avatar" :user="appearNote.user" />
+					<XNoteHeader
+						class="header"
+						:note="appearNote"
+						:mini="true"
+					/>
+				</div>
+				<div class="body">
+					<p v-if="appearNote.cw != null" class="cw">
+						<Mfm
+							v-if="appearNote.cw != ''"
+							class="text"
+							:text="appearNote.cw"
+							:author="appearNote.user"
+							:custom-emojis="appearNote.emojis"
+							:i="$i"
+						/>
+						<br />
+						<XCwButton v-model="showContent" :note="appearNote" />
+					</p>
+					<div
+						v-show="appearNote.cw == null || showContent"
+						class="content"
+						:class="{ collapsed, isLong }"
+					>
+						<div class="text">
+							<Mfm
+								v-if="appearNote.text"
+								:text="appearNote.text"
+								:author="appearNote.user"
+								:i="$i"
+								:custom-emojis="appearNote.emojis"
+							/>
+							<!-- <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
+										>{{
+											i18n.t("translatedFrom", {
+												x: translation.sourceLang,
+											})
+										}}:
+									</b>
+									<Mfm
+										:text="translation.text"
+										:author="appearNote.user"
+										:i="$i"
+										:custom-emojis="appearNote.emojis"
+									/>
+								</div>
 							</div>
 						</div>
+						<div v-if="appearNote.files.length > 0" class="files">
+							<XMediaList :media-list="appearNote.files" />
+						</div>
+						<XPoll
+							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"
+								@click.stop="
+									router.push(notePage(appearNote.renote))
+								"
+							/>
+						</div>
+						<button
+							v-if="isLong && collapsed"
+							class="fade _button"
+							@click.stop="collapsed = false"
+						>
+							<span>{{ i18n.ts.showMore }}</span>
+						</button>
+						<button
+							v-else-if="isLong && !collapsed"
+							class="showLess _button"
+							@click.stop="collapsed = true"
+						>
+							<span>{{ i18n.ts.showLess }}</span>
+						</button>
 					</div>
-					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
-					</div>
-					<XPoll 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" @click.stop="router.push(notePage(appearNote.renote))"/></div>
-					<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
-						<span>{{ i18n.ts.showMore }}</span>
-					</button>
-					<button v-else-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
-						<span>{{ i18n.ts.showLess }}</span>
-					</button>
+					<MkA
+						v-if="appearNote.channel && !inChannel"
+						class="channel"
+						:to="`/channels/${appearNote.channel.id}`"
+						@click.stop
+						><i class="ph-television ph-bold ph-lg"></i>
+						{{ appearNote.channel.name }}</MkA
+					>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`" @click.stop><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
+				<footer ref="el" class="footer" @click.stop>
+					<XReactionsViewer
+						ref="reactionsViewer"
+						:note="appearNote"
+					/>
+					<button
+						v-tooltip.noDelay.bottom="i18n.ts.reply"
+						class="button _button"
+						@click="reply()"
+					>
+						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+						<template v-if="appearNote.repliesCount > 0">
+							<p class="count">{{ appearNote.repliesCount }}</p>
+						</template>
+					</button>
+					<XRenoteButton
+						ref="renoteButton"
+						class="button"
+						:note="appearNote"
+						:count="appearNote.renoteCount"
+					/>
+					<XStarButton
+						v-if="appearNote.myReaction == null"
+						ref="starButton"
+						class="button"
+						:note="appearNote"
+					/>
+					<button
+						v-if="appearNote.myReaction == null"
+						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.reaction"
+						class="button _button"
+						@click="react()"
+					>
+						<i class="ph-smiley ph-bold ph-lg"></i>
+					</button>
+					<button
+						v-if="appearNote.myReaction != null"
+						ref="reactButton"
+						class="button _button reacted"
+						@click="undoReact(appearNote)"
+					>
+						<i class="ph-minus ph-bold ph-lg"></i>
+					</button>
+					<XQuoteButton class="button" :note="appearNote" />
+					<button
+						ref="menuButton"
+						v-tooltip.noDelay.bottom="i18n.ts.more"
+						class="button _button"
+						@click="menu()"
+					>
+						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+					</button>
+				</footer>
 			</div>
-			<footer ref="el" class="footer" @click.stop>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-					<template v-if="appearNote.repliesCount > 0">
-						<p class="count">{{ appearNote.repliesCount }}</p>
-					</template>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley ph-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus ph-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-				</button>
-			</footer>
-		</div>
-	</article>
-</div>
-<div v-else class="muted" @click="muted.muted = false">
-	<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-		<template #reason>
-			<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
-		</template>
-	</I18n>
-</div>
+		</article>
+	</div>
+	<div v-else class="muted" @click="muted.muted = false">
+		<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
+			<template #name>
+				<MkA
+					v-user-preview="appearNote.userId"
+					class="name"
+					:to="userPage(appearNote.user)"
+				>
+					<MkUserName :user="appearNote.user" />
+				</MkA>
+			</template>
+			<template #reason>
+				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
+			</template>
+		</I18n>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
-import * as mfm from 'mfm-js';
-import type { Ref } from 'vue';
-import type * as misskey from 'calckey-js';
-import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import XNoteSimple from '@/components/MkNoteSimple.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 XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XStarButton from '@/components/MkStarButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkVisibility from '@/components/MkVisibility.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { focusPrev, focusNext } from '@/scripts/focus';
-import { getWordMute } from '@/scripts/check-word-mute';
-import { useRouter } from '@/router';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-import { notePage } from '@/filters/note';
-import { deepClone } from '@/scripts/clone';
+import { computed, inject, onMounted, onUnmounted, reactive, ref } from "vue";
+import * as mfm from "mfm-js";
+import type { Ref } from "vue";
+import type * as misskey from "calckey-js";
+import MkNoteSub from "@/components/MkNoteSub.vue";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import XNoteSimple from "@/components/MkNoteSimple.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 XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import MkVisibility from "@/components/MkVisibility.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import { focusPrev, focusNext } from "@/scripts/focus";
+import { getWordMute } from "@/scripts/check-word-mute";
+import { useRouter } from "@/router";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { defaultStore, noteViewInterruptors } from "@/store";
+import { reactionPicker } from "@/scripts/reaction-picker";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { getNoteMenu } from "@/scripts/get-note-menu";
+import { useNoteCapture } from "@/scripts/use-note-capture";
+import { notePage } from "@/filters/note";
+import { deepClone } from "@/scripts/clone";
 
 const router = useRouter();
 
@@ -150,7 +289,7 @@ const props = defineProps<{
 	pinned?: boolean;
 }>();
 
-const inChannel = inject('inChannel', null);
+const inChannel = inject("inChannel", null);
 
 let note = $ref(deepClone(props.note));
 
@@ -165,12 +304,11 @@ if (noteViewInterruptors.length > 0) {
 	});
 }
 
-const isRenote = (
+const isRenote =
 	note.renote != null &&
 	note.text == null &&
 	note.fileIds.length === 0 &&
-	note.poll == null
-);
+	note.poll == null;
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
@@ -178,29 +316,33 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
-const isMyRenote = $i && ($i.id === note.userId);
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
+const isMyRenote = $i && $i.id === note.userId;
 const showContent = ref(false);
-const isLong = (appearNote.cw == null && appearNote.text != null && (
-	(appearNote.text.split('\n').length > 9) ||
-	(appearNote.text.length > 500)
-));
+const isLong =
+	appearNote.cw == null &&
+	appearNote.text != null &&
+	(appearNote.text.split("\n").length > 9 || appearNote.text.length > 500);
 const collapsed = ref(appearNote.cw == null && isLong);
 const isDeleted = ref(false);
 const muted = ref(getWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5) : null;
+const urls = appearNote.text
+	? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
+	: null;
 
 const keymap = {
-	'r': () => reply(true),
-	'e|a|plus': () => react(true),
-	'q': () => renoteButton.value.renote(true),
-	'up|k|shift+tab': focusBefore,
-	'down|j|tab': focusAfter,
-	'esc': blur,
-	'm|o': () => menu(true),
-	's': () => showContent.value !== showContent.value,
+	r: () => reply(true),
+	"e|a|plus": () => react(true),
+	q: () => renoteButton.value.renote(true),
+	"up|k|shift+tab": focusBefore,
+	"down|j|tab": focusAfter,
+	esc: blur,
+	"m|o": () => menu(true),
+	s: () => showContent.value !== showContent.value,
 };
 
 useNoteCapture({
@@ -211,76 +353,113 @@ useNoteCapture({
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
+	os.post(
+		{
+			reply: appearNote,
+			animation: !viaKeyboard,
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function react(viaKeyboard = false): void {
 	pleaseLogin();
 	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
+	reactionPicker.show(
+		reactButton.value,
+		(reaction) => {
+			os.api("notes/reactions/create", {
+				noteId: appearNote.id,
+				reaction: reaction,
+			});
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
+	os.api("notes/reactions/delete", {
 		noteId: note.id,
 	});
 }
 
-const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>(
+	"currentClipPage",
+	null
+);
 
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (window.getSelection().toString() !== '') return;
+	if (window.getSelection().toString() !== "") return;
 
 	if (defaultStore.state.useReactionPickerForContextMenu) {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), ev).then(focus);
+		os.contextMenu(
+			getNoteMenu({
+				note: note,
+				translating,
+				translation,
+				menuButton,
+				isDeleted,
+				currentClipPage,
+			}),
+			ev
+		).then(focus);
 	}
 }
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
+	os.popupMenu(
+		getNoteMenu({
+			note: note,
+			translating,
+			translation,
+			menuButton,
+			isDeleted,
+			currentClipPage,
+		}),
+		menuButton.value,
+		{
+			viaKeyboard,
+		}
+	).then(focus);
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
-	os.popupMenu([{
-		text: i18n.ts.unrenote,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: () => {
-			os.api('notes/delete', {
-				noteId: note.id,
-			});
-			isDeleted.value = true;
-		},
-	}], renoteTime.value, {
-		viaKeyboard: viaKeyboard,
-	});
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.unrenote,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: () => {
+					os.api("notes/delete", {
+						noteId: note.id,
+					});
+					isDeleted.value = true;
+				},
+			},
+		],
+		renoteTime.value,
+		{
+			viaKeyboard: viaKeyboard,
+		}
+	);
 }
 
 function focus() {
@@ -300,15 +479,15 @@ function focusAfter() {
 }
 
 function noteClick(e) {
-	if (document.getSelection().type === 'Range') {
+	if (document.getSelection().type === "Range") {
 		e.stopPropagation();
 	} else {
-		router.push(notePage(appearNote))
+		router.push(notePage(appearNote));
 	}
 }
 
 function readPromo() {
-	os.api('promo/read', {
+	os.api("promo/read", {
 		noteId: appearNote.id,
 	});
 	isDeleted.value = true;
@@ -329,7 +508,7 @@ function readPromo() {
 	// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
 	// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
 	//content-visibility: auto;
-  //contain-intrinsic-size: 0 128px;
+	//contain-intrinsic-size: 0 128px;
 
 	&:focus-visible {
 		outline: none;
@@ -354,13 +533,14 @@ function readPromo() {
 	}
 
 	& > .article > .main {
-		&:hover, &:focus-within {
+		&:hover,
+		&:focus-within {
 			:deep(.footer .button) {
 				opacity: 1;
 			}
 		}
 	}
-	
+
 	> .reply-to {
 		& + .note-context {
 			.line::before {
@@ -393,9 +573,9 @@ function readPromo() {
 			margin-top: 0;
 			flex-grow: 0;
 		}
-		
+
 		> div > i {
-			margin-left: -.5px;
+			margin-left: -0.5px;
 		}
 		> .info {
 			display: flex;
@@ -414,7 +594,6 @@ function readPromo() {
 			}
 		}
 
-
 		> .renote {
 			display: flex;
 			align-items: center;
@@ -431,7 +610,7 @@ function readPromo() {
 				flex-shrink: 1;
 				text-overflow: ellipsis;
 				white-space: nowrap;
-				
+
 				> .name {
 					font-weight: bold;
 				}
@@ -459,7 +638,6 @@ function readPromo() {
 		padding: 4px 32px 10px;
 		cursor: pointer;
 
-
 		@media (pointer: coarse) {
 			cursor: default;
 		}
@@ -486,7 +664,7 @@ function readPromo() {
 			min-width: 0;
 
 			> .body {
-				margin-top: .7em;
+				margin-top: 0.7em;
 
 				> .cw {
 					cursor: default;
@@ -525,8 +703,14 @@ function readPromo() {
 						overflow: hidden;
 						> .text {
 							max-height: 9em;
-							mask: linear-gradient(black calc(100% - 64px), transparent);
-							-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
+							mask: linear-gradient(
+								black calc(100% - 64px),
+								transparent
+							);
+							-webkit-mask: linear-gradient(
+								black calc(100% - 64px),
+								transparent
+							);
 						}
 						> .fade {
 							display: block;
@@ -576,8 +760,8 @@ function readPromo() {
 					}
 
 					> .files {
-						margin-top: .4em;
-						margin-bottom: .4em;
+						margin-top: 0.4em;
+						margin-bottom: 0.4em;
 					}
 					> .url-preview {
 						margin-top: 8px;
@@ -594,8 +778,9 @@ function readPromo() {
 							padding: 16px;
 							border: solid 1px var(--renote);
 							border-radius: 8px;
-							transition: background .2s;
-							&:hover, &:focus-within {
+							transition: background 0.2s;
+							&:hover,
+							&:focus-within {
 								background-color: var(--panelHighlight);
 							}
 						}
@@ -623,9 +808,9 @@ function readPromo() {
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
-					transition: opacity .2s;
+					transition: opacity 0.2s;
 					&:first-of-type {
-						margin-left: -.5em;
+						margin-left: -0.5em;
 					}
 					&:hover {
 						color: var(--fgHighlighted);
@@ -644,7 +829,6 @@ function readPromo() {
 			}
 		}
 	}
-	
 
 	> .reply {
 		border-top: solid 0.5px var(--divider);
@@ -679,8 +863,6 @@ function readPromo() {
 		}
 	}
 
-
-
 	&.max-width_300px {
 		--avatarSize: 40px;
 	}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 4be07a41f..0137682b8 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -1,153 +1,309 @@
 <template>
-<div
-	v-if="!muted.muted"
-	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 }"
->
-	<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"/>
-		<i class="ph-repeat ph-bold ph-lg"></i>
-		<I18n :src="i18n.ts.renotedBy" tag="span">
-			<template #user>
-				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
-					<MkUserName :user="note.user"/>
-				</MkA>
-			</template>
-		</I18n>
-		<div class="info">
-			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
-				<MkTime :time="note.createdAt"/>
-			</button>
-			<MkVisibility :note="note"/>
-		</div>
-	</div>
-	<article ref="noteEl" class="article" @contextmenu.stop="onContextmenu" tabindex="-1">
-		<header class="header">
-			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
-			<div class="body">
-				<div class="top">
-					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
-						<MkUserName :user="appearNote.user"/>
+	<div
+		v-if="!muted.muted"
+		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 }"
+	>
+		<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" />
+			<i class="ph-repeat ph-bold ph-lg"></i>
+			<I18n :src="i18n.ts.renotedBy" tag="span">
+				<template #user>
+					<MkA
+						v-user-preview="note.userId"
+						class="name"
+						:to="userPage(note.user)"
+					>
+						<MkUserName :user="note.user" />
 					</MkA>
-					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
-					<div class="info">
-						<MkVisibility :note="appearNote"/>
-					</div>
-				</div>
-				<div class="username"><MkAcct :user="appearNote.user"/></div>
-				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
+				</template>
+			</I18n>
+			<div class="info">
+				<button
+					ref="renoteTime"
+					class="_button time"
+					@click="showRenoteMenu()"
+				>
+					<i
+						v-if="isMyRenote"
+						class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
+					></i>
+					<MkTime :time="note.createdAt" />
+				</button>
+				<MkVisibility :note="note" />
 			</div>
-		</header>
-		<div class="main">
-			<div class="body">
-				<div 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"/>
-					<br/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
-				</div>
-				<div v-show="appearNote.cw == null || showContent" class="content">
-					<div class="text">
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<div v-if="translating || translation" class="translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else class="translated">
-								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-							</div>
+		</div>
+		<article
+			ref="noteEl"
+			class="article"
+			@contextmenu.stop="onContextmenu"
+			tabindex="-1"
+		>
+			<header class="header">
+				<MkAvatar
+					class="avatar"
+					:user="appearNote.user"
+					:show-indicator="true"
+				/>
+				<div class="body">
+					<div class="top">
+						<MkA
+							v-user-preview="appearNote.user.id"
+							class="name"
+							:to="userPage(appearNote.user)"
+						>
+							<MkUserName :user="appearNote.user" />
+						</MkA>
+						<span v-if="appearNote.user.isBot" class="is-bot"
+							>bot</span
+						>
+						<div class="info">
+							<MkVisibility :note="appearNote" />
 						</div>
 					</div>
-					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
+					<div class="username">
+						<MkAcct :user="appearNote.user" />
 					</div>
-					<XPoll 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" @click.stop="router.push(notePage(appearNote.renote))"/></div>
+					<MkInstanceTicker
+						v-if="showTicker"
+						class="ticker"
+						:instance="appearNote.user.instance"
+					/>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
+			</header>
+			<div class="main">
+				<div class="body">
+					<div 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"
+						/>
+						<br />
+						<XCwButton v-model="showContent" :note="appearNote" />
+					</div>
+					<div
+						v-show="appearNote.cw == null || showContent"
+						class="content"
+					>
+						<div class="text">
+							<Mfm
+								v-if="appearNote.text"
+								:text="appearNote.text"
+								:author="appearNote.user"
+								:i="$i"
+								:custom-emojis="appearNote.emojis"
+							/>
+							<div
+								v-if="translating || translation"
+								class="translation"
+							>
+								<MkLoading v-if="translating" mini />
+								<div v-else class="translated">
+									<b
+										>{{
+											i18n.t("translatedFrom", {
+												x: translation.sourceLang,
+											})
+										}}:
+									</b>
+									<Mfm
+										:text="translation.text"
+										:author="appearNote.user"
+										:i="$i"
+										:custom-emojis="appearNote.emojis"
+									/>
+								</div>
+							</div>
+						</div>
+						<div v-if="appearNote.files.length > 0" class="files">
+							<XMediaList :media-list="appearNote.files" />
+						</div>
+						<XPoll
+							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"
+								@click.stop="
+									router.push(notePage(appearNote.renote))
+								"
+							/>
+						</div>
+					</div>
+					<MkA
+						v-if="appearNote.channel && !inChannel"
+						class="channel"
+						:to="`/channels/${appearNote.channel.id}`"
+						><i class="ph-television ph-bold ph-lg"></i>
+						{{ appearNote.channel.name }}</MkA
+					>
+				</div>
+				<footer class="footer">
+					<div class="info">
+						<MkA class="created-at" :to="notePage(appearNote)">
+							<MkTime
+								:time="appearNote.createdAt"
+								mode="detail"
+							/>
+						</MkA>
+					</div>
+					<XReactionsViewer
+						ref="reactionsViewer"
+						:note="appearNote"
+					/>
+					<button
+						v-tooltip.noDelay.bottom="i18n.ts.reply"
+						class="button _button"
+						@click="reply()"
+					>
+						<template v-if="appearNote.reply"
+							><i class="ph-arrow-u-up-left ph-bold ph-lg"></i
+						></template>
+						<template v-else
+							><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
+						></template>
+						<p v-if="appearNote.repliesCount > 0" class="count">
+							{{ appearNote.repliesCount }}
+						</p>
+					</button>
+					<XRenoteButton
+						ref="renoteButton"
+						class="button"
+						:note="appearNote"
+						:count="appearNote.renoteCount"
+					/>
+					<XStarButton
+						v-if="appearNote.myReaction == null"
+						ref="starButton"
+						class="button"
+						:note="appearNote"
+					/>
+					<button
+						v-if="appearNote.myReaction == null"
+						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.reaction"
+						class="button _button"
+						@click="react()"
+					>
+						<i class="ph-smiley ph-bold ph-lg"></i>
+					</button>
+					<button
+						v-if="appearNote.myReaction != null"
+						ref="reactButton"
+						class="button _button reacted"
+						@click="undoReact(appearNote)"
+					>
+						<i class="ph-minus ph-bold ph-lg"></i>
+					</button>
+					<XQuoteButton class="button" :note="appearNote" />
+					<button
+						ref="menuButton"
+						v-tooltip.noDelay.bottom="i18n.ts.more"
+						class="button _button"
+						@click="menu()"
+					>
+						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+					</button>
+				</footer>
 			</div>
-			<footer class="footer">
-				<div class="info">
-					<MkA class="created-at" :to="notePage(appearNote)">
-						<MkTime :time="appearNote.createdAt" mode="detail"/>
-					</MkA>
-				</div>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left ph-bold ph-lg"></i></template>
-					<template v-else><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i></template>
-					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley ph-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus ph-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-				</button>
-			</footer>
-		</div>
-	</article>
-	<MkNoteSub v-for="note in directReplies" :key="note.id" :note="note" class="reply" :conversation="replies"/>
-</div>
-<div v-else class="_panel muted" @click="muted.muted = false">
-	<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-		<template #reason>
-			<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
-		</template>
-	</I18n>
-</div>
+		</article>
+		<MkNoteSub
+			v-for="note in directReplies"
+			:key="note.id"
+			:note="note"
+			class="reply"
+			:conversation="replies"
+		/>
+	</div>
+	<div v-else class="_panel muted" @click="muted.muted = false">
+		<I18n :src="i18n.ts.userSaysSomethingReason" tag="small">
+			<template #name>
+				<MkA
+					v-user-preview="appearNote.userId"
+					class="name"
+					:to="userPage(appearNote.user)"
+				>
+					<MkUserName :user="appearNote.user" />
+				</MkA>
+			</template>
+			<template #reason>
+				<b class="_blur_text">{{ muted.matched.join(", ") }}</b>
+			</template>
+		</I18n>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
-import * as mfm from 'mfm-js';
-import type * as misskey from 'calckey-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 XStarButton from '@/components/MkStarButton.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import MkVisibility from '@/components/MkVisibility.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { getWordMute } from '@/scripts/check-word-mute';
-import { userPage } from '@/filters/user';
-import { notePage } from '@/filters/note';
-import { useRouter } from '@/router';
-import * as os from '@/os';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-import { deepClone } from '@/scripts/clone';
-import { stream } from '@/stream';
-import { NoteUpdatedEvent } from 'calckey-js/built/streaming.types';
+import {
+	computed,
+	inject,
+	onMounted,
+	onUnmounted,
+	onUpdated,
+	reactive,
+	ref,
+} from "vue";
+import * as mfm from "mfm-js";
+import type * as misskey from "calckey-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 XStarButton from "@/components/MkStarButton.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
+import MkVisibility from "@/components/MkVisibility.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import { getWordMute } from "@/scripts/check-word-mute";
+import { userPage } from "@/filters/user";
+import { notePage } from "@/filters/note";
+import { useRouter } from "@/router";
+import * as os from "@/os";
+import { defaultStore, noteViewInterruptors } from "@/store";
+import { reactionPicker } from "@/scripts/reaction-picker";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { getNoteMenu } from "@/scripts/get-note-menu";
+import { useNoteCapture } from "@/scripts/use-note-capture";
+import { deepClone } from "@/scripts/clone";
+import { stream } from "@/stream";
+import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
 
 const router = useRouter();
 
@@ -156,7 +312,7 @@ const props = defineProps<{
 	pinned?: boolean;
 }>();
 
-const inChannel = inject('inChannel', null);
+const inChannel = inject("inChannel", null);
 
 let note = $ref(deepClone(props.note));
 
@@ -171,12 +327,11 @@ if (noteViewInterruptors.length > 0) {
 	});
 }
 
-const isRenote = (
+const isRenote =
 	note.renote != null &&
 	note.text == null &&
 	note.fileIds.length === 0 &&
-	note.poll == null
-);
+	note.poll == null;
 
 const el = ref<HTMLElement>();
 const noteEl = $ref();
@@ -185,28 +340,34 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
-const isMyRenote = $i && ($i.id === note.userId);
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
+const isMyRenote = $i && $i.id === note.userId;
 const showContent = ref(false);
 const isDeleted = ref(false);
 const muted = ref(getWordMute(appearNote, $i, defaultStore.state.mutedWords));
 const translation = ref(null);
 const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5) : null;
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
+const urls = appearNote.text
+	? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
+	: null;
+const showTicker =
+	defaultStore.state.instanceTicker === "always" ||
+	(defaultStore.state.instanceTicker === "remote" &&
+		appearNote.user.instance);
 const conversation = ref<misskey.entities.Note[]>([]);
 const replies = ref<misskey.entities.Note[]>([]);
 const directReplies = ref<misskey.entities.Note[]>([]);
 let isScrolling;
 
-
 const keymap = {
-	'r': () => reply(true),
-	'e|a|plus': () => react(true),
-	'q': () => renoteButton.value.renote(true),
-	'esc': blur,
-	'm|o': () => menu(true),
-	's': () => showContent.value !== showContent.value,
+	r: () => reply(true),
+	"e|a|plus": () => react(true),
+	q: () => renoteButton.value.renote(true),
+	esc: blur,
+	"m|o": () => menu(true),
+	s: () => showContent.value !== showContent.value,
 };
 
 useNoteCapture({
@@ -217,74 +378,106 @@ useNoteCapture({
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
+	os.post(
+		{
+			reply: appearNote,
+			animation: !viaKeyboard,
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function react(viaKeyboard = false): void {
 	pleaseLogin();
 	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
+	reactionPicker.show(
+		reactButton.value,
+		(reaction) => {
+			os.api("notes/reactions/create", {
+				noteId: appearNote.id,
+				reaction: reaction,
+			});
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
+	os.api("notes/reactions/delete", {
 		noteId: note.id,
 	});
 }
 
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (window.getSelection().toString() !== '') return;
+	if (window.getSelection().toString() !== "") return;
 
 	if (defaultStore.state.useReactionPickerForContextMenu) {
 		ev.preventDefault();
 		react();
 	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
+		os.contextMenu(
+			getNoteMenu({
+				note: note,
+				translating,
+				translation,
+				menuButton,
+				isDeleted,
+			}),
+			ev
+		).then(focus);
 	}
 }
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
+	os.popupMenu(
+		getNoteMenu({
+			note: note,
+			translating,
+			translation,
+			menuButton,
+			isDeleted,
+		}),
+		menuButton.value,
+		{
+			viaKeyboard,
+		}
+	).then(focus);
 }
 
 function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
-	os.popupMenu([{
-		text: i18n.ts.unrenote,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: () => {
-			os.api('notes/delete', {
-				noteId: note.id,
-			});
-			isDeleted.value = true;
-		},
-	}], renoteTime.value, {
-		viaKeyboard: viaKeyboard,
-	});
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.unrenote,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: () => {
+					os.api("notes/delete", {
+						noteId: note.id,
+					});
+					isDeleted.value = true;
+				},
+			},
+		],
+		renoteTime.value,
+		{
+			viaKeyboard: viaKeyboard,
+		}
+	);
 }
 
 function focus() {
@@ -295,20 +488,26 @@ function blur() {
 	noteEl.blur();
 }
 
-os.api('notes/children', {
+os.api("notes/children", {
 	noteId: appearNote.id,
 	limit: 30,
 	depth: 12,
-}).then(res => {
+}).then((res) => {
 	replies.value = res;
-	directReplies.value = res.filter(note => note.replyId === appearNote.id || note.renoteId === appearNote.id).reverse();
+	directReplies.value = res
+		.filter(
+			(note) =>
+				note.replyId === appearNote.id ||
+				note.renoteId === appearNote.id
+		)
+		.reverse();
 });
 
 if (appearNote.replyId) {
-	os.api('notes/conversation', {
+	os.api("notes/conversation", {
 		noteId: appearNote.replyId,
 		limit: 30,
-	}).then(res => {
+	}).then((res) => {
 		conversation.value = res.reverse();
 		focus();
 	});
@@ -316,24 +515,23 @@ if (appearNote.replyId) {
 
 function onNoteReplied(noteData: NoteUpdatedEvent): void {
 	const { type, id, body } = noteData;
-	if (type === 'replied' && id === appearNote.id) {
+	if (type === "replied" && id === appearNote.id) {
 		const { id: createdId } = body;
 
-		os.api('notes/show', {
+		os.api("notes/show", {
 			noteId: createdId,
-		}).then(note => {
+		}).then((note) => {
 			if (note.replyId === appearNote.id) {
 				replies.value.unshift(note);
 				directReplies.value.unshift(note);
 			}
 		});
 	}
-	
 }
 
 document.addEventListener("wheel", () => {
 	isScrolling = true;
-})
+});
 
 onMounted(() => {
 	stream.on("noteUpdated", onNoteReplied);
@@ -343,14 +541,13 @@ onMounted(() => {
 
 onUpdated(() => {
 	if (!isScrolling) {
-		noteEl.scrollIntoView()
+		noteEl.scrollIntoView();
 	}
-})
+});
 
 onUnmounted(() => {
 	stream.off("noteUpdated", onNoteReplied);
 });
-
 </script>
 
 <style lang="scss" scoped>
@@ -558,8 +755,9 @@ onUnmounted(() => {
 							padding: 16px;
 							border: solid 1px var(--renote);
 							border-radius: 8px;
-							transition: background .2s;
-							&:hover, &:focus-within {
+							transition: background 0.2s;
+							&:hover,
+							&:focus-within {
 								background-color: var(--panelHighlight);
 							}
 						}
@@ -617,7 +815,10 @@ onUnmounted(() => {
 	}
 
 	// Hover
-	.reply :deep(.main), .reply-to, .reply-to-more, :deep(.more) {
+	.reply :deep(.main),
+	.reply-to,
+	.reply-to-more,
+	:deep(.more) {
 		position: relative;
 		&::before {
 			content: "";
@@ -627,10 +828,11 @@ onUnmounted(() => {
 			background: var(--panelHighlight);
 			border-radius: var(--radius);
 			opacity: 0;
-			transition: opacity .2s;
+			transition: opacity 0.2s;
 			z-index: -1;
 		}
-		&.reply-to, &.reply-to-more {
+		&.reply-to,
+		&.reply-to-more {
 			&::before {
 				inset: 0px 8px;
 			}
@@ -651,7 +853,8 @@ onUnmounted(() => {
 		&.more::before {
 			inset: 0 !important;
 		}
-		&:hover, &:focus-within {
+		&:hover,
+		&:focus-within {
 			&::before {
 				opacity: 1;
 			}
@@ -667,14 +870,12 @@ onUnmounted(() => {
 		// 	}
 		// }
 	}
-	
 
 	&.max-width_500px {
 		font-size: 0.9em;
 	}
-	
+
 	&.max-width_450px {
-		
 		> .reply-to-more:first-child {
 			padding-top: 14px;
 		}
@@ -708,7 +909,6 @@ onUnmounted(() => {
 		font-size: 0.825em;
 
 		> .article {
-
 			> .main {
 				> .footer {
 					> .button {
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index 6d55bcff5..c4443141b 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -1,36 +1,45 @@
 <template>
-<header class="kkwtjztg">
-	<div class="user-info">
-		<div>
-			<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)" @click.stop>
-				<MkUserName :user="note.user" class="mkusername">
-					<span v-if="note.user.isBot" class="is-bot">bot</span>
-				</MkUserName>
-			</MkA>
-			<div class="username"><MkAcct :user="note.user"/></div>
-		</div>
-		<div>
-			<div class="info">
-				<MkA class="created-at" :to="notePage(note)">
-					<MkTime :time="note.createdAt"/>
+	<header class="kkwtjztg">
+		<div class="user-info">
+			<div>
+				<MkA
+					v-user-preview="note.user.id"
+					class="name"
+					:to="userPage(note.user)"
+					@click.stop
+				>
+					<MkUserName :user="note.user" class="mkusername">
+						<span v-if="note.user.isBot" class="is-bot">bot</span>
+					</MkUserName>
 				</MkA>
-				<MkVisibility :note="note"/>
+				<div class="username"><MkAcct :user="note.user" /></div>
+			</div>
+			<div>
+				<div class="info">
+					<MkA class="created-at" :to="notePage(note)">
+						<MkTime :time="note.createdAt" />
+					</MkA>
+					<MkVisibility :note="note" />
+				</div>
+				<MkInstanceTicker
+					v-if="showTicker"
+					class="ticker"
+					:instance="note.user.instance"
+				/>
 			</div>
-			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="note.user.instance"/>
 		</div>
-	</div>
-</header>
+	</header>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import type * as misskey from 'calckey-js';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import MkVisibility from '@/components/MkVisibility.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import { notePage } from '@/filters/note';
-import { userPage } from '@/filters/user';
-import { deepClone } from '@/scripts/clone';
+import {} from "vue";
+import type * as misskey from "calckey-js";
+import { defaultStore, noteViewInterruptors } from "@/store";
+import MkVisibility from "@/components/MkVisibility.vue";
+import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
+import { notePage } from "@/filters/note";
+import { userPage } from "@/filters/user";
+import { deepClone } from "@/scripts/clone";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -39,10 +48,9 @@ const props = defineProps<{
 
 let note = $ref(deepClone(props.note));
 
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && note.user.instance);
-
-
-
+const showTicker =
+	defaultStore.state.instanceTicker === "always" ||
+	(defaultStore.state.instanceTicker === "remote" && note.user.instance);
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +62,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 	white-space: nowrap;
 	justify-self: flex-end;
 	border-radius: 100px;
-	font-size: .8em;
+	font-size: 0.8em;
 	text-shadow: 0 2px 2px var(--shadow);
 	> .avatar {
 		width: 3.7em;
@@ -73,11 +81,11 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 				width: 0;
 				overflow: hidden;
 				text-overflow: ellipsis;
-				gap: .1em 0;
+				gap: 0.1em 0;
 			}
 			&:last-child {
 				max-width: 50%;
-				gap: .3em .5em;
+				gap: 0.3em 0.5em;
 			}
 			.article > .main & {
 				display: flex;
@@ -94,17 +102,17 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 		.name {
 			// flex: 1 1 0px;
 			display: inline;
-			margin: 0 .5em 0 0;
+			margin: 0 0.5em 0 0;
 			padding: 0;
 			overflow: hidden;
 			font-weight: bold;
 			text-decoration: none;
 			text-overflow: ellipsis;
 
-			.mkusername >.is-bot {
+			.mkusername > .is-bot {
 				flex-shrink: 0;
 				align-self: center;
-				margin: 0 .5em 0 0;
+				margin: 0 0.5em 0 0;
 				padding: 1px 6px;
 				font-size: 80%;
 				border: solid 0.5px var(--divider);
@@ -118,17 +126,17 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 
 		.username {
 			display: inline;
-			margin: 0 .5em 0 0;
+			margin: 0 0.5em 0 0;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			align-self: flex-start;
-			font-size: .9em;
+			font-size: 0.9em;
 		}
 
 		.info {
 			display: inline-flex;
 			flex-shrink: 0;
-			margin-left: .5em;
+			margin-left: 0.5em;
 			font-size: 0.9em;
 			.created-at {
 				max-width: 100%;
@@ -139,7 +147,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
 
 		.ticker {
 			display: inline-flex;
-			margin-left: .5em;
+			margin-left: 0.5em;
 			vertical-align: middle;
 			> .name {
 				display: none;
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index 18d21ca61..9d388e71b 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -1,22 +1,22 @@
 <template>
-<div v-size="{ min: [350, 500] }" class="fefdfafb">
-	<MkAvatar class="avatar" :user="$i"/>
-	<div class="main">
-		<div class="header">
-			<MkUserName :user="$i"/>
-		</div>
-		<div class="body">
-			<div class="content">
-				<Mfm :text="preprocess(text).trim()" :author="$i" :i="$i"/>
+	<div v-size="{ min: [350, 500] }" class="fefdfafb">
+		<MkAvatar class="avatar" :user="$i" />
+		<div class="main">
+			<div class="header">
+				<MkUserName :user="$i" />
+			</div>
+			<div class="body">
+				<div class="content">
+					<Mfm :text="preprocess(text).trim()" :author="$i" :i="$i" />
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { preprocess } from '@/scripts/preprocess';
+import {} from "vue";
+import { preprocess } from "@/scripts/preprocess";
 
 const props = defineProps<{
 	text: string;
@@ -67,7 +67,6 @@ const props = defineProps<{
 		}
 
 		> .body {
-
 			> .cw {
 				cursor: default;
 				display: block;
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index dad1bf97d..937f9144a 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -1,28 +1,35 @@
 <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"/>
-				<br/>
-				<XCwButton v-model="showContent" :note="note"/>
-			</p>
-			<div v-show="note.cw == null || showContent" class="content">
-				<MkSubNoteContent class="text" :note="note"/>
+	<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"
+					/>
+					<br />
+					<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>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
+import {} from "vue";
+import * as misskey from "calckey-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;
@@ -74,7 +81,6 @@ const showContent = $ref(false);
 		}
 
 		> .body {
-
 			> .cw {
 				cursor: default;
 				display: block;
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 4f172fb0d..9c98ae15d 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,178 +1,309 @@
 <template>
-<div ref="el" 
-	v-size="{ max: [450, 500] }"
-	class="wrpstxzv"
-	:class="{ children: depth > 1, singleStart: replies.length == 1, firstColumn: depth == 1 && conversation }"
->
-	<div v-if="conversation && depth > 1" class="line"></div>
-	<div class="main" @click="noteClick">
-		<div class="avatar-container">
-			<MkAvatar class="avatar" :user="appearNote.user"/>
-			<div v-if="(!conversation) || replies.length > 0" class="line"></div>
-		</div>
-		<div class="body">
-			<XNoteHeader class="header" :note="note" :mini="true"/>
+	<div
+		ref="el"
+		v-size="{ max: [450, 500] }"
+		class="wrpstxzv"
+		:class="{
+			children: depth > 1,
+			singleStart: replies.length == 1,
+			firstColumn: depth == 1 && conversation,
+		}"
+	>
+		<div v-if="conversation && depth > 1" class="line"></div>
+		<div class="main" @click="noteClick">
+			<div class="avatar-container">
+				<MkAvatar class="avatar" :user="appearNote.user" />
+				<div
+					v-if="!conversation || replies.length > 0"
+					class="line"
+				></div>
+			</div>
 			<div class="body">
-				<p v-if="appearNote.cw != null" class="cw">
-					<MkA v-if="appearNote.replyId"  :to="`/notes/${appearNote.replyId}`" class="reply-icon" @click.stop>
-						<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-					</MkA>
-					<MkA v-if="conversation && appearNote.renoteId && appearNote.renoteId != parentId && !appearNote.replyId" :to="`/notes/${appearNote.renoteId}`" class="reply-icon" @click.stop>
-						<i class="ph-quotes ph-bold ph-lg"></i>
-					</MkA>
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<br/>
-					<XCwButton v-model="showContent" :note="note"/>
-				</p>
-				<div v-show="appearNote.cw == null || showContent" class="content">
-					<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="appearNote.parentId" :conversation="conversation"/>
-				</div>
-				<div v-if="translating || translation" class="translation">
-					<MkLoading v-if="translating" mini/>
-					<div v-else class="translated">
-						<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-						<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+				<XNoteHeader class="header" :note="note" :mini="true" />
+				<div class="body">
+					<p v-if="appearNote.cw != null" class="cw">
+						<MkA
+							v-if="appearNote.replyId"
+							:to="`/notes/${appearNote.replyId}`"
+							class="reply-icon"
+							@click.stop
+						>
+							<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+						</MkA>
+						<MkA
+							v-if="
+								conversation &&
+								appearNote.renoteId &&
+								appearNote.renoteId != parentId &&
+								!appearNote.replyId
+							"
+							:to="`/notes/${appearNote.renoteId}`"
+							class="reply-icon"
+							@click.stop
+						>
+							<i class="ph-quotes ph-bold ph-lg"></i>
+						</MkA>
+						<Mfm
+							v-if="appearNote.cw != ''"
+							class="text"
+							:text="appearNote.cw"
+							:author="appearNote.user"
+							:i="$i"
+							:custom-emojis="appearNote.emojis"
+						/>
+						<br />
+						<XCwButton v-model="showContent" :note="note" />
+					</p>
+					<div
+						v-show="appearNote.cw == null || showContent"
+						class="content"
+					>
+						<MkSubNoteContent
+							class="text"
+							:note="note"
+							:detailed="true"
+							:parentId="appearNote.parentId"
+							:conversation="conversation"
+						/>
+					</div>
+					<div v-if="translating || translation" class="translation">
+						<MkLoading v-if="translating" mini />
+						<div v-else class="translated">
+							<b
+								>{{
+									i18n.t("translatedFrom", {
+										x: translation.sourceLang,
+									})
+								}}:
+							</b>
+							<Mfm
+								:text="translation.text"
+								:author="appearNote.user"
+								:i="$i"
+								:custom-emojis="appearNote.emojis"
+							/>
+						</div>
 					</div>
 				</div>
+				<footer class="footer" @click.stop>
+					<XReactionsViewer
+						ref="reactionsViewer"
+						:note="appearNote"
+					/>
+					<button
+						v-tooltip.noDelay.bottom="i18n.ts.reply"
+						class="button _button"
+						@click="reply()"
+					>
+						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
+						<template v-if="appearNote.repliesCount > 0">
+							<p class="count">{{ appearNote.repliesCount }}</p>
+						</template>
+					</button>
+					<XRenoteButton
+						ref="renoteButton"
+						class="button"
+						:note="appearNote"
+						:count="appearNote.renoteCount"
+					/>
+					<XStarButton
+						v-if="appearNote.myReaction == null"
+						ref="starButton"
+						class="button"
+						:note="appearNote"
+					/>
+					<button
+						v-if="appearNote.myReaction == null"
+						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.reaction"
+						class="button _button"
+						@click="react()"
+					>
+						<i class="ph-smiley ph-bold ph-lg"></i>
+					</button>
+					<button
+						v-if="appearNote.myReaction != null"
+						ref="reactButton"
+						class="button _button reacted"
+						@click="undoReact(appearNote)"
+					>
+						<i class="ph-minus ph-bold ph-lg"></i>
+					</button>
+					<XQuoteButton class="button" :note="appearNote" />
+					<button
+						ref="menuButton"
+						v-tooltip.noDelay.bottom="i18n.ts.more"
+						class="button _button"
+						@click="menu()"
+					>
+						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+					</button>
+				</footer>
 			</div>
-			<footer class="footer" @click.stop>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
-					<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-					<template v-if="appearNote.repliesCount > 0">
-						<p class="count">{{ appearNote.repliesCount }}</p>
-					</template>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
-					<i class="ph-smiley ph-bold ph-lg"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ph-minus ph-bold ph-lg"></i>
-				</button>
-				<XQuoteButton class="button" :note="appearNote"/>
-				<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
-					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-				</button>
-			</footer>
 		</div>
+		<template v-if="conversation">
+			<template v-if="replies.length == 1">
+				<MkNoteSub
+					v-for="reply in replies"
+					:key="reply.id"
+					:note="reply"
+					class="reply single"
+					:conversation="conversation"
+					:depth="depth"
+					:parentId="appearNote.replyId"
+				/>
+			</template>
+			<template v-else-if="depth < 5">
+				<MkNoteSub
+					v-for="reply in replies"
+					:key="reply.id"
+					:note="reply"
+					class="reply"
+					:conversation="conversation"
+					:depth="depth + 1"
+					:parentId="appearNote.replyId"
+				/>
+			</template>
+			<div v-else-if="replies.length > 0" class="more">
+				<div class="line"></div>
+				<MkA class="text _link" :to="notePage(note)"
+					>{{ i18n.ts.continueThread }}
+					<i class="ph-caret-double-right ph-bold ph-lg"></i
+				></MkA>
+			</div>
+		</template>
 	</div>
-	<template v-if="conversation">
-		<template v-if="replies.length == 1">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="appearNote.replyId"/>
-		</template>
-		<template v-else-if="depth < 5">
-			<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="appearNote.replyId"/>
-		</template>
-		<div v-else-if="replies.length > 0" class="more">
-			<div class="line"></div>
-			<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
-		</div>
-	</template>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, ref } from 'vue';
-import type { Ref } from 'vue';
-import * as misskey from 'calckey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XStarButton from '@/components/MkStarButton.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import XQuoteButton from '@/components/MkQuoteButton.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { notePage } from '@/filters/note';
-import { useRouter } from '@/router';
-import * as os from '@/os';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { i18n } from '@/i18n';
-import { deepClone } from '@/scripts/clone';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-
+import { inject, ref } from "vue";
+import type { Ref } from "vue";
+import * as misskey from "calckey-js";
+import XNoteHeader from "@/components/MkNoteHeader.vue";
+import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XStarButton from "@/components/MkStarButton.vue";
+import XRenoteButton from "@/components/MkRenoteButton.vue";
+import XQuoteButton from "@/components/MkQuoteButton.vue";
+import XCwButton from "@/components/MkCwButton.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import { getNoteMenu } from "@/scripts/get-note-menu";
+import { notePage } from "@/filters/note";
+import { useRouter } from "@/router";
+import * as os from "@/os";
+import { reactionPicker } from "@/scripts/reaction-picker";
+import { i18n } from "@/i18n";
+import { deepClone } from "@/scripts/clone";
+import { useNoteCapture } from "@/scripts/use-note-capture";
 
 const router = useRouter();
 
-const props = withDefaults(defineProps<{
-	note: misskey.entities.Note;
-	conversation?: misskey.entities.Note[];
-	parentId?;
+const props = withDefaults(
+	defineProps<{
+		note: misskey.entities.Note;
+		conversation?: misskey.entities.Note[];
+		parentId?;
 
-	// how many notes are in between this one and the note being viewed in detail
-	depth?: number;
-}>(), {
-	depth: 1,
-});
+		// how many notes are in between this one and the note being viewed in detail
+		depth?: number;
+	}>(),
+	{
+		depth: 1,
+	}
+);
 
 let note = $ref(deepClone(props.note));
 
-const isRenote = (
+const isRenote =
 	note.renote != null &&
 	note.text == null &&
 	note.fileIds.length === 0 &&
-	note.poll == null
-);
+	note.poll == null;
 
 const el = ref<HTMLElement>();
 const menuButton = ref<HTMLElement>();
 const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
+let appearNote = $computed(() =>
+	isRenote ? (note.renote as misskey.entities.Note) : note
+);
 const isDeleted = ref(false);
 const translation = ref(null);
 const translating = ref(false);
 let showContent = $ref(false);
-const replies: misskey.entities.Note[] = props.conversation?.filter(item => item.replyId === props.note.id || item.renoteId === props.note.id).reverse() ?? [];
+const replies: misskey.entities.Note[] =
+	props.conversation
+		?.filter(
+			(item) =>
+				item.replyId === props.note.id ||
+				item.renoteId === props.note.id
+		)
+		.reverse() ?? [];
 
 useNoteCapture({
 	rootEl: el,
-	note: $$(appearNote)
+	note: $$(appearNote),
 });
 
-
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
+	os.post(
+		{
+			reply: appearNote,
+			animation: !viaKeyboard,
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function react(viaKeyboard = false): void {
 	pleaseLogin();
 	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
+	reactionPicker.show(
+		reactButton.value,
+		(reaction) => {
+			os.api("notes/reactions/create", {
+				noteId: appearNote.id,
+				reaction: reaction,
+			});
+		},
+		() => {
+			focus();
+		}
+	);
 }
 
 function undoReact(note): void {
 	const oldReaction = note.myReaction;
 	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
+	os.api("notes/reactions/delete", {
 		noteId: note.id,
 	});
 }
 
-const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
-
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>(
+	"currentClipPage",
+	null
+);
 
 function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
+	os.popupMenu(
+		getNoteMenu({
+			note: note,
+			translating,
+			translation,
+			menuButton,
+			isDeleted,
+			currentClipPage,
+		}),
+		menuButton.value,
+		{
+			viaKeyboard,
+		}
+	).then(focus);
 }
 
 function focus() {
@@ -184,10 +315,10 @@ function blur() {
 }
 
 function noteClick(e) {
-	if (document.getSelection().type === 'Range') {
+	if (document.getSelection().type === "Range") {
 		e.stopPropagation();
 	} else {
-		router.push(notePage(props.note))
+		router.push(notePage(props.note));
 	}
 }
 </script>
@@ -206,7 +337,6 @@ function noteClick(e) {
 		}
 	}
 
-	
 	> .main {
 		display: flex;
 
@@ -231,7 +361,7 @@ function noteClick(e) {
 			@media (pointer: coarse) {
 				cursor: default;
 			}
-			
+
 			> .header {
 				margin-bottom: 2px;
 				cursor: auto;
@@ -241,11 +371,12 @@ function noteClick(e) {
 				.reply-icon {
 					display: inline-block;
 					border-radius: 6px;
-					padding: .2em .2em;
-					margin-right: .2em;
+					padding: 0.2em 0.2em;
+					margin-right: 0.2em;
 					color: var(--accent);
-					transition: background .2s;
-					&:hover, &:focus {
+					transition: background 0.2s;
+					&:hover,
+					&:focus {
 						background: var(--buttonHoverBg);
 					}
 				}
@@ -279,7 +410,7 @@ function noteClick(e) {
 				display: flex;
 				flex-wrap: wrap;
 				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
-	
+
 				> .button {
 					margin: 0;
 					padding: 8px;
@@ -289,20 +420,20 @@ function noteClick(e) {
 					width: max-content;
 					min-width: max-content;
 					pointer-events: all;
-					transition: opacity .2s;
+					transition: opacity 0.2s;
 					&:first-of-type {
-						margin-left: -.5em;
+						margin-left: -0.5em;
 					}
 					&:hover {
 						color: var(--fgHighlighted);
 					}
-	
+
 					> .count {
 						display: inline;
 						margin: 0 0 0 8px;
 						opacity: 0.7;
 					}
-	
+
 					&.reacted {
 						color: var(--accent);
 					}
@@ -320,7 +451,8 @@ function noteClick(e) {
 			margin-right: 8px !important;
 		}
 	}
-	> .reply, > .more {
+	> .reply,
+	> .more {
 		margin-top: 10px;
 		&.single {
 			padding: 0 !important;
@@ -361,15 +493,19 @@ function noteClick(e) {
 		}
 	}
 
-	&.reply, &.reply-to, &.reply-to-more {
-		> .main:hover, > .main:focus-within {
+	&.reply,
+	&.reply-to,
+	&.reply-to-more {
+		> .main:hover,
+		> .main:focus-within {
 			:deep(.footer .button) {
 				opacity: 1;
 			}
 		}
 	}
 
-	&.reply-to, &.reply-to-more {
+	&.reply-to,
+	&.reply-to-more {
 		padding-bottom: 0;
 		&:first-child {
 			padding-top: 24px;
@@ -378,9 +514,11 @@ function noteClick(e) {
 			margin-bottom: -16px;
 		}
 	}
-	
+
 	// Reply Lines
-	&.reply, &.reply-to, &.reply-to-more {
+	&.reply,
+	&.reply-to,
+	&.reply-to-more {
 		--indent: calc(var(--avatarSize) - 5px);
 		> .main {
 			> .avatar-container {
@@ -413,17 +551,20 @@ function noteClick(e) {
 			}
 		}
 	}
-	&.reply-to, &.reply-to-more {
+	&.reply-to,
+	&.reply-to-more {
 		> .main > .avatar-container > .line {
 			margin-bottom: 0px !important;
 		}
 	}
-	&.single, &.singleStart {
+	&.single,
+	&.singleStart {
 		> .main > .avatar-container > .line {
 			margin-bottom: -10px !important;
 		}
 	}
-	.reply.children:not(:last-child) { // Line that goes through multiple replies
+	.reply.children:not(:last-child) {
+		// Line that goes through multiple replies
 		position: relative;
 		> .line {
 			position: absolute;
@@ -473,7 +614,9 @@ function noteClick(e) {
 	}
 	&.firstColumn > .children:last-child > .main {
 		padding-bottom: 0 !important;
-		&::before { bottom: 0 !important }
+		&::before {
+			bottom: 0 !important;
+		}
 		// &::after { content: unset }
 	}
 
@@ -485,7 +628,9 @@ function noteClick(e) {
 			}
 		}
 		&.firstColumn {
-			> .main, > .line, > .children:not(.single) > .line {
+			> .main,
+			> .line,
+			> .children:not(.single) > .line {
 				--avatarSize: 35px;
 				--indent: 35px;
 			}
@@ -496,7 +641,8 @@ function noteClick(e) {
 	}
 	&.max-width_450px {
 		padding: 14px 16px;
-		&.reply-to, &.reply-to-more {
+		&.reply-to,
+		&.reply-to-more {
 			padding: 14px 16px;
 			padding-top: 14px !important;
 			padding-bottom: 0 !important;
diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue
index f1c8aab46..124ffea6a 100644
--- a/packages/client/src/components/MkNotes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -1,29 +1,46 @@
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-			<div>{{ i18n.ts.noNotes }}</div>
-		</div>
-	</template>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img
+					src="/static-assets/badges/info.png"
+					class="_ghost"
+					alt="Info"
+				/>
+				<div>{{ i18n.ts.noNotes }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: notes }">
-		<div class="giivymft" :class="{ noGap }">
-			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
-				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
-			</XList>
-		</div>
-	</template>
-</MkPagination>
+		<template #default="{ items: notes }">
+			<div class="giivymft" :class="{ noGap }">
+				<XList
+					ref="notes"
+					v-slot="{ item: note }"
+					:items="notes"
+					:direction="pagination.reversed ? 'up' : 'down'"
+					:reversed="pagination.reversed"
+					:no-gap="noGap"
+					:ad="true"
+					class="notes"
+				>
+					<XNote
+						:key="note._featuredId_ || note._prId_ || note.id"
+						class="qtqtichx"
+						:note="note"
+					/>
+				</XList>
+			</div>
+		</template>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import type { Paging } from '@/components/MkPagination.vue';
-import XNote from '@/components/MkNote.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import type { Paging } from "@/components/MkPagination.vue";
+import XNote from "@/components/MkNote.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	pagination: Paging;
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 1e75c59a9..60aefab9f 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -1,99 +1,289 @@
 <template>
-<div ref="elRef" v-size="{ max: [500, 600] }" 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"/>
-		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
-		<div class="sub-icon" :class="notification.type">
-			<i v-if="notification.type === 'follow'" class="ph-hand-waving ph-bold"></i>
-			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ph-clock ph-bold"></i>
-			<i v-else-if="notification.type === 'followRequestAccepted'" class="ph-check ph-bold"></i>
-			<i v-else-if="notification.type === 'groupInvited'" class="ph-identification-card ph-bold"></i>
-			<i v-else-if="notification.type === 'renote'" class="ph-repeat ph-bold"></i>
-			<i v-else-if="notification.type === 'reply'" class="ph-arrow-bend-up-left ph-bold"></i>
-			<i v-else-if="notification.type === 'mention'" class="ph-at ph-bold"></i>
-			<i v-else-if="notification.type === 'quote'" class="ph-quotes ph-bold"></i>
-			<i v-else-if="notification.type === 'pollVote'" class="ph-microphone-stage ph-bold"></i>
-			<i v-else-if="notification.type === 'pollEnded'" class="ph-microphone-stage ph-bold"></i>
-			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
-			<XReactionIcon
-				v-else-if="notification.type === 'reaction'"
-				ref="reactionRef"
-				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
-				:custom-emojis="notification.note.emojis"
-				:no-style="true"
+	<div
+		ref="elRef"
+		v-size="{ max: [500, 600] }"
+		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"
+			/>
+			<img
+				v-else-if="notification.icon"
+				class="icon"
+				:src="notification.icon"
+				alt=""
+			/>
+			<div class="sub-icon" :class="notification.type">
+				<i
+					v-if="notification.type === 'follow'"
+					class="ph-hand-waving ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'receiveFollowRequest'"
+					class="ph-clock ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'followRequestAccepted'"
+					class="ph-check ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'groupInvited'"
+					class="ph-identification-card ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'renote'"
+					class="ph-repeat ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'reply'"
+					class="ph-arrow-bend-up-left ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'mention'"
+					class="ph-at ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'quote'"
+					class="ph-quotes ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'pollVote'"
+					class="ph-microphone-stage ph-bold"
+				></i>
+				<i
+					v-else-if="notification.type === 'pollEnded'"
+					class="ph-microphone-stage ph-bold"
+				></i>
+				<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
+				<XReactionIcon
+					v-else-if="notification.type === 'reaction'"
+					ref="reactionRef"
+					:reaction="
+						notification.reaction
+							? notification.reaction.replace(
+									/^:(\w+):$/,
+									':$1@.:'
+							  )
+							: notification.reaction
+					"
+					:custom-emojis="notification.note.emojis"
+					:no-style="true"
+				/>
+			</div>
+		</div>
+		<div class="tail">
+			<header>
+				<span v-if="notification.type === 'pollEnded'">{{
+					i18n.ts._notification.pollEnded
+				}}</span>
+				<MkA
+					v-else-if="notification.user"
+					v-user-preview="notification.user.id"
+					class="name"
+					:to="userPage(notification.user)"
+					><MkUserName :user="notification.user"
+				/></MkA>
+				<span v-else>{{ notification.header }}</span>
+				<MkTime
+					v-if="withTime"
+					:time="notification.createdAt"
+					class="time"
+				/>
+			</header>
+			<MkA
+				v-if="notification.type === 'reaction'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'renote'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note.renote)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note.renote)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.renote.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></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"
+				/>
+			</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"
+				/>
+			</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"
+				/>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'pollVote'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+			</MkA>
+			<MkA
+				v-if="notification.type === 'pollEnded'"
+				class="text"
+				:to="notePage(notification.note)"
+				:title="getNoteSummary(notification.note)"
+			>
+				<i class="ph-quotes ph-fill ph-lg"></i>
+				<Mfm
+					:text="getNoteSummary(notification.note)"
+					:plain="true"
+					:nowrap="!full"
+					:custom-emojis="notification.note.emojis"
+				/>
+				<i class="ph-quotes ph-fill ph-lg"></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>
+			<span
+				v-if="notification.type === 'followRequestAccepted'"
+				class="text"
+				style="opacity: 0.6"
+				>{{ i18n.ts.followRequestAccepted }}</span
+			>
+			<span
+				v-if="notification.type === 'receiveFollowRequest'"
+				class="text"
+				style="opacity: 0.6"
+				>{{ i18n.ts.receiveFollowRequest }}
+				<div v-if="full && !followRequestDone">
+					<button class="_textButton" @click="acceptFollowRequest()">
+						{{ i18n.ts.accept }}
+					</button>
+					|
+					<button class="_textButton" @click="rejectFollowRequest()">
+						{{ i18n.ts.reject }}
+					</button>
+				</div></span
+			>
+			<span
+				v-if="notification.type === 'groupInvited'"
+				class="text"
+				style="opacity: 0.6"
+				>{{ i18n.ts.groupInvited }}:
+				<b>{{ notification.invitation.group.name }}</b>
+				<div v-if="full && !groupInviteDone">
+					<button
+						class="_textButton"
+						@click="acceptGroupInvitation()"
+					>
+						{{ i18n.ts.accept }}
+					</button>
+					|
+					<button
+						class="_textButton"
+						@click="rejectGroupInvitation()"
+					>
+						{{ i18n.ts.reject }}
+					</button>
+				</div></span
+			>
+			<span v-if="notification.type === 'app'" class="text">
+				<Mfm :text="notification.body" :nowrap="!full" />
+			</span>
 		</div>
 	</div>
-	<div class="tail">
-		<header>
-			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
-			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
-			<span v-else>{{ notification.header }}</span>
-			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
-		</header>
-		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></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"/>
-		</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"/>
-		</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"/>
-		</MkA>
-		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes ph-fill ph-lg"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes ph-fill ph-lg"></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>
-		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
-		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
-		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
-		<span v-if="notification.type === 'app'" class="text">
-			<Mfm :text="notification.body" :nowrap="!full"/>
-		</span>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { useTooltip } from '@/scripts/use-tooltip';
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import * as misskey from "calckey-js";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import XReactionTooltip from "@/components/MkReactionTooltip.vue";
+import { getNoteSummary } from "@/scripts/get-note-summary";
+import { notePage } from "@/filters/note";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { useTooltip } from "@/scripts/use-tooltip";
 
-const props = withDefaults(defineProps<{
-	notification: misskey.entities.Notification;
-	withTime?: boolean;
-	full?: boolean;
-}>(), {
-	withTime: false,
-	full: false,
-});
+const props = withDefaults(
+	defineProps<{
+		notification: misskey.entities.Notification;
+		withTime?: boolean;
+		full?: boolean;
+	}>(),
+	{
+		withTime: false,
+		full: false,
+	}
+);
 
 const elRef = ref<HTMLElement>(null);
 const reactionRef = ref(null);
@@ -104,8 +294,8 @@ let connection;
 onMounted(() => {
 	if (!props.notification.isRead) {
 		readObserver = new IntersectionObserver((entries, observer) => {
-			if (!entries.some(entry => entry.isIntersecting)) return;
-			stream.send('readNotification', {
+			if (!entries.some((entry) => entry.isIntersecting)) return;
+			stream.send("readNotification", {
 				id: props.notification.id,
 			});
 			observer.disconnect();
@@ -113,8 +303,8 @@ onMounted(() => {
 
 		readObserver.observe(elRef.value);
 
-		connection = stream.useChannel('main');
-		connection.on('readAllNotifications', () => readObserver.disconnect());
+		connection = stream.useChannel("main");
+		connection.on("readAllNotifications", () => readObserver.disconnect());
 
 		watch(props.notification.isRead, () => {
 			readObserver.disconnect();
@@ -132,31 +322,42 @@ const groupInviteDone = ref(false);
 
 const acceptFollowRequest = () => {
 	followRequestDone.value = true;
-	os.api('following/requests/accept', { userId: props.notification.user.id });
+	os.api("following/requests/accept", { userId: props.notification.user.id });
 };
 
 const rejectFollowRequest = () => {
 	followRequestDone.value = true;
-	os.api('following/requests/reject', { userId: props.notification.user.id });
+	os.api("following/requests/reject", { userId: props.notification.user.id });
 };
 
 const acceptGroupInvitation = () => {
 	groupInviteDone.value = true;
-	os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
+	os.apiWithDialog("users/groups/invitations/accept", {
+		invitationId: props.notification.invitation.id,
+	});
 };
 
 const rejectGroupInvitation = () => {
 	groupInviteDone.value = true;
-	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
+	os.api("users/groups/invitations/reject", {
+		invitationId: props.notification.invitation.id,
+	});
 };
 
 useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
-		showing,
-		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
-		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
-	}, {}, 'closed');
+	os.popup(
+		XReactionTooltip,
+		{
+			showing,
+			reaction: props.notification.reaction
+				? props.notification.reaction.replace(/^:(\w+):$/, ":$1@.:")
+				: props.notification.reaction,
+			emojis: props.notification.note.emojis,
+			targetElement: reactionRef.value.$el,
+		},
+		{},
+		"closed"
+	);
 });
 </script>
 
@@ -219,7 +420,10 @@ useTooltip(reactionRef, (showing) => {
 				height: 100%;
 			}
 
-			&.follow, &.followRequestAccepted, &.receiveFollowRequest, &.groupInvited {
+			&.follow,
+			&.followRequestAccepted,
+			&.receiveFollowRequest,
+			&.groupInvited {
 				padding: 3px;
 				background: #31748f;
 				pointer-events: none;
diff --git a/packages/client/src/components/MkNotificationSettingWindow.vue b/packages/client/src/components/MkNotificationSettingWindow.vue
index f2a9aed99..00a61bb2d 100644
--- a/packages/client/src/components/MkNotificationSettingWindow.vue
+++ b/packages/client/src/components/MkNotificationSettingWindow.vue
@@ -1,60 +1,77 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	@ok="ok()"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.notificationSetting }}</template>
-	<div class="_monolithic_">
-		<div v-if="showGlobalToggle" class="_section">
-			<MkSwitch v-model="useGlobalSetting">
-				{{ i18n.ts.useGlobalSetting }}
-				<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
-			</MkSwitch>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		:height="450"
+		:with-ok-button="true"
+		:ok-button-disabled="false"
+		@ok="ok()"
+		@close="dialog.close()"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.notificationSetting }}</template>
+		<div class="_monolithic_">
+			<div v-if="showGlobalToggle" class="_section">
+				<MkSwitch v-model="useGlobalSetting">
+					{{ i18n.ts.useGlobalSetting }}
+					<template #caption>{{
+						i18n.ts.useGlobalSettingDesc
+					}}</template>
+				</MkSwitch>
+			</div>
+			<div v-if="!useGlobalSetting" class="_section">
+				<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
+				<MkButton inline @click="disableAll">{{
+					i18n.ts.disableAll
+				}}</MkButton>
+				<MkButton inline @click="enableAll">{{
+					i18n.ts.enableAll
+				}}</MkButton>
+				<MkSwitch
+					v-for="ntype in notificationTypes"
+					:key="ntype"
+					v-model="typesMap[ntype]"
+					>{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch
+				>
+			</div>
 		</div>
-		<div v-if="!useGlobalSetting" class="_section">
-			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
-			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
-			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
-		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { notificationTypes } from 'calckey-js';
-import MkSwitch from './form/switch.vue';
-import MkInfo from './MkInfo.vue';
-import MkButton from './MkButton.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { notificationTypes } from "calckey-js";
+import MkSwitch from "./form/switch.vue";
+import MkInfo from "./MkInfo.vue";
+import MkButton from "./MkButton.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'done', v: { includingTypes: string[] | null }): void,
-	(ev: 'closed'): void,
+	(ev: "done", v: { includingTypes: string[] | null }): void;
+	(ev: "closed"): void;
 }>();
 
-const props = withDefaults(defineProps<{
-	includingTypes?: typeof notificationTypes[number][] | null;
-	showGlobalToggle?: boolean;
-}>(), {
-	includingTypes: () => [],
-	showGlobalToggle: true,
-});
+const props = withDefaults(
+	defineProps<{
+		includingTypes?: (typeof notificationTypes)[number][] | null;
+		showGlobalToggle?: boolean;
+	}>(),
+	{
+		includingTypes: () => [],
+		showGlobalToggle: true,
+	}
+);
 
 let includingTypes = $computed(() => props.includingTypes || []);
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
-let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
-let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
+let typesMap = $ref<Record<(typeof notificationTypes)[number], boolean>>({});
+let useGlobalSetting = $ref(
+	(includingTypes === null || includingTypes.length === 0) &&
+		props.showGlobalToggle
+);
 
 for (const ntype of notificationTypes) {
 	typesMap[ntype] = includingTypes.includes(ntype);
@@ -62,11 +79,12 @@ for (const ntype of notificationTypes) {
 
 function ok() {
 	if (useGlobalSetting) {
-		emit('done', { includingTypes: null });
+		emit("done", { includingTypes: null });
 	} else {
-		emit('done', {
-			includingTypes: (Object.keys(typesMap) as typeof notificationTypes[number][])
-				.filter(type => typesMap[type]),
+		emit("done", {
+			includingTypes: (
+				Object.keys(typesMap) as (typeof notificationTypes)[number][]
+			).filter((type) => typesMap[type]),
 		});
 	}
 
@@ -75,13 +93,13 @@ function ok() {
 
 function disableAll() {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = false;
+		typesMap[type as (typeof notificationTypes)[number]] = false;
 	}
 }
 
 function enableAll() {
 	for (const type in typesMap) {
-		typesMap[type as typeof notificationTypes[number]] = true;
+		typesMap[type as (typeof notificationTypes)[number]] = true;
 	}
 }
 </script>
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index 398f64d54..ba95e11af 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -1,25 +1,33 @@
 <template>
-<div class="mk-notification-toast" :style="{ zIndex }">
-	<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')">
-		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
-	</transition>
-</div>
+	<div class="mk-notification-toast" :style="{ zIndex }">
+		<transition
+			:name="$store.state.animation ? 'notification-toast' : ''"
+			appear
+			@after-leave="$emit('closed')"
+		>
+			<XNotification
+				v-if="showing"
+				:notification="notification"
+				class="notification _acrylic"
+			/>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XNotification from '@/components/MkNotification.vue';
-import * as os from '@/os';
+import { onMounted } from "vue";
+import XNotification from "@/components/MkNotification.vue";
+import * as os from "@/os";
 
 defineProps<{
 	notification: any; // TODO
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 let showing = $ref(true);
 
 onMounted(() => {
@@ -30,10 +38,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.notification-toast-enter-active, .notification-toast-leave-active {
+.notification-toast-enter-active,
+.notification-toast-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.notification-toast-enter-from, .notification-toast-leave-to {
+.notification-toast-enter-from,
+.notification-toast-leave-to {
 	opacity: 0;
 	transform: translateX(-250px);
 }
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
index a38c0e0b2..61b16b16e 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -1,54 +1,89 @@
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-			<div>{{ i18n.ts.noNotifications }}</div>
-		</div>
-	</template>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img
+					src="/static-assets/badges/info.png"
+					class="_ghost"
+					alt="Info"
+				/>
+				<div>{{ i18n.ts.noNotifications }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: notifications }">
-		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
-			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
-		</XList>
-	</template>
-</MkPagination>
+		<template #default="{ items: notifications }">
+			<XList
+				v-slot="{ item: notification }"
+				class="elsfgstc"
+				:items="notifications"
+				:no-gap="true"
+			>
+				<XNote
+					v-if="
+						['reply', 'quote', 'mention'].includes(
+							notification.type
+						)
+					"
+					:key="notification.id"
+					:note="notification.note"
+				/>
+				<XNotification
+					v-else
+					:key="notification.id"
+					:notification="notification"
+					:with-time="true"
+					:full="true"
+					class="_panel notification"
+				/>
+			</XList>
+		</template>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
-import { notificationTypes } from 'calckey-js';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import XNotification from '@/components/MkNotification.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import XNote from '@/components/MkNote.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import {
+	defineComponent,
+	markRaw,
+	onUnmounted,
+	onMounted,
+	computed,
+	ref,
+} from "vue";
+import { notificationTypes } from "calckey-js";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import XNotification from "@/components/MkNotification.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import XNote from "@/components/MkNote.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
-	includeTypes?: typeof notificationTypes[number][];
+	includeTypes?: (typeof notificationTypes)[number][];
 	unreadOnly?: boolean;
 }>();
 
 const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination: Paging = {
-	endpoint: 'i/notifications' as const,
+	endpoint: "i/notifications" as const,
 	limit: 10,
 	params: computed(() => ({
 		includeTypes: props.includeTypes ?? undefined,
-		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
+		excludeTypes: props.includeTypes
+			? undefined
+			: $i.mutingNotificationTypes,
 		unreadOnly: props.unreadOnly,
 	})),
 };
 
 const onNotification = (notification) => {
-	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
-	if (isMuted || document.visibilityState === 'visible') {
-		stream.send('readNotification', {
+	const isMuted = props.includeTypes
+		? !props.includeTypes.includes(notification.type)
+		: $i.mutingNotificationTypes.includes(notification.type);
+	if (isMuted || document.visibilityState === "visible") {
+		stream.send("readNotification", {
 			id: notification.id,
 		});
 	}
@@ -56,7 +91,7 @@ const onNotification = (notification) => {
 	if (!isMuted) {
 		pagingComponent.value.prepend({
 			...notification,
-			isRead: document.visibilityState === 'visible',
+			isRead: document.visibilityState === "visible",
 		});
 	}
 };
@@ -64,9 +99,9 @@ const onNotification = (notification) => {
 let connection;
 
 onMounted(() => {
-	connection = stream.useChannel('main');
-	connection.on('notification', onNotification);
-	connection.on('readAllNotifications', () => {
+	connection = stream.useChannel("main");
+	connection.on("notification", onNotification);
+	connection.on("readAllNotifications", () => {
 		if (pagingComponent.value) {
 			for (const item of pagingComponent.value.queue) {
 				item.isRead = true;
@@ -76,15 +111,23 @@ onMounted(() => {
 			}
 		}
 	});
-	connection.on('readNotifications', notificationIds => {
+	connection.on("readNotifications", (notificationIds) => {
 		if (pagingComponent.value) {
 			for (let i = 0; i < pagingComponent.value.queue.length; i++) {
-				if (notificationIds.includes(pagingComponent.value.queue[i].id)) {
+				if (
+					notificationIds.includes(pagingComponent.value.queue[i].id)
+				) {
 					pagingComponent.value.queue[i].isRead = true;
 				}
 			}
-			for (let i = 0; i < (pagingComponent.value.items || []).length; i++) {
-				if (notificationIds.includes(pagingComponent.value.items[i].id)) {
+			for (
+				let i = 0;
+				i < (pagingComponent.value.items || []).length;
+				i++
+			) {
+				if (
+					notificationIds.includes(pagingComponent.value.items[i].id)
+				) {
 					pagingComponent.value.items[i].isRead = true;
 				}
 			}
diff --git a/packages/client/src/components/MkNumber.vue b/packages/client/src/components/MkNumber.vue
index f24b36237..5fa0f765f 100644
--- a/packages/client/src/components/MkNumber.vue
+++ b/packages/client/src/components/MkNumber.vue
@@ -1,11 +1,11 @@
 <template>
-<span>{{ number(Math.floor(tweened.number)) }}</span>
+	<span>{{ number(Math.floor(tweened.number)) }}</span>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, watch } from 'vue';
-import gsap from 'gsap';
-import number from '@/filters/number';
+import { ref, reactive, watch } from "vue";
+import gsap from "gsap";
+import number from "@/filters/number";
 
 const props = defineProps<{
 	value: number;
@@ -15,9 +15,13 @@ const tweened = reactive({
 	number: 0,
 });
 
-watch(() => props.value, (n) => {
-	gsap.to(tweened, { duration: 0.6, number: Number(n) || 0 });
-}, {
-	immediate: true,
-});
+watch(
+	() => props.value,
+	(n) => {
+		gsap.to(tweened, { duration: 0.6, number: Number(n) || 0 });
+	},
+	{
+		immediate: true,
+	}
+);
 </script>
diff --git a/packages/client/src/components/MkNumberDiff.vue b/packages/client/src/components/MkNumberDiff.vue
index e7d4a5472..11b0ad374 100644
--- a/packages/client/src/components/MkNumberDiff.vue
+++ b/packages/client/src/components/MkNumberDiff.vue
@@ -1,12 +1,13 @@
 <template>
-<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
-	<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
-</span>
+	<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
+		<slot name="before"></slot>{{ isPlus ? "+" : "" }}{{ number(value)
+		}}<slot name="after"></slot>
+	</span>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue';
-import number from '@/filters/number';
+import { computed, defineComponent } from "vue";
+import number from "@/filters/number";
 
 export default defineComponent({
 	props: {
diff --git a/packages/client/src/components/MkObjectView.value.vue b/packages/client/src/components/MkObjectView.value.vue
index 0c7230d78..8b024229e 100644
--- a/packages/client/src/components/MkObjectView.value.vue
+++ b/packages/client/src/components/MkObjectView.value.vue
@@ -1,39 +1,66 @@
 <template>
-<div class="igpposuu _monospace">
-	<div v-if="value === null" class="null">null</div>
-	<div v-else-if="typeof value === 'boolean'" class="boolean" :class="{ true: value, false: !value }">{{ value ? 'true' : 'false' }}</div>
-	<div v-else-if="typeof value === 'string'" class="string">"{{ value }}"</div>
-	<div v-else-if="typeof value === 'number'" class="number">{{ number(value) }}</div>
-	<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">[]</div>
-	<div v-else-if="isArray(value)" class="array">
-		<div v-for="i in value.length" class="element">
-			{{ i }}: <XValue :value="value[i - 1]" collapsed/>
+	<div class="igpposuu _monospace">
+		<div v-if="value === null" class="null">null</div>
+		<div
+			v-else-if="typeof value === 'boolean'"
+			class="boolean"
+			:class="{ true: value, false: !value }"
+		>
+			{{ value ? "true" : "false" }}
 		</div>
-	</div>
-	<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">{}</div>
-	<div v-else-if="isObject(value)" class="object">
-		<div v-for="k in Object.keys(value)" class="kv">
-			<button class="toggle _button" :class="{ visible: collapsable(value[k]) }" @click="collapsed[k] = !collapsed[k]">{{ collapsed[k] ? '+' : '-' }}</button>
-			<div class="k">{{ k }}:</div>
-			<div v-if="collapsed[k]" class="v">
-				<button class="_button" @click="collapsed[k] = !collapsed[k]">
-					<template v-if="typeof value[k] === 'string'">"..."</template>
-					<template v-else-if="isArray(value[k])">[...]</template>
-					<template v-else-if="isObject(value[k])">{...}</template>
-				</button>
+		<div v-else-if="typeof value === 'string'" class="string">
+			"{{ value }}"
+		</div>
+		<div v-else-if="typeof value === 'number'" class="number">
+			{{ number(value) }}
+		</div>
+		<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">
+			[]
+		</div>
+		<div v-else-if="isArray(value)" class="array">
+			<div v-for="i in value.length" class="element">
+				{{ i }}: <XValue :value="value[i - 1]" collapsed />
+			</div>
+		</div>
+		<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">
+			{}
+		</div>
+		<div v-else-if="isObject(value)" class="object">
+			<div v-for="k in Object.keys(value)" class="kv">
+				<button
+					class="toggle _button"
+					:class="{ visible: collapsable(value[k]) }"
+					@click="collapsed[k] = !collapsed[k]"
+				>
+					{{ collapsed[k] ? "+" : "-" }}
+				</button>
+				<div class="k">{{ k }}:</div>
+				<div v-if="collapsed[k]" class="v">
+					<button
+						class="_button"
+						@click="collapsed[k] = !collapsed[k]"
+					>
+						<template v-if="typeof value[k] === 'string'"
+							>"..."</template
+						>
+						<template v-else-if="isArray(value[k])">[...]</template>
+						<template v-else-if="isObject(value[k])"
+							>{...}</template
+						>
+					</button>
+				</div>
+				<div v-else class="v"><XValue :value="value[k]" /></div>
 			</div>
-			<div v-else class="v"><XValue :value="value[k]"/></div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref } from 'vue';
-import number from '@/filters/number';
+import { computed, defineComponent, reactive, ref } from "vue";
+import number from "@/filters/number";
 
 export default defineComponent({
-	name: 'XValue',
+	name: "XValue",
 
 	props: {
 		value: {
@@ -51,7 +78,7 @@ export default defineComponent({
 		}
 
 		function isObject(v): boolean {
-			return typeof v === 'object' && !Array.isArray(v) && v !== null;
+			return typeof v === "object" && !Array.isArray(v) && v !== null;
 		}
 
 		function isArray(v): boolean {
@@ -59,7 +86,10 @@ export default defineComponent({
 		}
 
 		function isEmpty(v): boolean {
-			return (isArray(v) && v.length === 0) || (isObject(v) && Object.keys(v).length === 0);
+			return (
+				(isArray(v) && v.length === 0) ||
+				(isObject(v) && Object.keys(v).length === 0)
+			);
 		}
 
 		function collapsable(v): boolean {
diff --git a/packages/client/src/components/MkObjectView.vue b/packages/client/src/components/MkObjectView.vue
index 55578a37f..b3fce680b 100644
--- a/packages/client/src/components/MkObjectView.vue
+++ b/packages/client/src/components/MkObjectView.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="zhyxdalp">
-	<XValue :value="value" :collapsed="false"/>
-</div>
+	<div class="zhyxdalp">
+		<XValue :value="value" :collapsed="false" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XValue from './MkObjectView.value.vue';
+import {} from "vue";
+import XValue from "./MkObjectView.value.vue";
 
 const props = defineProps<{
 	value: Record<string, unknown>;
@@ -15,6 +15,5 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 .zhyxdalp {
-
 }
 </style>
diff --git a/packages/client/src/components/MkPagePreview.vue b/packages/client/src/components/MkPagePreview.vue
index ab7062d3e..034c6fed6 100644
--- a/packages/client/src/components/MkPagePreview.vue
+++ b/packages/client/src/components/MkPagePreview.vue
@@ -1,22 +1,41 @@
 <template>
-<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1" :behavior="`${ui === 'deck' ? 'window' : null}`">
-	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
-	<article>
-		<header>
-			<h1 :title="page.title">{{ page.title }}</h1>
-		</header>
-		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
-		<footer>
-			<img class="icon" :src="page.user.avatarUrl" aria-label="none"/>
-			<p>{{ userName(page.user) }}</p>
-		</footer>
-	</article>
-</MkA>
+	<MkA
+		:to="`/@${page.user.username}/pages/${page.name}`"
+		class="vhpxefrj _block"
+		tabindex="-1"
+		:behavior="`${ui === 'deck' ? 'window' : null}`"
+	>
+		<div
+			v-if="page.eyeCatchingImage"
+			class="thumbnail"
+			:style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"
+		></div>
+		<article>
+			<header>
+				<h1 :title="page.title">{{ page.title }}</h1>
+			</header>
+			<p v-if="page.summary" :title="page.summary">
+				{{
+					page.summary.length > 85
+						? page.summary.slice(0, 85) + "…"
+						: page.summary
+				}}
+			</p>
+			<footer>
+				<img
+					class="icon"
+					:src="page.user.avatarUrl"
+					aria-label="none"
+				/>
+				<p>{{ userName(page.user) }}</p>
+			</footer>
+		</article>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { userName } from '@/filters/user';
-import { ui } from '@/config';
+import { userName } from "@/filters/user";
+import { ui } from "@/config";
 
 defineProps<{
 	page: any;
@@ -149,5 +168,4 @@ defineProps<{
 		}
 	}
 }
-
 </style>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index 497b27c6b..bb5066b7e 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -1,63 +1,74 @@
 <template>
-<XWindow
-	ref="windowEl"
-	:initial-width="500"
-	:initial-height="500"
-	:can-resize="true"
-	:close-button="true"
-	:buttons-left="buttonsLeft"
-	:buttons-right="buttonsRight"
-	:contextmenu="contextmenu"
-	@closed="$emit('closed')"
->
-	<template #header>
-		<template v-if="pageMetadata?.value">
-			<i v-if="pageMetadata.value.icon" class="icon" :class="pageMetadata.value.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageMetadata.value.title }}</span>
+	<XWindow
+		ref="windowEl"
+		:initial-width="500"
+		:initial-height="500"
+		:can-resize="true"
+		:close-button="true"
+		:buttons-left="buttonsLeft"
+		:buttons-right="buttonsRight"
+		:contextmenu="contextmenu"
+		@closed="$emit('closed')"
+	>
+		<template #header>
+			<template v-if="pageMetadata?.value">
+				<i
+					v-if="pageMetadata.value.icon"
+					class="icon"
+					:class="pageMetadata.value.icon"
+					style="margin-right: 0.5em"
+				></i>
+				<span>{{ pageMetadata.value.title }}</span>
+			</template>
 		</template>
-	</template>
 
-	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
-		<RouterView :router="router"/>
-	</div>
-</XWindow>
+		<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
+			<RouterView :router="router" />
+		</div>
+	</XWindow>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, inject, provide } from 'vue';
-import RouterView from '@/components/global/RouterView.vue';
-import XWindow from '@/components/MkWindow.vue';
-import { popout as _popout } from '@/scripts/popout';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import * as os from '@/os';
-import { mainRouter, routes } from '@/router';
-import { Router } from '@/nirax';
-import { i18n } from '@/i18n';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { ComputedRef, inject, provide } from "vue";
+import RouterView from "@/components/global/RouterView.vue";
+import XWindow from "@/components/MkWindow.vue";
+import { popout as _popout } from "@/scripts/popout";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { url } from "@/config";
+import * as os from "@/os";
+import { mainRouter, routes } from "@/router";
+import { Router } from "@/nirax";
+import { i18n } from "@/i18n";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	initialPath: string;
 }>();
 
 defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const router = new Router(routes, props.initialPath);
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let windowEl = $ref<InstanceType<typeof XWindow>>();
-const history = $ref<{ path: string; key: any; }[]>([{
-	path: router.getCurrentPath(),
-	key: router.getCurrentKey(),
-}]);
+const history = $ref<{ path: string; key: any }[]>([
+	{
+		path: router.getCurrentPath(),
+		key: router.getCurrentKey(),
+	},
+]);
 const buttonsLeft = $computed(() => {
 	const buttons = [];
 
 	if (history.length > 1) {
 		buttons.push({
-			icon: 'ph-caret-left ph-bold ph-lg',
+			icon: "ph-caret-left ph-bold ph-lg",
 			onClick: back,
 		});
 	}
@@ -65,48 +76,55 @@ const buttonsLeft = $computed(() => {
 	return buttons;
 });
 const buttonsRight = $computed(() => {
-	const buttons = [{
-		icon: 'ph-arrows-out-simple ph-bold ph-lg',
-		title: i18n.ts.showInPage,
-		onClick: expand,
-	}];
+	const buttons = [
+		{
+			icon: "ph-arrows-out-simple ph-bold ph-lg",
+			title: i18n.ts.showInPage,
+			onClick: expand,
+		},
+	];
 
 	return buttons;
 });
 
-router.addListener('push', ctx => {
+router.addListener("push", (ctx) => {
 	history.push({ path: ctx.path, key: ctx.key });
 });
 
-provide('router', router);
+provide("router", router);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 });
-provide('shouldOmitHeaderTitle', true);
-provide('shouldHeaderThin', true);
+provide("shouldOmitHeaderTitle", true);
+provide("shouldHeaderThin", true);
 
-const contextmenu = $computed(() => ([{
-	icon: 'ph-arrows-out-simple ph-bold ph-lg',
-	text: i18n.ts.showInPage,
-	action: expand,
-}, {
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	text: i18n.ts.popout,
-	action: popout,
-}, {
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	text: i18n.ts.openInNewTab,
-	action: () => {
-		window.open(url + router.getCurrentPath(), '_blank');
-		windowEl.close();
+const contextmenu = $computed(() => [
+	{
+		icon: "ph-arrows-out-simple ph-bold ph-lg",
+		text: i18n.ts.showInPage,
+		action: expand,
 	},
-}, {
-	icon: 'ph-link-simple ph-bold ph-lg',
-	text: i18n.ts.copyLink,
-	action: () => {
-		copyToClipboard(url + router.getCurrentPath());
+	{
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		text: i18n.ts.popout,
+		action: popout,
 	},
-}]));
+	{
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		text: i18n.ts.openInNewTab,
+		action: () => {
+			window.open(url + router.getCurrentPath(), "_blank");
+			windowEl.close();
+		},
+	},
+	{
+		icon: "ph-link-simple ph-bold ph-lg",
+		text: i18n.ts.copyLink,
+		action: () => {
+			copyToClipboard(url + router.getCurrentPath());
+		},
+	},
+]);
 
 function menu(ev) {
 	os.popupMenu(contextmenu, ev.currentTarget ?? ev.target);
@@ -114,7 +132,10 @@ function menu(ev) {
 
 function back() {
 	history.pop();
-	router.replace(history[history.length - 1].path, history[history.length - 1].key);
+	router.replace(
+		history[history.length - 1].path,
+		history[history.length - 1].key
+	);
 }
 
 function close() {
@@ -122,7 +143,7 @@ function close() {
 }
 
 function expand() {
-	mainRouter.push(router.getCurrentPath(), 'forcePage');
+	mainRouter.push(router.getCurrentPath(), "forcePage");
 	windowEl.close();
 }
 
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
index 5b71598c0..24018e526 100644
--- a/packages/client/src/components/MkPagination.vue
+++ b/packages/client/src/components/MkPagination.vue
@@ -1,357 +1,490 @@
 <template>
 	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
+		<MkLoading v-if="fetching" />
 
-		<MkError v-else-if="error" @retry="init()"/>
+		<MkError v-else-if="error" @retry="init()" />
 
 		<div v-else-if="empty" key="_empty_" class="empty">
 			<slot name="empty">
 				<div class="_fullinfo">
-					<img src="/static-assets/badges/info.png" class="_ghost" alt="Error"/>
+					<img
+						src="/static-assets/badges/info.png"
+						class="_ghost"
+						alt="Error"
+					/>
 					<div>{{ i18n.ts.nothing }}</div>
 				</div>
 			</slot>
 		</div>
 
 		<div v-else ref="rootEl">
-			<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
-				<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
+			<div
+				v-show="pagination.reversed && more"
+				key="_more_"
+				class="cxiknjgy _gap"
+			>
+				<MkButton
+					v-if="!moreFetching"
+					class="button"
+					:disabled="moreFetching"
+					:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
+					primary
+					@click="fetchMoreAhead"
+				>
 					{{ i18n.ts.loadMore }}
 				</MkButton>
-				<MkLoading v-else class="loading"/>
+				<MkLoading v-else class="loading" />
 			</div>
 			<slot :items="items"></slot>
-			<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
-				<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+			<div
+				v-show="!pagination.reversed && more"
+				key="_more_"
+				class="cxiknjgy _gap"
+			>
+				<MkButton
+					v-if="!moreFetching"
+					v-appear="
+						$store.state.enableInfiniteScroll && !disableAutoLoad
+							? fetchMore
+							: null
+					"
+					class="button"
+					:disabled="moreFetching"
+					:style="{ cursor: moreFetching ? 'wait' : 'pointer' }"
+					primary
+					@click="fetchMore"
+				>
 					{{ i18n.ts.loadMore }}
 				</MkButton>
-				<MkLoading v-else class="loading"/>
+				<MkLoading v-else class="loading" />
 			</div>
 		</div>
 	</transition>
-	</template>
+</template>
 
-	<script lang="ts" setup>
-	import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
-	import * as misskey from 'calckey-js';
-	import * as os from '@/os';
-	import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
-	import MkButton from '@/components/MkButton.vue';
-	import { i18n } from '@/i18n';
+<script lang="ts" setup>
+import {
+	computed,
+	ComputedRef,
+	isRef,
+	markRaw,
+	onActivated,
+	onDeactivated,
+	Ref,
+	ref,
+	watch,
+} from "vue";
+import * as misskey from "calckey-js";
+import * as os from "@/os";
+import {
+	onScrollTop,
+	isTopVisible,
+	getScrollPosition,
+	getScrollContainer,
+} from "@/scripts/scroll";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
-	export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
-		endpoint: E;
-		limit: number;
-		params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
+export type Paging<
+	E extends keyof misskey.Endpoints = keyof misskey.Endpoints
+> = {
+	endpoint: E;
+	limit: number;
+	params?:
+		| misskey.Endpoints[E]["req"]
+		| ComputedRef<misskey.Endpoints[E]["req"]>;
 
-		/**
-		 * 検索APIのような、ページング不可なエンドポイントを利用する場合
-		 * (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
-		 */
-		noPaging?: boolean;
+	/**
+	 * 検索APIのような、ページング不可なエンドポイントを利用する場合
+	 * (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
+	 */
+	noPaging?: boolean;
 
-		/**
-		 * items 配列の中身を逆順にする(新しい方が最後)
-		 */
-		reversed?: boolean;
+	/**
+	 * items 配列の中身を逆順にする(新しい方が最後)
+	 */
+	reversed?: boolean;
 
-		offsetMode?: boolean;
-	};
+	offsetMode?: boolean;
+};
 
-	const SECOND_FETCH_LIMIT = 30;
+const SECOND_FETCH_LIMIT = 30;
 
-	const props = withDefaults(defineProps<{
+const props = withDefaults(
+	defineProps<{
 		pagination: Paging;
 		disableAutoLoad?: boolean;
 		displayLimit?: number;
-	}>(), {
+	}>(),
+	{
 		displayLimit: 30,
-	});
+	}
+);
 
-	const emit = defineEmits<{
-		(ev: 'queue', count: number): void;
-	}>();
+const emit = defineEmits<{
+	(ev: "queue", count: number): void;
+}>();
 
-	type Item = { id: string; [another: string]: unknown; };
+type Item = { id: string; [another: string]: unknown };
 
-	const rootEl = ref<HTMLElement>();
-	const items = ref<Item[]>([]);
-	const queue = ref<Item[]>([]);
-	const offset = ref(0);
-	const fetching = ref(true);
-	const moreFetching = ref(false);
-	const more = ref(false);
-	const backed = ref(false); // 遡り中か否か
-	const isBackTop = ref(false);
-	const empty = computed(() => items.value.length === 0);
-	const error = ref(false);
+const rootEl = ref<HTMLElement>();
+const items = ref<Item[]>([]);
+const queue = ref<Item[]>([]);
+const offset = ref(0);
+const fetching = ref(true);
+const moreFetching = ref(false);
+const more = ref(false);
+const backed = ref(false); // 遡り中か否か
+const isBackTop = ref(false);
+const empty = computed(() => items.value.length === 0);
+const error = ref(false);
 
-	const init = async (): Promise<void> => {
-		queue.value = [];
-		fetching.value = true;
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
+const init = async (): Promise<void> => {
+	queue.value = [];
+	fetching.value = true;
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
 			...params,
-			limit: props.pagination.noPaging ? (props.pagination.limit || 10) : (props.pagination.limit || 10) + 1,
-		}).then(res => {
-			for (let i = 0; i < res.length; i++) {
-				const item = res[i];
-				if (props.pagination.reversed) {
-					if (i === res.length - 2) item._shouldInsertAd_ = true;
-				} else {
-					if (i === 3) item._shouldInsertAd_ = true;
+			limit: props.pagination.noPaging
+				? props.pagination.limit || 10
+				: (props.pagination.limit || 10) + 1,
+		})
+		.then(
+			(res) => {
+				for (let i = 0; i < res.length; i++) {
+					const item = res[i];
+					if (props.pagination.reversed) {
+						if (i === res.length - 2) item._shouldInsertAd_ = true;
+					} else {
+						if (i === 3) item._shouldInsertAd_ = true;
+					}
 				}
+				if (
+					!props.pagination.noPaging &&
+					res.length > (props.pagination.limit || 10)
+				) {
+					res.pop();
+					items.value = props.pagination.reversed
+						? [...res].reverse()
+						: res;
+					more.value = true;
+				} else {
+					items.value = props.pagination.reversed
+						? [...res].reverse()
+						: res;
+					more.value = false;
+				}
+				offset.value = res.length;
+				error.value = false;
+				fetching.value = false;
+			},
+			(err) => {
+				error.value = true;
+				fetching.value = false;
 			}
-			if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
-				res.pop();
-				items.value = props.pagination.reversed ? [...res].reverse() : res;
-				more.value = true;
-			} else {
-				items.value = props.pagination.reversed ? [...res].reverse() : res;
-				more.value = false;
-			}
-			offset.value = res.length;
-			error.value = false;
-			fetching.value = false;
-		}, err => {
-			error.value = true;
-			fetching.value = false;
-		});
-	};
+		);
+};
 
-	const reload = (): void => {
-		items.value = [];
-		init();
-	};
+const reload = (): void => {
+	items.value = [];
+	init();
+};
 
-	const refresh = async (): void => {
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
+const refresh = async (): void => {
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
 			...params,
 			limit: items.value.length + 1,
 			offset: 0,
-		}).then(res => {
-			let ids = items.value.reduce((a, b) => {
-				a[b.id] = true;
-				return a;
-			}, {} as { [id: string]: boolean; });
+		})
+		.then(
+			(res) => {
+				let ids = items.value.reduce((a, b) => {
+					a[b.id] = true;
+					return a;
+				}, {} as { [id: string]: boolean });
 
-			for (let i = 0; i < res.length; i++) {
-				const item = res[i];
-				if (!updateItem(item.id, old => item)) {
-					append(item);
+				for (let i = 0; i < res.length; i++) {
+					const item = res[i];
+					if (!updateItem(item.id, (old) => item)) {
+						append(item);
+					}
+					delete ids[item.id];
 				}
-				delete ids[item.id];
-			}
 
-			for (const id in ids) {
-				removeItem(i => i.id === id);
+				for (const id in ids) {
+					removeItem((i) => i.id === id);
+				}
+			},
+			(err) => {
+				error.value = true;
+				fetching.value = false;
 			}
-		}, err => {
-			error.value = true;
-			fetching.value = false;
-		});
-	};
+		);
+};
 
-	const fetchMore = async (): Promise<void> => {
-		if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
-		moreFetching.value = true;
-		backed.value = true;
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
+const fetchMore = async (): Promise<void> => {
+	if (
+		!more.value ||
+		fetching.value ||
+		moreFetching.value ||
+		items.value.length === 0
+	)
+		return;
+	moreFetching.value = true;
+	backed.value = true;
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
 			...params,
 			limit: SECOND_FETCH_LIMIT + 1,
-			...(props.pagination.offsetMode ? {
-				offset: offset.value,
-			} : props.pagination.reversed ? {
-				sinceId: items.value[0].id,
-			} : {
-				untilId: items.value[items.value.length - 1].id,
-			}),
-		}).then(res => {
-			for (let i = 0; i < res.length; i++) {
-				const item = res[i];
-				if (props.pagination.reversed) {
-					if (i === res.length - 9) item._shouldInsertAd_ = true;
-				} else {
-					if (i === 10) item._shouldInsertAd_ = true;
-				}
-			}
-			if (res.length > SECOND_FETCH_LIMIT) {
-				res.pop();
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = true;
-			} else {
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = false;
-			}
-			offset.value += res.length;
-			moreFetching.value = false;
-		}, err => {
-			moreFetching.value = false;
-		});
-	};
-
-	const fetchMoreAhead = async (): Promise<void> => {
-		if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
-		moreFetching.value = true;
-		const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-		await os.api(props.pagination.endpoint, {
-			...params,
-			limit: SECOND_FETCH_LIMIT + 1,
-			...(props.pagination.offsetMode ? {
-				offset: offset.value,
-			} : props.pagination.reversed ? {
-				untilId: items.value[0].id,
-			} : {
-				sinceId: items.value[items.value.length - 1].id,
-			}),
-		}).then(res => {
-			if (res.length > SECOND_FETCH_LIMIT) {
-				res.pop();
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = true;
-			} else {
-				items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-				more.value = false;
-			}
-			offset.value += res.length;
-			moreFetching.value = false;
-		}, err => {
-			moreFetching.value = false;
-		});
-	};
-
-	const prepend = (item: Item): void => {
-		if (props.pagination.reversed) {
-			if (rootEl.value) {
-				const container = getScrollContainer(rootEl.value);
-				if (container == null) {
-					// TODO?
-				} else {
-					const pos = getScrollPosition(rootEl.value);
-					const viewHeight = container.clientHeight;
-					const height = container.scrollHeight;
-					const isBottom = (pos + viewHeight > height - 32);
-					if (isBottom) {
-						// オーバーフローしたら古いアイテムは捨てる
-						if (items.value.length >= props.displayLimit) {
-							// このやり方だとVue 3.2以降アニメーションが動かなくなる
-							//items.value = items.value.slice(-props.displayLimit);
-							while (items.value.length >= props.displayLimit) {
-								items.value.shift();
-							}
-							more.value = true;
-						}
+			...(props.pagination.offsetMode
+				? {
+						offset: offset.value,
+				  }
+				: props.pagination.reversed
+				? {
+						sinceId: items.value[0].id,
+				  }
+				: {
+						untilId: items.value[items.value.length - 1].id,
+				  }),
+		})
+		.then(
+			(res) => {
+				for (let i = 0; i < res.length; i++) {
+					const item = res[i];
+					if (props.pagination.reversed) {
+						if (i === res.length - 9) item._shouldInsertAd_ = true;
+					} else {
+						if (i === 10) item._shouldInsertAd_ = true;
 					}
 				}
-			}
-			items.value.push(item);
-			// TODO
-		} else {
-			// 初回表示時はunshiftだけでOK
-			if (!rootEl.value) {
-				items.value.unshift(item);
-				return;
-			}
-
-			const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
-
-			if (isTop) {
-				// Prepend the item
-				items.value.unshift(item);
-
-				// オーバーフローしたら古いアイテムは捨てる
-				if (items.value.length >= props.displayLimit) {
-					// このやり方だとVue 3.2以降アニメーションが動かなくなる
-					//this.items = items.value.slice(0, props.displayLimit);
-					while (items.value.length >= props.displayLimit) {
-						items.value.pop();
-					}
+				if (res.length > SECOND_FETCH_LIMIT) {
+					res.pop();
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
 					more.value = true;
+				} else {
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
+					more.value = false;
 				}
+				offset.value += res.length;
+				moreFetching.value = false;
+			},
+			(err) => {
+				moreFetching.value = false;
+			}
+		);
+};
+
+const fetchMoreAhead = async (): Promise<void> => {
+	if (
+		!more.value ||
+		fetching.value ||
+		moreFetching.value ||
+		items.value.length === 0
+	)
+		return;
+	moreFetching.value = true;
+	const params = props.pagination.params
+		? isRef(props.pagination.params)
+			? props.pagination.params.value
+			: props.pagination.params
+		: {};
+	await os
+		.api(props.pagination.endpoint, {
+			...params,
+			limit: SECOND_FETCH_LIMIT + 1,
+			...(props.pagination.offsetMode
+				? {
+						offset: offset.value,
+				  }
+				: props.pagination.reversed
+				? {
+						untilId: items.value[0].id,
+				  }
+				: {
+						sinceId: items.value[items.value.length - 1].id,
+				  }),
+		})
+		.then(
+			(res) => {
+				if (res.length > SECOND_FETCH_LIMIT) {
+					res.pop();
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
+					more.value = true;
+				} else {
+					items.value = props.pagination.reversed
+						? [...res].reverse().concat(items.value)
+						: items.value.concat(res);
+					more.value = false;
+				}
+				offset.value += res.length;
+				moreFetching.value = false;
+			},
+			(err) => {
+				moreFetching.value = false;
+			}
+		);
+};
+
+const prepend = (item: Item): void => {
+	if (props.pagination.reversed) {
+		if (rootEl.value) {
+			const container = getScrollContainer(rootEl.value);
+			if (container == null) {
+				// TODO?
 			} else {
-				queue.value.push(item);
-				onScrollTop(rootEl.value, () => {
-					for (const queueItem of queue.value) {
-						prepend(queueItem);
+				const pos = getScrollPosition(rootEl.value);
+				const viewHeight = container.clientHeight;
+				const height = container.scrollHeight;
+				const isBottom = pos + viewHeight > height - 32;
+				if (isBottom) {
+					// オーバーフローしたら古いアイテムは捨てる
+					if (items.value.length >= props.displayLimit) {
+						// このやり方だとVue 3.2以降アニメーションが動かなくなる
+						//items.value = items.value.slice(-props.displayLimit);
+						while (items.value.length >= props.displayLimit) {
+							items.value.shift();
+						}
+						more.value = true;
 					}
-					queue.value = [];
-				});
+				}
 			}
 		}
-	};
-
-	const append = (item: Item): void => {
 		items.value.push(item);
-	};
-
-	const removeItem = (finder: (item: Item) => boolean): boolean => {
-		const i = items.value.findIndex(finder);
-		if (i === -1) {
-			return false;
+		// TODO
+	} else {
+		// 初回表示時はunshiftだけでOK
+		if (!rootEl.value) {
+			items.value.unshift(item);
+			return;
 		}
 
-		items.value.splice(i, 1);
-		return true;
-	};
+		const isTop =
+			isBackTop.value ||
+			(document.body.contains(rootEl.value) &&
+				isTopVisible(rootEl.value));
 
-	const updateItem = (id: Item['id'], replacer: (old: Item) => Item): boolean => {
-		const i = items.value.findIndex(item => item.id === id);
-		if (i === -1) {
-			return false;
+		if (isTop) {
+			// Prepend the item
+			items.value.unshift(item);
+
+			// オーバーフローしたら古いアイテムは捨てる
+			if (items.value.length >= props.displayLimit) {
+				// このやり方だとVue 3.2以降アニメーションが動かなくなる
+				//this.items = items.value.slice(0, props.displayLimit);
+				while (items.value.length >= props.displayLimit) {
+					items.value.pop();
+				}
+				more.value = true;
+			}
+		} else {
+			queue.value.push(item);
+			onScrollTop(rootEl.value, () => {
+				for (const queueItem of queue.value) {
+					prepend(queueItem);
+				}
+				queue.value = [];
+			});
 		}
+	}
+};
 
-		items.value[i] = replacer(items.value[i]);
-		return true;
-	};
+const append = (item: Item): void => {
+	items.value.push(item);
+};
 
-	if (props.pagination.params && isRef(props.pagination.params)) {
-		watch(props.pagination.params, init, { deep: true });
+const removeItem = (finder: (item: Item) => boolean): boolean => {
+	const i = items.value.findIndex(finder);
+	if (i === -1) {
+		return false;
 	}
 
-	watch(queue, (a, b) => {
+	items.value.splice(i, 1);
+	return true;
+};
+
+const updateItem = (id: Item["id"], replacer: (old: Item) => Item): boolean => {
+	const i = items.value.findIndex((item) => item.id === id);
+	if (i === -1) {
+		return false;
+	}
+
+	items.value[i] = replacer(items.value[i]);
+	return true;
+};
+
+if (props.pagination.params && isRef(props.pagination.params)) {
+	watch(props.pagination.params, init, { deep: true });
+}
+
+watch(
+	queue,
+	(a, b) => {
 		if (a.length === 0 && b.length === 0) return;
-		emit('queue', queue.value.length);
-	}, { deep: true });
+		emit("queue", queue.value.length);
+	},
+	{ deep: true }
+);
 
-	init();
+init();
 
-	onActivated(() => {
-		isBackTop.value = false;
-	});
+onActivated(() => {
+	isBackTop.value = false;
+});
 
-	onDeactivated(() => {
-		isBackTop.value = window.scrollY === 0;
-	});
+onDeactivated(() => {
+	isBackTop.value = window.scrollY === 0;
+});
 
-	defineExpose({
-		items,
-		queue,
-		backed,
-		reload,
-		refresh,
-		prepend,
-		append,
-		removeItem,
-		updateItem,
-	});
-	</script>
+defineExpose({
+	items,
+	queue,
+	backed,
+	reload,
+	refresh,
+	prepend,
+	append,
+	removeItem,
+	updateItem,
+});
+</script>
 
-	<style lang="scss" scoped>
-	.fade-enter-active,
-	.fade-leave-active {
-		transition: opacity 0.125s ease;
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.cxiknjgy {
+	> .button {
+		margin-left: auto;
+		margin-right: auto;
 	}
-	.fade-enter-from,
-	.fade-leave-to {
-		opacity: 0;
-	}
-
-	.cxiknjgy {
-		> .button {
-			margin-left: auto;
-			margin-right: auto;
-		}
-	}
-	</style>
+}
+</style>
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index 56d9400b5..db4c3350f 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -1,34 +1,62 @@
 <template>
-<div class="tivcixzd" :class="{ done: closed || isVoted }">
-	<ul>
-		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click.stop="vote(i)">
-			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
-			<span>
-				<template v-if="choice.isVoted"><i class="ph-check ph-bold ph-lg"></i></template>
-				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
-				<span v-if="showResult" class="votes">({{ i18n.t('_poll.votesCount', { n: choice.votes }) }})</span>
-			</span>
-		</li>
-	</ul>
-	<p v-if="!readOnly">
-		<span>{{ i18n.t('_poll.totalVotes', { n: total }) }}</span>
-		<span> · </span>
-		<a v-if="!closed && !isVoted" @click.stop="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
-		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
-		<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
-		<span v-if="remaining > 0"> · {{ timer }}</span>
-	</p>
-</div>
+	<div class="tivcixzd" :class="{ done: closed || isVoted }">
+		<ul>
+			<li
+				v-for="(choice, i) in note.poll.choices"
+				:key="i"
+				:class="{ voted: choice.voted }"
+				@click.stop="vote(i)"
+			>
+				<div
+					class="backdrop"
+					:style="{
+						width: `${
+							showResult ? (choice.votes / total) * 100 : 0
+						}%`,
+					}"
+				></div>
+				<span>
+					<template v-if="choice.isVoted"
+						><i class="ph-check ph-bold ph-lg"></i
+					></template>
+					<Mfm
+						:text="choice.text"
+						:plain="true"
+						:custom-emojis="note.emojis"
+					/>
+					<span v-if="showResult" class="votes"
+						>({{
+							i18n.t("_poll.votesCount", { n: choice.votes })
+						}})</span
+					>
+				</span>
+			</li>
+		</ul>
+		<p v-if="!readOnly">
+			<span>{{ i18n.t("_poll.totalVotes", { n: total }) }}</span>
+			<span> · </span>
+			<a
+				v-if="!closed && !isVoted"
+				@click.stop="showResult = !showResult"
+				>{{
+					showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult
+				}}</a
+			>
+			<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
+			<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
+			<span v-if="remaining > 0"> · {{ timer }}</span>
+		</p>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onUnmounted, ref, toRef } from 'vue';
-import * as misskey from 'calckey-js';
-import { sum } from '@/scripts/array';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
+import { computed, onUnmounted, ref, toRef } from "vue";
+import * as misskey from "calckey-js";
+import { sum } from "@/scripts/array";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { useInterval } from "@/scripts/use-interval";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -37,25 +65,42 @@ const props = defineProps<{
 
 const remaining = ref(-1);
 
-const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
+const total = computed(() => sum(props.note.poll.choices.map((x) => x.votes)));
 const closed = computed(() => remaining.value === 0);
-const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
-const timer = computed(() => i18n.t(
-	remaining.value >= 86400 ? '_poll.remainingDays' :
-	remaining.value >= 3600 ? '_poll.remainingHours' :
-	remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
-		s: Math.floor(remaining.value % 60),
-		m: Math.floor(remaining.value / 60) % 60,
-		h: Math.floor(remaining.value / 3600) % 24,
-		d: Math.floor(remaining.value / 86400),
-	}));
+const isVoted = computed(
+	() =>
+		!props.note.poll.multiple &&
+		props.note.poll.choices.some((c) => c.isVoted)
+);
+const timer = computed(() =>
+	i18n.t(
+		remaining.value >= 86400
+			? "_poll.remainingDays"
+			: remaining.value >= 3600
+			? "_poll.remainingHours"
+			: remaining.value >= 60
+			? "_poll.remainingMinutes"
+			: "_poll.remainingSeconds",
+		{
+			s: Math.floor(remaining.value % 60),
+			m: Math.floor(remaining.value / 60) % 60,
+			h: Math.floor(remaining.value / 3600) % 24,
+			d: Math.floor(remaining.value / 86400),
+		}
+	)
+);
 
 const showResult = ref(props.readOnly || isVoted.value);
 
 // 期限付きアンケート
 if (props.note.poll.expiresAt) {
 	const tick = () => {
-		remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
+		remaining.value = Math.floor(
+			Math.max(
+				new Date(props.note.poll.expiresAt).getTime() - Date.now(),
+				0
+			) / 1000
+		);
 		if (remaining.value === 0) {
 			showResult.value = true;
 		}
@@ -73,12 +118,14 @@ const vote = async (id) => {
 	if (props.readOnly || closed.value || isVoted.value) return;
 
 	const { canceled } = await os.confirm({
-		type: 'question',
-		text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
+		type: "question",
+		text: i18n.t("voteConfirm", {
+			choice: props.note.poll.choices[id].text,
+		}),
 	});
 	if (canceled) return;
 
-	await os.api('notes/polls/vote', {
+	await os.api("notes/polls/vote", {
 		noteId: props.note.id,
 		choice: id,
 	});
@@ -111,7 +158,11 @@ const vote = async (id) => {
 				left: 0;
 				height: 100%;
 				background: var(--accent);
-				background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
+				background: linear-gradient(
+					90deg,
+					var(--buttonGradateA),
+					var(--buttonGradateB)
+				);
 				transition: width 1s ease;
 			}
 
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index b5f8ea594..95cc11302 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -1,61 +1,84 @@
 <template>
-<div class="zmdxowus">
-	<p v-if="choices.length < 2" class="caution">
-		<i class="ph-warning ph-bold ph-lg"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
-	</p>
-	<ul>
-		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
-			</MkInput>
-			<button class="_button" @click="remove(i)">
-				<i class="ph-x ph-bold ph-lg"></i>
-			</button>
-		</li>
-	</ul>
-	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton>
-	<MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton>
-	<MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch>
-	<section>
-		<div>
-			<MkSelect v-model="expiration" small>
-				<template #label>{{ i18n.ts._poll.expiration }}</template>
-				<option value="infinite">{{ i18n.ts._poll.infinite }}</option>
-				<option value="at">{{ i18n.ts._poll.at }}</option>
-				<option value="after">{{ i18n.ts._poll.after }}</option>
-			</MkSelect>
-			<section v-if="expiration === 'at'">
-				<MkInput v-model="atDate" small type="date" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
+	<div class="zmdxowus">
+		<p v-if="choices.length < 2" class="caution">
+			<i class="ph-warning ph-bold ph-lg"></i
+			>{{ i18n.ts._poll.noOnlyOneChoice }}
+		</p>
+		<ul>
+			<li v-for="(choice, i) in choices" :key="i">
+				<MkInput
+					class="input"
+					small
+					:model-value="choice"
+					:placeholder="i18n.t('_poll.choiceN', { n: i + 1 })"
+					@update:modelValue="onInput(i, $event)"
+				>
 				</MkInput>
-				<MkInput v-model="atTime" small type="time" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
-				</MkInput>
-			</section>
-			<section v-else-if="expiration === 'after'">
-				<MkInput v-model="after" small type="number" class="input">
-					<template #label>{{ i18n.ts._poll.duration }}</template>
-				</MkInput>
-				<MkSelect v-model="unit" small>
-					<option value="second">{{ i18n.ts._time.second }}</option>
-					<option value="minute">{{ i18n.ts._time.minute }}</option>
-					<option value="hour">{{ i18n.ts._time.hour }}</option>
-					<option value="day">{{ i18n.ts._time.day }}</option>
+				<button class="_button" @click="remove(i)">
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+			</li>
+		</ul>
+		<MkButton v-if="choices.length < 10" class="add" @click="add">{{
+			i18n.ts.add
+		}}</MkButton>
+		<MkButton v-else class="add" disabled>{{
+			i18n.ts._poll.noMore
+		}}</MkButton>
+		<MkSwitch v-model="multiple">{{
+			i18n.ts._poll.canMultipleVote
+		}}</MkSwitch>
+		<section>
+			<div>
+				<MkSelect v-model="expiration" small>
+					<template #label>{{ i18n.ts._poll.expiration }}</template>
+					<option value="infinite">
+						{{ i18n.ts._poll.infinite }}
+					</option>
+					<option value="at">{{ i18n.ts._poll.at }}</option>
+					<option value="after">{{ i18n.ts._poll.after }}</option>
 				</MkSelect>
-			</section>
-		</div>
-	</section>
-</div>
+				<section v-if="expiration === 'at'">
+					<MkInput v-model="atDate" small type="date" class="input">
+						<template #label>{{
+							i18n.ts._poll.deadlineDate
+						}}</template>
+					</MkInput>
+					<MkInput v-model="atTime" small type="time" class="input">
+						<template #label>{{
+							i18n.ts._poll.deadlineTime
+						}}</template>
+					</MkInput>
+				</section>
+				<section v-else-if="expiration === 'after'">
+					<MkInput v-model="after" small type="number" class="input">
+						<template #label>{{ i18n.ts._poll.duration }}</template>
+					</MkInput>
+					<MkSelect v-model="unit" small>
+						<option value="second">
+							{{ i18n.ts._time.second }}
+						</option>
+						<option value="minute">
+							{{ i18n.ts._time.minute }}
+						</option>
+						<option value="hour">{{ i18n.ts._time.hour }}</option>
+						<option value="day">{{ i18n.ts._time.day }}</option>
+					</MkSelect>
+				</section>
+			</div>
+		</section>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import MkInput from './form/input.vue';
-import MkSelect from './form/select.vue';
-import MkSwitch from './form/switch.vue';
-import MkButton from './MkButton.vue';
-import { formatDateTimeString } from '@/scripts/format-time-string';
-import { addTime } from '@/scripts/time';
-import { i18n } from '@/i18n';
+import { ref, watch } from "vue";
+import MkInput from "./form/input.vue";
+import MkSelect from "./form/select.vue";
+import MkSwitch from "./form/switch.vue";
+import MkButton from "./MkButton.vue";
+import { formatDateTimeString } from "@/scripts/format-time-string";
+import { addTime } from "@/scripts/time";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: {
@@ -66,30 +89,35 @@ const props = defineProps<{
 	};
 }>();
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: {
-		expiresAt: string;
-		expiredAfter: number;
-		choices: string[];
-		multiple: boolean;
-	}): void;
+	(
+		ev: "update:modelValue",
+		v: {
+			expiresAt: string;
+			expiredAfter: number;
+			choices: string[];
+			multiple: boolean;
+		}
+	): void;
 }>();
 
 const choices = ref(props.modelValue.choices);
 const multiple = ref(props.modelValue.multiple);
-const expiration = ref('infinite');
-const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
-const atTime = ref('00:00');
+const expiration = ref("infinite");
+const atDate = ref(
+	formatDateTimeString(addTime(new Date(), 1, "day"), "yyyy-MM-dd")
+);
+const atTime = ref("00:00");
 const after = ref(0);
-const unit = ref('second');
+const unit = ref("second");
 
 if (props.modelValue.expiresAt) {
-	expiration.value = 'at';
+	expiration.value = "at";
 	atDate.value = atTime.value = props.modelValue.expiresAt;
-} else if (typeof props.modelValue.expiredAfter === 'number') {
-	expiration.value = 'after';
+} else if (typeof props.modelValue.expiredAfter === "number") {
+	expiration.value = "after";
 	after.value = props.modelValue.expiredAfter / 1000;
 } else {
-	expiration.value = 'infinite';
+	expiration.value = "infinite";
 }
 
 function onInput(i, value) {
@@ -97,7 +125,7 @@ function onInput(i, value) {
 }
 
 function add() {
-	choices.value.push('');
+	choices.value.push("");
 	// TODO
 	// nextTick(() => {
 	//   (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
@@ -116,30 +144,40 @@ function get() {
 	const calcAfter = () => {
 		let base = parseInt(after.value);
 		switch (unit.value) {
-			case 'day': base *= 24;
-				// fallthrough
-			case 'hour': base *= 60;
-				// fallthrough
-			case 'minute': base *= 60;
-				// fallthrough
-			case 'second': return base *= 1000;
-			default: return null;
+			case "day":
+				base *= 24;
+			// fallthrough
+			case "hour":
+				base *= 60;
+			// fallthrough
+			case "minute":
+				base *= 60;
+			// fallthrough
+			case "second":
+				return (base *= 1000);
+			default:
+				return null;
 		}
 	};
 
 	return {
 		choices: choices.value,
 		multiple: multiple.value,
-		...(
-			expiration.value === 'at' ? { expiresAt: calcAt() } :
-			expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
-		),
+		...(expiration.value === "at"
+			? { expiresAt: calcAt() }
+			: expiration.value === "after"
+			? { expiredAfter: calcAfter() }
+			: {}),
 	};
 }
 
-watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('update:modelValue', get()), {
-	deep: true,
-});
+watch(
+	[choices, multiple, expiration, atDate, atTime, after, unit],
+	() => emit("update:modelValue", get()),
+	{
+		deep: true,
+	}
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
index f04c7f561..4d52616e1 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -1,25 +1,42 @@
 <template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
-</MkModal>
+	<MkModal
+		ref="modal"
+		v-slot="{ type, maxHeight }"
+		:z-priority="'high'"
+		:src="src"
+		:transparent-bg="true"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
+		<MkMenu
+			:items="items"
+			:align="align"
+			:width="width"
+			:max-height="maxHeight"
+			:as-drawer="type === 'drawer'"
+			class="sfhdhdhq"
+			:class="{ drawer: type === 'drawer' }"
+			@close="modal.close()"
+		/>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkModal from './MkModal.vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from '@/types/menu';
+import {} from "vue";
+import MkModal from "./MkModal.vue";
+import MkMenu from "./MkMenu.vue";
+import { MenuItem } from "@/types/menu";
 
 defineProps<{
 	items: MenuItem[];
-	align?: 'center' | string;
+	align?: "center" | string;
 	width?: number;
 	viaKeyboard?: boolean;
 	src?: any;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 let modal = $ref<InstanceType<typeof MkModal>>();
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index cf22fc0a6..ff63b77d8 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -1,125 +1,290 @@
 <template>
-<div
-	v-size="{ max: [310, 500] }" class="gafaadew"
-	:class="{ modal, _popup: modal }"
-	@dragover.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ph-x ph-bold ph-lg"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
-		</button>
-		<div class="right">
-			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" class="local-only"><i class="ph-hand-fist ph-bold ph-lg"></i></span>
-			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="ph-planet ph-bold ph-lg"></i></span>
-				<span v-if="visibility === 'home'"><i class="ph-house ph-bold ph-lg"></i></span>
-				<span v-if="visibility === 'followers'"><i class="ph-lock-simple-open ph-bold ph-lg"></i></span>
-				<span v-if="visibility === 'specified'"><i class="ph-envelope-simple-open ph-bold ph-lg"></i></span>
+	<div
+		v-size="{ max: [310, 500] }"
+		class="gafaadew"
+		:class="{ modal, _popup: modal }"
+		@dragover.stop="onDragover"
+		@dragenter="onDragenter"
+		@dragleave="onDragleave"
+		@drop.stop="onDrop"
+	>
+		<header>
+			<button v-if="!fixed" class="cancel _button" @click="cancel">
+				<i class="ph-x ph-bold ph-lg"></i>
 			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ph-file-code ph-bold ph-lg"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ph-arrow-u-up-left ph-bold ph-lg' : renote ? 'ph-quotes ph-bold ph-lg' : 'ph-paper-plane-tilt ph-bold ph-lg'"></i></button>
-		</div>
-	</header>
-	<div class="form" :class="{ fixed }">
-		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div v-if="quoteId" class="with-quote"><i class="ph-quotes ph-bold ph-lg"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ph-x ph-bold ph-lg"></i></button></div>
-		<div v-if="visibility === 'specified'" class="to-specified">
-			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-			<div class="visibleUsers">
-				<span v-for="u in visibleUsers" :key="u.id">
-					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><i class="ph-x ph-bold ph-lg"></i></button>
-				</span>
-				<button class="_button" @click="addVisibleUser"><i class="ph-plus ph-bold ph-md ph-fw ph-lg"></i></button>
+			<button
+				v-click-anime
+				v-tooltip="i18n.ts.switchAccount"
+				class="account _button"
+				@click="openAccountMenu"
+			>
+				<MkAvatar :user="postAccount ?? $i" class="avatar" />
+			</button>
+			<div class="right">
+				<span
+					class="text-count"
+					:class="{ over: textLength > maxTextLength }"
+					>{{ maxTextLength - textLength }}</span
+				>
+				<span v-if="localOnly" class="local-only"
+					><i class="ph-hand-fist ph-bold ph-lg"></i
+				></span>
+				<button
+					ref="visibilityButton"
+					v-tooltip="i18n.ts.visibility"
+					class="_button visibility"
+					:disabled="channel != null"
+					@click="setVisibility"
+				>
+					<span v-if="visibility === 'public'"
+						><i class="ph-planet ph-bold ph-lg"></i
+					></span>
+					<span v-if="visibility === 'home'"
+						><i class="ph-house ph-bold ph-lg"></i
+					></span>
+					<span v-if="visibility === 'followers'"
+						><i class="ph-lock-simple-open ph-bold ph-lg"></i
+					></span>
+					<span v-if="visibility === 'specified'"
+						><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+					></span>
+				</button>
+				<button
+					v-tooltip="i18n.ts.previewNoteText"
+					class="_button preview"
+					:class="{ active: showPreview }"
+					@click="showPreview = !showPreview"
+				>
+					<i class="ph-file-code ph-bold ph-lg"></i>
+				</button>
+				<button
+					class="submit _buttonGradate"
+					:disabled="!canPost"
+					data-cy-open-post-form-submit
+					@click="post"
+				>
+					{{ submitText
+					}}<i
+						:class="
+							reply
+								? 'ph-arrow-u-up-left ph-bold ph-lg'
+								: renote
+								? 'ph-quotes ph-bold ph-lg'
+								: 'ph-paper-plane-tilt ph-bold ph-lg'
+						"
+					></i>
+				</button>
 			</div>
+		</header>
+		<div class="form" :class="{ fixed }">
+			<XNoteSimple v-if="reply" class="preview" :note="reply" />
+			<XNoteSimple v-if="renote" class="preview" :note="renote" />
+			<div v-if="quoteId" class="with-quote">
+				<i class="ph-quotes ph-bold ph-lg"></i>
+				{{ i18n.ts.quoteAttached
+				}}<button @click="quoteId = null">
+					<i class="ph-x ph-bold ph-lg"></i>
+				</button>
+			</div>
+			<div v-if="visibility === 'specified'" class="to-specified">
+				<span style="margin-right: 8px">{{ i18n.ts.recipient }}</span>
+				<div class="visibleUsers">
+					<span v-for="u in visibleUsers" :key="u.id">
+						<MkAcct :user="u" />
+						<button class="_button" @click="removeVisibleUser(u)">
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+					</span>
+					<button class="_button" @click="addVisibleUser">
+						<i class="ph-plus ph-bold ph-md ph-fw ph-lg"></i>
+					</button>
+				</div>
+			</div>
+			<MkInfo
+				v-if="hasNotSpecifiedMentions"
+				warn
+				class="hasNotSpecifiedMentions"
+				>{{ i18n.ts.notSpecifiedMentionWarning }} -
+				<button class="_textButton" @click="addMissingMention()">
+					{{ i18n.ts.add }}
+				</button></MkInfo
+			>
+			<input
+				v-show="useCw"
+				ref="cwInputEl"
+				v-model="cw"
+				class="cw"
+				:placeholder="i18n.ts.annotation"
+				@keydown="onKeydown"
+			/>
+			<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
+				class="attaches"
+				:files="files"
+				@updated="updateFiles"
+				@detach="detachFile"
+				@changeSensitive="updateFileSensitive"
+				@changeName="updateFileName"
+			/>
+			<XPollEditor 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="ph-upload ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.poll"
+					class="_button"
+					:class="{ active: poll }"
+					@click="togglePoll"
+				>
+					<i class="ph-microphone-stage ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.useCw"
+					class="_button"
+					:class="{ active: useCw }"
+					@click="useCw = !useCw"
+				>
+					<i class="ph-eye-slash ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.mention"
+					class="_button"
+					@click="insertMention"
+				>
+					<i class="ph-at ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.hashtags"
+					class="_button"
+					:class="{ active: withHashtags }"
+					@click="withHashtags = !withHashtags"
+				>
+					<i class="ph-hash ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts.emoji"
+					class="_button"
+					@click="insertEmoji"
+				>
+					<i class="ph-smiley ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-if="postFormActions.length > 0"
+					v-tooltip="i18n.ts.plugin"
+					class="_button"
+					@click="showActions"
+				>
+					<i class="ph-plug ph-bold ph-lg"></i>
+				</button>
+				<button
+					v-tooltip="i18n.ts._mfm.cheatSheet"
+					class="_button right"
+					@click="openCheatSheet"
+				>
+					<i class="ph-question ph-bold ph-lg"></i>
+				</button>
+			</footer>
+			<datalist id="hashtags">
+				<option
+					v-for="hashtag in recentHashtags"
+					:key="hashtag"
+					:value="hashtag"
+				/>
+			</datalist>
 		</div>
-		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<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 class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
-		<XPollEditor 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="ph-upload ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ph-microphone-stage ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ph-eye-slash ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ph-at ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ph-hash ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ph-smiley ph-bold ph-lg"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ph-plug ph-bold ph-lg"></i></button>
-			<button v-tooltip="i18n.ts._mfm.cheatSheet" class="_button right" @click="openCheatSheet"><i class="ph-question ph-bold ph-lg"></i></button>
-		</footer>
-		<datalist id="hashtags">
-			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-		</datalist>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
-import * as mfm from 'mfm-js';
-import * as misskey from 'calckey-js';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import { toASCII } from 'punycode/';
-import * as Acct from 'calckey-js/built/acct';
-import { throttle } from 'throttle-debounce';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XNotePreview from '@/components/MkNotePreview.vue';
-import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
-import XPollEditor from '@/components/MkPollEditor.vue';
-import { host, url } from '@/config';
-import { erase, unique } from '@/scripts/array';
-import { extractMentions } from '@/scripts/extract-mentions';
-import { formatTimeString } from '@/scripts/format-time-string';
-import { Autocomplete } from '@/scripts/autocomplete';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { selectFiles } from '@/scripts/select-file';
-import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
-import MkInfo from '@/components/MkInfo.vue';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
-import { uploadFile } from '@/scripts/upload';
-import { deepClone } from '@/scripts/clone';
-import XCheatSheet from '@/components/MkCheatSheetDialog.vue';
-import { preprocess } from '@/scripts/preprocess';
+import { inject, watch, nextTick, onMounted, defineAsyncComponent } from "vue";
+import * as mfm from "mfm-js";
+import * as misskey from "calckey-js";
+import insertTextAtCursor from "insert-text-at-cursor";
+import { length } from "stringz";
+import { toASCII } from "punycode/";
+import * as Acct from "calckey-js/built/acct";
+import { throttle } from "throttle-debounce";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XNotePreview from "@/components/MkNotePreview.vue";
+import XPostFormAttaches from "@/components/MkPostFormAttaches.vue";
+import XPollEditor from "@/components/MkPollEditor.vue";
+import { host, url } from "@/config";
+import { erase, unique } from "@/scripts/array";
+import { extractMentions } from "@/scripts/extract-mentions";
+import { formatTimeString } from "@/scripts/format-time-string";
+import { Autocomplete } from "@/scripts/autocomplete";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { selectFiles } from "@/scripts/select-file";
+import { defaultStore, notePostInterruptors, postFormActions } from "@/store";
+import MkInfo from "@/components/MkInfo.vue";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import {
+	$i,
+	getAccounts,
+	openAccountMenu as openAccountMenu_,
+} from "@/account";
+import { uploadFile } from "@/scripts/upload";
+import { deepClone } from "@/scripts/clone";
+import XCheatSheet from "@/components/MkCheatSheetDialog.vue";
+import { preprocess } from "@/scripts/preprocess";
 
-const modal = inject('modal');
+const modal = inject("modal");
 
-const props = withDefaults(defineProps<{
-	reply?: misskey.entities.Note;
-	renote?: misskey.entities.Note;
-	channel?: any; // TODO
-	mention?: misskey.entities.User;
-	specified?: misskey.entities.User;
-	initialText?: string;
-	initialVisibility?: typeof misskey.noteVisibilities;
-	initialFiles?: misskey.entities.DriveFile[];
-	initialLocalOnly?: boolean;
-	initialVisibleUsers?: misskey.entities.User[];
-	initialNote?: misskey.entities.Note;
-	instant?: boolean;
-	fixed?: boolean;
-	autofocus?: boolean;
-}>(), {
-	initialVisibleUsers: () => [],
-	autofocus: true,
-});
+const props = withDefaults(
+	defineProps<{
+		reply?: misskey.entities.Note;
+		renote?: misskey.entities.Note;
+		channel?: any; // TODO
+		mention?: misskey.entities.User;
+		specified?: misskey.entities.User;
+		initialText?: string;
+		initialVisibility?: typeof misskey.noteVisibilities;
+		initialFiles?: misskey.entities.DriveFile[];
+		initialLocalOnly?: boolean;
+		initialVisibleUsers?: misskey.entities.User[];
+		initialNote?: misskey.entities.Note;
+		instant?: boolean;
+		fixed?: boolean;
+		autofocus?: boolean;
+	}>(),
+	{
+		initialVisibleUsers: () => [],
+		autofocus: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'posted'): void;
-	(ev: 'cancel'): void;
-	(ev: 'esc'): void;
+	(ev: "posted"): void;
+	(ev: "cancel"): void;
+	(ev: "esc"): void;
 }>();
 
 const textareaEl = $ref<HTMLTextAreaElement | null>(null);
@@ -128,7 +293,7 @@ const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
 const visibilityButton = $ref<HTMLElement | null>(null);
 
 let posting = $ref(false);
-let text = $ref(props.initialText ?? '');
+let text = $ref(props.initialText ?? "");
 let files = $ref(props.initialFiles ?? []);
 let poll = $ref<{
 	choices: string[];
@@ -139,8 +304,18 @@ let poll = $ref<{
 let useCw = $ref(false);
 let showPreview = $ref(false);
 let cw = $ref<string | null>(null);
-let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
-let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof misskey.noteVisibilities[number]);
+let localOnly = $ref<boolean>(
+	props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility
+		? defaultStore.state.localOnly
+		: defaultStore.state.defaultNoteLocalOnly
+);
+let visibility = $ref(
+	props.initialVisibility ??
+		((defaultStore.state.rememberNoteVisibility
+			? defaultStore.state.visibility
+			: defaultStore.state
+					.defaultNoteVisibility) as (typeof misskey.noteVisibilities)[number])
+);
 let visibleUsers = $ref([]);
 if (props.initialVisibleUsers) {
 	props.initialVisibleUsers.forEach(pushVisibleUser);
@@ -149,24 +324,24 @@ let autocomplete = $ref(null);
 let draghover = $ref(false);
 let quoteId = $ref(null);
 let hasNotSpecifiedMentions = $ref(false);
-let recentHashtags = $ref(JSON.parse(localStorage.getItem('hashtags') || '[]'));
-let imeText = $ref('');
+let recentHashtags = $ref(JSON.parse(localStorage.getItem("hashtags") || "[]"));
+let imeText = $ref("");
 
 const typing = throttle(3000, () => {
 	if (props.channel) {
-		stream.send('typingOnChannel', { channel: props.channel.id });
+		stream.send("typingOnChannel", { channel: props.channel.id });
 	}
 });
 
 const draftKey = $computed((): string => {
-	let key = props.channel ? `channel:${props.channel.id}` : '';
+	let key = props.channel ? `channel:${props.channel.id}` : "";
 
 	if (props.renote) {
 		key += `renote:${props.renote.id}`;
 	} else if (props.reply) {
 		key += `reply:${props.reply.id}`;
 	} else {
-		key += 'note';
+		key += "note";
 	}
 
 	return key;
@@ -196,8 +371,8 @@ const submitText = $computed((): string => {
 	return props.renote
 		? i18n.ts.quote
 		: props.reply
-			? i18n.ts.reply
-			: i18n.ts.note;
+		? i18n.ts.reply
+		: i18n.ts.note;
 });
 
 const textLength = $computed((): number => {
@@ -209,32 +384,50 @@ const maxTextLength = $computed((): number => {
 });
 
 const canPost = $computed((): boolean => {
-	return !posting &&
+	return (
+		!posting &&
 		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
-		(textLength <= maxTextLength) &&
-		(!poll || poll.choices.length >= 2);
+		textLength <= maxTextLength &&
+		(!poll || poll.choices.length >= 2)
+	);
 });
 
-const withHashtags = $computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
-const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
+const withHashtags = $computed(
+	defaultStore.makeGetterSetter("postFormWithHashtags")
+);
+const hashtags = $computed(defaultStore.makeGetterSetter("postFormHashtags"));
 
 watch($$(text), () => {
 	checkMissingMention();
 });
 
-watch($$(visibleUsers), () => {
-	checkMissingMention();
-}, {
-	deep: true,
-});
+watch(
+	$$(visibleUsers),
+	() => {
+		checkMissingMention();
+	},
+	{
+		deep: true,
+	}
+);
 
 if (props.mention) {
-	text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
-	text += ' ';
+	text = props.mention.host
+		? `@${props.mention.username}@${toASCII(props.mention.host)}`
+		: `@${props.mention.username}`;
+	text += " ";
 }
 
-if (props.reply && (props.reply.user.username !== $i.username || (props.reply.user.host != null && props.reply.user.host !== host))) {
-	text = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
+if (
+	props.reply &&
+	(props.reply.user.username !== $i.username ||
+		(props.reply.user.host != null && props.reply.user.host !== host))
+) {
+	text = `@${props.reply.user.username}${
+		props.reply.user.host != null
+			? "@" + toASCII(props.reply.user.host)
+			: ""
+	} `;
 }
 
 if (props.reply && props.reply.text != null) {
@@ -242,14 +435,15 @@ if (props.reply && props.reply.text != null) {
 	const otherHost = props.reply.user.host;
 
 	for (const x of extractMentions(ast)) {
-		const mention = x.host ?
-			`@${x.username}@${toASCII(x.host)}` :
-			(otherHost == null || otherHost === host) ?
-				`@${x.username}` :
-				`@${x.username}@${toASCII(otherHost)}`;
+		const mention = x.host
+			? `@${x.username}@${toASCII(x.host)}`
+			: otherHost == null || otherHost === host
+			? `@${x.username}`
+			: `@${x.username}@${toASCII(otherHost)}`;
 
 		// 自分は除外
-		if ($i.username === x.username && (x.host == null || x.host === host)) continue;
+		if ($i.username === x.username && (x.host == null || x.host === host))
+			continue;
 
 		// 重複は除外
 		if (text.includes(`${mention} `)) continue;
@@ -259,30 +453,37 @@ if (props.reply && props.reply.text != null) {
 }
 
 if (props.channel) {
-	visibility = 'public';
+	visibility = "public";
 	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
 }
 
 // 公開以外へのリプライ時は元の公開範囲を引き継ぐ
-if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
+if (
+	props.reply &&
+	["home", "followers", "specified"].includes(props.reply.visibility)
+) {
 	visibility = props.reply.visibility;
-	if (props.reply.visibility === 'specified') {
-		os.api('users/show', {
-			userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
-		}).then(users => {
+	if (props.reply.visibility === "specified") {
+		os.api("users/show", {
+			userIds: props.reply.visibleUserIds.filter(
+				(uid) => uid !== $i.id && uid !== props.reply.userId
+			),
+		}).then((users) => {
 			users.forEach(pushVisibleUser);
 		});
 
 		if (props.reply.userId !== $i.id) {
-			os.api('users/show', { userId: props.reply.userId }).then(user => {
-				pushVisibleUser(user);
-			});
+			os.api("users/show", { userId: props.reply.userId }).then(
+				(user) => {
+					pushVisibleUser(user);
+				}
+			);
 		}
 	}
 }
 
 if (props.specified) {
-	visibility = 'specified';
+	visibility = "specified";
 	pushVisibleUser(props.specified);
 }
 
@@ -303,11 +504,15 @@ function watchForDraft() {
 }
 
 function checkMissingMention() {
-	if (visibility === 'specified') {
+	if (visibility === "specified") {
 		const ast = mfm.parse(text);
 
 		for (const x of extractMentions(ast)) {
-			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+			if (
+				!visibleUsers.some(
+					(u) => u.username === x.username && u.host === x.host
+				)
+			) {
 				hasNotSpecifiedMentions = true;
 				return;
 			}
@@ -320,10 +525,16 @@ function addMissingMention() {
 	const ast = mfm.parse(text);
 
 	for (const x of extractMentions(ast)) {
-		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host }).then(user => {
-				visibleUsers.push(user);
-			});
+		if (
+			!visibleUsers.some(
+				(u) => u.username === x.username && u.host === x.host
+			)
+		) {
+			os.api("users/show", { username: x.username, host: x.host }).then(
+				(user) => {
+					visibleUsers.push(user);
+				}
+			);
 		}
 	}
 }
@@ -333,7 +544,7 @@ function togglePoll() {
 		poll = null;
 	} else {
 		poll = {
-			choices: ['', ''],
+			choices: ["", ""],
 			multiple: false,
 			expiresAt: null,
 			expiredAfter: null,
@@ -348,20 +559,25 @@ function addTag(tag: string) {
 function focus() {
 	if (textareaEl) {
 		textareaEl.focus();
-		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
+		textareaEl.setSelectionRange(
+			textareaEl.value.length,
+			textareaEl.value.length
+		);
 	}
 }
 
 function chooseFileFrom(ev) {
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
-		for (const file of files_) {
-			files.push(file);
+	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(
+		(files_) => {
+			for (const file of files_) {
+				files.push(file);
+			}
 		}
-	});
+	);
 }
 
 function detachFile(id) {
-	files = files.filter(x => x.id !== id);
+	files = files.filter((x) => x.id !== id);
 }
 
 function updateFiles(_files) {
@@ -369,15 +585,15 @@ function updateFiles(_files) {
 }
 
 function updateFileSensitive(file, sensitive) {
-	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+	files[files.findIndex((x) => x.id === file.id)].isSensitive = sensitive;
 }
 
 function updateFileName(file, name) {
-	files[files.findIndex(x => x.id === file.id)].name = name;
+	files[files.findIndex((x) => x.id === file.id)].name = name;
 }
 
 function upload(file: File, name?: string) {
-	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
+	uploadFile(file, defaultStore.state.uploadFolder, name).then((res) => {
 		files.push(res);
 	});
 }
@@ -388,34 +604,45 @@ function setVisibility() {
 		return;
 	}
 
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
-		currentVisibility: visibility,
-		currentLocalOnly: localOnly,
-		src: visibilityButton,
-	}, {
-		changeVisibility: v => {
-			visibility = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('visibility', visibility);
-			}
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkVisibilityPicker.vue")
+		),
+		{
+			currentVisibility: visibility,
+			currentLocalOnly: localOnly,
+			src: visibilityButton,
 		},
-		changeLocalOnly: v => {
-			localOnly = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('localOnly', localOnly);
-			}
+		{
+			changeVisibility: (v) => {
+				visibility = v;
+				if (defaultStore.state.rememberNoteVisibility) {
+					defaultStore.set("visibility", visibility);
+				}
+			},
+			changeLocalOnly: (v) => {
+				localOnly = v;
+				if (defaultStore.state.rememberNoteVisibility) {
+					defaultStore.set("localOnly", localOnly);
+				}
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 function pushVisibleUser(user) {
-	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
+	if (
+		!visibleUsers.some(
+			(u) => u.username === user.username && u.host === user.host
+		)
+	) {
 		visibleUsers.push(user);
 	}
 }
 
 function addVisibleUser() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		pushVisibleUser(user);
 	});
 }
@@ -425,15 +652,20 @@ function removeVisibleUser(user) {
 }
 
 function clear() {
-	text = '';
+	text = "";
 	files = [];
 	poll = null;
 	quoteId = null;
 }
 
 function onKeydown(ev: KeyboardEvent) {
-	if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
-	if (ev.which === 27) emit('esc');
+	if (
+		(ev.which === 10 || ev.which === 13) &&
+		(ev.ctrlKey || ev.metaKey) &&
+		canPost
+	)
+		post();
+	if (ev.which === 27) emit("esc");
 	typing();
 }
 
@@ -443,27 +675,32 @@ function onCompositionUpdate(ev: CompositionEvent) {
 }
 
 function onCompositionEnd(ev: CompositionEvent) {
-	imeText = '';
+	imeText = "";
 }
 
 async function onPaste(ev: ClipboardEvent) {
-	for (const { item, i } of Array.from(ev.clipboardData.items).map((item, i) => ({ item, i }))) {
-		if (item.kind === 'file') {
+	for (const { item, i } of Array.from(ev.clipboardData.items).map(
+		(item, i) => ({ item, i })
+	)) {
+		if (item.kind === "file") {
 			const file = item.getAsFile();
-			const lio = file.name.lastIndexOf('.');
-			const ext = lio >= 0 ? file.name.slice(lio) : '';
-			const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+			const lio = file.name.lastIndexOf(".");
+			const ext = lio >= 0 ? file.name.slice(lio) : "";
+			const formatted = `${formatTimeString(
+				new Date(file.lastModified),
+				defaultStore.state.pastedFileName
+			).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
 			upload(file, formatted);
 		}
 	}
 
-	const paste = ev.clipboardData.getData('text');
+	const paste = ev.clipboardData.getData("text");
 
-	if (!props.renote && !quoteId && paste.startsWith(url + '/notes/')) {
+	if (!props.renote && !quoteId && paste.startsWith(url + "/notes/")) {
 		ev.preventDefault();
 
 		os.yesno({
-			type: 'info',
+			type: "info",
 			text: i18n.ts.quoteQuestion,
 		}).then(({ canceled }) => {
 			if (canceled) {
@@ -478,25 +715,25 @@ async function onPaste(ev: ClipboardEvent) {
 
 function onDragover(ev) {
 	if (!ev.dataTransfer.items[0]) return;
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
 		draghover = true;
 		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
+			case "all":
+			case "uninitialized":
+			case "copy":
+			case "copyLink":
+			case "copyMove":
+				ev.dataTransfer.dropEffect = "copy";
 				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
+			case "linkMove":
+			case "move":
+				ev.dataTransfer.dropEffect = "move";
 				break;
 			default:
-				ev.dataTransfer.dropEffect = 'none';
+				ev.dataTransfer.dropEffect = "none";
 				break;
 		}
 	}
@@ -522,7 +759,7 @@ function onDrop(ev): void {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
 		files.push(file);
 		ev.preventDefault();
@@ -531,7 +768,7 @@ function onDrop(ev): void {
 }
 
 function saveDraft() {
-	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+	const draftData = JSON.parse(localStorage.getItem("drafts") || "{}");
 
 	draftData[draftKey] = {
 		updatedAt: new Date(),
@@ -546,36 +783,49 @@ function saveDraft() {
 		},
 	};
 
-	localStorage.setItem('drafts', JSON.stringify(draftData));
+	localStorage.setItem("drafts", JSON.stringify(draftData));
 }
 
 function deleteDraft() {
-	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+	const draftData = JSON.parse(localStorage.getItem("drafts") || "{}");
 
 	delete draftData[draftKey];
 
-	localStorage.setItem('drafts', JSON.stringify(draftData));
+	localStorage.setItem("drafts", JSON.stringify(draftData));
 }
 
 async function post() {
 	const processedText = preprocess(text);
 
 	let postData = {
-		text: processedText === '' ? undefined : processedText,
-		fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
+		text: processedText === "" ? undefined : processedText,
+		fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
 		replyId: props.reply ? props.reply.id : undefined,
-		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
+		renoteId: props.renote
+			? props.renote.id
+			: quoteId
+			? quoteId
+			: undefined,
 		channelId: props.channel ? props.channel.id : undefined,
 		poll: poll,
-		cw: useCw ? cw || '' : undefined,
+		cw: useCw ? cw || "" : undefined,
 		localOnly: localOnly,
 		visibility: visibility,
-		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
+		visibleUserIds:
+			visibility === "specified"
+				? visibleUsers.map((u) => u.id)
+				: undefined,
 	};
 
-	if (withHashtags && hashtags && hashtags.trim() !== '') {
-		const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
-		postData.text = postData.text ? `${postData.text} ${hashtags_}` : hashtags_;
+	if (withHashtags && hashtags && hashtags.trim() !== "") {
+		const hashtags_ = hashtags
+			.trim()
+			.split(" ")
+			.map((x) => (x.startsWith("#") ? x : "#" + x))
+			.join(" ");
+		postData.text = postData.text
+			? `${postData.text} ${hashtags_}`
+			: hashtags_;
 	}
 
 	// plugin
@@ -589,39 +839,49 @@ async function post() {
 
 	if (postAccount) {
 		const storedAccounts = await getAccounts();
-		token = storedAccounts.find(x => x.id === postAccount.id)?.token;
+		token = storedAccounts.find((x) => x.id === postAccount.id)?.token;
 	}
 
 	posting = true;
-	os.api('notes/create', postData, token).then(() => {
-		clear();
-		nextTick(() => {
-			deleteDraft();
-			emit('posted');
-			if (postData.text && postData.text !== '') {
-				const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
-				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
-				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
-			}
+	os.api("notes/create", postData, token)
+		.then(() => {
+			clear();
+			nextTick(() => {
+				deleteDraft();
+				emit("posted");
+				if (postData.text && postData.text !== "") {
+					const hashtags_ = mfm
+						.parse(postData.text)
+						.filter((x) => x.type === "hashtag")
+						.map((x) => x.props.hashtag);
+					const history = JSON.parse(
+						localStorage.getItem("hashtags") || "[]"
+					) as string[];
+					localStorage.setItem(
+						"hashtags",
+						JSON.stringify(unique(hashtags_.concat(history)))
+					);
+				}
+				posting = false;
+				postAccount = null;
+			});
+		})
+		.catch((err) => {
 			posting = false;
-			postAccount = null;
+			os.alert({
+				type: "error",
+				text: err.message + "\n" + (err as any).id,
+			});
 		});
-	}).catch(err => {
-		posting = false;
-		os.alert({
-			type: 'error',
-			text: err.message + '\n' + (err as any).id,
-		});
-	});
 }
 
 function cancel() {
-	emit('cancel');
+	emit("cancel");
 }
 
 function insertMention() {
-	os.selectUser().then(user => {
-		insertTextAtCursor(textareaEl, '@' + Acct.toString(user) + ' ');
+	os.selectUser().then((user) => {
+		insertTextAtCursor(textareaEl, "@" + Acct.toString(user) + " ");
 	});
 }
 
@@ -630,37 +890,48 @@ async function insertEmoji(ev: MouseEvent) {
 }
 
 async function openCheatSheet(ev: MouseEvent) {
-  os.popup(XCheatSheet, {}, {}, 'closed');
+	os.popup(XCheatSheet, {}, {}, "closed");
 }
 
 function showActions(ev) {
-	os.popupMenu(postFormActions.map(action => ({
-		text: action.title,
-		action: () => {
-			action.handler({
-				text: text,
-			}, (key, value) => {
-				if (key === 'text') { text = value; }
-			});
-		},
-	})), ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		postFormActions.map((action) => ({
+			text: action.title,
+			action: () => {
+				action.handler(
+					{
+						text: text,
+					},
+					(key, value) => {
+						if (key === "text") {
+							text = value;
+						}
+					}
+				);
+			},
+		})),
+		ev.currentTarget ?? ev.target
+	);
 }
 
 let postAccount = $ref<misskey.entities.UserDetailed | null>(null);
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount != null ? postAccount.id : $i.id,
-		onChoose: (account) => {
-			if (account.id === $i.id) {
-				postAccount = null;
-			} else {
-				postAccount = account;
-			}
+	openAccountMenu_(
+		{
+			withExtraOperation: false,
+			includeCurrentAccount: true,
+			active: postAccount != null ? postAccount.id : $i.id,
+			onChoose: (account) => {
+				if (account.id === $i.id) {
+					postAccount = null;
+				} else {
+					postAccount = account;
+				}
+			},
 		},
-	}, ev);
+		ev
+	);
 }
 
 onMounted(() => {
@@ -680,14 +951,18 @@ onMounted(() => {
 	nextTick(() => {
 		// 書きかけの投稿を復元
 		if (!props.instant && !props.mention && !props.specified) {
-			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[draftKey];
+			const draft = JSON.parse(localStorage.getItem("drafts") || "{}")[
+				draftKey
+			];
 			if (draft) {
 				text = draft.data.text;
 				useCw = draft.data.useCw;
 				cw = draft.data.cw;
 				visibility = draft.data.visibility;
 				localOnly = draft.data.localOnly;
-				files = (draft.data.files || []).filter(draftFile => draftFile);
+				files = (draft.data.files || []).filter(
+					(draftFile) => draftFile
+				);
 				if (draft.data.poll) {
 					poll = draft.data.poll;
 				}
@@ -697,13 +972,13 @@ onMounted(() => {
 		// 削除して編集
 		if (props.initialNote) {
 			const init = props.initialNote;
-			text = init.text ? init.text : '';
+			text = init.text ? init.text : "";
 			files = init.files;
 			cw = init.cw;
 			useCw = init.cw != null;
 			if (init.poll) {
 				poll = {
-					choices: init.poll.choices.map(x => x.text),
+					choices: init.poll.choices.map((x) => x.text),
 					multiple: init.poll.multiple,
 					expiresAt: init.poll.expiresAt,
 					expiredAfter: init.poll.expiredAfter,
@@ -721,7 +996,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .right {
-	float:right
+	float: right;
 }
 .gafaadew {
 	position: relative;
@@ -997,7 +1272,7 @@ onMounted(() => {
 				> button {
 					font-size: 14px;
 					width: 44px;
-				height: 44px;
+					height: 44px;
 				}
 			}
 		}
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index ab8321057..ad2155155 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -1,28 +1,46 @@
 <template>
-<div v-show="files.length != 0" class="skeikyzd">
-	<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
-		<template #item="{element}">
-			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
-				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
-				<div v-if="element.isSensitive" class="sensitive">
-					<i class="ph-warning ph-bold ph-lg icon"></i>
+	<div v-show="files.length != 0" class="skeikyzd">
+		<XDraggable
+			v-model="_files"
+			class="files"
+			item-key="id"
+			animation="150"
+			delay="100"
+			delay-on-touch-only="true"
+		>
+			<template #item="{ element }">
+				<div
+					class="file"
+					@click="showFileMenu(element, $event)"
+					@contextmenu.prevent="showFileMenu(element, $event)"
+				>
+					<MkDriveFileThumbnail
+						:data-id="element.id"
+						class="thumbnail"
+						:file="element"
+						fit="cover"
+					/>
+					<div v-if="element.isSensitive" class="sensitive">
+						<i class="ph-warning ph-bold ph-lg icon"></i>
+					</div>
 				</div>
-			</div>
-		</template>
-	</XDraggable>
-	<p class="remain">{{ 16 - files.length }}/16</p>
-</div>
+			</template>
+		</XDraggable>
+		<p class="remain">{{ 16 - files.length }}/16</p>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
+		XDraggable: defineAsyncComponent(() =>
+			import("vuedraggable").then((x) => x.default)
+		),
 		MkDriveFileThumbnail,
 	},
 
@@ -37,7 +55,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
+	emits: ["updated", "detach", "changeSensitive", "changeName"],
 
 	data() {
 		return {
@@ -52,7 +70,7 @@ export default defineComponent({
 				return this.files;
 			},
 			set(value) {
-				this.$emit('updated', value);
+				this.$emit("updated", value);
 			},
 		},
 	},
@@ -62,15 +80,15 @@ export default defineComponent({
 			if (this.detachMediaFn) {
 				this.detachMediaFn(id);
 			} else {
-				this.$emit('detach', id);
+				this.$emit("detach", id);
 			}
 		},
 		toggleSensitive(file) {
-			os.api('drive/files/update', {
+			os.api("drive/files/update", {
 				fileId: file.id,
 				isSensitive: !file.isSensitive,
 			}).then(() => {
-				this.$emit('changeSensitive', file, !file.isSensitive);
+				this.$emit("changeSensitive", file, !file.isSensitive);
 			});
 		},
 		async rename(file) {
@@ -80,56 +98,86 @@ export default defineComponent({
 				allowEmpty: false,
 			});
 			if (canceled) return;
-			os.api('drive/files/update', {
+			os.api("drive/files/update", {
 				fileId: file.id,
 				name: result,
 			}).then(() => {
-				this.$emit('changeName', file, result);
+				this.$emit("changeName", file, result);
 				file.name = result;
 			});
 		},
 
 		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-				title: i18n.ts.describeFile,
-				input: {
-					placeholder: i18n.ts.inputNewDescription,
-					default: file.comment !== null ? file.comment : '',
+			os.popup(
+				defineAsyncComponent(
+					() => import("@/components/MkMediaCaption.vue")
+				),
+				{
+					title: i18n.ts.describeFile,
+					input: {
+						placeholder: i18n.ts.inputNewDescription,
+						default: file.comment !== null ? file.comment : "",
+					},
+					image: file,
 				},
-				image: file,
-			}, {
-				done: result => {
-					if (!result || result.canceled) return;
-					let comment = result.result.length === 0 ? null : result.result;
-					os.api('drive/files/update', {
-						fileId: file.id,
-						comment: comment,
-					}).then(() => {
-						file.comment = comment;
-					});
+				{
+					done: (result) => {
+						if (!result || result.canceled) return;
+						let comment =
+							result.result.length === 0 ? null : result.result;
+						os.api("drive/files/update", {
+							fileId: file.id,
+							comment: comment,
+						}).then(() => {
+							file.comment = comment;
+						});
+					},
 				},
-			}, 'closed');
+				"closed"
+			);
 		},
 
 		showFileMenu(file, ev: MouseEvent) {
 			if (this.menu) return;
-			this.menu = os.popupMenu([{
-				text: i18n.ts.renameFile,
-				icon: 'ph-cursor-text ph-bold ph-lg',
-				action: () => { this.rename(file); },
-			}, {
-				text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-				icon: file.isSensitive ? 'ph-eye-slash ph-bold ph-lg' : 'ph-eye ph-bold ph-lg',
-				action: () => { this.toggleSensitive(file); },
-			}, {
-				text: i18n.ts.describeFile,
-				icon: 'ph-cursor-text ph-bold ph-lg',
-				action: () => { this.describe(file); },
-			}, {
-				text: i18n.ts.attachCancel,
-				icon: 'ph-circle-wavy-warning ph-bold ph-lg',
-				action: () => { this.detachMedia(file.id); },
-			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
+			this.menu = os
+				.popupMenu(
+					[
+						{
+							text: i18n.ts.renameFile,
+							icon: "ph-cursor-text ph-bold ph-lg",
+							action: () => {
+								this.rename(file);
+							},
+						},
+						{
+							text: file.isSensitive
+								? i18n.ts.unmarkAsSensitive
+								: i18n.ts.markAsSensitive,
+							icon: file.isSensitive
+								? "ph-eye-slash ph-bold ph-lg"
+								: "ph-eye ph-bold ph-lg",
+							action: () => {
+								this.toggleSensitive(file);
+							},
+						},
+						{
+							text: i18n.ts.describeFile,
+							icon: "ph-cursor-text ph-bold ph-lg",
+							action: () => {
+								this.describe(file);
+							},
+						},
+						{
+							text: i18n.ts.attachCancel,
+							icon: "ph-circle-wavy-warning ph-bold ph-lg",
+							action: () => {
+								this.detachMedia(file.id);
+							},
+						},
+					],
+					ev.currentTarget ?? ev.target
+				)
+				.then(() => (this.menu = null));
 		},
 	},
 });
@@ -172,7 +220,7 @@ export default defineComponent({
 				top: 0;
 				left: 0;
 				z-index: 2;
-				background: rgba(17, 17, 17, .7);
+				background: rgba(17, 17, 17, 0.7);
 				color: #fff;
 
 				> .icon {
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index 147ba9542..c96a94c0c 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -1,14 +1,28 @@
 <template>
-	<MkModal ref="modal" :prefer-type="'dialog'" @click="modal.close()" @closed="onModalClosed()">
-		<MkPostForm ref="form" style="margin: 0 auto auto auto;" v-bind="props" autofocus freeze-after-posted @posted="onPosted" @cancel="modal.close()" @esc="modal.close()"/>
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		@click="modal.close()"
+		@closed="onModalClosed()"
+	>
+		<MkPostForm
+			ref="form"
+			style="margin: 0 auto auto auto"
+			v-bind="props"
+			autofocus
+			freeze-after-posted
+			@posted="onPosted"
+			@cancel="modal.close()"
+			@esc="modal.close()"
+		/>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import MkModal from '@/components/MkModal.vue';
-import MkPostForm from '@/components/MkPostForm.vue';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import MkModal from "@/components/MkModal.vue";
+import MkPostForm from "@/components/MkPostForm.vue";
 
 const props = defineProps<{
 	reply?: misskey.entities.Note;
@@ -28,7 +42,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
@@ -41,6 +55,6 @@ function onPosted() {
 }
 
 function onModalClosed() {
-	emit('closed');
+	emit("closed");
 }
 </script>
diff --git a/packages/client/src/components/MkPushNotificationAllowButton.vue b/packages/client/src/components/MkPushNotificationAllowButton.vue
index b98c814f2..0b2c4f6e3 100644
--- a/packages/client/src/components/MkPushNotificationAllowButton.vue
+++ b/packages/client/src/components/MkPushNotificationAllowButton.vue
@@ -1,46 +1,63 @@
 <template>
-<MkButton
-	v-if="supported && !pushRegistrationInServer"
-	type="button"
-	primary
-	:gradate="gradate"
-	:rounded="rounded"
-	:inline="inline"
-	:autofocus="autofocus"
-	:wait="wait"
-	:full="full"
-	@click="subscribe"
->
-	{{ i18n.ts.subscribePushNotification }}
-</MkButton>
-<MkButton
-	v-else-if="!showOnlyToRegister && ($i ? pushRegistrationInServer : pushSubscription)"
-	type="button"
-	:primary="false"
-	:gradate="gradate"
-	:rounded="rounded"
-	:inline="inline"
-	:autofocus="autofocus"
-	:wait="wait"
-	:full="full"
-	@click="unsubscribe"
->
-	{{ i18n.ts.unsubscribePushNotification }}
-</MkButton>
-<MkButton v-else-if="$i && pushRegistrationInServer" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
-	{{ i18n.ts.pushNotificationAlreadySubscribed }}
-</MkButton>
-<MkButton v-else-if="!supported" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
-	{{ i18n.ts.pushNotificationNotSupported }}
-</MkButton>
+	<MkButton
+		v-if="supported && !pushRegistrationInServer"
+		type="button"
+		primary
+		:gradate="gradate"
+		:rounded="rounded"
+		:inline="inline"
+		:autofocus="autofocus"
+		:wait="wait"
+		:full="full"
+		@click="subscribe"
+	>
+		{{ i18n.ts.subscribePushNotification }}
+	</MkButton>
+	<MkButton
+		v-else-if="
+			!showOnlyToRegister &&
+			($i ? pushRegistrationInServer : pushSubscription)
+		"
+		type="button"
+		:primary="false"
+		:gradate="gradate"
+		:rounded="rounded"
+		:inline="inline"
+		:autofocus="autofocus"
+		:wait="wait"
+		:full="full"
+		@click="unsubscribe"
+	>
+		{{ i18n.ts.unsubscribePushNotification }}
+	</MkButton>
+	<MkButton
+		v-else-if="$i && pushRegistrationInServer"
+		disabled
+		:rounded="rounded"
+		:inline="inline"
+		:wait="wait"
+		:full="full"
+	>
+		{{ i18n.ts.pushNotificationAlreadySubscribed }}
+	</MkButton>
+	<MkButton
+		v-else-if="!supported"
+		disabled
+		:rounded="rounded"
+		:inline="inline"
+		:wait="wait"
+		:full="full"
+	>
+		{{ i18n.ts.pushNotificationNotSupported }}
+	</MkButton>
 </template>
 
 <script setup lang="ts">
-import { $i, getAccounts } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { instance } from '@/instance';
-import { api, apiWithDialog, promiseDialog } from '@/os';
-import { i18n } from '@/i18n';
+import { $i, getAccounts } from "@/account";
+import MkButton from "@/components/MkButton.vue";
+import { instance } from "@/instance";
+import { api, apiWithDialog, promiseDialog } from "@/os";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	primary?: boolean;
@@ -62,38 +79,60 @@ let registration = $ref<ServiceWorkerRegistration | undefined>();
 let supported = $ref(false);
 // If this browser has already subscribed to push notification
 let pushSubscription = $ref<PushSubscription | null>(null);
-let pushRegistrationInServer = $ref<{ state?: string; key?: string; userId: string; endpoint: string; sendReadMessage: boolean; } | undefined>();
+let pushRegistrationInServer = $ref<
+	| {
+			state?: string;
+			key?: string;
+			userId: string;
+			endpoint: string;
+			sendReadMessage: boolean;
+	  }
+	| undefined
+>();
 
 function subscribe() {
 	if (!registration || !supported || !instance.swPublickey) return;
 
 	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
-	return promiseDialog(registration.pushManager.subscribe({
-		userVisibleOnly: true,
-		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
-	})
-	.then(async subscription => {
-		pushSubscription = subscription;
+	return promiseDialog(
+		registration.pushManager
+			.subscribe({
+				userVisibleOnly: true,
+				applicationServerKey: urlBase64ToUint8Array(
+					instance.swPublickey
+				),
+			})
+			.then(
+				async (subscription) => {
+					pushSubscription = subscription;
 
-		// Register
-		pushRegistrationInServer = await api('sw/register', {
-			endpoint: subscription.endpoint,
-			auth: encode(subscription.getKey('auth')),
-			publickey: encode(subscription.getKey('p256dh')),
-		});
-	}, async err => { // When subscribe failed
-		// 通知が許可されていなかったとき
-		if (err?.name === 'NotAllowedError') {
-			console.info('User denied the notification permission request.');
-			return;
-		}
+					// Register
+					pushRegistrationInServer = await api("sw/register", {
+						endpoint: subscription.endpoint,
+						auth: encode(subscription.getKey("auth")),
+						publickey: encode(subscription.getKey("p256dh")),
+					});
+				},
+				async (err) => {
+					// When subscribe failed
+					// 通知が許可されていなかったとき
+					if (err?.name === "NotAllowedError") {
+						console.info(
+							"User denied the notification permission request."
+						);
+						return;
+					}
 
-		// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
-		// 既に存在していることが原因でエラーになった可能性があるので、
-		// そのサブスクリプションを解除しておく
-		// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
-		await unsubscribe();
-	}), null, null);
+					// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
+					// 既に存在していることが原因でエラーになった可能性があるので、
+					// そのサブスクリプションを解除しておく
+					// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
+					await unsubscribe();
+				}
+			),
+		null,
+		null
+	);
 }
 
 async function unsubscribe() {
@@ -105,13 +144,13 @@ async function unsubscribe() {
 	pushRegistrationInServer = undefined;
 
 	if ($i && accounts.length >= 2) {
-		apiWithDialog('sw/unregister', {
+		apiWithDialog("sw/unregister", {
 			i: $i.token,
 			endpoint,
 		});
 	} else {
 		pushSubscription.unsubscribe();
-		apiWithDialog('sw/unregister', {
+		apiWithDialog("sw/unregister", {
 			endpoint,
 		});
 		pushSubscription = null;
@@ -127,10 +166,10 @@ function encode(buffer: ArrayBuffer | null) {
  * @param base64String base64 string
  */
 function urlBase64ToUint8Array(base64String: string): Uint8Array {
-	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
 	const base64 = (base64String + padding)
-		.replace(/-/g, '+')
-		.replace(/_/g, '/');
+		.replace(/-/g, "+")
+		.replace(/_/g, "/");
 
 	const rawData = window.atob(base64);
 	const outputArray = new Uint8Array(rawData.length);
@@ -144,16 +183,16 @@ function urlBase64ToUint8Array(base64String: string): Uint8Array {
 if (navigator.serviceWorker == null) {
 	// TODO: よしなに？
 } else {
-	navigator.serviceWorker.ready.then(async swr => {
+	navigator.serviceWorker.ready.then(async (swr) => {
 		registration = swr;
 
 		pushSubscription = await registration.pushManager.getSubscription();
 
-		if (instance.swPublickey && ('PushManager' in window) && $i && $i.token) {
+		if (instance.swPublickey && "PushManager" in window && $i && $i.token) {
 			supported = true;
 
 			if (pushSubscription) {
-				const res = await api('sw/show-registration', {
+				const res = await api("sw/show-registration", {
 					endpoint: pushSubscription.endpoint,
 				});
 
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
index a936e791d..4710d01b4 100644
--- a/packages/client/src/components/MkQuoteButton.vue
+++ b/packages/client/src/components/MkQuoteButton.vue
@@ -1,27 +1,31 @@
 <template>
-<button
-	v-if="canRenote && $store.state.seperateRenoteQuote"
-	v-tooltip.noDelay.bottom="i18n.ts.quote"
-	class="eddddedb _button"
-	@click="quote()"
->
-	<i class="ph-quotes ph-bold ph-lg"></i>
-</button>
+	<button
+		v-if="canRenote && $store.state.seperateRenoteQuote"
+		v-tooltip.noDelay.bottom="i18n.ts.quote"
+		class="eddddedb _button"
+		@click="quote()"
+	>
+		<i class="ph-quotes ph-bold ph-lg"></i>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { Note } from 'calckey-js/built/entities';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import type { Note } from "calckey-js/built/entities";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	note: Note;
 }>();
 
-const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i?.id);
+const canRenote = computed(
+	() =>
+		["public", "home"].includes(props.note.visibility) ||
+		props.note.userId === $i?.id
+);
 
 function quote(): void {
 	pleaseLogin();
diff --git a/packages/client/src/components/MkReactedUsersDialog.vue b/packages/client/src/components/MkReactedUsersDialog.vue
index a41378f2b..7012ea3fa 100644
--- a/packages/client/src/components/MkReactedUsersDialog.vue
+++ b/packages/client/src/components/MkReactedUsersDialog.vue
@@ -1,58 +1,84 @@
 <template>
-<MkModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.reactions }}</template>
+	<MkModalWindow
+		ref="dialog"
+		:width="400"
+		:height="450"
+		@close="dialog.close()"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.reactions }}</template>
 
-	<MkSpacer :margin-min="20" :margin-max="28">
-		<div v-if="note" class="_gaps">
-			<div v-if="reactions.length === 0" class="_fullinfo">
-				<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-				<div>{{ i18n.ts.nothing }}</div>
-			</div>
-			<template v-else>
-				<div :class="$style.tabs">
-					<button v-for="reaction in reactions" :key="reaction" :class="[$style.tab, { [$style.tabActive]: tab === reaction }]" class="_button" @click="tab = reaction">
-						<MkReactionIcon
-							ref="reactionRef"
-							:reaction="reaction ? reaction.replace(/^:(\w+):$/, ':$1@.:') : reaction"
-							:custom-emojis="note.emojis"
-						/>
-						<span style="margin-left: 4px;">{{ note.reactions[reaction] }}</span>
-					</button>
+		<MkSpacer :margin-min="20" :margin-max="28">
+			<div v-if="note" class="_gaps">
+				<div v-if="reactions.length === 0" class="_fullinfo">
+					<img
+						src="/static-assets/badges/info.png"
+						class="_ghost"
+						alt="Info"
+					/>
+					<div>{{ i18n.ts.nothing }}</div>
 				</div>
-				<MkA v-for="user in users" :key="user.id" :to="userPage(user)">
-					<MkUserCardMini :user="user" :with-chart="false"/>
-				</MkA>
-			</template>
-		</div>
-		<div v-else>
-			<MkLoading/>
-		</div>
-	</MkSpacer>
-</MkModalWindow>
+				<template v-else>
+					<div :class="$style.tabs">
+						<button
+							v-for="reaction in reactions"
+							:key="reaction"
+							:class="[
+								$style.tab,
+								{ [$style.tabActive]: tab === reaction },
+							]"
+							class="_button"
+							@click="tab = reaction"
+						>
+							<MkReactionIcon
+								ref="reactionRef"
+								:reaction="
+									reaction
+										? reaction.replace(
+												/^:(\w+):$/,
+												':$1@.:'
+										  )
+										: reaction
+								"
+								:custom-emojis="note.emojis"
+							/>
+							<span style="margin-left: 4px">{{
+								note.reactions[reaction]
+							}}</span>
+						</button>
+					</div>
+					<MkA
+						v-for="user in users"
+						:key="user.id"
+						:to="userPage(user)"
+					>
+						<MkUserCardMini :user="user" :with-chart="false" />
+					</MkA>
+				</template>
+			</div>
+			<div v-else>
+				<MkLoading />
+			</div>
+		</MkSpacer>
+	</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MkModalWindow from '@/components/MkModalWindow.vue';
-import MkReactionIcon from '@/components/MkReactionIcon.vue';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
+import { onMounted, watch } from "vue";
+import * as misskey from "calckey-js";
+import MkModalWindow from "@/components/MkModalWindow.vue";
+import MkReactionIcon from "@/components/MkReactionIcon.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
 
 const emit = defineEmits<{
-	(ev: 'closed'): void,
+	(ev: "closed"): void;
 }>();
 
 const props = defineProps<{
-	noteId: misskey.entities.Note['id'];
+	noteId: misskey.entities.Note["id"];
 }>();
 
 const dialog = $shallowRef<InstanceType<typeof MkModalWindow>>();
@@ -63,17 +89,17 @@ let reactions = $ref<string[]>();
 let users = $ref();
 
 watch($$(tab), async () => {
-	const res = await os.api('notes/reactions', {
+	const res = await os.api("notes/reactions", {
 		noteId: props.noteId,
 		type: tab,
 		limit: 30,
 	});
 
-	users = res.map(x => x.user);
+	users = res.map((x) => x.user);
 });
 
 onMounted(() => {
-	os.api('notes/show', {
+	os.api("notes/show", {
 		noteId: props.noteId,
 	}).then((res) => {
 		reactions = Object.keys(res.reactions);
diff --git a/packages/client/src/components/MkReactionIcon.vue b/packages/client/src/components/MkReactionIcon.vue
index 5638c9a81..eb19a5520 100644
--- a/packages/client/src/components/MkReactionIcon.vue
+++ b/packages/client/src/components/MkReactionIcon.vue
@@ -1,9 +1,15 @@
 <template>
-<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+	<MkEmoji
+		:emoji="reaction"
+		:custom-emojis="customEmojis || []"
+		:is-reaction="true"
+		:normal="true"
+		:no-style="noStyle"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	reaction: string;
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
index 2da97cf4f..e3db05c27 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -1,16 +1,26 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="beeadbfb">
-		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
-		<div class="name">{{ reaction.replace('@.', '') }}</div>
-	</div>
-</MkTooltip>
+	<MkTooltip
+		ref="tooltip"
+		:target-element="targetElement"
+		:max-width="340"
+		@closed="emit('closed')"
+	>
+		<div class="beeadbfb">
+			<XReactionIcon
+				:reaction="reaction"
+				:custom-emojis="emojis"
+				class="icon"
+				:no-style="true"
+			/>
+			<div class="name">{{ reaction.replace("@.", "") }}</div>
+		</div>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
@@ -19,7 +29,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 8c423807b..96dd05162 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -1,25 +1,37 @@
 <template>
-<MkTooltip ref="tooltip" :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"/>
-			<div class="name">{{ reaction.replace('@.', '') }}</div>
-		</div>
-		<div class="users">
-			<div v-for="u in users" :key="u.id" class="user">
-				<MkAvatar class="avatar" :user="u"/>
-				<MkUserName class="name" :user="u" :nowrap="true"/>
+	<MkTooltip
+		ref="tooltip"
+		: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"
+				/>
+				<div class="name">{{ reaction.replace("@.", "") }}</div>
+			</div>
+			<div class="users">
+				<div v-for="u in users" :key="u.id" class="user">
+					<MkAvatar class="avatar" :user="u" />
+					<MkUserName class="name" :user="u" :nowrap="true" />
+				</div>
+				<div v-if="users.length > 10" class="omitted">
+					+{{ count - 10 }}
+				</div>
 			</div>
-			<div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div>
 		</div>
-	</div>
-</MkTooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	reaction: string;
@@ -30,7 +42,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index 8c952addc..461628a94 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -1,25 +1,33 @@
 <template>
-<button
-	v-if="count > 0"
-	ref="buttonRef"
-	v-ripple="canToggle"
-	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction, canToggle, newlyAdded: !isInitial }"
-	@click="toggleReaction()"
->
-	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
-	<span class="count">{{ count }}</span>
-</button>
+	<button
+		v-if="count > 0"
+		ref="buttonRef"
+		v-ripple="canToggle"
+		class="hkzvhatu _button"
+		:class="{
+			reacted: note.myReaction == reaction,
+			canToggle,
+			newlyAdded: !isInitial,
+		}"
+		@click="toggleReaction()"
+	>
+		<XReactionIcon
+			class="icon"
+			:reaction="reaction"
+			:custom-emojis="note.emojis"
+		/>
+		<span class="count">{{ count }}</span>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import * as misskey from 'calckey-js';
-import XDetails from '@/components/MkReactionsViewer.details.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { $i } from '@/account';
+import { computed, ref } from "vue";
+import * as misskey from "calckey-js";
+import XDetails from "@/components/MkReactionsViewer.details.vue";
+import XReactionIcon from "@/components/MkReactionIcon.vue";
+import * as os from "@/os";
+import { useTooltip } from "@/scripts/use-tooltip";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	reaction: string;
@@ -37,43 +45,52 @@ const toggleReaction = () => {
 
 	const oldReaction = props.note.myReaction;
 	if (oldReaction) {
-		os.api('notes/reactions/delete', {
+		os.api("notes/reactions/delete", {
 			noteId: props.note.id,
 		}).then(() => {
 			if (oldReaction !== props.reaction) {
-				os.api('notes/reactions/create', {
+				os.api("notes/reactions/create", {
 					noteId: props.note.id,
 					reaction: props.reaction,
 				});
 			}
 		});
 	} else {
-		os.api('notes/reactions/create', {
+		os.api("notes/reactions/create", {
 			noteId: props.note.id,
 			reaction: props.reaction,
 		});
 	}
 };
 
-useTooltip(buttonRef, async (showing) => {
-	const reactions = await os.apiGet('notes/reactions', {
-		noteId: props.note.id,
-		type: props.reaction,
-		limit: 11,
-		_cacheKey_: props.count,
-	});
+useTooltip(
+	buttonRef,
+	async (showing) => {
+		const reactions = await os.apiGet("notes/reactions", {
+			noteId: props.note.id,
+			type: props.reaction,
+			limit: 11,
+			_cacheKey_: props.count,
+		});
 
-	const users = reactions.map(x => x.user);
+		const users = reactions.map((x) => x.user);
 
-	os.popup(XDetails, {
-		showing,
-		reaction: props.reaction,
-		emojis: props.note.emojis,
-		users,
-		count: props.count,
-		targetElement: buttonRef.value,
-	}, {}, 'closed');
-}, 100);
+		os.popup(
+			XDetails,
+			{
+				showing,
+				reaction: props.reaction,
+				emojis: props.note.emojis,
+				users,
+				count: props.count,
+				targetElement: buttonRef.value,
+			},
+			{},
+			"closed"
+		);
+	},
+	100
+);
 </script>
 
 <style lang="scss" scoped>
@@ -85,21 +102,21 @@ useTooltip(buttonRef, async (showing) => {
 	border-radius: 4px;
 	pointer-events: all;
 	&.newlyAdded {
-		animation: scaleInSmall .3s cubic-bezier(0,0,0,1.2);
+		animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
 		:deep(.mk-emoji) {
-			animation: scaleIn .4s cubic-bezier(0.7, 0, 0, 1.5);
+			animation: scaleIn 0.4s cubic-bezier(0.7, 0, 0, 1.5);
 		}
 	}
 	:deep(.mk-emoji) {
-		transition: transform .4s cubic-bezier(0,0,0,6);
+		transition: transform 0.4s cubic-bezier(0, 0, 0, 6);
 	}
 	&.reacted :deep(.mk-emoji) {
-		transition: transform .4s cubic-bezier(0,0,0,1);
+		transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
 	}
 	&:active {
 		:deep(.mk-emoji) {
-			transition: transform .4s cubic-bezier(0,0,0,1);
-			transform: scale(.85);
+			transition: transform 0.4s cubic-bezier(0, 0, 0, 1);
+			transform: scale(0.85);
 		}
 	}
 	&.canToggle {
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index eb60e3633..fc108b472 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -1,14 +1,21 @@
 <template>
-<div class="tdflqwzn" :class="{ isMe }">
-	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
-</div>
+	<div class="tdflqwzn" :class="{ isMe }">
+		<XReaction
+			v-for="(count, reaction) in note.reactions"
+			:key="reaction"
+			:reaction="reaction"
+			:count="count"
+			:is-initial="initialReactions.has(reaction)"
+			:note="note"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import { $i } from '@/account';
-import XReaction from '@/components/MkReactionsViewer.reaction.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import { $i } from "@/account";
+import XReaction from "@/components/MkReactionsViewer.reaction.vue";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -22,9 +29,9 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 <style lang="scss" scoped>
 .tdflqwzn {
 	margin-inline: -2px;
-	margin-top: .2em;
+	margin-top: 0.2em;
 	width: 100%;
-	
+
 	&:empty {
 		display: none;
 	}
diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
index 8cb48648f..f8a84e81e 100644
--- a/packages/client/src/components/MkRemoteCaution.vue
+++ b/packages/client/src/components/MkRemoteCaution.vue
@@ -1,9 +1,18 @@
 <template>
-<div class="jmgmzlwq _block">{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
+	<div class="jmgmzlwq _block">
+		{{ i18n.ts.remoteUserCaution
+		}}<a
+			class="link"
+			:href="href"
+			rel="nofollow noopener"
+			target="_blank"
+			>{{ i18n.ts.showOnRemote }}</a
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { i18n } from '@/i18n';
+import { i18n } from "@/i18n";
 
 defineProps<{
 	href: string;
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 11bcd8bd5..e2968f796 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -1,150 +1,185 @@
 <template>
-<button
-	v-if="canRenote"
-	ref="buttonRef"
-	v-tooltip.noDelay.bottom="i18n.ts.renote"
-	class="eddddedb _button canRenote"
-	@click="renote(false, $event)"
->
-	<i class="ph-repeat ph-bold ph-lg"></i>
-	<p v-if="count > 0" class="count">{{ count }}</p>
-</button>
-<button v-else class="eddddedb _button">
-	<i class="ph-prohibit ph-bold ph-lg"></i>
-</button>
+	<button
+		v-if="canRenote"
+		ref="buttonRef"
+		v-tooltip.noDelay.bottom="i18n.ts.renote"
+		class="eddddedb _button canRenote"
+		@click="renote(false, $event)"
+	>
+		<i class="ph-repeat ph-bold ph-lg"></i>
+		<p v-if="count > 0" class="count">{{ count }}</p>
+	</button>
+	<button v-else class="eddddedb _button">
+		<i class="ph-prohibit ph-bold ph-lg"></i>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import type * as misskey from 'calckey-js';
-import Ripple from '@/components/MkRipple.vue';
-import XDetails from '@/components/MkUsersTooltip.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { computed, ref } from "vue";
+import type * as misskey from "calckey-js";
+import Ripple from "@/components/MkRipple.vue";
+import XDetails from "@/components/MkUsersTooltip.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { useTooltip } from "@/scripts/use-tooltip";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
-		note: misskey.entities.Note;
-		count: number;
-	}>();
+	note: misskey.entities.Note;
+	count: number;
+}>();
 
 const buttonRef = ref<HTMLElement>();
 
-const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
+const canRenote = computed(
+	() =>
+		["public", "home"].includes(props.note.visibility) ||
+		props.note.userId === $i.id
+);
 
 useTooltip(buttonRef, async (showing) => {
-	const renotes = await os.api('notes/renotes', {
+	const renotes = await os.api("notes/renotes", {
 		noteId: props.note.id,
 		limit: 11,
 	});
 
-	const users = renotes.map(x => x.user);
+	const users = renotes.map((x) => x.user);
 
 	if (users.length < 1) return;
 
-	os.popup(XDetails, {
-		showing,
-		users,
-		count: props.count,
-		targetElement: buttonRef.value,
-	}, {}, 'closed');
+	os.popup(
+		XDetails,
+		{
+			showing,
+			users,
+			count: props.count,
+			targetElement: buttonRef.value,
+		},
+		{},
+		"closed"
+	);
 });
 
 const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 	pleaseLogin();
 
-	const renotes = await os.api('notes/renotes', {
+	const renotes = await os.api("notes/renotes", {
 		noteId: props.note.id,
 		limit: 11,
 	});
 
-	const users = renotes.map(x => x.user.id);
+	const users = renotes.map((x) => x.user.id);
 	const hasRenotedBefore = users.includes($i.id);
 
 	let buttonActions = [];
 
-	if (props.note.visibility === 'public') {
+	if (props.note.visibility === "public") {
 		buttonActions.push({
 			text: i18n.ts.renote,
-			textStyle: 'font-weight: bold',
-			icon: 'ph-repeat ph-bold ph-lg',
+			textStyle: "font-weight: bold",
+			icon: "ph-repeat ph-bold ph-lg",
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'public',
+					visibility: "public",
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
 	}
 
-	if (['public', 'home'].includes(props.note.visibility)) {
+	if (["public", "home"].includes(props.note.visibility)) {
 		buttonActions.push({
 			text: i18n.ts.renoteAsUnlisted,
-			icons: ['ph-repeat ph-bold ph-lg', 'ph-house ph-bold ph-lg'],
+			icons: ["ph-repeat ph-bold ph-lg", "ph-house ph-bold ph-lg"],
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'home',
+					visibility: "home",
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
 	}
 
-	if (props.note.visibility === 'specified') {
+	if (props.note.visibility === "specified") {
 		buttonActions.push({
 			text: i18n.ts.renoteToRecipients,
-			icons: ['ph-repeat ph-bold ph-lg', 'ph-envelope-simple-open ph-bold ph-lg'],
+			icons: [
+				"ph-repeat ph-bold ph-lg",
+				"ph-envelope-simple-open ph-bold ph-lg",
+			],
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'specified',
+					visibility: "specified",
 					visibleUserIds: props.note.visibleUserIds,
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
 	} else {
 		buttonActions.push({
 			text: i18n.ts.renoteToFollowers,
-			icons: ['ph-repeat ph-bold ph-lg', 'ph-lock-simple-open ph-bold ph-lg'],
+			icons: [
+				"ph-repeat ph-bold ph-lg",
+				"ph-lock-simple-open ph-bold ph-lg",
+			],
 			danger: false,
 			action: () => {
-				os.api('notes/create', {
+				os.api("notes/create", {
 					renoteId: props.note.id,
-					visibility: 'followers',
+					visibility: "followers",
 				});
-				const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+				const el =
+					ev &&
+					((ev.currentTarget ?? ev.target) as
+						| HTMLElement
+						| null
+						| undefined);
 				if (el) {
 					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(Ripple, { x, y }, {}, 'end');
+					const x = rect.left + el.offsetWidth / 2;
+					const y = rect.top + el.offsetHeight / 2;
+					os.popup(Ripple, { x, y }, {}, "end");
 				}
 			},
 		});
@@ -153,7 +188,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 	if (!defaultStore.state.seperateRenoteQuote) {
 		buttonActions.push({
 			text: i18n.ts.quote,
-			icon: 'ph-quotes ph-bold ph-lg',
+			icon: "ph-quotes ph-bold ph-lg",
 			danger: false,
 			action: () => {
 				os.post({
@@ -166,10 +201,10 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 	if (hasRenotedBefore) {
 		buttonActions.push({
 			text: i18n.ts.unrenote,
-			icon: 'ph-trash ph-bold ph-lg',
+			icon: "ph-trash ph-bold ph-lg",
 			danger: true,
 			action: () => {
-				os.api('notes/unrenote', {
+				os.api("notes/unrenote", {
 					noteId: props.note.id,
 				});
 			},
@@ -179,26 +214,26 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
 };
 </script>
 
-	<style lang="scss" scoped>
-	.eddddedb {
-		display: inline-block;
-		height: 32px;
-		margin: 2px;
-		padding: 0 6px;
-		border-radius: 4px;
+<style lang="scss" scoped>
+.eddddedb {
+	display: inline-block;
+	height: 32px;
+	margin: 2px;
+	padding: 0 6px;
+	border-radius: 4px;
 
-		&:not(.canRenote) {
-			cursor: default;
-		}
-
-		&.renoted {
-			background: var(--accent);
-		}
-
-		> .count {
-			display: inline;
-			margin-left: 8px;
-			opacity: 0.7;
-		}
+	&:not(.canRenote) {
+		cursor: default;
 	}
-	</style>
+
+	&.renoted {
+		background: var(--accent);
+	}
+
+	> .count {
+		display: inline;
+		margin-left: 8px;
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/packages/client/src/components/MkRipple.vue b/packages/client/src/components/MkRipple.vue
index 0eb8d2f4f..d055caad7 100644
--- a/packages/client/src/components/MkRipple.vue
+++ b/packages/client/src/components/MkRipple.vue
@@ -1,93 +1,113 @@
 <template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
-	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-		<circle fill="none" cx="64" cy="64">
-			<animate
-				attributeName="r"
-				begin="0s" dur="0.5s"
-				values="4; 32"
-				calcMode="spline"
-				keyTimes="0; 1"
-				keySplines="0.165, 0.84, 0.44, 1"
-				repeatCount="1"
-			/>
-			<animate
-				attributeName="stroke-width"
-				begin="0s" dur="0.5s"
-				values="16; 0"
-				calcMode="spline"
-				keyTimes="0; 1"
-				keySplines="0.3, 0.61, 0.355, 1"
-				repeatCount="1"
-			/>
-		</circle>
-		<g fill="none" fill-rule="evenodd">
-			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
+	<div
+		class="vswabwbm"
+		:style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }"
+	>
+		<svg
+			width="128"
+			height="128"
+			viewBox="0 0 128 128"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<circle fill="none" cx="64" cy="64">
 				<animate
 					attributeName="r"
-					begin="0s" dur="0.8s"
-					:values="`${particle.size}; 0`"
+					begin="0s"
+					dur="0.5s"
+					values="4; 32"
 					calcMode="spline"
 					keyTimes="0; 1"
 					keySplines="0.165, 0.84, 0.44, 1"
 					repeatCount="1"
 				/>
 				<animate
-					attributeName="cx"
-					begin="0s" dur="0.8s"
-					:values="`${particle.xA}; ${particle.xB}`"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.3, 0.61, 0.355, 1"
-					repeatCount="1"
-				/>
-				<animate
-					attributeName="cy"
-					begin="0s" dur="0.8s"
-					:values="`${particle.yA}; ${particle.yB}`"
+					attributeName="stroke-width"
+					begin="0s"
+					dur="0.5s"
+					values="16; 0"
 					calcMode="spline"
 					keyTimes="0; 1"
 					keySplines="0.3, 0.61, 0.355, 1"
 					repeatCount="1"
 				/>
 			</circle>
-		</g>
-	</svg>
-</div>
+			<g fill="none" fill-rule="evenodd">
+				<circle
+					v-for="(particle, i) in particles"
+					:key="i"
+					:fill="particle.color"
+				>
+					<animate
+						attributeName="r"
+						begin="0s"
+						dur="0.8s"
+						:values="`${particle.size}; 0`"
+						calcMode="spline"
+						keyTimes="0; 1"
+						keySplines="0.165, 0.84, 0.44, 1"
+						repeatCount="1"
+					/>
+					<animate
+						attributeName="cx"
+						begin="0s"
+						dur="0.8s"
+						:values="`${particle.xA}; ${particle.xB}`"
+						calcMode="spline"
+						keyTimes="0; 1"
+						keySplines="0.3, 0.61, 0.355, 1"
+						repeatCount="1"
+					/>
+					<animate
+						attributeName="cy"
+						begin="0s"
+						dur="0.8s"
+						:values="`${particle.yA}; ${particle.yB}`"
+						calcMode="spline"
+						keyTimes="0; 1"
+						keySplines="0.3, 0.61, 0.355, 1"
+						repeatCount="1"
+					/>
+				</circle>
+			</g>
+		</svg>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
+import { onMounted } from "vue";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	x: number;
-	y: number;
-	particle?: boolean;
-}>(), {
-	particle: true,
-});
+const props = withDefaults(
+	defineProps<{
+		x: number;
+		y: number;
+		particle?: boolean;
+	}>(),
+	{
+		particle: true,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'end'): void;
+	(ev: "end"): void;
 }>();
 
 const particles = [];
 const origin = 64;
-const colors = ['#eb6f92', '#9ccfd8', '#f6c177'];
-const zIndex = os.claimZIndex('high');
+const colors = ["#eb6f92", "#9ccfd8", "#f6c177"];
+const zIndex = os.claimZIndex("high");
 
 if (props.particle) {
 	for (let i = 0; i < 12; i++) {
 		const angle = Math.random() * (Math.PI * 2);
 		const pos = Math.random() * 16;
-		const velocity = 16 + (Math.random() * 48);
+		const velocity = 16 + Math.random() * 48;
 		particles.push({
-			size: 4 + (Math.random() * 8),
-			xA: origin + (Math.sin(angle) * pos),
-			yA: origin + (Math.cos(angle) * pos),
-			xB: origin + (Math.sin(angle) * (pos + velocity)),
-			yB: origin + (Math.cos(angle) * (pos + velocity)),
+			size: 4 + Math.random() * 8,
+			xA: origin + Math.sin(angle) * pos,
+			yA: origin + Math.cos(angle) * pos,
+			xB: origin + Math.sin(angle) * (pos + velocity),
+			yB: origin + Math.cos(angle) * (pos + velocity),
 			color: colors[Math.floor(Math.random() * colors.length)],
 		});
 	}
@@ -95,7 +115,7 @@ if (props.particle) {
 
 onMounted(() => {
 	window.setTimeout(() => {
-		emit('end');
+		emit("end");
 	}, 1100);
 });
 </script>
diff --git a/packages/client/src/components/MkSample.vue b/packages/client/src/components/MkSample.vue
index 68510809c..fcd064fdc 100644
--- a/packages/client/src/components/MkSample.vue
+++ b/packages/client/src/components/MkSample.vue
@@ -1,41 +1,41 @@
 <template>
-<div class="_card">
-	<div class="_content">
-		<MkInput v-model="text">
-			<template #label>Text</template>
-		</MkInput>
-		<MkSwitch v-model="flag">
-			<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
-		</MkSwitch>
-		<div style="margin: 32px 0;">
-			<MkRadio v-model="radio" value="misskey">Calckey</MkRadio>
-			<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
-			<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
+	<div class="_card">
+		<div class="_content">
+			<MkInput v-model="text">
+				<template #label>Text</template>
+			</MkInput>
+			<MkSwitch v-model="flag">
+				<span>Switch is now {{ flag ? "on" : "off" }}</span>
+			</MkSwitch>
+			<div style="margin: 32px 0">
+				<MkRadio v-model="radio" value="misskey">Calckey</MkRadio>
+				<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
+				<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
+			</div>
+			<MkButton inline>This is</MkButton>
+			<MkButton inline primary>the button</MkButton>
+		</div>
+		<div class="_content" style="pointer-events: none">
+			<Mfm :text="mfm" />
+		</div>
+		<div class="_content">
+			<MkButton inline primary @click="openMenu">Open menu</MkButton>
+			<MkButton inline primary @click="openDialog">Open dialog</MkButton>
+			<MkButton inline primary @click="openForm">Open form</MkButton>
+			<MkButton inline primary @click="openDrive">Open drive</MkButton>
 		</div>
-		<MkButton inline>This is</MkButton>
-		<MkButton inline primary>the button</MkButton>
 	</div>
-	<div class="_content" style="pointer-events: none;">
-		<Mfm :text="mfm"/>
-	</div>
-	<div class="_content">
-		<MkButton inline primary @click="openMenu">Open menu</MkButton>
-		<MkButton inline primary @click="openDialog">Open dialog</MkButton>
-		<MkButton inline primary @click="openForm">Open form</MkButton>
-		<MkButton inline primary @click="openDrive">Open drive</MkButton>
-	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkRadio from '@/components/form/radio.vue';
-import * as os from '@/os';
-import * as config from '@/config';
+import { defineComponent } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkRadio from "@/components/form/radio.vue";
+import * as os from "@/os";
+import * as config from "@/config";
 
 export default defineComponent({
 	components: {
@@ -48,38 +48,42 @@ export default defineComponent({
 
 	data() {
 		return {
-			text: '',
+			text: "",
 			flag: true,
-			radio: 'calckey',
-			mfm: `Hello world! This is an @example mention. BTW, you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`
+			radio: "calckey",
+			mfm: `Hello world! This is an @example mention. BTW, you are @${
+				this.$i ? this.$i.username : "guest"
+			}.\nAlso, here is ${config.url} and [example link](${
+				config.url
+			}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`,
 		};
 	},
 
 	methods: {
 		async openDialog() {
 			os.alert({
-				type: 'warning',
-				title: 'Oh my Calc',
-				text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+				type: "warning",
+				title: "Oh my Calc",
+				text: "Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 			});
 		},
 
 		async openForm() {
-			os.form('Example form', {
+			os.form("Example form", {
 				foo: {
-					type: 'boolean',
+					type: "boolean",
 					default: true,
-					label: 'This is a boolean property'
+					label: "This is a boolean property",
 				},
 				bar: {
-					type: 'number',
+					type: "number",
 					default: 300,
-					label: 'This is a number property'
+					label: "This is a number property",
 				},
 				baz: {
-					type: 'string',
-					default: 'Calckey makes you happy.',
-					label: 'This is a string property'
+					type: "string",
+					default: "Calckey makes you happy.",
+					label: "This is a string property",
 				},
 			});
 		},
@@ -93,24 +97,34 @@ export default defineComponent({
 		},
 
 		async openMenu(ev) {
-			os.popupMenu([{
-				type: 'label',
-				text: 'Fruits'
-			}, {
-				text: 'Create some apples',
-				action: () => {},
-			}, {
-				text: 'Read some oranges',
-				action: () => {},
-			}, {
-				text: 'Update some melons',
-				action: () => {},
-			}, null, {
-				text: 'Delete some bananas',
-				danger: true,
-				action: () => {},
-			}], ev.currentTarget ?? ev.target);
+			os.popupMenu(
+				[
+					{
+						type: "label",
+						text: "Fruits",
+					},
+					{
+						text: "Create some apples",
+						action: () => {},
+					},
+					{
+						text: "Read some oranges",
+						action: () => {},
+					},
+					{
+						text: "Update some melons",
+						action: () => {},
+					},
+					null,
+					{
+						text: "Delete some bananas",
+						danger: true,
+						action: () => {},
+					},
+				],
+				ev.currentTarget ?? ev.target
+			);
 		},
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index d03341e56..59f066f6e 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -1,72 +1,181 @@
 <template>
-<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _section _formRoot">
-		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
-		<MkInfo v-if="message">
-			{{ message }}
-		</MkInfo>
-		<div v-if="!totpLogin" class="normal-signin">
-			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
-				<template #prefix>@</template>
-				<template #suffix>@{{ host }}</template>
-			</MkInput>
-			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
-				<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
-			</MkInput>
-			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 1rem auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
-		</div>
-		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
-			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
-				<p>{{ i18n.ts.tapSecurityKey }}</p>
-				<MkButton v-if="!queryingKey" @click="queryKey">
-					{{ i18n.ts.retry }}
-				</MkButton>
-			</div>
-			<div v-if="user && user.securityKeys" class="or-hr">
-				<p class="or-msg">{{ i18n.ts.or }}</p>
-			</div>
-			<div class="twofa-group totp-group">
-				<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
-				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
-					<template #label>{{ i18n.ts.password }}</template>
-					<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+	<form
+		class="eppvobhk _monolithic_"
+		:class="{ signing, totpLogin }"
+		@submit.prevent="onSubmit"
+	>
+		<div class="auth _section _formRoot">
+			<div
+				v-show="withAvatar"
+				class="avatar"
+				:style="{
+					backgroundImage: user ? `url('${user.avatarUrl}')` : null,
+					marginBottom: message ? '1.5em' : null,
+				}"
+			></div>
+			<MkInfo v-if="message">
+				{{ message }}
+			</MkInfo>
+			<div v-if="!totpLogin" class="normal-signin">
+				<MkInput
+					v-model="username"
+					class="_formBlock"
+					:placeholder="i18n.ts.username"
+					type="text"
+					pattern="^[a-zA-Z0-9_]+$"
+					:spellcheck="false"
+					autofocus
+					required
+					data-cy-signin-username
+					@update:modelValue="onUsernameChange"
+				>
+					<template #prefix>@</template>
+					<template #suffix>@{{ host }}</template>
 				</MkInput>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
-					<template #label>{{ i18n.ts.token }}</template>
-					<template #prefix><i class="ph-poker-chip ph-bold ph-lg"></i></template>
+				<MkInput
+					v-if="!user || (user && !user.usePasswordLessLogin)"
+					v-model="password"
+					class="_formBlock"
+					:placeholder="i18n.ts.password"
+					type="password"
+					:with-password-toggle="true"
+					required
+					data-cy-signin-password
+				>
+					<template #prefix
+						><i class="ph-lock ph-bold ph-lg"></i
+					></template>
+					<template #caption
+						><button
+							class="_textButton"
+							type="button"
+							@click="resetPassword"
+						>
+							{{ i18n.ts.forgotPassword }}
+						</button></template
+					>
 				</MkInput>
-				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
+				<MkButton
+					class="_formBlock"
+					type="submit"
+					primary
+					:disabled="signing"
+					style="margin: 1rem auto"
+					>{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton
+				>
+			</div>
+			<div
+				v-if="totpLogin"
+				class="2fa-signin"
+				:class="{ securityKeys: user && user.securityKeys }"
+			>
+				<div
+					v-if="user && user.securityKeys"
+					class="twofa-group tap-group"
+				>
+					<p>{{ i18n.ts.tapSecurityKey }}</p>
+					<MkButton v-if="!queryingKey" @click="queryKey">
+						{{ i18n.ts.retry }}
+					</MkButton>
+				</div>
+				<div v-if="user && user.securityKeys" class="or-hr">
+					<p class="or-msg">{{ i18n.ts.or }}</p>
+				</div>
+				<div class="twofa-group totp-group">
+					<p style="margin-bottom: 0">
+						{{ i18n.ts.twoStepAuthentication }}
+					</p>
+					<MkInput
+						v-if="user && user.usePasswordLessLogin"
+						v-model="password"
+						type="password"
+						:with-password-toggle="true"
+						required
+					>
+						<template #label>{{ i18n.ts.password }}</template>
+						<template #prefix
+							><i class="ph-lock ph-bold ph-lg"></i
+						></template>
+					</MkInput>
+					<MkInput
+						v-model="token"
+						type="text"
+						pattern="^[0-9]{6}$"
+						autocomplete="off"
+						:spellcheck="false"
+						required
+					>
+						<template #label>{{ i18n.ts.token }}</template>
+						<template #prefix
+							><i class="ph-poker-chip ph-bold ph-lg"></i
+						></template>
+					</MkInput>
+					<MkButton
+						type="submit"
+						:disabled="signing"
+						primary
+						style="margin: 0 auto"
+						>{{
+							signing ? i18n.ts.loggingIn : i18n.ts.login
+						}}</MkButton
+					>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div class="social _section">
-		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ph-twitter-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Twitter' }) }}</a>
-		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ph-github-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'GitHub' }) }}</a>
-		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ph-discord-logo ph-bold ph-lg" style="margin-right: 4px;"></i>{{ i18n.t('signinWith', { x: 'Discord' }) }}</a>
-	</div>
-</form>
+		<div class="social _section">
+			<a
+				v-if="meta && meta.enableTwitterIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/twitter`"
+				><i
+					class="ph-twitter-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "Twitter" }) }}</a
+			>
+			<a
+				v-if="meta && meta.enableGithubIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/github`"
+				><i
+					class="ph-github-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "GitHub" }) }}</a
+			>
+			<a
+				v-if="meta && meta.enableDiscordIntegration"
+				class="_borderButton _gap"
+				:href="`${apiUrl}/signin/discord`"
+				><i
+					class="ph-discord-logo ph-bold ph-lg"
+					style="margin-right: 4px"
+				></i
+				>{{ i18n.t("signinWith", { x: "Discord" }) }}</a
+			>
+		</div>
+	</form>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import { apiUrl, host as configHost } from '@/config';
-import { byteify, hexify } from '@/scripts/2fa';
-import * as os from '@/os';
-import { login } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import { toUnicode } from "punycode/";
+import { showSuspendedDialog } from "../scripts/show-suspended-dialog";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import { apiUrl, host as configHost } from "@/config";
+import { byteify, hexify } from "@/scripts/2fa";
+import * as os from "@/os";
+import { login } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 let signing = $ref(false);
 let user = $ref(null);
-let username = $ref('');
-let password = $ref('');
-let token = $ref('');
+let username = $ref("");
+let password = $ref("");
+let token = $ref("");
 let host = $ref(toUnicode(configHost));
 let totpLogin = $ref(false);
 let credential = $ref(null);
@@ -78,7 +187,7 @@ let reCaptchaResponse = $ref(null);
 const meta = $computed(() => instance);
 
 const emit = defineEmits<{
-	(ev: 'login', v: any): void;
+	(ev: "login", v: any): void;
 }>();
 
 const props = defineProps({
@@ -95,18 +204,21 @@ const props = defineProps({
 	message: {
 		type: String,
 		required: false,
-		default: '',
+		default: "",
 	},
 });
 
 function onUsernameChange() {
-	os.api('users/show', {
+	os.api("users/show", {
 		username: username,
-	}).then(userResponse => {
-		user = userResponse;
-	}, () => {
-		user = null;
-	});
+	}).then(
+		(userResponse) => {
+			user = userResponse;
+		},
+		() => {
+			user = null;
+		}
+	);
 }
 
 function onLogin(res) {
@@ -117,105 +229,116 @@ function onLogin(res) {
 
 function queryKey() {
 	queryingKey = true;
-	return navigator.credentials.get({
-		publicKey: {
-			challenge: byteify(challengeData.challenge, 'base64'),
-			allowCredentials: challengeData.securityKeys.map(key => ({
-				id: byteify(key.id, 'hex'),
-				type: 'public-key',
-				transports: ['usb', 'nfc', 'ble', 'internal'],
-			})),
-			timeout: 60 * 1000,
-		},
-	}).catch(() => {
-		queryingKey = false;
-		return Promise.reject(null);
-	}).then(credential => {
-		queryingKey = false;
-		signing = true;
-		return os.api('signin', {
-			username,
-			password,
-			signature: hexify(credential.response.signature),
-			authenticatorData: hexify(credential.response.authenticatorData),
-			clientDataJSON: hexify(credential.response.clientDataJSON),
-			credentialId: credential.id,
-			challengeId: challengeData.challengeId,
-			'hcaptcha-response': hCaptchaResponse,
-			'g-recaptcha-response': reCaptchaResponse,
+	return navigator.credentials
+		.get({
+			publicKey: {
+				challenge: byteify(challengeData.challenge, "base64"),
+				allowCredentials: challengeData.securityKeys.map((key) => ({
+					id: byteify(key.id, "hex"),
+					type: "public-key",
+					transports: ["usb", "nfc", "ble", "internal"],
+				})),
+				timeout: 60 * 1000,
+			},
+		})
+		.catch(() => {
+			queryingKey = false;
+			return Promise.reject(null);
+		})
+		.then((credential) => {
+			queryingKey = false;
+			signing = true;
+			return os.api("signin", {
+				username,
+				password,
+				signature: hexify(credential.response.signature),
+				authenticatorData: hexify(
+					credential.response.authenticatorData
+				),
+				clientDataJSON: hexify(credential.response.clientDataJSON),
+				credentialId: credential.id,
+				challengeId: challengeData.challengeId,
+				"hcaptcha-response": hCaptchaResponse,
+				"g-recaptcha-response": reCaptchaResponse,
+			});
+		})
+		.then((res) => {
+			emit("login", res);
+			return onLogin(res);
+		})
+		.catch((err) => {
+			if (err === null) return;
+			os.alert({
+				type: "error",
+				text: i18n.ts.signinFailed,
+			});
+			signing = false;
 		});
-	}).then(res => {
-		emit('login', res);
-		return onLogin(res);
-	}).catch(err => {
-		if (err === null) return;
-		os.alert({
-			type: 'error',
-			text: i18n.ts.signinFailed,
-		});
-		signing = false;
-	});
 }
 
 function onSubmit() {
 	signing = true;
-	console.log('submit');
+	console.log("submit");
 	if (!totpLogin && user && user.twoFactorEnabled) {
 		if (window.PublicKeyCredential && user.securityKeys) {
-			os.api('signin', {
+			os.api("signin", {
 				username,
 				password,
-				'hcaptcha-response': hCaptchaResponse,
-				'g-recaptcha-response': reCaptchaResponse,
-			}).then(res => {
-				totpLogin = true;
-				signing = false;
-				challengeData = res;
-				return queryKey();
-			}).catch(loginFailed);
+				"hcaptcha-response": hCaptchaResponse,
+				"g-recaptcha-response": reCaptchaResponse,
+			})
+				.then((res) => {
+					totpLogin = true;
+					signing = false;
+					challengeData = res;
+					return queryKey();
+				})
+				.catch(loginFailed);
 		} else {
 			totpLogin = true;
 			signing = false;
 		}
 	} else {
-		os.api('signin', {
+		os.api("signin", {
 			username,
 			password,
-			'hcaptcha-response': hCaptchaResponse,
-			'g-recaptcha-response': reCaptchaResponse,
+			"hcaptcha-response": hCaptchaResponse,
+			"g-recaptcha-response": reCaptchaResponse,
 			token: user && user.twoFactorEnabled ? token : undefined,
-		}).then(res => {
-			emit('login', res);
-			onLogin(res);
-		}).catch(loginFailed);
+		})
+			.then((res) => {
+				emit("login", res);
+				onLogin(res);
+			})
+			.catch(loginFailed);
 	}
 }
 
 function loginFailed(err) {
 	switch (err.id) {
-		case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
+		case "6cc579cc-885d-43d8-95c2-b8c7fc963280": {
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: i18n.ts.noSuchUser,
 			});
 			break;
 		}
-		case '932c904e-9460-45b7-9ce6-7ed33be7eb2c': {
+		case "932c904e-9460-45b7-9ce6-7ed33be7eb2c": {
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: i18n.ts.incorrectPassword,
 			});
 			break;
 		}
-		case 'e03a5f46-d309-4865-9b69-56282d94e1eb': {
+		case "e03a5f46-d309-4865-9b69-56282d94e1eb": {
 			showSuspendedDialog();
 			break;
 		}
-		case '22d05606-fbcf-421a-a2db-b32610dcfd1b': {
+		case "22d05606-fbcf-421a-a2db-b32610dcfd1b": {
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: i18n.ts.rateLimitExceeded,
 			});
@@ -224,7 +347,7 @@ function loginFailed(err) {
 		default: {
 			console.log(err);
 			os.alert({
-				type: 'error',
+				type: "error",
 				title: i18n.ts.loginFailed,
 				text: JSON.stringify(err),
 			});
@@ -237,8 +360,12 @@ function loginFailed(err) {
 }
 
 function resetPassword() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
-	}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkForgotPassword.vue")),
+		{},
+		{},
+		"closed"
+	);
 }
 </script>
 
diff --git a/packages/client/src/components/MkSigninDialog.vue b/packages/client/src/components/MkSigninDialog.vue
index 7e35e45c5..7989255b1 100644
--- a/packages/client/src/components/MkSigninDialog.vue
+++ b/packages/client/src/components/MkSigninDialog.vue
@@ -1,45 +1,48 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	@close="onClose"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.login }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		@close="onClose"
+		@closed="emit('closed')"
+	>
+		<template #header>{{ i18n.ts.login }}</template>
 
-	<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
-</XModalWindow>
+		<MkSignin :auto-set="autoSet" :message="message" @login="onLogin" />
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkSignin from '@/components/MkSignin.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import MkSignin from "@/components/MkSignin.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-	message?: string,
-}>(), {
-	autoSet: false,
-	message: '',
-});
+const props = withDefaults(
+	defineProps<{
+		autoSet?: boolean;
+		message?: string;
+	}>(),
+	{
+		autoSet: false,
+		message: "",
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
-	(ev: 'cancelled'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
+	(ev: "cancelled"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
 function onClose() {
-	emit('cancelled');
+	emit("cancelled");
 	dialog.close();
 }
 
 function onLogin(res) {
-	emit('done', res);
+	emit("done", res);
 	dialog.close();
 }
 </script>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index b3f7f473c..7bb0952f7 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -1,93 +1,306 @@
 <template>
-<form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
-	<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required data-cy-signup-invitation-code @update:modelValue="onChangeInvitationCode">
-		<template #label>{{ i18n.ts.invitationCode }}</template>
-		<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-	</MkInput>
-	<div v-if="!instance.disableRegistration || (instance.disableRegistration && invitationState === 'entered')">
-		<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
-			<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ph-question ph-bold"></i></div></template>
-			<template #prefix>@</template>
-			<template #suffix>@{{ host }}</template>
-			<template #caption>
-				<span v-if="usernameState === 'wait'" style="color:#6e6a86"><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i> {{ i18n.ts.checking }}</span>
-				<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.available }}</span>
-				<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.unavailable }}</span>
-				<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.error }}</span>
-				<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
-				<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.tooShort }}</span>
-				<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.tooLong }}</span>
-			</template>
+	<form
+		class="qlvuhzng _formRoot"
+		autocomplete="new-password"
+		@submit.prevent="onSubmit"
+	>
+		<MkInput
+			v-if="instance.disableRegistration"
+			v-model="invitationCode"
+			class="_formBlock"
+			type="text"
+			:spellcheck="false"
+			required
+			data-cy-signup-invitation-code
+			@update:modelValue="onChangeInvitationCode"
+		>
+			<template #label>{{ i18n.ts.invitationCode }}</template>
+			<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
 		</MkInput>
-		<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
-			<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ph-question ph-bold"></i></div></template>
-			<template #prefix><i class="ph-envelope-simple-open ph-bold ph-lg"></i></template>
-			<template #caption>
-				<span v-if="emailState === 'wait'" style="color:#6e6a86"><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i> {{ i18n.ts.checking }}</span>
-				<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.available }}</span>
-				<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.used }}</span>
-				<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.format }}</span>
-				<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
-				<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
-				<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
-				<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.unavailable }}</span>
-				<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.error }}</span>
-			</template>
-		</MkInput>
-		<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
-			<template #label>{{ i18n.ts.password }}</template>
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-			<template #caption>
-				<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.weakPassword }}</span>
-				<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.normalPassword }}</span>
-				<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.strongPassword }}</span>
-			</template>
-		</MkInput>
-		<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
-			<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-			<template #caption>
-				<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.passwordMatched }}</span>
-				<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.passwordNotMatched }}</span>
-			</template>
-		</MkInput>
-		<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
-			<I18n :src="i18n.ts.agreeTo">
-				<template #0>
-					<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a>
+		<div
+			v-if="
+				!instance.disableRegistration ||
+				(instance.disableRegistration && invitationState === 'entered')
+			"
+		>
+			<MkInput
+				v-model="username"
+				class="_formBlock"
+				type="text"
+				pattern="^[a-zA-Z0-9_]{1,20}$"
+				:spellcheck="false"
+				required
+				data-cy-signup-username
+				@update:modelValue="onChangeUsername"
+			>
+				<template #label
+					>{{ i18n.ts.username }}
+					<div
+						v-tooltip:dialog="i18n.ts.usernameInfo"
+						class="_button _help"
+					>
+						<i class="ph-question ph-bold"></i></div
+				></template>
+				<template #prefix>@</template>
+				<template #suffix>@{{ host }}</template>
+				<template #caption>
+					<span v-if="usernameState === 'wait'" style="color: #6e6a86"
+						><i
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i>
+						{{ i18n.ts.checking }}</span
+					>
+					<span
+						v-else-if="usernameState === 'ok'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.available }}</span
+					>
+					<span
+						v-else-if="usernameState === 'unavailable'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.unavailable }}</span
+					>
+					<span
+						v-else-if="usernameState === 'error'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.error }}</span
+					>
+					<span
+						v-else-if="usernameState === 'invalid-format'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.usernameInvalidFormat }}</span
+					>
+					<span
+						v-else-if="usernameState === 'min-range'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.tooShort }}</span
+					>
+					<span
+						v-else-if="usernameState === 'max-range'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.tooLong }}</span
+					>
 				</template>
-			</I18n>
-		</MkSwitch>
-		<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
-		<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
-		<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
-	</div>
-</form>
+			</MkInput>
+			<MkInput
+				v-if="instance.emailRequiredForSignup"
+				v-model="email"
+				class="_formBlock"
+				:debounce="true"
+				type="email"
+				:spellcheck="false"
+				required
+				data-cy-signup-email
+				@update:modelValue="onChangeEmail"
+			>
+				<template #label
+					>{{ i18n.ts.emailAddress }}
+					<div
+						v-tooltip:dialog="i18n.ts._signup.emailAddressInfo"
+						class="_button _help"
+					>
+						<i class="ph-question ph-bold"></i></div
+				></template>
+				<template #prefix
+					><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+				></template>
+				<template #caption>
+					<span v-if="emailState === 'wait'" style="color: #6e6a86"
+						><i
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i>
+						{{ i18n.ts.checking }}</span
+					>
+					<span
+						v-else-if="emailState === 'ok'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.available }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:used'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.used }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:format'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.format }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:disposable'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.disposable }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:mx'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.mx }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable:smtp'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts._emailUnavailable.smtp }}</span
+					>
+					<span
+						v-else-if="emailState === 'unavailable'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.unavailable }}</span
+					>
+					<span
+						v-else-if="emailState === 'error'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.error }}</span
+					>
+				</template>
+			</MkInput>
+			<MkInput
+				v-model="password"
+				class="_formBlock"
+				type="password"
+				autocomplete="new-password"
+				required
+				data-cy-signup-password
+				@update:modelValue="onChangePassword"
+			>
+				<template #label>{{ i18n.ts.password }}</template>
+				<template #prefix
+					><i class="ph-lock ph-bold ph-lg"></i
+				></template>
+				<template #caption>
+					<span
+						v-if="passwordStrength == 'low'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.weakPassword }}</span
+					>
+					<span
+						v-if="passwordStrength == 'medium'"
+						style="color: var(--warn)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.normalPassword }}</span
+					>
+					<span
+						v-if="passwordStrength == 'high'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.strongPassword }}</span
+					>
+				</template>
+			</MkInput>
+			<MkInput
+				v-model="retypedPassword"
+				class="_formBlock"
+				type="password"
+				autocomplete="new-password"
+				required
+				data-cy-signup-password-retype
+				@update:modelValue="onChangePasswordRetype"
+			>
+				<template #label
+					>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template
+				>
+				<template #prefix
+					><i class="ph-lock ph-bold ph-lg"></i
+				></template>
+				<template #caption>
+					<span
+						v-if="passwordRetypeState == 'match'"
+						style="color: var(--success)"
+						><i class="ph-check ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.passwordMatched }}</span
+					>
+					<span
+						v-if="passwordRetypeState == 'not-match'"
+						style="color: var(--error)"
+						><i class="ph-warning ph-bold ph-lg ph-fw ph-lg"></i>
+						{{ i18n.ts.passwordNotMatched }}</span
+					>
+				</template>
+			</MkInput>
+			<MkSwitch
+				v-if="instance.tosUrl"
+				v-model="ToSAgreement"
+				class="_formBlock tou"
+			>
+				<I18n :src="i18n.ts.agreeTo">
+					<template #0>
+						<a
+							:href="instance.tosUrl"
+							class="_link"
+							target="_blank"
+							>{{ i18n.ts.tos }}</a
+						>
+					</template>
+				</I18n>
+			</MkSwitch>
+			<MkCaptcha
+				v-if="instance.enableHcaptcha"
+				ref="hcaptcha"
+				v-model="hCaptchaResponse"
+				class="_formBlock captcha"
+				provider="hcaptcha"
+				:sitekey="instance.hcaptchaSiteKey"
+			/>
+			<MkCaptcha
+				v-if="instance.enableRecaptcha"
+				ref="recaptcha"
+				v-model="reCaptchaResponse"
+				class="_formBlock captcha"
+				provider="recaptcha"
+				:sitekey="instance.recaptchaSiteKey"
+			/>
+			<MkButton
+				class="_formBlock"
+				type="submit"
+				:disabled="shouldDisableSubmitting"
+				gradate
+				data-cy-signup-submit
+				>{{ i18n.ts.start }}</MkButton
+			>
+		</div>
+	</form>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import getPasswordStrength from 'syuilo-password-strength';
-import { toUnicode } from 'punycode/';
-import MkButton from './MkButton.vue';
-import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
-import MkCaptcha from '@/components/MkCaptcha.vue';
-import * as config from '@/config';
-import * as os from '@/os';
-import { login } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import getPasswordStrength from "syuilo-password-strength";
+import { toUnicode } from "punycode/";
+import MkButton from "./MkButton.vue";
+import MkInput from "./form/input.vue";
+import MkSwitch from "./form/switch.vue";
+import MkCaptcha from "@/components/MkCaptcha.vue";
+import * as config from "@/config";
+import * as os from "@/os";
+import { login } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-}>(), {
-	autoSet: false,
-});
+const props = withDefaults(
+	defineProps<{
+		autoSet?: boolean;
+	}>(),
+	{
+		autoSet: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'signup', user: Record<string, any>): void;
-	(ev: 'signupEmailPending'): void;
+	(ev: "signup", user: Record<string, any>): void;
+	(ev: "signupEmailPending"): void;
 }>();
 
 const host = toUnicode(config.host);
@@ -95,49 +308,71 @@ const host = toUnicode(config.host);
 let hcaptcha = $ref();
 let recaptcha = $ref();
 
-let username: string = $ref('');
-let password: string = $ref('');
-let retypedPassword: string = $ref('');
-let invitationCode: string = $ref('');
-let email = $ref('');
-let usernameState: null | 'wait' | 'ok' | 'unavailable' | 'error' | 'invalid-format' | 'min-range' | 'max-range' = $ref(null);
-let invitationState: null | 'entered' = $ref(null);
-let emailState: null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:format' | 'unavailable:disposable' | 'unavailable:mx' | 'unavailable:smtp' | 'unavailable' | 'error' = $ref(null);
-let passwordStrength: '' | 'low' | 'medium' | 'high' = $ref('');
-let passwordRetypeState: null | 'match' | 'not-match' = $ref(null);
+let username: string = $ref("");
+let password: string = $ref("");
+let retypedPassword: string = $ref("");
+let invitationCode: string = $ref("");
+let email = $ref("");
+let usernameState:
+	| null
+	| "wait"
+	| "ok"
+	| "unavailable"
+	| "error"
+	| "invalid-format"
+	| "min-range"
+	| "max-range" = $ref(null);
+let invitationState: null | "entered" = $ref(null);
+let emailState:
+	| null
+	| "wait"
+	| "ok"
+	| "unavailable:used"
+	| "unavailable:format"
+	| "unavailable:disposable"
+	| "unavailable:mx"
+	| "unavailable:smtp"
+	| "unavailable"
+	| "error" = $ref(null);
+let passwordStrength: "" | "low" | "medium" | "high" = $ref("");
+let passwordRetypeState: null | "match" | "not-match" = $ref(null);
 let submitting: boolean = $ref(false);
 let ToSAgreement: boolean = $ref(false);
 let hCaptchaResponse = $ref(null);
 let reCaptchaResponse = $ref(null);
 
 const shouldDisableSubmitting = $computed((): boolean => {
-	return submitting ||
-		instance.tosUrl && !ToSAgreement ||
-		instance.enableHcaptcha && !hCaptchaResponse ||
-		instance.enableRecaptcha && !reCaptchaResponse ||
-		passwordRetypeState === 'not-match';
+	return (
+		submitting ||
+		(instance.tosUrl && !ToSAgreement) ||
+		(instance.enableHcaptcha && !hCaptchaResponse) ||
+		(instance.enableRecaptcha && !reCaptchaResponse) ||
+		passwordRetypeState === "not-match"
+	);
 });
 
 function onChangeInvitationCode(): void {
-	if (invitationCode === '') {
+	if (invitationCode === "") {
 		invitationState = null;
 		return;
 	}
-	invitationState = 'entered';
+	invitationState = "entered";
 }
 
 function onChangeUsername(): void {
-	if (username === '') {
+	if (username === "") {
 		usernameState = null;
 		return;
 	}
 
 	{
-		const err =
-			!username.match(/^[a-zA-Z0-9_]+$/) ? 'invalid-format' :
-			username.length < 1 ? 'min-range' :
-			username.length > 20 ? 'max-range' :
-			null;
+		const err = !username.match(/^[a-zA-Z0-9_]+$/)
+			? "invalid-format"
+			: username.length < 1
+			? "min-range"
+			: username.length > 20
+			? "max-range"
+			: null;
 
 		if (err) {
 			usernameState = err;
@@ -145,100 +380,113 @@ function onChangeUsername(): void {
 		}
 	}
 
-	usernameState = 'wait';
+	usernameState = "wait";
 
-	os.api('username/available', {
+	os.api("username/available", {
 		username,
-	}).then(result => {
-		usernameState = result.available ? 'ok' : 'unavailable';
-	}).catch(() => {
-		usernameState = 'error';
-	});
+	})
+		.then((result) => {
+			usernameState = result.available ? "ok" : "unavailable";
+		})
+		.catch(() => {
+			usernameState = "error";
+		});
 }
 
 function onChangeEmail(): void {
-	if (email === '') {
+	if (email === "") {
 		emailState = null;
 		return;
 	}
 
-	emailState = 'wait';
+	emailState = "wait";
 
-	os.api('email-address/available', {
+	os.api("email-address/available", {
 		emailAddress: email,
-	}).then(result => {
-		emailState = result.available ? 'ok' :
-			result.reason === 'used' ? 'unavailable:used' :
-			result.reason === 'format' ? 'unavailable:format' :
-			result.reason === 'disposable' ? 'unavailable:disposable' :
-			result.reason === 'mx' ? 'unavailable:mx' :
-			result.reason === 'smtp' ? 'unavailable:smtp' :
-			'unavailable';
-	}).catch(() => {
-		emailState = 'error';
-	});
+	})
+		.then((result) => {
+			emailState = result.available
+				? "ok"
+				: result.reason === "used"
+				? "unavailable:used"
+				: result.reason === "format"
+				? "unavailable:format"
+				: result.reason === "disposable"
+				? "unavailable:disposable"
+				: result.reason === "mx"
+				? "unavailable:mx"
+				: result.reason === "smtp"
+				? "unavailable:smtp"
+				: "unavailable";
+		})
+		.catch(() => {
+			emailState = "error";
+		});
 }
 
 function onChangePassword(): void {
-	if (password === '') {
-		passwordStrength = '';
+	if (password === "") {
+		passwordStrength = "";
 		return;
 	}
 
 	const strength = getPasswordStrength(password);
-	passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
+	passwordStrength =
+		strength > 0.7 ? "high" : strength > 0.3 ? "medium" : "low";
 }
 
 function onChangePasswordRetype(): void {
-	if (retypedPassword === '') {
+	if (retypedPassword === "") {
 		passwordRetypeState = null;
 		return;
 	}
 
-	passwordRetypeState = password === retypedPassword ? 'match' : 'not-match';
+	passwordRetypeState = password === retypedPassword ? "match" : "not-match";
 }
 
 function onSubmit(): void {
 	if (submitting) return;
 	submitting = true;
 
-	os.api('signup', {
+	os.api("signup", {
 		username,
 		password,
 		emailAddress: email,
 		invitationCode,
-		'hcaptcha-response': hCaptchaResponse,
-		'g-recaptcha-response': reCaptchaResponse,
-	}).then(() => {
-		if (instance.emailRequiredForSignup) {
+		"hcaptcha-response": hCaptchaResponse,
+		"g-recaptcha-response": reCaptchaResponse,
+	})
+		.then(() => {
+			if (instance.emailRequiredForSignup) {
+				os.alert({
+					type: "success",
+					title: i18n.ts._signup.almostThere,
+					text: i18n.t("_signup.emailSent", { email }),
+				});
+				emit("signupEmailPending");
+			} else {
+				os.api("signin", {
+					username,
+					password,
+				}).then((res) => {
+					emit("signup", res);
+
+					if (props.autoSet) {
+						login(res.i);
+					}
+				});
+			}
+		})
+		.catch(() => {
+			submitting = false;
+			hcaptcha.reset?.();
+			recaptcha.reset?.();
+
 			os.alert({
-				type: 'success',
-				title: i18n.ts._signup.almostThere,
-				text: i18n.t('_signup.emailSent', { email }),
+				type: "error",
+				text: i18n.ts.somethingHappened,
 			});
-			emit('signupEmailPending');
-		} else {
-			os.api('signin', {
-				username,
-				password,
-			}).then(res => {
-				emit('signup', res);
-
-				if (props.autoSet) {
-					login(res.i);
-				}
-			});
-		}
-	}).catch(() => {
-		submitting = false;
-		hcaptcha.reset?.();
-		recaptcha.reset?.();
-
-		os.alert({
-			type: 'error',
-			text: i18n.ts.somethingHappened,
 		});
-	});
 }
 </script>
 
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
index 8aceb62d1..282b8f989 100644
--- a/packages/client/src/components/MkSignupDialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -1,41 +1,48 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	@close="dialog!.close()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.signup }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		@close="dialog!.close()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.signup }}</template>
 
-	<div class="_monolithic_">
-		<div class="_section">
-			<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
+		<div class="_monolithic_">
+			<div class="_section">
+				<XSignup
+					:auto-set="autoSet"
+					@signup="onSignup"
+					@signup-email-pending="onSignupEmailPending"
+				/>
+			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XSignup from '@/components/MkSignup.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XSignup from "@/components/MkSignup.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-}>(), {
-	autoSet: false,
-});
+const props = withDefaults(
+	defineProps<{
+		autoSet?: boolean;
+	}>(),
+	{
+		autoSet: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
 function onSignup(res) {
-	emit('done', res);
+	emit("done", res);
 	dialog?.close();
 }
 
diff --git a/packages/client/src/components/MkSparkle.vue b/packages/client/src/components/MkSparkle.vue
index 2311adce8..a5a9053d2 100644
--- a/packages/client/src/components/MkSparkle.vue
+++ b/packages/client/src/components/MkSparkle.vue
@@ -1,9 +1,9 @@
 <template>
-<span class="mk-sparkle">
-	<span ref="el">
-		<slot></slot>
-	</span>
-	<!-- なぜか path に対する key が機能しないため
+	<span class="mk-sparkle">
+		<span ref="el">
+			<slot></slot>
+		</span>
+		<!-- なぜか path に対する key が機能しないため
 	<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
 		<path v-for="particle in particles" :key="particle.id" style="transform-origin: center; transform-box: fill-box;"
 			:transform="`translate(${particle.x} ${particle.y})`"
@@ -32,46 +32,53 @@
 		</path>
 	</svg>
 	-->
-	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
-		<path
-			style="transform-origin: center; transform-box: fill-box;"
-			:transform="`translate(${particle.x} ${particle.y})`"
-			:fill="particle.color"
-			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+		<svg
+			v-for="particle in particles"
+			:key="particle.id"
+			:width="width"
+			:height="height"
+			:viewBox="`0 0 ${width} ${height}`"
+			xmlns="http://www.w3.org/2000/svg"
 		>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="rotate"
-				from="0 0 0"
-				to="360 0 0"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="scale"
-				:values="`0; ${particle.size}; 0`"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-		</path>
-	</svg>
-</span>
+			<path
+				style="transform-origin: center; transform-box: fill-box"
+				:transform="`translate(${particle.x} ${particle.y})`"
+				:fill="particle.color"
+				d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					from="0 0 0"
+					to="360 0 0"
+					:dur="`${particle.dur}ms`"
+					repeatCount="1"
+					additive="sum"
+				/>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="scale"
+					:values="`0; ${particle.size}; 0`"
+					:dur="`${particle.dur}ms`"
+					repeatCount="1"
+					additive="sum"
+				/>
+			</path>
+		</svg>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { reducedMotion } from '@/scripts/reduced-motion';
+import { onMounted, onUnmounted, ref } from "vue";
+import { reducedMotion } from "@/scripts/reduced-motion";
 
 const particles = ref([]);
 const el = ref<HTMLElement>();
 const width = ref(0);
 const height = ref(0);
-const colors = ['#eb6f92', '#9ccfd8', '#f6c177', '#f6c177', '#f6c177'];
+const colors = ["#eb6f92", "#9ccfd8", "#f6c177", "#f6c177", "#f6c177"];
 let stop = false;
 let ro: ResizeObserver | undefined;
 
@@ -84,25 +91,27 @@ onMounted(() => {
 		ro.observe(el.value);
 		const add = () => {
 			if (stop) return;
-			const x = (Math.random() * (width.value - 64));
-			const y = (Math.random() * (height.value - 64));
+			const x = Math.random() * (width.value - 64);
+			const y = Math.random() * (height.value - 64);
 			const sizeFactor = Math.random();
 			const particle = {
 				id: Math.random().toString(),
 				x,
 				y,
-				size: 0.2 + ((sizeFactor / 10) * 3),
-				dur: 1000 + (sizeFactor * 1000),
+				size: 0.2 + (sizeFactor / 10) * 3,
+				dur: 1000 + sizeFactor * 1000,
 				color: colors[Math.floor(Math.random() * colors.length)],
 			};
 			particles.value.push(particle);
 			window.setTimeout(() => {
-				particles.value = particles.value.filter(x => x.id !== particle.id);
+				particles.value = particles.value.filter(
+					(x) => x.id !== particle.id
+				);
 			}, particle.dur - 100);
 
 			window.setTimeout(() => {
 				add();
-			}, 500 + (Math.random() * 500));
+			}, 500 + Math.random() * 500);
 		};
 		add();
 	}
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
index 9327e1dd4..a8bf79c40 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -1,25 +1,50 @@
 <template>
-<button v-tooltip.noDelay.bottom="i18n.ts._gallery.like" class="skdfgljsdkf _button" @click="star($event)">
-	<svg v-if="defaultStore.state.woozyMode === true" width="1.1em" height="1.1em" viewBox="0 0 36 36"><g fill="currentColor">
-		<path d="m17.809-0.20898c-9.9294 2.3e-7 -18 8.0706-18 18 5.8e-7 9.9294 8.0706 18 18 18 9.9294 0 18-8.0706 18-18 0-9.9294-8.0706-18-18-18zm0 1.9785c8.8604 1e-7 16.021 7.1611 16.021 16.021 0 8.8604-7.1611 16.023-16.021 16.023-8.8604 0-16.021-7.163-16.021-16.023-3e-7 -8.8604 7.1611-16.021 16.021-16.021z"/>
-		<path d="m6.001 11c-0.552 0-1-0.448-1-1 0-0.551 0.445-0.998 0.996-1 0.156-2e-3 3.569-0.086 6.205-3.6 0.331-0.44 0.957-0.532 1.4-0.2 0.442 0.331 0.531 0.958 0.2 1.4-3.263 4.35-7.617 4.4-7.801 4.4zm24.986 2.393c0.128 0.537-0.204 1.077-0.741 1.205-0.536 0.128-1.074-0.202-1.204-0.737-0.038-0.151-0.911-3.452-4.941-5.201-0.505-0.22-0.739-0.808-0.519-1.315s0.809-0.739 1.315-0.519c4.989 2.165 6.047 6.388 6.09 6.567z"/>
-		<path d="m23.186 29.526c-0.993 0-1.952-0.455-2.788-1.339-2.816-2.985-3.569-2.333-4.817-1.251-0.781 0.679-1.754 1.523-3.205 1.523-2.351 0-3.969-2.302-4.036-2.4-0.314-0.454-0.2-1.077 0.254-1.391 0.451-0.312 1.074-0.2 1.39 0.251 0.301 0.429 1.317 1.54 2.393 1.54 0.704 0 1.256-0.479 1.895-1.033 1.816-1.578 3.764-2.655 7.583 1.388 0.823 0.873 1.452 0.774 1.908 0.592 1.659-0.665 3.205-3.698 3.197-5.15-3e-3 -0.552 0.442-1.002 0.994-1.005h6e-3c0.55 0 0.997 0.444 1 0.995 0.012 2.103-1.854 5.976-4.454 7.017-0.443 0.175-0.885 0.262-1.32 0.263z"/>
-		<path d="m14.815 15.375c-0.584 2.114-1.642 3.083-3.152 2.666-1.509-0.417-2.343-1.909-1.76-4.023 0.583-2.112 2.175-3.363 3.684-2.946 1.511 0.417 1.812 2.19 1.228 4.303zm11.416-0.755c0.473 2.141-0.675 4.838-2.204 5.176s-3.28-1.719-3.753-3.86c-0.473-2.14 0.419-3.971 1.948-4.309s3.536 0.853 4.009 2.993z"/>
-	</g></svg>
-	<i v-else-if="instance.defaultReaction === '👍'" class="ph-thumbs-up ph-bold ph-lg"></i>
-	<i v-else-if="instance.defaultReaction === '❤️'" class="ph-heart ph-bold ph-lg"></i>
-	<i v-else class="ph-star ph-bold ph-lg"></i>
-</button>
+	<button
+		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
+		class="skdfgljsdkf _button"
+		@click="star($event)"
+	>
+		<svg
+			v-if="defaultStore.state.woozyMode === true"
+			width="1.1em"
+			height="1.1em"
+			viewBox="0 0 36 36"
+		>
+			<g fill="currentColor">
+				<path
+					d="m17.809-0.20898c-9.9294 2.3e-7 -18 8.0706-18 18 5.8e-7 9.9294 8.0706 18 18 18 9.9294 0 18-8.0706 18-18 0-9.9294-8.0706-18-18-18zm0 1.9785c8.8604 1e-7 16.021 7.1611 16.021 16.021 0 8.8604-7.1611 16.023-16.021 16.023-8.8604 0-16.021-7.163-16.021-16.023-3e-7 -8.8604 7.1611-16.021 16.021-16.021z"
+				/>
+				<path
+					d="m6.001 11c-0.552 0-1-0.448-1-1 0-0.551 0.445-0.998 0.996-1 0.156-2e-3 3.569-0.086 6.205-3.6 0.331-0.44 0.957-0.532 1.4-0.2 0.442 0.331 0.531 0.958 0.2 1.4-3.263 4.35-7.617 4.4-7.801 4.4zm24.986 2.393c0.128 0.537-0.204 1.077-0.741 1.205-0.536 0.128-1.074-0.202-1.204-0.737-0.038-0.151-0.911-3.452-4.941-5.201-0.505-0.22-0.739-0.808-0.519-1.315s0.809-0.739 1.315-0.519c4.989 2.165 6.047 6.388 6.09 6.567z"
+				/>
+				<path
+					d="m23.186 29.526c-0.993 0-1.952-0.455-2.788-1.339-2.816-2.985-3.569-2.333-4.817-1.251-0.781 0.679-1.754 1.523-3.205 1.523-2.351 0-3.969-2.302-4.036-2.4-0.314-0.454-0.2-1.077 0.254-1.391 0.451-0.312 1.074-0.2 1.39 0.251 0.301 0.429 1.317 1.54 2.393 1.54 0.704 0 1.256-0.479 1.895-1.033 1.816-1.578 3.764-2.655 7.583 1.388 0.823 0.873 1.452 0.774 1.908 0.592 1.659-0.665 3.205-3.698 3.197-5.15-3e-3 -0.552 0.442-1.002 0.994-1.005h6e-3c0.55 0 0.997 0.444 1 0.995 0.012 2.103-1.854 5.976-4.454 7.017-0.443 0.175-0.885 0.262-1.32 0.263z"
+				/>
+				<path
+					d="m14.815 15.375c-0.584 2.114-1.642 3.083-3.152 2.666-1.509-0.417-2.343-1.909-1.76-4.023 0.583-2.112 2.175-3.363 3.684-2.946 1.511 0.417 1.812 2.19 1.228 4.303zm11.416-0.755c0.473 2.141-0.675 4.838-2.204 5.176s-3.28-1.719-3.753-3.86c-0.473-2.14 0.419-3.971 1.948-4.309s3.536 0.853 4.009 2.993z"
+				/>
+			</g>
+		</svg>
+		<i
+			v-else-if="instance.defaultReaction === '👍'"
+			class="ph-thumbs-up ph-bold ph-lg"
+		></i>
+		<i
+			v-else-if="instance.defaultReaction === '❤️'"
+			class="ph-heart ph-bold ph-lg"
+		></i>
+		<i v-else class="ph-star ph-bold ph-lg"></i>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import type { Note } from 'calckey-js/built/entities';
-import Ripple from '@/components/MkRipple.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import type { Note } from "calckey-js/built/entities";
+import Ripple from "@/components/MkRipple.vue";
+import { pleaseLogin } from "@/scripts/please-login";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
 const props = defineProps<{
 	note: Note;
@@ -27,16 +52,21 @@ const props = defineProps<{
 
 function star(ev?: MouseEvent): void {
 	pleaseLogin();
-	os.api('notes/reactions/create', {
+	os.api("notes/reactions/create", {
 		noteId: props.note.id,
-		reaction: defaultStore.state.woozyMode === true ? '🥴' : instance.defaultReaction,
+		reaction:
+			defaultStore.state.woozyMode === true
+				? "🥴"
+				: instance.defaultReaction,
 	});
-	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+	const el =
+		ev &&
+		((ev.currentTarget ?? ev.target) as HTMLElement | null | undefined);
 	if (el) {
 		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(Ripple, { x, y }, {}, 'end');
+		const x = rect.left + el.offsetWidth / 2;
+		const y = rect.top + el.offsetHeight / 2;
+		os.popup(Ripple, { x, y }, {}, "end");
 	}
 }
 </script>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index fa421d10f..58accefc1 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -1,50 +1,90 @@
 <template>
-<div class="wrmlmaau" :class="{ collapsed, isLong }">
-	<div class="body">
-		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<template v-if="!note.cw">
-			<MkA v-if="note.replyId"  :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
-				<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
-			</MkA>
-			<MkA v-if="conversation && note.renoteId && note.renoteId != parentId && !note.replyId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
-				<i class="ph-quotes ph-bold ph-lg"></i>
-			</MkA>
-		</template>
-		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
-	</div>
-	<div v-if="note.files.length > 0">
-		<XMediaList :media-list="note.files"/>
-	</div>
-	<div v-if="note.poll">
-		<summary>{{ i18n.ts.poll }}</summary>
-		<XPoll :note="note"/>
-	</div>
-	<template v-if="detailed">
-		<!-- <div v-if="note.renoteId" class="renote">
+	<div class="wrmlmaau" :class="{ collapsed, isLong }">
+		<div class="body">
+			<span v-if="note.deletedAt" style="opacity: 0.5"
+				>({{ i18n.ts.deleted }})</span
+			>
+			<template v-if="!note.cw">
+				<MkA
+					v-if="note.replyId"
+					:to="`/notes/${note.replyId}`"
+					class="reply-icon"
+					@click.stop
+				>
+					<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
+				</MkA>
+				<MkA
+					v-if="
+						conversation &&
+						note.renoteId &&
+						note.renoteId != parentId &&
+						!note.replyId
+					"
+					:to="`/notes/${note.renoteId}`"
+					class="reply-icon"
+					@click.stop
+				>
+					<i class="ph-quotes ph-bold ph-lg"></i>
+				</MkA>
+			</template>
+			<Mfm
+				v-if="note.text"
+				:text="note.text"
+				:author="note.user"
+				:i="$i"
+				:custom-emojis="note.emojis"
+			/>
+			<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`"
+				>{{ i18n.ts.quoteAttached }}: ...</MkA
+			>
+		</div>
+		<div v-if="note.files.length > 0">
+			<XMediaList :media-list="note.files" />
+		</div>
+		<div v-if="note.poll">
+			<summary>{{ i18n.ts.poll }}</summary>
+			<XPoll :note="note" />
+		</div>
+		<template v-if="detailed">
+			<!-- <div v-if="note.renoteId" class="renote">
 			<XNoteSimple :note="note.renote"/>
 		</div> -->
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-	</template>
-	<button v-if="isLong && collapsed" class="fade _button" @click.stop="collapsed = false">
-		<span>{{ i18n.ts.showMore }}</span>
-	</button>
-	<button v-if="isLong && !collapsed" class="showLess _button" @click.stop="collapsed = true">
-		<span>{{ i18n.ts.showLess }}</span>
-	</button>
-</div>
+			<MkUrlPreview
+				v-for="url in urls"
+				:key="url"
+				:url="url"
+				:compact="true"
+				:detail="false"
+				class="url-preview"
+			/>
+		</template>
+		<button
+			v-if="isLong && collapsed"
+			class="fade _button"
+			@click.stop="collapsed = false"
+		>
+			<span>{{ i18n.ts.showMore }}</span>
+		</button>
+		<button
+			v-if="isLong && !collapsed"
+			class="showLess _button"
+			@click.stop="collapsed = true"
+		>
+			<span>{{ i18n.ts.showLess }}</span>
+		</button>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import * as mfm from 'mfm-js';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import * as mfm from "mfm-js";
+import XNoteSimple from "@/components/MkNoteSimple.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XPoll from "@/components/MkPoll.vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -53,21 +93,20 @@ const props = defineProps<{
 	detailed?: boolean;
 }>();
 
-const isLong = (
-	props.note.cw == null && props.note.text != null && (
-		(props.note.text.split('\n').length > 9) ||
-		(props.note.text.length > 500)
-	)
-);
+const isLong =
+	props.note.cw == null &&
+	props.note.text != null &&
+	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
 const collapsed = $ref(props.note.cw == null && isLong);
-const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : null;
-
+const urls = props.note.text
+	? extractUrlFromMfm(mfm.parse(props.note.text))
+	: null;
 </script>
 
 <style lang="scss" scoped>
 .wrmlmaau {
 	overflow-wrap: break-word;
-	
+
 	> .body {
 		> .rp {
 			margin-left: 4px;
@@ -77,11 +116,12 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
 		.reply-icon {
 			display: inline-block;
 			border-radius: 6px;
-			padding: .2em .2em;
-			margin-right: .2em;
+			padding: 0.2em 0.2em;
+			margin-right: 0.2em;
 			color: var(--accent);
-			transition: background .2s;
-			&:hover, &:focus {
+			transition: background 0.2s;
+			&:hover,
+			&:focus {
 				background: var(--buttonHoverBg);
 			}
 		}
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index 6e73b4959..55d6fba50 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -1,30 +1,62 @@
 <template>
-<div class="rrevdjwu" :class="{ grid }">
-	<div v-for="group in def" class="group">
-		<div v-if="group.title" class="title">{{ group.title }}</div>
+	<div class="rrevdjwu" :class="{ grid }">
+		<div v-for="group in def" class="group">
+			<div v-if="group.title" class="title">{{ group.title }}</div>
 
-		<div class="items">
-			<template v-for="(item, i) in group.items">
-				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ph-fw ph-lg" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</a>
-				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<i v-if="item.icon" class="icon ph-fw ph-lg" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</button>
-				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ph-fw ph-lg" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</MkA>
-			</template>
+			<div class="items">
+				<template v-for="(item, i) in group.items">
+					<a
+						v-if="item.type === 'a'"
+						:href="item.href"
+						:target="item.target"
+						:tabindex="i"
+						class="_button item"
+						:class="{ danger: item.danger, active: item.active }"
+					>
+						<i
+							v-if="item.icon"
+							class="icon ph-fw ph-lg"
+							:class="item.icon"
+						></i>
+						<span class="text">{{ item.text }}</span>
+					</a>
+					<button
+						v-else-if="item.type === 'button'"
+						:tabindex="i"
+						class="_button item"
+						:class="{ danger: item.danger, active: item.active }"
+						:disabled="item.active"
+						@click="(ev) => item.action(ev)"
+					>
+						<i
+							v-if="item.icon"
+							class="icon ph-fw ph-lg"
+							:class="item.icon"
+						></i>
+						<span class="text">{{ item.text }}</span>
+					</button>
+					<MkA
+						v-else
+						:to="item.to"
+						:tabindex="i"
+						class="_button item"
+						:class="{ danger: item.danger, active: item.active }"
+					>
+						<i
+							v-if="item.icon"
+							class="icon ph-fw ph-lg"
+							:class="item.icon"
+						></i>
+						<span class="text">{{ item.text }}</span>
+					</MkA>
+				</template>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, unref } from 'vue';
+import { defineComponent, ref, unref } from "vue";
 
 export default defineComponent({
 	props: {
@@ -95,7 +127,6 @@ export default defineComponent({
 					overflow: hidden;
 					padding-right: 12px;
 				}
-
 			}
 		}
 	}
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index a8e8cbc0f..de3ef290b 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
+import { defineComponent, h, resolveDirective, withDirectives } from "vue";
 
 export default defineComponent({
 	props: {
@@ -10,18 +10,38 @@ export default defineComponent({
 	render() {
 		const options = this.$slots.default();
 
-		return h('div', {
-			class: 'pxhvhrfw',
-		}, options.map(option => withDirectives(h('button', {
-			class: ['_button', { active: this.modelValue === option.props?.value }],
-			key: option.key,
-			disabled: this.modelValue === option.props?.value,
-			onClick: () => {
-				this.$emit('update:modelValue', option.props?.value);
+		return h(
+			"div",
+			{
+				class: "pxhvhrfw",
 			},
-		}, option.children), [
-			[resolveDirective('click-anime')],
-		])));
+			options.map((option) =>
+				withDirectives(
+					h(
+						"button",
+						{
+							class: [
+								"_button",
+								{
+									active:
+										this.modelValue === option.props?.value,
+								},
+							],
+							key: option.key,
+							disabled: this.modelValue === option.props?.value,
+							onClick: () => {
+								this.$emit(
+									"update:modelValue",
+									option.props?.value
+								);
+							},
+						},
+						option.children
+					),
+					[[resolveDirective("click-anime")]]
+				)
+			)
+		);
 	},
 });
 </script>
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue
index 2dfd26edb..ec0e8d184 100644
--- a/packages/client/src/components/MkTagCloud.vue
+++ b/packages/client/src/components/MkTagCloud.vue
@@ -1,23 +1,44 @@
 <template>
-<div ref="rootEl" class="meijqfqm">
-	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
-	<div :id="idForTags" ref="tagsEl" class="tags">
-		<ul>
-			<slot></slot>
-		</ul>
+	<div ref="rootEl" class="meijqfqm">
+		<canvas
+			:id="idForCanvas"
+			ref="canvasEl"
+			class="canvas"
+			:width="width"
+			height="300"
+			@contextmenu.prevent="() => {}"
+		></canvas>
+		<div :id="idForTags" ref="tagsEl" class="tags">
+			<ul>
+				<slot></slot>
+			</ul>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch, PropType, onBeforeUnmount } from 'vue';
-import tinycolor from 'tinycolor2';
+import { onMounted, ref, watch, PropType, onBeforeUnmount } from "vue";
+import tinycolor from "tinycolor2";
 
 const loaded = !!window.TagCanvas;
-const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
+const SAFE_FOR_HTML_ID = "abcdefghijklmnopqrstuvwxyz";
 const computedStyle = getComputedStyle(document.documentElement);
-const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+const idForCanvas = Array.from(Array(16))
+	.map(
+		() =>
+			SAFE_FOR_HTML_ID[
+				Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)
+			]
+	)
+	.join("");
+const idForTags = Array.from(Array(16))
+	.map(
+		() =>
+			SAFE_FOR_HTML_ID[
+				Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)
+			]
+	)
+	.join("");
 let available = $ref(false);
 let rootEl = $ref<HTMLElement | null>(null);
 let canvasEl = $ref<HTMLCanvasElement | null>(null);
@@ -27,10 +48,12 @@ let width = $ref(300);
 watch($$(available), () => {
 	try {
 		window.TagCanvas.Start(idForCanvas, idForTags, {
-			textColour: '#ffffff',
-			outlineColour: tinycolor(computedStyle.getPropertyValue('--accent')).toHexString(),
+			textColour: "#ffffff",
+			outlineColour: tinycolor(
+				computedStyle.getPropertyValue("--accent")
+			).toHexString(),
 			outlineRadius: 10,
-			initial: [-0.030, -0.010],
+			initial: [-0.03, -0.01],
 			frontSelect: true,
 			imageRadius: 8,
 			//dragControl: true,
@@ -52,10 +75,14 @@ onMounted(() => {
 	if (loaded) {
 		available = true;
 	} else {
-		document.head.appendChild(Object.assign(document.createElement('script'), {
-			async: true,
-			src: '/client-assets/tagcanvas.min.js',
-		})).addEventListener('load', () => available = true);
+		document.head
+			.appendChild(
+				Object.assign(document.createElement("script"), {
+					async: true,
+					src: "/client-assets/tagcanvas.min.js",
+				})
+			)
+			.addEventListener("load", () => (available = true));
 	}
 });
 
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 47d2edd8c..317e556cf 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -1,14 +1,19 @@
 <template>
-<XNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+	<XNotes
+		ref="tlComponent"
+		:no-gap="!$store.state.showGapBetweenNotesInTimeline"
+		:pagination="pagination"
+		@queue="emit('queue', $event)"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, provide, onUnmounted } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import * as sound from '@/scripts/sound';
-import { $i } from '@/account';
+import { ref, computed, provide, onUnmounted } from "vue";
+import XNotes from "@/components/MkNotes.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import * as sound from "@/scripts/sound";
+import { $i } from "@/account";
 
 const props = defineProps<{
 	src: string;
@@ -19,21 +24,24 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'note'): void;
-	(ev: 'queue', count: number): void;
+	(ev: "note"): void;
+	(ev: "queue", count: number): void;
 }>();
 
-provide('inChannel', computed(() => props.src === 'channel'));
+provide(
+	"inChannel",
+	computed(() => props.src === "channel")
+);
 
 const tlComponent: InstanceType<typeof XNotes> = $ref();
 
-const prepend = note => {
+const prepend = (note) => {
 	tlComponent.pagingComponent?.prepend(note);
 
-	emit('note');
+	emit("note");
 
 	if (props.sound) {
-		sound.play($i && (note.userId === $i.id) ? 'noteMy' : 'note');
+		sound.play($i && note.userId === $i.id ? "noteMy" : "note");
 	}
 };
 
@@ -56,75 +64,75 @@ let query;
 let connection;
 let connection2;
 
-if (props.src === 'antenna') {
-	endpoint = 'antennas/notes';
+if (props.src === "antenna") {
+	endpoint = "antennas/notes";
 	query = {
 		antennaId: props.antenna,
 	};
-	connection = stream.useChannel('antenna', {
+	connection = stream.useChannel("antenna", {
 		antennaId: props.antenna,
 	});
-	connection.on('note', prepend);
-} else if (props.src === 'home') {
-	endpoint = 'notes/timeline';
-	connection = stream.useChannel('homeTimeline');
-	connection.on('note', prepend);
+	connection.on("note", prepend);
+} else if (props.src === "home") {
+	endpoint = "notes/timeline";
+	connection = stream.useChannel("homeTimeline");
+	connection.on("note", prepend);
 
-	connection2 = stream.useChannel('main');
-	connection2.on('follow', onChangeFollowing);
-	connection2.on('unfollow', onChangeFollowing);
-} else if (props.src === 'local') {
-	endpoint = 'notes/local-timeline';
-	connection = stream.useChannel('localTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'recommended') {
-	endpoint = 'notes/recommended-timeline';
-	connection = stream.useChannel('recommendedTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'social') {
-	endpoint = 'notes/hybrid-timeline';
-	connection = stream.useChannel('hybridTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'global') {
-	endpoint = 'notes/global-timeline';
-	connection = stream.useChannel('globalTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'mentions') {
-	endpoint = 'notes/mentions';
-	connection = stream.useChannel('main');
-	connection.on('mention', prepend);
-} else if (props.src === 'directs') {
-	endpoint = 'notes/mentions';
+	connection2 = stream.useChannel("main");
+	connection2.on("follow", onChangeFollowing);
+	connection2.on("unfollow", onChangeFollowing);
+} else if (props.src === "local") {
+	endpoint = "notes/local-timeline";
+	connection = stream.useChannel("localTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "recommended") {
+	endpoint = "notes/recommended-timeline";
+	connection = stream.useChannel("recommendedTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "social") {
+	endpoint = "notes/hybrid-timeline";
+	connection = stream.useChannel("hybridTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "global") {
+	endpoint = "notes/global-timeline";
+	connection = stream.useChannel("globalTimeline");
+	connection.on("note", prepend);
+} else if (props.src === "mentions") {
+	endpoint = "notes/mentions";
+	connection = stream.useChannel("main");
+	connection.on("mention", prepend);
+} else if (props.src === "directs") {
+	endpoint = "notes/mentions";
 	query = {
-		visibility: 'specified',
+		visibility: "specified",
 	};
-	const onNote = note => {
-		if (note.visibility === 'specified') {
+	const onNote = (note) => {
+		if (note.visibility === "specified") {
 			prepend(note);
 		}
 	};
-	connection = stream.useChannel('main');
-	connection.on('mention', onNote);
-} else if (props.src === 'list') {
-	endpoint = 'notes/user-list-timeline';
+	connection = stream.useChannel("main");
+	connection.on("mention", onNote);
+} else if (props.src === "list") {
+	endpoint = "notes/user-list-timeline";
 	query = {
 		listId: props.list,
 	};
-	connection = stream.useChannel('userList', {
+	connection = stream.useChannel("userList", {
 		listId: props.list,
 	});
-	connection.on('note', prepend);
-	connection.on('userAdded', onUserAdded);
-	connection.on('userRemoved', onUserRemoved);
-} else if (props.src === 'channel') {
-	endpoint = 'channels/timeline';
+	connection.on("note", prepend);
+	connection.on("userAdded", onUserAdded);
+	connection.on("userRemoved", onUserRemoved);
+} else if (props.src === "channel") {
+	endpoint = "channels/timeline";
 	query = {
 		channelId: props.channel,
 	};
-	connection = stream.useChannel('channel', {
+	connection = stream.useChannel("channel", {
 		channelId: props.channel,
 	});
-	connection.on('note', prepend);
+	connection.on("note", prepend);
 }
 
 const pagination = {
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 87b1d99c1..4ff97fb02 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -1,26 +1,35 @@
 <template>
-<div class="mk-toast">
-	<transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
-		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
-			<Mfm class="message" :text="message" :plain="true" :nowrap="nowrap"/>
-		</div>
-	</transition>
-</div>
+	<div class="mk-toast">
+		<transition
+			:name="$store.state.animation ? 'toast' : ''"
+			appear
+			@after-leave="emit('closed')"
+		>
+			<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
+				<Mfm
+					class="message"
+					:text="message"
+					:plain="true"
+					:nowrap="nowrap"
+				/>
+			</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as os from '@/os';
+import { onMounted, ref } from "vue";
+import * as os from "@/os";
 
 defineProps<{
 	message: string;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 let showing = $ref(true);
 
 onMounted(() => {
@@ -31,10 +40,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.toast-enter-active, .toast-leave-active {
+.toast-enter-active,
+.toast-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.toast-enter-from, .toast-leave-to {
+.toast-enter-from,
+.toast-leave-to {
 	opacity: 0;
 	transform: translateY(-100%);
 }
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
index 319eb6661..77caa26b3 100644
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ b/packages/client/src/components/MkTokenGenerateWindow.vue
@@ -1,58 +1,75 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	:height="600"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	:can-close="false"
-	@close="dialog.close()"
-	@closed="$emit('closed')"
-	@ok="ok()"
-	style="padding: 12px"
->
-	<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
-	<div v-if="information" class="_section">
-		<MkInfo warn>{{ information }}</MkInfo>
-	</div>
-	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ i18n.ts.name }}</b></div>
-		<MkInput style="margin-bottom: 16px;" v-model="name"/>
-	</div>
-	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ i18n.ts.permission }}</b></div>
-		<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
-		<MkButton style="margin-bottom: 12px;" inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-		<MkSwitch style="margin-bottom: 6px;" v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch>
-	</div>
-</XModalWindow>
+	<XModalWindow
+		ref="dialog"
+		:width="400"
+		:height="600"
+		:with-ok-button="true"
+		:ok-button-disabled="false"
+		:can-close="false"
+		@close="dialog.close()"
+		@closed="$emit('closed')"
+		@ok="ok()"
+		style="padding: 12px"
+	>
+		<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
+		<div v-if="information" class="_section">
+			<MkInfo warn>{{ information }}</MkInfo>
+		</div>
+		<div class="_section">
+			<div style="margin-bottom: 16px">
+				<b>{{ i18n.ts.name }}</b>
+			</div>
+			<MkInput style="margin-bottom: 16px" v-model="name" />
+		</div>
+		<div class="_section">
+			<div style="margin-bottom: 16px">
+				<b>{{ i18n.ts.permission }}</b>
+			</div>
+			<MkButton inline @click="disableAll">{{
+				i18n.ts.disableAll
+			}}</MkButton>
+			<MkButton style="margin-bottom: 12px" inline @click="enableAll">{{
+				i18n.ts.enableAll
+			}}</MkButton>
+			<MkSwitch
+				style="margin-bottom: 6px"
+				v-for="kind in initialPermissions || kinds"
+				:key="kind"
+				v-model="permissions[kind]"
+				>{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch
+			>
+		</div>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { permissions as kinds } from 'calckey-js';
-import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
-import MkButton from './MkButton.vue';
-import MkInfo from './MkInfo.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { permissions as kinds } from "calckey-js";
+import MkInput from "./form/input.vue";
+import MkSwitch from "./form/switch.vue";
+import MkButton from "./MkButton.vue";
+import MkInfo from "./MkInfo.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	title?: string | null;
-	information?: string | null;
-	initialName?: string | null;
-	initialPermissions?: string[] | null;
-}>(), {
-	title: null,
-	information: null,
-	initialName: null,
-	initialPermissions: null,
-});
+const props = withDefaults(
+	defineProps<{
+		title?: string | null;
+		information?: string | null;
+		initialName?: string | null;
+		initialPermissions?: string[] | null;
+	}>(),
+	{
+		title: null,
+		information: null,
+		initialName: null,
+		initialPermissions: null,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'done', result: { name: string | null, permissions: string[] }): void;
+	(ev: "closed"): void;
+	(ev: "done", result: { name: string | null; permissions: string[] }): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
@@ -70,9 +87,9 @@ if (props.initialPermissions) {
 }
 
 function ok(): void {
-	emit('done', {
+	emit("done", {
 		name: name,
-		permissions: Object.keys(permissions).filter(p => permissions[p]),
+		permissions: Object.keys(permissions).filter((p) => permissions[p]),
 	});
 	dialog.close();
 }
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue
index 4c6258d24..c528a2f56 100644
--- a/packages/client/src/components/MkTooltip.vue
+++ b/packages/client/src/components/MkTooltip.vue
@@ -1,55 +1,67 @@
 <template>
-<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
-	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
-		<slot>
-			<Mfm v-if="asMfm" :text="text"/>
-			<span v-else>{{ text }}</span>
-		</slot>
-	</div>
-</transition>
+	<transition
+		:name="$store.state.animation ? 'tooltip' : ''"
+		appear
+		@after-leave="emit('closed')"
+	>
+		<div
+			v-show="showing"
+			ref="el"
+			class="buebdbiu _acrylic _shadow"
+			:style="{ zIndex, maxWidth: maxWidth + 'px' }"
+		>
+			<slot>
+				<Mfm v-if="asMfm" :text="text" />
+				<span v-else>{{ text }}</span>
+			</slot>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { calcPopupPosition } from '@/scripts/popup-position';
+import { nextTick, onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import { calcPopupPosition } from "@/scripts/popup-position";
 
-const props = withDefaults(defineProps<{
-	showing: boolean;
-	targetElement?: HTMLElement;
-	x?: number;
-	y?: number;
-	text?: string;
-	asMfm?: boolean;
-	maxWidth?: number;
-	direction?: 'top' | 'bottom' | 'right' | 'left';
-	innerMargin?: number;
-}>(), {
-	maxWidth: 250,
-	direction: 'top',
-	innerMargin: 0,
-});
+const props = withDefaults(
+	defineProps<{
+		showing: boolean;
+		targetElement?: HTMLElement;
+		x?: number;
+		y?: number;
+		text?: string;
+		asMfm?: boolean;
+		maxWidth?: number;
+		direction?: "top" | "bottom" | "right" | "left";
+		innerMargin?: number;
+	}>(),
+	{
+		maxWidth: 250,
+		direction: "top",
+		innerMargin: 0,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
 const el = ref<HTMLElement>();
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 
 function setPosition() {
 	const data = calcPopupPosition(el.value, {
 		anchorElement: props.targetElement,
 		direction: props.direction,
-		align: 'center',
+		align: "center",
 		innerMargin: props.innerMargin,
 		x: props.x,
 		y: props.y,
 	});
 
 	el.value.style.transformOrigin = data.transformOrigin;
-	el.value.style.left = data.left + 'px';
-	el.value.style.top = data.top + 'px';
+	el.value.style.left = data.left + "px";
+	el.value.style.top = data.top + "px";
 }
 
 let loopHandler;
@@ -79,7 +91,8 @@ onUnmounted(() => {
 .tooltip-leave-active {
 	opacity: 1;
 	transform: scale(1);
-	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .tooltip-enter-from,
 .tooltip-leave-active {
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index 77cc4de6f..eafc88295 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -1,133 +1,206 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="800"
-	@close="dialog?.close()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts._tutorial.title }}</template>
+	<XModalWindow
+		ref="dialog"
+		:width="800"
+		@close="dialog?.close()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts._tutorial.title }}</template>
 
-	<div class="_monolithic_">
-		<div class="_section">
-			<div class="tbkwesmv">
-				<div class="_footer navigation">
-					<div class="step">
-						<button class="arrow _button" :disabled="tutorial === 0" @click="tutorial--">
-							<i class="ph-caret-left ph-bold ph-lg"></i>
-						</button>
-						<span>{{ tutorial + 1 }} / 6</span>
-						<button class="arrow _button" :disabled="tutorial === 5" @click="tutorial++">
-							<i class="ph-caret-right ph-bold ph-lg"></i>
-						</button>
+		<div class="_monolithic_">
+			<div class="_section">
+				<div class="tbkwesmv">
+					<div class="_footer navigation">
+						<div class="step">
+							<button
+								class="arrow _button"
+								:disabled="tutorial === 0"
+								@click="tutorial--"
+							>
+								<i class="ph-caret-left ph-bold ph-lg"></i>
+							</button>
+							<span>{{ tutorial + 1 }} / 6</span>
+							<button
+								class="arrow _button"
+								:disabled="tutorial === 5"
+								@click="tutorial++"
+							>
+								<i class="ph-caret-right ph-bold ph-lg"></i>
+							</button>
+						</div>
+						<MkButton
+							v-if="tutorial === 5"
+							class="ok"
+							primary
+							@click="close"
+							><i class="ph-check ph-bold ph-lg"></i>
+							{{ i18n.ts.gotIt }}</MkButton
+						>
+						<MkButton v-else class="ok" primary @click="tutorial++"
+							><i class="ph-check ph-bold ph-lg"></i>
+							{{ i18n.ts.next }}</MkButton
+						>
 					</div>
-					<MkButton v-if="tutorial === 5" class="ok" primary @click="close"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.gotIt }}</MkButton>
-					<MkButton v-else class="ok" primary @click="tutorial++"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.next }}</MkButton>
+					<h2 class="_title title">
+						<i class="ph-info ph-bold ph-lg"></i>
+						{{ i18n.ts._tutorial.title }}
+					</h2>
+					<Transition name="fade">
+						<div v-if="tutorial === 0" key="1" class="_content">
+							<h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step1_2 }}</div>
+						</div>
+						<div
+							v-else-if="tutorial === 1"
+							key="2"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step2_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step2_2 }}</div>
+							<br />
+							<XSettings :save-button="true" />
+							<br />
+						</div>
+						<div
+							v-else-if="tutorial === 2"
+							key="3"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step3_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step3_2 }}</div>
+							<XFeaturedUsers />
+							<br />
+							<MkButton class="ok" primary @click="tutorial++"
+								><i class="ph-check ph-bold ph-lg"></i>
+								{{ i18n.ts.next }}</MkButton
+							>
+						</div>
+						<div
+							v-else-if="tutorial === 3"
+							key="4"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step4_1 }}</h3>
+							<I18n :src="i18n.ts._tutorial.step4_2" tag="div">
+								<template #introduction>
+									<MkA class="_link" to="/tags/introduction"
+										>#introduction</MkA
+									>
+								</template>
+							</I18n>
+							<br />
+							<XPostForm class="post-form _block" />
+						</div>
+						<div
+							v-else-if="tutorial === 4"
+							key="5"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step5_1 }}</h3>
+							<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
+								<template #timelines>
+									<span>{{ timelines.length }}</span>
+								</template>
+							</I18n>
+							<ul>
+								<li>
+									<I18n
+										:src="i18n.ts._tutorial.step5_3"
+										tag="div"
+									>
+										<template #icon>
+											<i class="ph-house ph-bold ph-lg" />
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('local')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_4"
+										tag="div"
+									>
+										<template #icon>
+											<i class="ph-users ph-bold ph-lg" />
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('recommended')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_5"
+										tag="div"
+									>
+										<template #icon>
+											<i
+												class="ph-thumbs-up ph-bold ph-lg"
+											/>
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('social')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_6"
+										tag="div"
+									>
+										<template #icon>
+											<i
+												class="ph-handshake ph-bold ph-lg"
+											/>
+										</template>
+									</I18n>
+								</li>
+								<li v-if="timelines.includes('global')">
+									<I18n
+										:src="i18n.ts._tutorial.step5_7"
+										tag="div"
+									>
+										<template #icon>
+											<i
+												class="ph-planet ph-bold ph-lg"
+											/>
+										</template>
+									</I18n>
+								</li>
+							</ul>
+						</div>
+						<div
+							v-else-if="tutorial === 5"
+							key="6"
+							class="_content"
+						>
+							<h3>{{ i18n.ts._tutorial.step6_1 }}</h3>
+							<div>{{ i18n.ts._tutorial.step6_2 }}</div>
+							<div>{{ i18n.ts._tutorial.step6_3 }}</div>
+							<br />
+							<MkSparkle>
+								<h3>
+									{{ i18n.ts._tutorial.step6_4 }}
+									<Mfm text="$[shake 🚀]"></Mfm>
+								</h3>
+							</MkSparkle>
+							<MkPushNotificationAllowButton
+								primary
+								show-only-to-register
+							/>
+						</div>
+					</Transition>
 				</div>
-				<h2 class="_title title"><i class="ph-info ph-bold ph-lg"></i> {{ i18n.ts._tutorial.title }}</h2>
-				<Transition name="fade">
-					<div v-if="tutorial === 0" key="1" class="_content">
-						<h3>{{ i18n.ts._tutorial.step1_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step1_2 }}</div>
-					</div>
-					<div v-else-if="tutorial === 1" key="2" class="_content">
-						<h3>{{ i18n.ts._tutorial.step2_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step2_2 }}</div>
-						<br/>
-						<XSettings :save-button="true"/>
-						<br/>
-					</div>
-					<div v-else-if="tutorial === 2" key="3" class="_content">
-						<h3>{{ i18n.ts._tutorial.step3_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step3_2 }}</div>
-						<XFeaturedUsers/>
-						<br/>
-						<MkButton class="ok" primary @click="tutorial++"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.next }}</MkButton>
-					</div>
-					<div v-else-if="tutorial === 3" key="4" class="_content">
-						<h3>{{ i18n.ts._tutorial.step4_1 }}</h3>
-						<I18n :src="i18n.ts._tutorial.step4_2" tag="div">
-							<template #introduction>
-								<MkA class="_link" to="/tags/introduction">#introduction</MkA>
-							</template>
-						</I18n>
-						<br/>
-						<XPostForm class="post-form _block"/>
-					</div>
-					<div v-else-if="tutorial === 4" key="5" class="_content">
-						<h3>{{ i18n.ts._tutorial.step5_1 }}</h3>
-						<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
-							<template #timelines>
-								<span>{{ timelines.length }}</span>
-							</template>
-						</I18n>
-						<ul>
-							<li>
-								<I18n :src="i18n.ts._tutorial.step5_3" tag="div">
-									<template #icon>
-										<i class="ph-house ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('local')">
-								<I18n :src="i18n.ts._tutorial.step5_4" tag="div">
-									<template #icon>
-										<i class="ph-users ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('recommended')">
-								<I18n :src="i18n.ts._tutorial.step5_5" tag="div">
-									<template #icon>
-										<i class="ph-thumbs-up ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('social')">
-								<I18n :src="i18n.ts._tutorial.step5_6" tag="div">
-									<template #icon>
-										<i class="ph-handshake ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-							<li v-if="timelines.includes('global')">
-								<I18n :src="i18n.ts._tutorial.step5_7" tag="div">
-									<template #icon>
-										<i class="ph-planet ph-bold ph-lg"/>
-									</template>
-								</I18n>
-							</li>
-						</ul>
-					</div>
-					<div v-else-if="tutorial === 5" key="6" class="_content">
-						<h3>{{ i18n.ts._tutorial.step6_1 }}</h3>
-						<div>{{ i18n.ts._tutorial.step6_2 }}</div>
-						<div>{{ i18n.ts._tutorial.step6_3 }}</div>
-						<br/>
-						<MkSparkle>
-							<h3>{{ i18n.ts._tutorial.step6_4 }} <Mfm text="$[shake 🚀]"></Mfm></h3>
-						</MkSparkle>
-						<MkPushNotificationAllowButton primary show-only-to-register/>
-					</div>
-				</Transition>
 			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XSettings from '@/pages/settings/profile.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import XFeaturedUsers from '@/pages/explore.users.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { instance } from '@/instance';
+import { computed } from "vue";
+import XSettings from "@/pages/settings/profile.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import XFeaturedUsers from "@/pages/explore.users.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { instance } from "@/instance";
 
 const isLocalTimelineAvailable =
 	!instance.disableLocalTimeline ||
@@ -139,31 +212,35 @@ const isGlobalTimelineAvailable =
 	!instance.disableGlobalTimeline ||
 	($i != null && ($i.isModerator || $i.isAdmin));
 
-let timelines = ['home'];
+let timelines = ["home"];
 
 if (isLocalTimelineAvailable) {
-	timelines.push('local');
+	timelines.push("local");
 }
 if (isRecommendedTimelineAvailable) {
-	timelines.push('recommended');
+	timelines.push("recommended");
 }
 if (isLocalTimelineAvailable) {
-	timelines.push('social');
+	timelines.push("social");
 }
 if (isGlobalTimelineAvailable) {
-	timelines.push('global');
+	timelines.push("global");
 }
 
 const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
+	(ev: "done"): void;
+	(ev: "closed"): void;
 }>();
 
 const dialog = $ref<InstanceType<typeof XModalWindow>>();
 
 const tutorial = computed({
-	get() { return defaultStore.reactiveState.tutorial.value || 0; },
-	set(value) { defaultStore.set('tutorial', value); },
+	get() {
+		return defaultStore.reactiveState.tutorial.value || 0;
+	},
+	set(value) {
+		defaultStore.set("tutorial", value);
+	},
 });
 
 function close(res) {
@@ -222,4 +299,3 @@ function close(res) {
 	}
 }
 </style>
-
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
index 0ffe2edea..d63ba9660 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -1,43 +1,60 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<div :class="$style.root">
-		<div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
-		<div :class="$style.version">✨ {{ version }} 🚀</div>
-		<div v-if="newRelease" :class="$style.releaseNotes">
-			<Mfm :text="data.notes"/>
-			<div v-if="data.screenshots.length > 0" style="max-width: 500">
-				<img v-for="i in data.screenshots" :key="i" :src="i" alt="screenshot"/>
+	<MkModal
+		ref="modal"
+		:z-priority="'middle'"
+		@click="$refs.modal.close()"
+		@closed="$emit('closed')"
+	>
+		<div :class="$style.root">
+			<div :class="$style.title">
+				<MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle>
 			</div>
+			<div :class="$style.version">✨ {{ version }} 🚀</div>
+			<div v-if="newRelease" :class="$style.releaseNotes">
+				<Mfm :text="data.notes" />
+				<div v-if="data.screenshots.length > 0" style="max-width: 500">
+					<img
+						v-for="i in data.screenshots"
+						:key="i"
+						:src="i"
+						alt="screenshot"
+					/>
+				</div>
+			</div>
+			<MkButton
+				:class="$style.gotIt"
+				primary
+				full
+				@click="$refs.modal.close()"
+				>{{ i18n.ts.gotIt }}</MkButton
+			>
 		</div>
-		<MkButton :class="$style.gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
-	</div>
-</MkModal>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import MkButton from '@/components/MkButton.vue';
-import { version } from '@/config';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
+import { shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import MkButton from "@/components/MkButton.vue";
+import { version } from "@/config";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 let newRelease = $ref(false);
 let data = $ref(Object);
 
-os.api('release').then(res => {
+os.api("release").then((res) => {
 	data = res;
-	newRelease = (version === data?.version);
+	newRelease = version === data?.version;
 });
 
-console.log(`Version: ${version}`)
-console.log(`Data version: ${data.version}`)
-console.log(newRelease)
+console.log(`Version: ${version}`);
+console.log(`Data version: ${data.version}`);
+console.log(newRelease);
 console.log(data);
-
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 3aa9a9be2..84fe1cb1f 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -1,54 +1,126 @@
 <template>
-<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`" @click.stop>
-	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ph-x ph-bold ph-lg"></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>
-<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter" @click.stop>
-	<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" @click.stop>
-	<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}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="ph-play-circle ph-bold ph-lg"></i></button>
-			</div>
-			<article>
-				<header>
-					<h1 :title="title">{{ title }}</h1>
-				</header>
-				<p v-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
-				<footer>
-					<img v-if="icon" class="icon" :src="icon"/>
-					<p :title="sitename">{{ sitename }}</p>
-				</footer>
-			</article>
-		</component>
-	</transition>
-	<div v-if="tweetId" class="expandTweet">
-		<a @click="tweetExpanded = true">
-			<i class="ph-twitter-logo ph-bold ph-lg"></i> {{ i18n.ts.expandTweet }}
-		</a>
+	<div
+		v-if="playerEnabled"
+		class="player"
+		:style="`padding: ${
+			((player.height || 0) / (player.width || 1)) * 100
+		}% 0 0`"
+		@click.stop
+	>
+		<button
+			class="disablePlayer"
+			:title="i18n.ts.disablePlayer"
+			@click="playerEnabled = false"
+		>
+			<i class="ph-x ph-bold ph-lg"></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>
+	<div
+		v-else-if="tweetId && tweetExpanded"
+		ref="twitter"
+		class="twitter"
+		@click.stop
+	>
+		<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" @click.stop>
+		<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}')`"
+				>
+					<button
+						v-if="!playerEnabled && player.url"
+						class="_button"
+						:title="i18n.ts.enablePlayer"
+						@click.prevent="playerEnabled = true"
+					>
+						<i class="ph-play-circle ph-bold ph-lg"></i>
+					</button>
+				</div>
+				<article>
+					<header>
+						<h1 :title="title">{{ title }}</h1>
+					</header>
+					<p v-if="description" :title="description">
+						{{
+							description.length > 85
+								? description.slice(0, 85) + "…"
+								: description
+						}}
+					</p>
+					<footer>
+						<img v-if="icon" class="icon" :src="icon" />
+						<p :title="sitename">{{ sitename }}</p>
+					</footer>
+				</article>
+			</component>
+		</transition>
+		<div v-if="tweetId" class="expandTweet">
+			<a @click="tweetExpanded = true">
+				<i class="ph-twitter-logo ph-bold ph-lg"></i>
+				{{ i18n.ts.expandTweet }}
+			</a>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import { url as local, lang } from '@/config';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted } from "vue";
+import { url as local, lang } from "@/config";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	url: string;
-	detail?: boolean;
-	compact?: boolean;
-}>(), {
-	detail: false,
-	compact: false,
-});
+const props = withDefaults(
+	defineProps<{
+		url: string;
+		detail?: boolean;
+		compact?: boolean;
+	}>(),
+	{
+		detail: false,
+		compact: false,
+	}
+);
 
 const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
+const attr = self ? "to" : "href";
+const target = self ? null : "_blank";
 let fetching = $ref(true);
 let title = $ref<string | null>(null);
 let description = $ref<string | null>(null);
@@ -63,27 +135,36 @@ let player = $ref({
 let playerEnabled = $ref(false);
 let tweetId = $ref<string | null>(null);
 let tweetExpanded = $ref(props.detail);
-const embedId = `embed${Math.random().toString().replace(/\D/,'')}`;
+const embedId = `embed${Math.random().toString().replace(/\D/, "")}`;
 let tweetHeight = $ref(150);
 
 const requestUrl = new URL(props.url);
-if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid url');
+if (!["http:", "https:"].includes(requestUrl.protocol))
+	throw new Error("invalid url");
 
-if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twitter.com') {
+if (
+	requestUrl.hostname === "twitter.com" ||
+	requestUrl.hostname === "mobile.twitter.com"
+) {
 	const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
 	if (m) tweetId = m[1];
 }
 
-if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
-	requestUrl.hostname = 'www.youtube.com';
+if (
+	requestUrl.hostname === "music.youtube.com" &&
+	requestUrl.pathname.match("^/(?:watch|channel)")
+) {
+	requestUrl.hostname = "www.youtube.com";
 }
 
-const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
+const requestLang = (lang || "ja-JP").replace("ja-KS", "ja-JP");
 
-requestUrl.hash = '';
+requestUrl.hash = "";
 
-fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
-	res.json().then(info => {
+fetch(
+	`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`
+).then((res) => {
+	res.json().then((info) => {
 		if (info.url == null) return;
 		title = info.title;
 		description = info.description;
@@ -96,18 +177,18 @@ fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).the
 });
 
 function adjustTweetHeight(message: any) {
-	if (message.origin !== 'https://platform.twitter.com') return;
-	const embed = message.data?.['twttr.embed'];
-	if (embed?.method !== 'twttr.private.resize') return;
+	if (message.origin !== "https://platform.twitter.com") return;
+	const embed = message.data?.["twttr.embed"];
+	if (embed?.method !== "twttr.private.resize") return;
 	if (embed?.id !== embedId) return;
 	const height = embed?.params[0]?.height;
 	if (height) tweetHeight = height;
 }
 
-(window as any).addEventListener('message', adjustTweetHeight);
+(window as any).addEventListener("message", adjustTweetHeight);
 
 onUnmounted(() => {
-	(window as any).removeEventListener('message', adjustTweetHeight);
+	(window as any).removeEventListener("message", adjustTweetHeight);
 });
 </script>
 
@@ -214,8 +295,9 @@ onUnmounted(() => {
 		border: 1px solid var(--divider);
 		border-radius: 8px;
 		overflow: hidden;
-		transition: background .2s;
-		&:hover, &:focus-within {
+		transition: background 0.2s;
+		&:hover,
+		&:focus-within {
 			text-decoration: none;
 			background-color: var(--panelHighlight);
 			> article > header > h1 {
@@ -293,7 +375,9 @@ onUnmounted(() => {
 
 		&.compact {
 			> article {
-				> header h1, p, footer {
+				> header h1,
+				p,
+				footer {
 					overflow: hidden;
 					white-space: nowrap;
 					text-overflow: ellipsis;
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
index f343c6d8a..76d014313 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -1,15 +1,21 @@
 <template>
-<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
-	<transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
-		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
-	</transition>
-</div>
+	<div
+		class="fgmtyycl"
+		:style="{ zIndex, top: top + 'px', left: left + 'px' }"
+	>
+		<transition
+			:name="$store.state.animation ? 'zoom' : ''"
+			@after-leave="emit('closed')"
+		>
+			<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" />
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import * as os from '@/os';
+import { onMounted } from "vue";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import * as os from "@/os";
 
 const props = defineProps<{
 	showing: boolean;
@@ -18,16 +24,18 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-const zIndex = os.claimZIndex('middle');
+const zIndex = os.claimZIndex("middle");
 let top = $ref(0);
 let left = $ref(0);
 
 onMounted(() => {
 	const rect = props.source.getBoundingClientRect();
-	const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
+	const x =
+		Math.max(rect.left + props.source.offsetWidth / 2 - 300 / 2, 6) +
+		window.pageXOffset;
 	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
 
 	top = y;
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index bc6fc8afc..9d97e2484 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -1,19 +1,31 @@
 <template>
-<div :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]">
-	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
-	<div class="body">
-		<span class="name"><MkUserName class="name" :user="user"/></span>
-		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
+	<div
+		:class="[
+			$style.root,
+			{ yellow: user.isSilenced, red: user.isSuspended, gray: false },
+		]"
+	>
+		<MkAvatar
+			class="avatar"
+			:user="user"
+			:disable-link="true"
+			:show-indicator="true"
+		/>
+		<div class="body">
+			<span class="name"><MkUserName class="name" :user="user" /></span>
+			<span class="sub"
+				><span class="acct _monospace">@{{ acct(user) }}</span></span
+			>
+		</div>
+		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
 	</div>
-	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { acct } from '@/filters/user';
+import * as misskey from "calckey-js";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { acct } from "@/filters/user";
 
 const props = defineProps<{
 	user: misskey.entities.User;
@@ -21,7 +33,11 @@ const props = defineProps<{
 
 let chartValues = $ref<number[] | null>(null);
 
-os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'day' }).then(res => {
+os.apiGet("charts/user/notes", {
+	userId: props.user.id,
+	limit: 16 + 1,
+	span: "day",
+}).then((res) => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 	res.inc.splice(0, 1);
 	chartValues = res.inc;
@@ -80,19 +96,46 @@ os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16 + 1, span: 'da
 
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.red) {
 		--c: rgb(255 0 0 / 15%);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 
 	&:global(.gray) {
 		--c: var(--bg);
-		background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+		background-image: linear-gradient(
+			45deg,
+			var(--c) 16.67%,
+			transparent 16.67%,
+			transparent 50%,
+			var(--c) 50%,
+			var(--c) 66.67%,
+			transparent 66.67%,
+			transparent 100%
+		);
 		background-size: 16px 16px;
 	}
 }
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index b34c2a87b..5841e6d41 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -1,37 +1,64 @@
 <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"/>
-	<div class="title">
-		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
-		<p class="username"><MkAcct :user="user"/></p>
+	<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"
+		/>
+		<div class="title">
+			<MkA class="name" :to="userPage(user)"
+				><MkUserName :user="user" :nowrap="false"
+			/></MkA>
+			<p class="username"><MkAcct :user="user" /></p>
+		</div>
+		<div class="description">
+			<div v-if="user.description" class="mfm">
+				<Mfm
+					:text="user.description"
+					:author="user"
+					:i="$i"
+					:custom-emojis="user.emojis"
+				/>
+			</div>
+			<span v-else style="opacity: 0.7">{{
+				i18n.ts.noAccountDescription
+			}}</span>
+		</div>
+		<div class="status">
+			<div>
+				<p>{{ i18n.ts.notes }}</p>
+				<span>{{ user.notesCount }}</span>
+			</div>
+			<div>
+				<p>{{ i18n.ts.following }}</p>
+				<span>{{ user.followingCount }}</span>
+			</div>
+			<div>
+				<p>{{ i18n.ts.followers }}</p>
+				<span>{{ user.followersCount }}</span>
+			</div>
+		</div>
+		<MkFollowButton
+			v-if="$i && user.id != $i.id"
+			class="koudoku-button"
+			:user="user"
+			mini
+		/>
 	</div>
-	<div class="description">
-		<div v-if="user.description" class="mfm">
-			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-		</div>
-		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
-	</div>
-	<div class="status">
-		<div>
-			<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
-		</div>
-		<div>
-			<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
-		</div>
-		<div>
-			<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
-		</div>
-	</div>
-	<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
+import * as misskey from "calckey-js";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
 
 defineProps<{
 	user: misskey.entities.UserDetailed;
@@ -47,7 +74,6 @@ defineProps<{
 		background-color: rgba(0, 0, 0, 0.1);
 		background-size: cover;
 		background-position: center;
-
 	}
 
 	> .avatar {
diff --git a/packages/client/src/components/MkUserList.vue b/packages/client/src/components/MkUserList.vue
index 204d7a61d..99815e46e 100644
--- a/packages/client/src/components/MkUserList.vue
+++ b/packages/client/src/components/MkUserList.vue
@@ -1,26 +1,35 @@
 <template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-			<div>{{ i18n.ts.noUsers }}</div>
-		</div>
-	</template>
+	<MkPagination ref="pagingComponent" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img
+					src="/static-assets/badges/info.png"
+					class="_ghost"
+					alt="Info"
+				/>
+				<div>{{ i18n.ts.noUsers }}</div>
+			</div>
+		</template>
 
-	<template #default="{ items: users }">
-		<div class="efvhhmdq">
-			<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
-		</div>
-	</template>
-</MkPagination>
+		<template #default="{ items: users }">
+			<div class="efvhhmdq">
+				<MkUserInfo
+					v-for="user in users"
+					:key="user.id"
+					class="user"
+					:user="user"
+				/>
+			</div>
+		</template>
+	</MkPagination>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import MkUserInfo from '@/components/MkUserInfo.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import MkUserInfo from "@/components/MkUserInfo.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import { userPage } from "@/filters/user";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	pagination: Paging;
diff --git a/packages/client/src/components/MkUserOnlineIndicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
index 35eef94a1..de238ed4b 100644
--- a/packages/client/src/components/MkUserOnlineIndicator.vue
+++ b/packages/client/src/components/MkUserOnlineIndicator.vue
@@ -1,11 +1,11 @@
 <template>
-<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
+	<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: misskey.entities.User;
@@ -13,10 +13,14 @@ const props = defineProps<{
 
 const text = $computed(() => {
 	switch (props.user.onlineStatus) {
-		case 'online': return i18n.ts.online;
-		case 'active': return i18n.ts.active;
-		case 'offline': return i18n.ts.offline;
-		case 'unknown': return i18n.ts.unknown;
+		case "online":
+			return i18n.ts.online;
+		case "active":
+			return i18n.ts.active;
+		case "offline":
+			return i18n.ts.offline;
+		case "unknown":
+			return i18n.ts.unknown;
 	}
 });
 </script>
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 71f97137a..956dececb 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -1,47 +1,97 @@
 <template>
-<transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')">
-	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
-		<div v-if="user != null" class="info">
-			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
-				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
-			</div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-			<div class="title">
-				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
-				<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"/>
-			</div>
-			<div class="status">
-				<div>
-					<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
+	<transition
+		:name="$store.state.animation ? 'popup' : ''"
+		appear
+		@after-leave="emit('closed')"
+	>
+		<div
+			v-if="showing"
+			class="fxxzrfni _popup _shadow"
+			:style="{ zIndex, top: top + 'px', left: left + 'px' }"
+			@mouseover="
+				() => {
+					emit('mouseover');
+				}
+			"
+			@mouseleave="
+				() => {
+					emit('mouseleave');
+				}
+			"
+		>
+			<div v-if="user != null" class="info">
+				<div
+					class="banner"
+					:style="
+						user.bannerUrl
+							? `background-image: url(${user.bannerUrl})`
+							: ''
+					"
+				>
+					<span
+						v-if="$i && $i.id != user.id && user.isFollowed"
+						class="followed"
+						>{{ i18n.ts.followsYou }}</span
+					>
 				</div>
-				<div>
-					<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
+				<MkAvatar
+					class="avatar"
+					:user="user"
+					:disable-preview="true"
+					:show-indicator="true"
+				/>
+				<div class="title">
+					<MkA class="name" :to="userPage(user)"
+						><MkUserName :user="user" :nowrap="false"
+					/></MkA>
+					<p class="username"><MkAcct :user="user" /></p>
 				</div>
-				<div>
-					<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
+				<div class="description">
+					<Mfm
+						v-if="user.description"
+						:text="user.description"
+						:author="user"
+						:i="$i"
+						:custom-emojis="user.emojis"
+					/>
 				</div>
+				<div class="status">
+					<div>
+						<p>{{ i18n.ts.notes }}</p>
+						<span>{{ user.notesCount }}</span>
+					</div>
+					<div>
+						<p>{{ i18n.ts.following }}</p>
+						<span>{{ user.followingCount }}</span>
+					</div>
+					<div>
+						<p>{{ i18n.ts.followers }}</p>
+						<span>{{ user.followersCount }}</span>
+					</div>
+				</div>
+				<MkFollowButton
+					v-if="$i && user.id != $i.id"
+					class="koudoku-button"
+					:user="user"
+					mini
+				/>
+			</div>
+			<div v-else>
+				<MkLoading />
 			</div>
-			<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
 		</div>
-		<div v-else>
-			<MkLoading/>
-		</div>
-	</div>
-</transition>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import type * as misskey from 'calckey-js';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import type * as misskey from "calckey-js";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	showing: boolean;
@@ -50,32 +100,33 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'mouseover'): void;
-	(ev: 'mouseleave'): void;
+	(ev: "closed"): void;
+	(ev: "mouseover"): void;
+	(ev: "mouseleave"): void;
 }>();
 
-const zIndex = os.claimZIndex('middle');
+const zIndex = os.claimZIndex("middle");
 let user = $ref<misskey.entities.UserDetailed | null>(null);
 let top = $ref(0);
 let left = $ref(0);
 
 onMounted(() => {
-	if (typeof props.q === 'object') {
+	if (typeof props.q === "object") {
 		user = props.q;
 	} else {
-		const query = props.q.startsWith('@') ?
-			Acct.parse(props.q.substr(1)) :
-			{ userId: props.q };
+		const query = props.q.startsWith("@")
+			? Acct.parse(props.q.substr(1))
+			: { userId: props.q };
 
-		os.api('users/show', query).then(res => {
+		os.api("users/show", query).then((res) => {
 			if (!props.showing) return;
 			user = res;
 		});
 	}
 
 	const rect = props.source.getBoundingClientRect();
-	const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
+	const x =
+		rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.pageXOffset;
 	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
 
 	top = y;
@@ -84,10 +135,12 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.popup-enter-active, .popup-leave-active {
+.popup-enter-active,
+.popup-leave-active {
 	transition: opacity 0.3s, transform 0.3s !important;
 }
-.popup-enter-from, .popup-leave-to {
+.popup-enter-from,
+.popup-leave-to {
 	opacity: 0;
 	transform: scale(0.9);
 }
@@ -105,14 +158,14 @@ onMounted(() => {
 			background-size: cover;
 			background-position: center;
 			> .followed {
-					position: absolute;
-					top: 12px;
-					left: 12px;
-					padding: 4px 8px;
-					color: #fff;
-					background: rgba(0, 0, 0, 0.7);
-					font-size: 0.7em;
-					border-radius: 6px;
+				position: absolute;
+				top: 12px;
+				left: 12px;
+				padding: 4px 8px;
+				color: #fff;
+				background: rgba(0, 0, 0, 0.7);
+				font-size: 0.7em;
+				border-radius: 6px;
 			}
 
 			&::after {
@@ -123,7 +176,7 @@ onMounted(() => {
 				background-size: cover;
 				background-position: center;
 				pointer-events: none;
-				opacity: .1;
+				opacity: 0.1;
 				filter: var(--blur, blur(10px));
 			}
 		}
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index afd1cd926..506f48bd4 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -1,115 +1,149 @@
 <template>
-<XModalWindow
-	ref="dialogEl"
-	:with-ok-button="true"
-	:ok-button-disabled="selected == null"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.selectUser }}</template>
-	<div class="tbhwbxda">
-		<div class="form">
-			<FormSplit :min-width="170">
-				<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
-					<template #label>{{ i18n.ts.username }}</template>
-					<template #prefix>@</template>
-				</MkInput>
-				<MkInput v-model="host" @update:modelValue="search">
-					<template #label>{{ i18n.ts.host }}</template>
-					<template #prefix>@</template>
-				</MkInput>
-			</FormSplit>
-		</div>
-		<div v-if="username != '' || host != ''" class="result" :class="{ hit: users.length > 0 }">
-			<div v-if="users.length > 0" class="users">
-				<div v-for="user in users" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
+	<XModalWindow
+		ref="dialogEl"
+		:with-ok-button="true"
+		:ok-button-disabled="selected == null"
+		@click="cancel()"
+		@close="cancel()"
+		@ok="ok()"
+		@closed="$emit('closed')"
+	>
+		<template #header>{{ i18n.ts.selectUser }}</template>
+		<div class="tbhwbxda">
+			<div class="form">
+				<FormSplit :min-width="170">
+					<MkInput
+						v-model="username"
+						:autofocus="true"
+						@update:modelValue="search"
+					>
+						<template #label>{{ i18n.ts.username }}</template>
+						<template #prefix>@</template>
+					</MkInput>
+					<MkInput v-model="host" @update:modelValue="search">
+						<template #label>{{ i18n.ts.host }}</template>
+						<template #prefix>@</template>
+					</MkInput>
+				</FormSplit>
+			</div>
+			<div
+				v-if="username != '' || host != ''"
+				class="result"
+				:class="{ hit: users.length > 0 }"
+			>
+				<div v-if="users.length > 0" class="users">
+					<div
+						v-for="user in users"
+						:key="user.id"
+						class="user"
+						:class="{
+							selected: selected && selected.id === user.id,
+						}"
+						@click="selected = user"
+						@dblclick="ok()"
+					>
+						<MkAvatar
+							:user="user"
+							class="avatar"
+							:show-indicator="true"
+						/>
+						<div class="body">
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
+						</div>
 					</div>
 				</div>
+				<div v-else class="empty">
+					<span>{{ i18n.ts.noUsers }}</span>
+				</div>
 			</div>
-			<div v-else class="empty">
-				<span>{{ i18n.ts.noUsers }}</span>
-			</div>
-		</div>
-		<div v-if="username == '' && host == ''" class="recent">
-			<div class="users">
-				<div v-for="user in recentUsers" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
+			<div v-if="username == '' && host == ''" class="recent">
+				<div class="users">
+					<div
+						v-for="user in recentUsers"
+						:key="user.id"
+						class="user"
+						:class="{
+							selected: selected && selected.id === user.id,
+						}"
+						@click="selected = user"
+						@dblclick="ok()"
+					>
+						<MkAvatar
+							:user="user"
+							class="avatar"
+							:show-indicator="true"
+						/>
+						<div class="body">
+							<MkUserName :user="user" class="name" />
+							<MkAcct :user="user" class="acct" />
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-import * as misskey from 'calckey-js';
-import MkInput from '@/components/form/input.vue';
-import FormSplit from '@/components/form/split.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { nextTick, onMounted } from "vue";
+import * as misskey from "calckey-js";
+import MkInput from "@/components/form/input.vue";
+import FormSplit from "@/components/form/split.vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'ok', selected: misskey.entities.UserDetailed): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
+	(ev: "ok", selected: misskey.entities.UserDetailed): void;
+	(ev: "cancel"): void;
+	(ev: "closed"): void;
 }>();
 
-let username = $ref('');
-let host = $ref('');
+let username = $ref("");
+let host = $ref("");
 let users: misskey.entities.UserDetailed[] = $ref([]);
 let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
 let selected: misskey.entities.UserDetailed | null = $ref(null);
 let dialogEl = $ref();
 
 const search = () => {
-	if (username === '' && host === '') {
+	if (username === "" && host === "") {
 		users = [];
 		return;
 	}
-	os.api('users/search-by-username-and-host', {
+	os.api("users/search-by-username-and-host", {
 		username: username,
 		host: host,
 		limit: 10,
 		detail: false,
-	}).then(_users => {
+	}).then((_users) => {
 		users = _users;
 	});
 };
 
 const ok = () => {
 	if (selected == null) return;
-	emit('ok', selected);
+	emit("ok", selected);
 	dialogEl.close();
 
 	// 最近使ったユーザー更新
 	let recents = defaultStore.state.recentlyUsedUsers;
-	recents = recents.filter(x => x !== selected.id);
+	recents = recents.filter((x) => x !== selected.id);
 	recents.unshift(selected.id);
-	defaultStore.set('recentlyUsedUsers', recents.splice(0, 16));
+	defaultStore.set("recentlyUsedUsers", recents.splice(0, 16));
 };
 
 const cancel = () => {
-	emit('cancel');
+	emit("cancel");
 	dialogEl.close();
 };
 
 onMounted(() => {
-	os.api('users/show', {
+	os.api("users/show", {
 		userIds: defaultStore.state.recentlyUsedUsers,
-	}).then(users => {
+	}).then((users) => {
 		recentUsers = users;
 	});
 });
@@ -121,7 +155,8 @@ onMounted(() => {
 		padding: 0 var(--root-margin);
 	}
 
-	> .result, > .recent {
+	> .result,
+	> .recent {
 		display: flex;
 		flex-direction: column;
 		overflow: auto;
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
index 4ccc44b47..972864d1f 100644
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ b/packages/client/src/components/MkUsersTooltip.vue
@@ -1,18 +1,25 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
-	<div class="beaffaef">
-		<div v-for="u in users" :key="u.id" class="user">
-			<MkAvatar class="avatar" :user="u"/>
-			<MkUserName class="name" :user="u" :nowrap="true"/>
+	<MkTooltip
+		ref="tooltip"
+		:target-element="targetElement"
+		:max-width="250"
+		@closed="emit('closed')"
+	>
+		<div class="beaffaef">
+			<div v-for="u in users" :key="u.id" class="user">
+				<MkAvatar class="avatar" :user="u" />
+				<MkUserName class="name" :user="u" :nowrap="true" />
+			</div>
+			<div v-if="users.length < count" class="omitted">
+				+{{ count - users.length }}
+			</div>
 		</div>
-		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
-	</div>
-</MkTooltip>
+	</MkTooltip>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
+import {} from "vue";
+import MkTooltip from "./MkTooltip.vue";
 
 const props = defineProps<{
 	users: any[]; // TODO
@@ -21,7 +28,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 </script>
 
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index ff6535ed4..04fd6aaef 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -1,47 +1,62 @@
 <template>
-<span v-if="note.visibility !== 'public'" :class="$style.visibility">
-	<i v-if="note.visibility === 'home'" class="ph-house ph-bold ph-lg"></i>
-	<i v-else-if="note.visibility === 'followers'" class="ph-lock-simple-open ph-bold ph-lg"></i>
-	<i v-else-if="note.visibility === 'specified'" ref="specified" class="ph-envelope-simple-open ph-bold ph-lg"></i>
-</span>
-<span v-if="note.localOnly" :class="$style.localOnly"><i class="ph-hand-fist ph-bold ph-lg"></i></span>
+	<span v-if="note.visibility !== 'public'" :class="$style.visibility">
+		<i v-if="note.visibility === 'home'" class="ph-house ph-bold ph-lg"></i>
+		<i
+			v-else-if="note.visibility === 'followers'"
+			class="ph-lock-simple-open ph-bold ph-lg"
+		></i>
+		<i
+			v-else-if="note.visibility === 'specified'"
+			ref="specified"
+			class="ph-envelope-simple-open ph-bold ph-lg"
+		></i>
+	</span>
+	<span v-if="note.localOnly" :class="$style.localOnly"
+		><i class="ph-hand-fist ph-bold ph-lg"></i
+	></span>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import XDetails from '@/components/MkUsersTooltip.vue';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
+import { ref } from "vue";
+import XDetails from "@/components/MkUsersTooltip.vue";
+import * as os from "@/os";
+import { useTooltip } from "@/scripts/use-tooltip";
 
 const props = defineProps<{
 	note: {
 		visibility: string;
 		localOnly?: boolean;
 		visibleUserIds?: string[];
-	},
+	};
 }>();
 
 const specified = $ref<HTMLElement>();
 
-if (props.note.visibility === 'specified') {
+if (props.note.visibility === "specified") {
 	useTooltip($$(specified), async (showing) => {
-		const users = await os.api('users/show', {
+		const users = await os.api("users/show", {
 			userIds: props.note.visibleUserIds,
 			limit: 10,
 		});
 
-		os.popup(XDetails, {
-			showing,
-			users,
-			count: props.note.visibleUserIds.length,
-			targetElement: specified,
-		}, {}, 'closed');
+		os.popup(
+			XDetails,
+			{
+				showing,
+				users,
+				count: props.note.visibleUserIds.length,
+				targetElement: specified,
+			},
+			{},
+			"closed"
+		);
 	});
 }
 </script>
 
 <style lang="scss" module>
-.visibility, .localOnly {
+.visibility,
+.localOnly {
 	margin-left: 0.5em;
 }
 </style>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 2ad521055..753d8bbba 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -1,78 +1,162 @@
 <template>
-	<MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
+	<MkModal
+		ref="modal"
+		:z-priority="'high'"
+		:src="src"
+		@click="modal.close()"
+		@closed="emit('closed')"
+	>
 		<div class="_popup" :class="$style.root">
-			<button key="public" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
-				<div :class="$style.icon"><i class="ph-planet ph-bold ph-lg"></i></div>
+			<button
+				key="public"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'public' }]"
+				data-index="1"
+				@click="choose('public')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-planet ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.public
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.publicDescription
+					}}</span>
 				</div>
 			</button>
-			<button key="home" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
-				<div :class="$style.icon"><i class="ph-house ph-bold ph-lg"></i></div>
+			<button
+				key="home"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'home' }]"
+				data-index="2"
+				@click="choose('home')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-house ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.home
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.homeDescription
+					}}</span>
 				</div>
 			</button>
-			<button key="followers" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
-				<div :class="$style.icon"><i class="ph-lock-simple-open ph-bold ph-lg"></i></div>
+			<button
+				key="followers"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'followers' }]"
+				data-index="3"
+				@click="choose('followers')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-lock-simple-open ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.followers
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.followersDescription
+					}}</span>
 				</div>
 			</button>
-			<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
-				<div :class="$style.icon"><i class="ph-envelope-simple-open ph-bold ph-lg"></i></div>
+			<button
+				key="specified"
+				:disabled="localOnly"
+				class="_button"
+				:class="[$style.item, { [$style.active]: v === 'specified' }]"
+				data-index="4"
+				@click="choose('specified')"
+			>
+				<div :class="$style.icon">
+					<i class="ph-envelope-simple-open ph-bold ph-lg"></i>
+				</div>
 				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.specified
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.specifiedDescription
+					}}</span>
 				</div>
 			</button>
 			<div :class="$style.divider"></div>
-			<button key="localOnly" class="_button" :class="[$style.item, $style.localOnly, { [$style.active]: localOnly }]" data-index="5" @click="localOnly = !localOnly">
-				<div :class="$style.icon"><i class="ph-hand-fist ph-bold ph-lg"></i></div>
-				<div :class="$style.body">
-					<span :class="$style.itemTitle">{{ i18n.ts._visibility.localOnly }}</span>
-					<span :class="$style.itemDescription">{{ i18n.ts._visibility.localOnlyDescription }}</span>
+			<button
+				key="localOnly"
+				class="_button"
+				:class="[
+					$style.item,
+					$style.localOnly,
+					{ [$style.active]: localOnly },
+				]"
+				data-index="5"
+				@click="localOnly = !localOnly"
+			>
+				<div :class="$style.icon">
+					<i class="ph-hand-fist ph-bold ph-lg"></i>
+				</div>
+				<div :class="$style.body">
+					<span :class="$style.itemTitle">{{
+						i18n.ts._visibility.localOnly
+					}}</span>
+					<span :class="$style.itemDescription">{{
+						i18n.ts._visibility.localOnlyDescription
+					}}</span>
+				</div>
+				<div :class="$style.toggle">
+					<i
+						:class="
+							localOnly
+								? 'ph-toggle-right ph-bold ph-lg'
+								: 'ph-toggle-left ph-bold ph-lg'
+						"
+					></i>
 				</div>
-				<div :class="$style.toggle"><i :class="localOnly ? 'ph-toggle-right ph-bold ph-lg' : 'ph-toggle-left ph-bold ph-lg'"></i></div>
 			</button>
 		</div>
 	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MkModal from '@/components/MkModal.vue';
-import { i18n } from '@/i18n';
+import { nextTick, watch } from "vue";
+import * as misskey from "calckey-js";
+import MkModal from "@/components/MkModal.vue";
+import { i18n } from "@/i18n";
 
 const modal = $shallowRef<InstanceType<typeof MkModal>>();
 
-const props = withDefaults(defineProps<{
-	currentVisibility: typeof misskey.noteVisibilities[number];
-	currentLocalOnly: boolean;
-	src?: HTMLElement;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		currentVisibility: (typeof misskey.noteVisibilities)[number];
+		currentLocalOnly: boolean;
+		src?: HTMLElement;
+	}>(),
+	{}
+);
 
 const emit = defineEmits<{
-	(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
-	(ev: 'changeLocalOnly', v: boolean): void;
-	(ev: 'closed'): void;
+	(
+		ev: "changeVisibility",
+		v: (typeof misskey.noteVisibilities)[number]
+	): void;
+	(ev: "changeLocalOnly", v: boolean): void;
+	(ev: "closed"): void;
 }>();
 
 let v = $ref(props.currentVisibility);
 let localOnly = $ref(props.currentLocalOnly);
 
 watch($$(localOnly), () => {
-	emit('changeLocalOnly', localOnly);
+	emit("changeLocalOnly", localOnly);
 });
 
-function choose(visibility: typeof misskey.noteVisibilities[number]): void {
+function choose(visibility: (typeof misskey.noteVisibilities)[number]): void {
 	v = visibility;
-	emit('changeVisibility', visibility);
+	emit("changeVisibility", visibility);
 	nextTick(() => {
 		modal.close();
 	});
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index cd46f6739..acd394c1e 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -1,16 +1,37 @@
 <template>
-<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
-	<div :class="[$style.root, { [$style.iconOnly]: (text == null) || success }]">
-		<i v-if="success" :class="[$style.icon, $style.success]" class="ph-check ph-bold ph-lg"></i>
-		<MkLoading v-else :class="[$style.icon, $style.waiting]" :em="true"/>
-		<div v-if="text && !success" :class="$style.text">{{ text }}<MkEllipsis/></div>
-	</div>
-</MkModal>
+	<MkModal
+		ref="modal"
+		:prefer-type="'dialog'"
+		:z-priority="'high'"
+		@click="success ? done() : () => {}"
+		@closed="emit('closed')"
+	>
+		<div
+			:class="[
+				$style.root,
+				{ [$style.iconOnly]: text == null || success },
+			]"
+		>
+			<i
+				v-if="success"
+				:class="[$style.icon, $style.success]"
+				class="ph-check ph-bold ph-lg"
+			></i>
+			<MkLoading
+				v-else
+				:class="[$style.icon, $style.waiting]"
+				:em="true"
+			/>
+			<div v-if="text && !success" :class="$style.text">
+				{{ text }}<MkEllipsis />
+			</div>
+		</div>
+	</MkModal>
 </template>
 
 <script lang="ts" setup>
-import { watch, shallowRef } from 'vue';
-import MkModal from '@/components/MkModal.vue';
+import { watch, shallowRef } from "vue";
+import MkModal from "@/components/MkModal.vue";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
@@ -21,18 +42,21 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'done');
-	(ev: 'closed');
+	(ev: "done");
+	(ev: "closed");
 }>();
 
 function done() {
-	emit('done');
+	emit("done");
 	modal.value?.close();
 }
 
-watch(() => props.showing, () => {
-	if (!props.showing) done();
-});
+watch(
+	() => props.showing,
+	() => {
+		if (!props.showing) done();
+	}
+);
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 4bb1c0bb8..07e845032 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -1,45 +1,90 @@
 <template>
-<div class="vjoppmmu">
-	<template v-if="edit">
-		<header>
-			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
-				<template #label>{{ i18n.ts.selectWidget }}</template>
-				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
-			</MkSelect>
-			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
-			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
-		</header>
-		<XDraggable
-			v-model="widgets_"
-			item-key="id"
-			handle=".handle"
-			animation="150"
-		>
-			<template #item="{element}">
-				<div class="customize-container">
-					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ph-gear-six ph-bold ph-lg"></i></button>
-					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="ph-x ph-bold ph-lg"></i></button>
-					<div class="handle">
-						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
+	<div class="vjoppmmu">
+		<template v-if="edit">
+			<header>
+				<MkSelect
+					v-model="widgetAdderSelected"
+					style="margin-bottom: var(--margin)"
+					class="mk-widget-select"
+				>
+					<template #label>{{ i18n.ts.selectWidget }}</template>
+					<option
+						v-for="widget in widgetDefs"
+						:key="widget"
+						:value="widget"
+					>
+						{{ i18n.t(`_widgets.${widget}`) }}
+					</option>
+				</MkSelect>
+				<MkButton
+					inline
+					primary
+					class="mk-widget-add"
+					@click="addWidget"
+					><i class="ph-plus ph-bold ph-lg"></i>
+					{{ i18n.ts.add }}</MkButton
+				>
+				<MkButton inline @click="$emit('exit')">{{
+					i18n.ts.close
+				}}</MkButton>
+			</header>
+			<XDraggable
+				v-model="widgets_"
+				item-key="id"
+				handle=".handle"
+				animation="150"
+			>
+				<template #item="{ element }">
+					<div class="customize-container">
+						<button
+							class="config _button"
+							@click.prevent.stop="configWidget(element.id)"
+						>
+							<i class="ph-gear-six ph-bold ph-lg"></i>
+						</button>
+						<button
+							class="remove _button"
+							@click.prevent.stop="removeWidget(element)"
+						>
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+						<div class="handle">
+							<component
+								:is="`mkw-${element.name}`"
+								:ref="(el) => (widgetRefs[element.id] = el)"
+								class="widget"
+								:widget="element"
+								@updateProps="updateWidget(element.id, $event)"
+							/>
+						</div>
 					</div>
-				</div>
-			</template>
-		</XDraggable>
-	</template>
-	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
-</div>
+				</template>
+			</XDraggable>
+		</template>
+		<component
+			:is="`mkw-${widget.name}`"
+			v-for="widget in widgets"
+			v-else
+			:key="widget.id"
+			:ref="(el) => (widgetRefs[widget.id] = el)"
+			class="widget"
+			:widget="widget"
+			@updateProps="updateWidget(widget.id, $event)"
+			@contextmenu.stop="onContextmenu(widget, $event)"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, reactive, ref, computed } from 'vue';
-import { v4 as uuid } from 'uuid';
-import MkSelect from '@/components/form/select.vue';
-import MkButton from '@/components/MkButton.vue';
-import { widgets as widgetDefs } from '@/widgets';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent, reactive, ref, computed } from "vue";
+import { v4 as uuid } from "uuid";
+import MkSelect from "@/components/form/select.vue";
+import MkButton from "@/components/MkButton.vue";
+import { widgets as widgetDefs } from "@/widgets";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
+const XDraggable = defineAsyncComponent(() => import("vuedraggable"));
 
 type Widget = {
 	name: string;
@@ -53,11 +98,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'updateWidgets', widgets: Widget[]): void;
-	(ev: 'addWidget', widget: Widget): void;
-	(ev: 'removeWidget', widget: Widget): void;
-	(ev: 'updateWidget', widget: Partial<Widget>): void;
-	(ev: 'exit'): void;
+	(ev: "updateWidgets", widgets: Widget[]): void;
+	(ev: "addWidget", widget: Widget): void;
+	(ev: "removeWidget", widget: Widget): void;
+	(ev: "updateWidget", widget: Partial<Widget>): void;
+	(ev: "exit"): void;
 }>();
 
 const widgetRefs = {};
@@ -68,7 +113,7 @@ const widgetAdderSelected = ref(null);
 const addWidget = () => {
 	if (widgetAdderSelected.value == null) return;
 
-	emit('addWidget', {
+	emit("addWidget", {
 		name: widgetAdderSelected.value,
 		id: uuid(),
 		data: {},
@@ -77,39 +122,51 @@ const addWidget = () => {
 	widgetAdderSelected.value = null;
 };
 const removeWidget = (widget) => {
-	emit('removeWidget', widget);
+	emit("removeWidget", widget);
 };
 const updateWidget = (id, data) => {
-	emit('updateWidget', { id, data });
+	emit("updateWidget", { id, data });
 };
 const widgets_ = computed({
 	get: () => props.widgets,
 	set: (value) => {
-		emit('updateWidgets', value);
+		emit("updateWidgets", value);
 	},
 });
 
 function onContextmenu(widget: Widget, ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
-	if (window.getSelection()?.toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			ev.target.tagName
+		) ||
+		ev.target.attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection()?.toString() !== "") return;
 
-	os.contextMenu([{
-		type: 'label',
-		text: i18n.t(`_widgets.${widget.name}`),
-	}, {
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts.settings,
-		action: () => {
-			configWidget(widget.id);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: i18n.t(`_widgets.${widget.name}`),
+			},
+			{
+				icon: "ph-gear-six ph-bold ph-lg",
+				text: i18n.ts.settings,
+				action: () => {
+					configWidget(widget.id);
+				},
+			},
+		],
+		ev
+	);
 }
 </script>
 
@@ -124,7 +181,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		}
 	}
 
-	> .widget, .customize-container {
+	> .widget,
+	.customize-container {
 		contain: content;
 		margin: var(--margin) 0;
 
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 6d43b0dc0..5aa3adef2 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -1,107 +1,190 @@
 <template>
-<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
-	<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
-		<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
-			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
-				<span class="left">
-					<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-				</span>
-				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
-					<slot name="header"></slot>
-				</span>
-				<span class="right">
-					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-					<button v-if="canResize && maximized" class="button _button" @click="unMaximize()"><i class="ph-copy ph-bold ph-lg"></i></button>
-					<button v-else-if="canResize && !maximized" class="button _button" @click="maximize()"><i class="ph-browser ph-bold ph-lg"></i></button>
-					<button v-if="closeButton" class="button _button" @click="close()"><i class="ph-x ph-bold ph-lg"></i></button>
-				</span>
-			</div>
-			<div class="body">
-				<slot></slot>
+	<transition
+		:name="$store.state.animation ? 'window' : ''"
+		appear
+		@after-leave="$emit('closed')"
+	>
+		<div
+			v-if="showing"
+			ref="rootEl"
+			class="ebkgocck"
+			:class="{ maximized }"
+		>
+			<div
+				class="body _shadow _narrow_"
+				@mousedown="onBodyMousedown"
+				@keydown="onKeydown"
+			>
+				<div
+					class="header"
+					:class="{ mini }"
+					@contextmenu.prevent.stop="onContextmenu"
+				>
+					<span class="left">
+						<button
+							v-for="button in buttonsLeft"
+							v-tooltip="button.title"
+							class="button _button"
+							:class="{ highlighted: button.highlighted }"
+							@click="button.onClick"
+						>
+							<i :class="button.icon"></i>
+						</button>
+					</span>
+					<span
+						class="title"
+						@mousedown.prevent="onHeaderMousedown"
+						@touchstart.prevent="onHeaderMousedown"
+					>
+						<slot name="header"></slot>
+					</span>
+					<span class="right">
+						<button
+							v-for="button in buttonsRight"
+							v-tooltip="button.title"
+							class="button _button"
+							:class="{ highlighted: button.highlighted }"
+							@click="button.onClick"
+						>
+							<i :class="button.icon"></i>
+						</button>
+						<button
+							v-if="canResize && maximized"
+							class="button _button"
+							@click="unMaximize()"
+						>
+							<i class="ph-copy ph-bold ph-lg"></i>
+						</button>
+						<button
+							v-else-if="canResize && !maximized"
+							class="button _button"
+							@click="maximize()"
+						>
+							<i class="ph-browser ph-bold ph-lg"></i>
+						</button>
+						<button
+							v-if="closeButton"
+							class="button _button"
+							@click="close()"
+						>
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+					</span>
+				</div>
+				<div class="body">
+					<slot></slot>
+				</div>
 			</div>
+			<template v-if="canResize">
+				<div
+					class="handle top"
+					@mousedown.prevent="onTopHandleMousedown"
+				></div>
+				<div
+					class="handle right"
+					@mousedown.prevent="onRightHandleMousedown"
+				></div>
+				<div
+					class="handle bottom"
+					@mousedown.prevent="onBottomHandleMousedown"
+				></div>
+				<div
+					class="handle left"
+					@mousedown.prevent="onLeftHandleMousedown"
+				></div>
+				<div
+					class="handle top-left"
+					@mousedown.prevent="onTopLeftHandleMousedown"
+				></div>
+				<div
+					class="handle top-right"
+					@mousedown.prevent="onTopRightHandleMousedown"
+				></div>
+				<div
+					class="handle bottom-right"
+					@mousedown.prevent="onBottomRightHandleMousedown"
+				></div>
+				<div
+					class="handle bottom-left"
+					@mousedown.prevent="onBottomLeftHandleMousedown"
+				></div>
+			</template>
 		</div>
-		<template v-if="canResize">
-			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
-			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
-			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
-			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
-			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
-			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
-			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
-			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
-		</template>
-	</div>
-</transition>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, provide } from 'vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
-import { MenuItem } from '@/types/menu';
+import { onBeforeUnmount, onMounted, provide } from "vue";
+import contains from "@/scripts/contains";
+import * as os from "@/os";
+import { MenuItem } from "@/types/menu";
 
 const minHeight = 50;
 const minWidth = 250;
 
 function dragListen(fn: (ev: MouseEvent) => void) {
-	window.addEventListener('mousemove', fn);
-	window.addEventListener('touchmove', fn);
-	window.addEventListener('mouseleave', dragClear.bind(null, fn));
-	window.addEventListener('mouseup', dragClear.bind(null, fn));
-	window.addEventListener('touchend', dragClear.bind(null, fn));
+	window.addEventListener("mousemove", fn);
+	window.addEventListener("touchmove", fn);
+	window.addEventListener("mouseleave", dragClear.bind(null, fn));
+	window.addEventListener("mouseup", dragClear.bind(null, fn));
+	window.addEventListener("touchend", dragClear.bind(null, fn));
 }
 
 function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('touchmove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
-	window.removeEventListener('touchend', dragClear);
+	window.removeEventListener("mousemove", fn);
+	window.removeEventListener("touchmove", fn);
+	window.removeEventListener("mouseleave", dragClear);
+	window.removeEventListener("mouseup", dragClear);
+	window.removeEventListener("touchend", dragClear);
 }
 
-const props = withDefaults(defineProps<{
-	initialWidth?: number;
-	initialHeight?: number | null;
-	canResize?: boolean;
-	closeButton?: boolean;
-	mini?: boolean;
-	front?: boolean;
-	contextmenu?: MenuItem[] | null;
-	buttonsLeft?: any[];
-	buttonsRight?: any[];
-}>(), {
-	initialWidth: 400,
-	initialHeight: null,
-	canResize: false,
-	closeButton: true,
-	mini: false,
-	front: false,
-	contextmenu: null,
-	buttonsLeft: () => [],
-	buttonsRight: () => [],
-});
+const props = withDefaults(
+	defineProps<{
+		initialWidth?: number;
+		initialHeight?: number | null;
+		canResize?: boolean;
+		closeButton?: boolean;
+		mini?: boolean;
+		front?: boolean;
+		contextmenu?: MenuItem[] | null;
+		buttonsLeft?: any[];
+		buttonsRight?: any[];
+	}>(),
+	{
+		initialWidth: 400,
+		initialHeight: null,
+		canResize: false,
+		closeButton: true,
+		mini: false,
+		front: false,
+		contextmenu: null,
+		buttonsLeft: () => [],
+		buttonsRight: () => [],
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'closed'): void;
+	(ev: "closed"): void;
 }>();
 
-provide('inWindow', true);
+provide("inWindow", true);
 
 let rootEl = $ref<HTMLElement | null>();
 let showing = $ref(true);
 let beforeClickedAt = 0;
 let maximized = $ref(false);
-let unMaximizedTop = '';
-let unMaximizedLeft = '';
-let unMaximizedWidth = '';
-let unMaximizedHeight = '';
+let unMaximizedTop = "";
+let unMaximizedLeft = "";
+let unMaximizedWidth = "";
+let unMaximizedHeight = "";
 
 function close() {
 	showing = false;
 }
 
 function onKeydown(evt) {
-	if (evt.which === 27) { // Esc
+	if (evt.which === 27) {
+		// Esc
 		evt.preventDefault();
 		evt.stopPropagation();
 		close();
@@ -117,7 +200,7 @@ function onContextmenu(ev: MouseEvent) {
 // 最前面へ移動
 function top() {
 	if (rootEl) {
-		rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
+		rootEl.style.zIndex = os.claimZIndex(props.front ? "middle" : "low");
 	}
 }
 
@@ -127,10 +210,10 @@ function maximize() {
 	unMaximizedLeft = rootEl.style.left;
 	unMaximizedWidth = rootEl.style.width;
 	unMaximizedHeight = rootEl.style.height;
-	rootEl.style.top = '0';
-	rootEl.style.left = '0';
-	rootEl.style.width = '100%';
-	rootEl.style.height = '100%';
+	rootEl.style.top = "0";
+	rootEl.style.left = "0";
+	rootEl.style.width = "100%";
+	rootEl.style.height = "100%";
 }
 
 function unMaximize() {
@@ -176,9 +259,17 @@ function onHeaderMousedown(evt: MouseEvent) {
 
 	const position = main.getBoundingClientRect();
 
-	const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
-	const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
-	const moveBaseX = beforeMaximized ? parseInt(unMaximizedWidth, 10) / 2 : clickX - position.left; // TODO: parseIntやめる
+	const clickX =
+		evt.touches && evt.touches.length > 0
+			? evt.touches[0].clientX
+			: evt.clientX;
+	const clickY =
+		evt.touches && evt.touches.length > 0
+			? evt.touches[0].clientY
+			: evt.clientY;
+	const moveBaseX = beforeMaximized
+		? parseInt(unMaximizedWidth, 10) / 2
+		: clickX - position.left; // TODO: parseIntやめる
 	const moveBaseY = beforeMaximized ? 20 : clickY - position.top;
 	const browserWidth = window.innerWidth;
 	const browserHeight = window.innerHeight;
@@ -190,7 +281,8 @@ function onHeaderMousedown(evt: MouseEvent) {
 		let moveTop = y - moveBaseY;
 
 		// 下はみ出し
-		if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
+		if (moveTop + windowHeight > browserHeight)
+			moveTop = browserHeight - windowHeight;
 
 		// 左はみ出し
 		if (moveLeft < 0) moveLeft = 0;
@@ -199,10 +291,11 @@ function onHeaderMousedown(evt: MouseEvent) {
 		if (moveTop < 0) moveTop = 0;
 
 		// 右はみ出し
-		if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
+		if (moveLeft + windowWidth > browserWidth)
+			moveLeft = browserWidth - windowWidth;
 
-		rootEl.style.left = moveLeft + 'px';
-		rootEl.style.top = moveTop + 'px';
+		rootEl.style.left = moveLeft + "px";
+		rootEl.style.top = moveTop + "px";
 	}
 
 	if (beforeMaximized) {
@@ -210,9 +303,15 @@ function onHeaderMousedown(evt: MouseEvent) {
 	}
 
 	// 動かした時
-	dragListen(me => {
-		const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
-		const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
+	dragListen((me) => {
+		const x =
+			me.touches && me.touches.length > 0
+				? me.touches[0].clientX
+				: me.clientX;
+		const y =
+			me.touches && me.touches.length > 0
+				? me.touches[0].clientY
+				: me.clientY;
 
 		move(x, y);
 	});
@@ -223,21 +322,23 @@ function onTopHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientY;
-	const height = parseInt(getComputedStyle(main, '').height, 10);
-	const top = parseInt(getComputedStyle(main, '').top, 10);
+	const height = parseInt(getComputedStyle(main, "").height, 10);
+	const top = parseInt(getComputedStyle(main, "").top, 10);
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientY - base;
 		if (top + move > 0) {
 			if (height + -move > minHeight) {
 				applyTransformHeight(height + -move);
 				applyTransformTop(top + move);
-			} else { // 最小の高さより小さくなろうとした時
+			} else {
+				// 最小の高さより小さくなろうとした時
 				applyTransformHeight(minHeight);
 				applyTransformTop(top + (height - minHeight));
 			}
-		} else { // 上のはみ出し時
+		} else {
+			// 上のはみ出し時
 			applyTransformHeight(top + height);
 			applyTransformTop(0);
 		}
@@ -249,20 +350,22 @@ function onRightHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientX;
-	const width = parseInt(getComputedStyle(main, '').width, 10);
-	const left = parseInt(getComputedStyle(main, '').left, 10);
+	const width = parseInt(getComputedStyle(main, "").width, 10);
+	const left = parseInt(getComputedStyle(main, "").left, 10);
 	const browserWidth = window.innerWidth;
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientX - base;
 		if (left + width + move < browserWidth) {
 			if (width + move > minWidth) {
 				applyTransformWidth(width + move);
-			} else { // 最小の幅より小さくなろうとした時
+			} else {
+				// 最小の幅より小さくなろうとした時
 				applyTransformWidth(minWidth);
 			}
-		} else { // 右のはみ出し時
+		} else {
+			// 右のはみ出し時
 			applyTransformWidth(browserWidth - left);
 		}
 	});
@@ -273,20 +376,22 @@ function onBottomHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientY;
-	const height = parseInt(getComputedStyle(main, '').height, 10);
-	const top = parseInt(getComputedStyle(main, '').top, 10);
+	const height = parseInt(getComputedStyle(main, "").height, 10);
+	const top = parseInt(getComputedStyle(main, "").top, 10);
 	const browserHeight = window.innerHeight;
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientY - base;
 		if (top + height + move < browserHeight) {
 			if (height + move > minHeight) {
 				applyTransformHeight(height + move);
-			} else { // 最小の高さより小さくなろうとした時
+			} else {
+				// 最小の高さより小さくなろうとした時
 				applyTransformHeight(minHeight);
 			}
-		} else { // 下のはみ出し時
+		} else {
+			// 下のはみ出し時
 			applyTransformHeight(browserHeight - top);
 		}
 	});
@@ -297,21 +402,23 @@ function onLeftHandleMousedown(evt) {
 	const main = rootEl;
 
 	const base = evt.clientX;
-	const width = parseInt(getComputedStyle(main, '').width, 10);
-	const left = parseInt(getComputedStyle(main, '').left, 10);
+	const width = parseInt(getComputedStyle(main, "").width, 10);
+	const left = parseInt(getComputedStyle(main, "").left, 10);
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		const move = me.clientX - base;
 		if (left + move > 0) {
 			if (width + -move > minWidth) {
 				applyTransformWidth(width + -move);
 				applyTransformLeft(left + move);
-			} else { // 最小の幅より小さくなろうとした時
+			} else {
+				// 最小の幅より小さくなろうとした時
 				applyTransformWidth(minWidth);
 				applyTransformLeft(left + (width - minWidth));
 			}
-		} else { // 左のはみ出し時
+		} else {
+			// 左のはみ出し時
 			applyTransformWidth(left + width);
 			applyTransformLeft(0);
 		}
@@ -345,23 +452,23 @@ function onBottomLeftHandleMousedown(evt) {
 // 高さを適用
 function applyTransformHeight(height) {
 	if (height > window.innerHeight) height = window.innerHeight;
-	rootEl.style.height = height + 'px';
+	rootEl.style.height = height + "px";
 }
 
 // 幅を適用
 function applyTransformWidth(width) {
 	if (width > window.innerWidth) width = window.innerWidth;
-	rootEl.style.width = width + 'px';
+	rootEl.style.width = width + "px";
 }
 
 // Y座標を適用
 function applyTransformTop(top) {
-	rootEl.style.top = top + 'px';
+	rootEl.style.top = top + "px";
 }
 
 // X座標を適用
 function applyTransformLeft(left) {
-	rootEl.style.left = left + 'px';
+	rootEl.style.left = left + "px";
 }
 
 function onBrowserResize() {
@@ -371,27 +478,29 @@ function onBrowserResize() {
 	const browserHeight = window.innerHeight;
 	const windowWidth = main.offsetWidth;
 	const windowHeight = main.offsetHeight;
-	if (position.left < 0) main.style.left = '0'; // 左はみ出し
-	if (position.top + windowHeight > browserHeight) main.style.top = browserHeight - windowHeight + 'px'; // 下はみ出し
-	if (position.left + windowWidth > browserWidth) main.style.left = browserWidth - windowWidth + 'px'; // 右はみ出し
-	if (position.top < 0) main.style.top = '0'; // 上はみ出し
+	if (position.left < 0) main.style.left = "0"; // 左はみ出し
+	if (position.top + windowHeight > browserHeight)
+		main.style.top = browserHeight - windowHeight + "px"; // 下はみ出し
+	if (position.left + windowWidth > browserWidth)
+		main.style.left = browserWidth - windowWidth + "px"; // 右はみ出し
+	if (position.top < 0) main.style.top = "0"; // 上はみ出し
 }
 
 onMounted(() => {
 	if (props.initialWidth) applyTransformWidth(props.initialWidth);
 	if (props.initialHeight) applyTransformHeight(props.initialHeight);
 
-	applyTransformTop((window.innerHeight / 2) - (rootEl.offsetHeight / 2));
-	applyTransformLeft((window.innerWidth / 2) - (rootEl.offsetWidth / 2));
+	applyTransformTop(window.innerHeight / 2 - rootEl.offsetHeight / 2);
+	applyTransformLeft(window.innerWidth / 2 - rootEl.offsetWidth / 2);
 
 	// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
 	top();
 
-	window.addEventListener('resize', onBrowserResize);
+	window.addEventListener("resize", onBrowserResize);
 });
 
 onBeforeUnmount(() => {
-	window.removeEventListener('resize', onBrowserResize);
+	window.removeEventListener("resize", onBrowserResize);
 });
 
 defineExpose({
@@ -400,10 +509,12 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.window-enter-active, .window-leave-active {
+.window-enter-active,
+.window-leave-active {
 	transition: opacity 0.2s, transform 0.2s !important;
 }
-.window-enter-from, .window-leave-to {
+.window-enter-from,
+.window-leave-to {
 	pointer-events: none;
 	opacity: 0;
 	transform: scale(0.9);
@@ -443,7 +554,8 @@ defineExpose({
 			font-size: 95%;
 			font-weight: bold;
 
-			> .left, > .right {
+			> .left,
+			> .right {
 				> .button {
 					height: var(--height);
 					width: var(--height);
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index a50b17246..a4d9716bb 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -1,30 +1,33 @@
 <template>
-<div
-	class="ziffeoms"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check ph-check ph-bold ph-lg"></i>
-	</span>
-	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
-		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
-		<p class="caption"><slot name="caption"></slot></p>
-	</span>
-</div>
+	<div class="ziffeoms" :class="{ disabled, checked }">
+		<input
+			ref="input"
+			type="checkbox"
+			:disabled="disabled"
+			@keydown.enter="toggle"
+		/>
+		<span
+			ref="button"
+			v-adaptive-border
+			v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff"
+			class="button"
+			@click.prevent="toggle"
+		>
+			<i class="check ph-check ph-bold ph-lg"></i>
+		</span>
+		<span class="label">
+			<!-- TODO: 無名slotの方は廃止 -->
+			<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+			<p class="caption"><slot name="caption"></slot></p>
+		</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import * as os from '@/os';
-import Ripple from '@/components/MkRipple.vue';
-import { i18n } from '@/i18n';
+import { toRefs, Ref } from "vue";
+import * as os from "@/os";
+import Ripple from "@/components/MkRipple.vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
@@ -32,20 +35,20 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
+	(ev: "update:modelValue", v: boolean): void;
 }>();
 
 let button = $ref<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;
-	emit('update:modelValue', !checked.value);
+	emit("update:modelValue", !checked.value);
 
 	if (!checked.value) {
 		const rect = button.getBoundingClientRect();
-		const x = rect.left + (button.offsetWidth / 2);
-		const y = rect.top + (button.offsetHeight / 2);
-		os.popup(Ripple, { x, y, particle: false }, {}, 'end');
+		const x = rect.left + button.offsetWidth / 2;
+		const y = rect.top + button.offsetHeight / 2;
+		os.popup(Ripple, { x, y, particle: false }, {}, "end");
 	}
 };
 </script>
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index 1a179879b..8868f5784 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -1,30 +1,33 @@
 <template>
-<div class="dwzlatin" :class="{ opened }">
-	<div class="header _button" @click="toggle">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot name="label"></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i>
-			<i v-else class="ph-caret-down ph-bold ph-lg icon"></i>
-		</span>
-	</div>
-	<KeepAlive>
-		<div v-if="openedAtLeastOnce" v-show="opened" class="body">
-			<MkSpacer :margin-min="14" :margin-max="22">
-				<slot></slot>
-			</MkSpacer>
+	<div class="dwzlatin" :class="{ opened }">
+		<div class="header _button" @click="toggle">
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot name="label"></slot></span>
+			<span class="right">
+				<span class="text"><slot name="suffix"></slot></span>
+				<i v-if="opened" class="ph-caret-up ph-bold ph-lg icon"></i>
+				<i v-else class="ph-caret-down ph-bold ph-lg icon"></i>
+			</span>
 		</div>
-	</KeepAlive>
-</div>
+		<KeepAlive>
+			<div v-if="openedAtLeastOnce" v-show="opened" class="body">
+				<MkSpacer :margin-min="14" :margin-max="22">
+					<slot></slot>
+				</MkSpacer>
+			</div>
+		</KeepAlive>
+	</div>
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{
-	defaultOpen: boolean;
-}>(), {
-  defaultOpen: false,
-});
+const props = withDefaults(
+	defineProps<{
+		defaultOpen: boolean;
+	}>(),
+	{
+		defaultOpen: false,
+	}
+);
 
 let opened: boolean = $ref(props.defaultOpen);
 let openedAtLeastOnce: boolean = $ref(props.defaultOpen);
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index ee5371175..1304464e4 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -1,48 +1,70 @@
 <template>
-<div class="matxzzsk">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ inline, disabled, focused }">
-		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<input
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			:type="type"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			:step="step"
-			:list="id"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-		>
-		<datalist v-if="datalist" :id="id">
-			<option v-for="data in datalist" :value="data"/>
-		</datalist>
-		<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+	<div class="matxzzsk">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div class="input" :class="{ inline, disabled, focused }">
+			<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
+			<input
+				ref="inputEl"
+				v-model="v"
+				v-adaptive-border
+				:type="type"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="spellcheck"
+				:step="step"
+				:list="id"
+				@focus="focused = true"
+				@blur="focused = false"
+				@keydown="onKeydown($event)"
+				@input="onInput"
+			/>
+			<datalist v-if="datalist" :id="id">
+				<option v-for="data in datalist" :value="data" />
+			</datalist>
+			<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+		<MkButton
+			v-if="manualSave && changed"
+			primary
+			class="save"
+			@click="updated"
+			><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { debounce } from 'throttle-debounce';
-import MkButton from '@/components/MkButton.vue';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import {
+	onMounted,
+	onUnmounted,
+	nextTick,
+	ref,
+	watch,
+	computed,
+	toRefs,
+} from "vue";
+import { debounce } from "throttle-debounce";
+import MkButton from "@/components/MkButton.vue";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: string | number;
-	type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search';
+	type?:
+		| "text"
+		| "number"
+		| "password"
+		| "email"
+		| "url"
+		| "date"
+		| "time"
+		| "search";
 	required?: boolean;
 	readonly?: boolean;
 	disabled?: boolean;
@@ -61,10 +83,10 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
-	(ev: 'keydown', _ev: KeyboardEvent): void;
-	(ev: 'enter'): void;
-	(ev: 'update:modelValue', value: string | number): void;
+	(ev: "change", _ev: KeyboardEvent): void;
+	(ev: "keydown", _ev: KeyboardEvent): void;
+	(ev: "enter"): void;
+	(ev: "update:modelValue", value: string | number): void;
 }>();
 
 const { modelValue, type, autofocus } = toRefs(props);
@@ -73,44 +95,41 @@ const id = Math.random().toString(); // TODO: uuid?
 const focused = ref(false);
 const changed = ref(false);
 const invalid = ref(false);
-const filled = computed(() => v.value !== '' && v.value != null);
+const filled = computed(() => v.value !== "" && v.value != null);
 const inputEl = ref<HTMLElement>();
 const prefixEl = ref<HTMLElement>();
 const suffixEl = ref<HTMLElement>();
-const height =
-	props.small ? 36 :
-	props.large ? 40 :
-	38;
+const height = props.small ? 36 : props.large ? 40 : 38;
 
 const focus = () => inputEl.value.focus();
 const onInput = (ev: KeyboardEvent) => {
 	changed.value = true;
-	emit('change', ev);
+	emit("change", ev);
 };
 const onKeydown = (ev: KeyboardEvent) => {
-	emit('keydown', ev);
+	emit("keydown", ev);
 
-	if (ev.code === 'Enter') {
-		emit('enter');
+	if (ev.code === "Enter") {
+		emit("enter");
 	}
 };
 
 const updated = () => {
 	changed.value = false;
-	if (type.value === 'number') {
-		emit('update:modelValue', parseFloat(v.value));
+	if (type.value === "number") {
+		emit("update:modelValue", parseFloat(v.value));
 	} else {
-		emit('update:modelValue', v.value);
+		emit("update:modelValue", v.value);
 	}
 };
 
 const debouncedUpdated = debounce(1000, updated);
 
-watch(modelValue, newValue => {
+watch(modelValue, (newValue) => {
 	v.value = newValue;
 });
 
-watch(v, newValue => {
+watch(v, (newValue) => {
 	if (!props.manualSave) {
 		if (props.debounce) {
 			debouncedUpdated();
@@ -124,21 +143,27 @@ watch(v, newValue => {
 
 // このコンポーネントが作成された時、非表示状態である場合がある
 // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-useInterval(() => {
-	if (prefixEl.value) {
-		if (prefixEl.value.offsetWidth) {
-			inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+useInterval(
+	() => {
+		if (prefixEl.value) {
+			if (prefixEl.value.offsetWidth) {
+				inputEl.value.style.paddingLeft =
+					prefixEl.value.offsetWidth + "px";
+			}
 		}
-	}
-	if (suffixEl.value) {
-		if (suffixEl.value.offsetWidth) {
-			inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+		if (suffixEl.value) {
+			if (suffixEl.value.offsetWidth) {
+				inputEl.value.style.paddingRight =
+					suffixEl.value.offsetWidth + "px";
+			}
 		}
+	},
+	100,
+	{
+		immediate: true,
+		afterMounted: true,
 	}
-}, 100, {
-	immediate: true,
-	afterMounted: true,
-});
+);
 
 onMounted(() => {
 	nextTick(() => {
@@ -250,7 +275,8 @@ onMounted(() => {
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index de675d08b..01acb2951 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -1,32 +1,38 @@
 <template>
-<div class="ffcbddfc" :class="{ inline }">
-	<a v-if="external" class="main _button" :href="to" target="_blank">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ph-arrow-square-out ph-bold ph-lg icon"></i>
-		</span>
-	</a>
-	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ph-caret-right ph-bold ph-lg icon"></i>
-		</span>
-	</MkA>
-</div>
+	<div class="ffcbddfc" :class="{ inline }">
+		<a v-if="external" class="main _button" :href="to" target="_blank">
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot></slot></span>
+			<span class="right">
+				<span class="text"><slot name="suffix"></slot></span>
+				<i class="ph-arrow-square-out ph-bold ph-lg icon"></i>
+			</span>
+		</a>
+		<MkA
+			v-else
+			class="main _button"
+			:class="{ active }"
+			:to="to"
+			:behavior="behavior"
+		>
+			<span class="icon"><slot name="icon"></slot></span>
+			<span class="text"><slot></slot></span>
+			<span class="right">
+				<span class="text"><slot name="suffix"></slot></span>
+				<i class="ph-caret-right ph-bold ph-lg icon"></i>
+			</span>
+		</MkA>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	to: string;
 	active?: boolean;
 	external?: boolean;
-	behavior?: null | 'window' | 'browser' | 'modalWindow';
+	behavior?: null | "window" | "browser" | "modalWindow";
 	inline?: boolean;
 }>();
 </script>
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index b36f7e9fd..493b2d010 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -1,25 +1,22 @@
 <template>
-<div
-	v-adaptive-border
-	class="novjtctn"
-	:class="{ disabled, checked }"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click="toggle"
->
-	<input
-		type="radio"
-		:disabled="disabled"
+	<div
+		v-adaptive-border
+		class="novjtctn"
+		:class="{ disabled, checked }"
+		:aria-checked="checked"
+		:aria-disabled="disabled"
+		@click="toggle"
 	>
-	<span class="button">
-		<span></span>
-	</span>
-	<span class="label"><slot></slot></span>
-</div>
+		<input type="radio" :disabled="disabled" />
+		<span class="button">
+			<span></span>
+		</span>
+		<span class="label"><slot></slot></span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	modelValue: any;
@@ -28,14 +25,14 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any): void;
+	(ev: "update:modelValue", value: any): void;
 }>();
 
 let checked = $computed(() => props.modelValue === props.value);
 
 function toggle(): void {
 	if (props.disabled) return;
-	emit('update:modelValue', props.value);
+	emit("update:modelValue", props.value);
 }
 </script>
 
@@ -60,7 +57,8 @@ function toggle(): void {
 	&.disabled {
 		opacity: 0.6;
 
-		&, * {
+		&,
+		* {
 			cursor: not-allowed !important;
 		}
 	}
@@ -74,7 +72,8 @@ function toggle(): void {
 		border-color: var(--accentedBg) !important;
 		color: var(--accent);
 
-		&, * {
+		&,
+		* {
 			cursor: default !important;
 		}
 
@@ -107,7 +106,7 @@ function toggle(): void {
 		transition: inherit;
 
 		&:after {
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			top: 3px;
diff --git a/packages/client/src/components/form/radios.vue b/packages/client/src/components/form/radios.vue
index bde4a8fb0..5c98edce3 100644
--- a/packages/client/src/components/form/radios.vue
+++ b/packages/client/src/components/form/radios.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import { defineComponent, h } from 'vue';
-import MkRadio from './radio.vue';
+import { defineComponent, h } from "vue";
+import MkRadio from "./radio.vue";
 
 export default defineComponent({
 	components: {
@@ -18,7 +18,7 @@ export default defineComponent({
 	},
 	watch: {
 		value() {
-			this.$emit('update:modelValue', this.value);
+			this.$emit("update:modelValue", this.value);
 		},
 	},
 	render() {
@@ -27,27 +27,58 @@ export default defineComponent({
 		const caption = this.$slots.caption && this.$slots.caption();
 
 		// なぜかFragmentになることがあるため
-		if (options.length === 1 && options[0].props == null) options = options[0].children;
+		if (options.length === 1 && options[0].props == null)
+			options = options[0].children;
 
-		return h('div', {
-			class: 'novjtcto',
-		}, [
-			...(label ? [h('div', {
-				class: 'label',
-			}, [label])] : []),
-			h('div', {
-				class: 'body',
-			}, options.map(option => h(MkRadio, {
-				key: option.key,
-				value: option.props.value,
-				modelValue: this.value,
-				'onUpdate:modelValue': value => this.value = value,
-			}, option.children)),
-			),
-			...(caption ? [h('div', {
-				class: 'caption',
-			}, [caption])] : []),
-		]);
+		return h(
+			"div",
+			{
+				class: "novjtcto",
+			},
+			[
+				...(label
+					? [
+							h(
+								"div",
+								{
+									class: "label",
+								},
+								[label]
+							),
+					  ]
+					: []),
+				h(
+					"div",
+					{
+						class: "body",
+					},
+					options.map((option) =>
+						h(
+							MkRadio,
+							{
+								key: option.key,
+								value: option.props.value,
+								modelValue: this.value,
+								"onUpdate:modelValue": (value) =>
+									(this.value = value),
+							},
+							option.children
+						)
+					)
+				),
+				...(caption
+					? [
+							h(
+								"div",
+								{
+									class: "caption",
+								},
+								[caption]
+							),
+					  ]
+					: []),
+			]
+		);
 	},
 });
 </script>
@@ -66,8 +97,8 @@ export default defineComponent({
 
 	> .body {
 		display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
+		gap: 12px;
+		flex-wrap: wrap;
 	}
 
 	> .caption {
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index db21c3571..e5ec44f68 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -1,42 +1,66 @@
 <template>
-<div class="timctyfi" :class="{ disabled, easing }">
-	<div class="label"><slot name="label"></slot></div>
-	<div v-adaptive-border class="body">
-		<div ref="containerEl" class="container">
-			<div class="track">
-				<div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
+	<div class="timctyfi" :class="{ disabled, easing }">
+		<div class="label"><slot name="label"></slot></div>
+		<div v-adaptive-border class="body">
+			<div ref="containerEl" class="container">
+				<div class="track">
+					<div
+						class="highlight"
+						:style="{ width: steppedRawValue * 100 + '%' }"
+					></div>
+				</div>
+				<div v-if="steps && showTicks" class="ticks">
+					<div
+						v-for="i in steps + 1"
+						class="tick"
+						:style="{ left: ((i - 1) / steps) * 100 + '%' }"
+					></div>
+				</div>
+				<div
+					ref="thumbEl"
+					v-tooltip="textConverter(finalValue)"
+					class="thumb"
+					:style="{ left: thumbPosition + 'px' }"
+					@mousedown="onMousedown"
+					@touchstart="onMousedown"
+				></div>
 			</div>
-			<div v-if="steps && showTicks" class="ticks">
-				<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
-			</div>
-			<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
 		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
-import * as os from '@/os';
+import {
+	computed,
+	defineAsyncComponent,
+	onMounted,
+	onUnmounted,
+	ref,
+	watch,
+} from "vue";
+import * as os from "@/os";
 
-const props = withDefaults(defineProps<{
-	modelValue: number;
-	disabled?: boolean;
-	min: number;
-	max: number;
-	step?: number;
-	textConverter?: (value: number) => string,
-	showTicks?: boolean;
-	easing?: boolean;
-}>(), {
-	step: 1,
-	textConverter: (v) => v.toString(),
-	easing: false,
-});
+const props = withDefaults(
+	defineProps<{
+		modelValue: number;
+		disabled?: boolean;
+		min: number;
+		max: number;
+		step?: number;
+		textConverter?: (value: number) => string;
+		showTicks?: boolean;
+		easing?: boolean;
+	}>(),
+	{
+		step: 1,
+		textConverter: (v) => v.toString(),
+		easing: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', value: number): void;
+	(ev: "update:modelValue", value: number): void;
 }>();
 
 const containerEl = ref<HTMLElement>();
@@ -46,16 +70,18 @@ const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
 const steppedRawValue = computed(() => {
 	if (props.step) {
 		const step = props.step / (props.max - props.min);
-		return (step * Math.round(rawValue.value / step));
+		return step * Math.round(rawValue.value / step);
 	} else {
 		return rawValue.value;
 	}
 });
 const finalValue = computed(() => {
 	if (Number.isInteger(props.step)) {
-		return Math.round((steppedRawValue.value * (props.max - props.min)) + props.min);
+		return Math.round(
+			steppedRawValue.value * (props.max - props.min) + props.min
+		);
 	} else {
-		return (steppedRawValue.value * (props.max - props.min)) + props.min;
+		return steppedRawValue.value * (props.max - props.min) + props.min;
 	}
 });
 
@@ -68,7 +94,9 @@ const calcThumbPosition = () => {
 	if (containerEl.value == null) {
 		thumbPosition.value = 0;
 	} else {
-		thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
+		thumbPosition.value =
+			(containerEl.value.offsetWidth - thumbWidth.value) *
+			steppedRawValue.value;
 	}
 };
 watch([steppedRawValue, containerEl], calcThumbPosition);
@@ -98,24 +126,44 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 	ev.preventDefault();
 
 	const tooltipShowing = ref(true);
-	os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
-		showing: tooltipShowing,
-		text: computed(() => {
-			return props.textConverter(finalValue.value);
-		}),
-		targetElement: thumbEl,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkTooltip.vue")),
+		{
+			showing: tooltipShowing,
+			text: computed(() => {
+				return props.textConverter(finalValue.value);
+			}),
+			targetElement: thumbEl,
+		},
+		{},
+		"closed"
+	);
 
-	const style = document.createElement('style');
-	style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
+	const style = document.createElement("style");
+	style.appendChild(
+		document.createTextNode(
+			"* { cursor: grabbing !important; } body * { pointer-events: none !important; }"
+		)
+	);
 	document.head.appendChild(style);
 
 	const onDrag = (ev: MouseEvent | TouchEvent) => {
 		ev.preventDefault();
 		const containerRect = containerEl.value!.getBoundingClientRect();
-		const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
-		const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
-		rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
+		const pointerX =
+			ev.touches && ev.touches.length > 0
+				? ev.touches[0].clientX
+				: ev.clientX;
+		const pointerPositionOnContainer =
+			pointerX - (containerRect.left + thumbWidth.value / 2);
+		rawValue.value = Math.min(
+			1,
+			Math.max(
+				0,
+				pointerPositionOnContainer /
+					(containerEl.value!.offsetWidth - thumbWidth.value)
+			)
+		);
 	};
 
 	let beforeValue = finalValue.value;
@@ -123,21 +171,21 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 	const onMouseup = () => {
 		document.head.removeChild(style);
 		tooltipShowing.value = false;
-		window.removeEventListener('mousemove', onDrag);
-		window.removeEventListener('touchmove', onDrag);
-		window.removeEventListener('mouseup', onMouseup);
-		window.removeEventListener('touchend', onMouseup);
+		window.removeEventListener("mousemove", onDrag);
+		window.removeEventListener("touchmove", onDrag);
+		window.removeEventListener("mouseup", onMouseup);
+		window.removeEventListener("touchend", onMouseup);
 
 		// 値が変わってたら通知
 		if (beforeValue !== finalValue.value) {
-			emit('update:modelValue', finalValue.value);
+			emit("update:modelValue", finalValue.value);
 		}
 	};
 
-	window.addEventListener('mousemove', onDrag);
-	window.addEventListener('touchmove', onDrag);
-	window.addEventListener('mouseup', onMouseup, { once: true });
-	window.addEventListener('touchend', onMouseup, { once: true });
+	window.addEventListener("mousemove", onDrag);
+	window.addEventListener("touchmove", onDrag);
+	window.addEventListener("mouseup", onMouseup, { once: true });
+	window.addEventListener("touchend", onMouseup, { once: true });
 };
 </script>
 
@@ -219,7 +267,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 					bottom: 0;
 					width: $tickWidth;
 					height: 3px;
-					margin-left: - math.div($tickWidth, 2);
+					margin-left: -math.div($tickWidth, 2);
 					background: var(--divider);
 					border-radius: 999px;
 				}
@@ -245,12 +293,12 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
 			> .container {
 				> .track {
 					> .highlight {
-						transition: width 0.2s cubic-bezier(0,0,0,1);
+						transition: width 0.2s cubic-bezier(0, 0, 0, 1);
 					}
 				}
 
 				> .thumb {
-					transition: left 0.2s cubic-bezier(0,0,0,1);
+					transition: left 0.2s cubic-bezier(0, 0, 0, 1);
 				}
 			}
 		}
diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue
index c6e34ef1c..f2c5fa13f 100644
--- a/packages/client/src/components/form/section.vue
+++ b/packages/client/src/components/form/section.vue
@@ -1,14 +1,13 @@
 <template>
-<div class="vrtktovh _formBlock">
-	<div class="label"><slot name="label"></slot></div>
-	<div class="main _formRoot">
-		<slot></slot>
+	<div class="vrtktovh _formBlock">
+		<div class="label"><slot name="label"></slot></div>
+		<div class="main _formRoot">
+			<slot></slot>
+		</div>
 	</div>
-</div>
 </template>
 
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 
 <style lang="scss" scoped>
 .vrtktovh {
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index b81865d4f..20e69e13e 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -1,37 +1,57 @@
 <template>
-<div class="vblkjoeq">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
-		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<select
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			class="select"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			@focus="focused = true"
-			@blur="focused = false"
-			@input="onInput"
+	<div class="vblkjoeq">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div
+			ref="container"
+			class="input"
+			:class="{ inline, disabled, focused }"
+			@click.prevent="onClick"
 		>
-			<slot></slot>
-		</select>
-		<div ref="suffixEl" class="suffix"><i class="ph-caret-down ph-bold ph-lg"></i></div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+			<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
+			<select
+				ref="inputEl"
+				v-model="v"
+				v-adaptive-border
+				class="select"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				@focus="focused = true"
+				@blur="focused = false"
+				@input="onInput"
+			>
+				<slot></slot>
+			</select>
+			<div ref="suffixEl" class="suffix">
+				<i class="ph-caret-down ph-bold ph-lg"></i>
+			</div>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+		<MkButton v-if="manualSave && changed" primary @click="updated"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import {
+	onMounted,
+	onUnmounted,
+	nextTick,
+	ref,
+	watch,
+	computed,
+	toRefs,
+	VNode,
+	useSlots,
+} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: string;
@@ -47,8 +67,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
-	(ev: 'update:modelValue', value: string): void;
+	(ev: "change", _ev: KeyboardEvent): void;
+	(ev: "update:modelValue", value: string): void;
 }>();
 
 const slots = useSlots();
@@ -58,32 +78,29 @@ const v = ref(modelValue.value);
 const focused = ref(false);
 const changed = ref(false);
 const invalid = ref(false);
-const filled = computed(() => v.value !== '' && v.value != null);
+const filled = computed(() => v.value !== "" && v.value != null);
 const inputEl = ref(null);
 const prefixEl = ref(null);
 const suffixEl = ref(null);
 const container = ref(null);
-const height =
-	props.small ? 36 :
-	props.large ? 40 :
-	38;
+const height = props.small ? 36 : props.large ? 40 : 38;
 
 const focus = () => inputEl.value.focus();
 const onInput = (ev) => {
 	changed.value = true;
-	emit('change', ev);
+	emit("change", ev);
 };
 
 const updated = () => {
 	changed.value = false;
-	emit('update:modelValue', v.value);
+	emit("update:modelValue", v.value);
 };
 
-watch(modelValue, newValue => {
+watch(modelValue, (newValue) => {
 	v.value = newValue;
 });
 
-watch(v, newValue => {
+watch(v, (newValue) => {
 	if (!props.manualSave) {
 		updated();
 	}
@@ -93,21 +110,27 @@ watch(v, newValue => {
 
 // このコンポーネントが作成された時、非表示状態である場合がある
 // 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
-useInterval(() => {
-	if (prefixEl.value) {
-		if (prefixEl.value.offsetWidth) {
-			inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+useInterval(
+	() => {
+		if (prefixEl.value) {
+			if (prefixEl.value.offsetWidth) {
+				inputEl.value.style.paddingLeft =
+					prefixEl.value.offsetWidth + "px";
+			}
 		}
-	}
-	if (suffixEl.value) {
-		if (suffixEl.value.offsetWidth) {
-			inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+		if (suffixEl.value) {
+			if (suffixEl.value.offsetWidth) {
+				inputEl.value.style.paddingRight =
+					suffixEl.value.offsetWidth + "px";
+			}
 		}
+	},
+	100,
+	{
+		immediate: true,
+		afterMounted: true,
 	}
-}, 100, {
-	immediate: true,
-	afterMounted: true,
-});
+);
 
 onMounted(() => {
 	nextTick(() => {
@@ -135,17 +158,19 @@ const onClick = (ev: MouseEvent) => {
 
 	const scanOptions = (options: VNode[]) => {
 		for (const vnode of options) {
-			if (vnode.type === 'optgroup') {
+			if (vnode.type === "optgroup") {
 				const optgroup = vnode;
 				menu.push({
-					type: 'label',
+					type: "label",
 					text: optgroup.props.label,
 				});
 				scanOptions(optgroup.children);
-			} else if (Array.isArray(vnode.children)) { // 何故かフラグメントになってくることがある
+			} else if (Array.isArray(vnode.children)) {
+				// 何故かフラグメントになってくることがある
 				const fragment = vnode;
 				scanOptions(fragment.children);
-			} else if (vnode.props == null) { // v-if で条件が false のときにこうなる
+			} else if (vnode.props == null) {
+				// v-if で条件が false のときにこうなる
 				// nop?
 			} else {
 				const option = vnode;
@@ -272,7 +297,8 @@ const onClick = (ev: MouseEvent) => {
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
diff --git a/packages/client/src/components/form/slot.vue b/packages/client/src/components/form/slot.vue
index 79ce8fe51..f570fa60d 100644
--- a/packages/client/src/components/form/slot.vue
+++ b/packages/client/src/components/form/slot.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="adhpbeou">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="content">
-		<slot></slot>
+	<div class="adhpbeou">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div class="content">
+			<slot></slot>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 function focus() {
 	// TODO
diff --git a/packages/client/src/components/form/split.vue b/packages/client/src/components/form/split.vue
index 301a8a84e..40d1d43ac 100644
--- a/packages/client/src/components/form/split.vue
+++ b/packages/client/src/components/form/split.vue
@@ -1,23 +1,26 @@
 <template>
-<div class="terlnhxf _formBlock">
-	<slot></slot>
-</div>
+	<div class="terlnhxf _formBlock">
+		<slot></slot>
+	</div>
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{
-	minWidth?: number;
-}>(), {
-	minWidth: 210,
-});
+const props = withDefaults(
+	defineProps<{
+		minWidth?: number;
+	}>(),
+	{
+		minWidth: 210,
+	}
+);
 
-const minWidth = props.minWidth + 'px';
+const minWidth = props.minWidth + "px";
 </script>
 
 <style lang="scss" scoped>
 .terlnhxf {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(v-bind("minWidth"), 1fr));
 	grid-gap: 12px;
 
 	> ::v-deep(*) {
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 29217f4b2..33fd03233 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -1,24 +1,30 @@
 <template>
-<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-	<div v-if="pending">
-		<MkLoading/>
-	</div>
-	<div v-else-if="resolved">
-		<slot :result="result"></slot>
-	</div>
-	<div v-else>
-		<div class="wszdbhzo">
-			<div><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.somethingHappened }}</div>
-			<MkButton inline class="retry" @click="retry"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> {{ i18n.ts.retry }}</MkButton>
+	<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+		<div v-if="pending">
+			<MkLoading />
 		</div>
-	</div>
-</transition>
+		<div v-else-if="resolved">
+			<slot :result="result"></slot>
+		</div>
+		<div v-else>
+			<div class="wszdbhzo">
+				<div>
+					<i class="ph-warning ph-bold ph-lg"></i>
+					{{ i18n.ts.somethingHappened }}
+				</div>
+				<MkButton inline class="retry" @click="retry"
+					><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+					{{ i18n.ts.retry }}</MkButton
+				>
+			</div>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, PropType, ref, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -29,7 +35,7 @@ export default defineComponent({
 		p: {
 			type: Function as PropType<() => Promise<any>>,
 			required: true,
-		}
+		},
 	},
 
 	setup(props, context) {
@@ -57,11 +63,15 @@ export default defineComponent({
 			});
 		};
 
-		watch(() => props.p, () => {
-			process();
-		}, {
-			immediate: true,
-		});
+		watch(
+			() => props.p,
+			() => {
+				process();
+			},
+			{
+				immediate: true,
+			}
+		);
 
 		const retry = () => {
 			process();
@@ -75,7 +85,7 @@ export default defineComponent({
 			retry,
 			i18n,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
index 1ed00ae65..efaf488a9 100644
--- a/packages/client/src/components/form/switch.vue
+++ b/packages/client/src/components/form/switch.vue
@@ -1,29 +1,31 @@
 <template>
-<div
-	class="ziffeomt"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<div class="knob"></div>
-	</span>
-	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
-		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
-		<p class="caption"><slot name="caption"></slot></p>
-	</span>
-</div>
+	<div class="ziffeomt" :class="{ disabled, checked }">
+		<input
+			ref="input"
+			type="checkbox"
+			:disabled="disabled"
+			@keydown.enter="toggle"
+		/>
+		<span
+			ref="button"
+			v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff"
+			class="button"
+			@click.prevent="toggle"
+		>
+			<div class="knob"></div>
+		</span>
+		<span class="label">
+			<!-- TODO: 無名slotの方は廃止 -->
+			<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+			<p class="caption"><slot name="caption"></slot></p>
+		</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { toRefs, Ref } from "vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean | Ref<boolean>;
@@ -31,17 +33,16 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
+	(ev: "update:modelValue", v: boolean): void;
 }>();
 
 let button = $ref<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;
-	emit('update:modelValue', !checked.value);
+	emit("update:modelValue", !checked.value);
 
 	if (!checked.value) {
-
 	}
 };
 </script>
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index 0cf61458a..19c33cfec 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -1,36 +1,52 @@
 <template>
-<div class="adhpbeos">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ disabled, focused, tall, pre }">
-		<textarea
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			:class="{ code, _monospace: code }"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-		></textarea>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+	<div class="adhpbeos">
+		<div class="label" @click="focus"><slot name="label"></slot></div>
+		<div class="input" :class="{ disabled, focused, tall, pre }">
+			<textarea
+				ref="inputEl"
+				v-model="v"
+				v-adaptive-border
+				:class="{ code, _monospace: code }"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="spellcheck"
+				@focus="focused = true"
+				@blur="focused = false"
+				@keydown="onKeydown($event)"
+				@input="onInput"
+			></textarea>
+		</div>
+		<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+		<MkButton
+			v-if="manualSave && changed"
+			primary
+			class="save"
+			@click="updated"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { debounce } from 'throttle-debounce';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import {
+	defineComponent,
+	onMounted,
+	onUnmounted,
+	nextTick,
+	ref,
+	watch,
+	computed,
+	toRefs,
+} from "vue";
+import { debounce } from "throttle-debounce";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -102,7 +118,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+	emits: ["change", "keydown", "enter", "update:modelValue"],
 
 	setup(props, context) {
 		const { modelValue, autofocus } = toRefs(props);
@@ -110,30 +126,30 @@ export default defineComponent({
 		const focused = ref(false);
 		const changed = ref(false);
 		const invalid = ref(false);
-		const filled = computed(() => v.value !== '' && v.value != null);
+		const filled = computed(() => v.value !== "" && v.value != null);
 		const inputEl = ref(null);
 
 		const focus = () => inputEl.value.focus();
 		const onInput = (ev) => {
 			changed.value = true;
-			context.emit('change', ev);
+			context.emit("change", ev);
 		};
 		const onKeydown = (ev: KeyboardEvent) => {
-			context.emit('keydown', ev);
+			context.emit("keydown", ev);
 
-			if (ev.code === 'Enter') {
-				context.emit('enter');
+			if (ev.code === "Enter") {
+				context.emit("enter");
 			}
 		};
 
 		const updated = () => {
 			changed.value = false;
-			context.emit('update:modelValue', v.value);
+			context.emit("update:modelValue", v.value);
 		};
 
 		const debouncedUpdated = debounce(1000, updated);
 
-		watch(modelValue, newValue => {
+		watch(modelValue, (newValue) => {
 			v.value = newValue;
 		});
 
@@ -235,7 +251,8 @@ export default defineComponent({
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index 661982787..e1a50ad35 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -1,26 +1,35 @@
 <template>
-<a :href="to" :class="active ? activeClass : null" @click="nav" @contextmenu.prevent.stop="onContextmenu" @click.stop>
-	<slot></slot>
-</a>
+	<a
+		:href="to"
+		:class="active ? activeClass : null"
+		@click="nav"
+		@contextmenu.prevent.stop="onContextmenu"
+		@click.stop
+	>
+		<slot></slot>
+	</a>
 </template>
 
 <script lang="ts" setup>
-import { inject } from 'vue';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import { popout as popout_ } from '@/scripts/popout';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
+import { inject } from "vue";
+import * as os from "@/os";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { url } from "@/config";
+import { popout as popout_ } from "@/scripts/popout";
+import { i18n } from "@/i18n";
+import { useRouter } from "@/router";
 
-const props = withDefaults(defineProps<{
-	to: string;
-	activeClass?: null | string;
-	behavior?: null | 'window' | 'browser' | 'modalWindow';
-}>(), {
-	activeClass: null,
-	behavior: null,
-});
+const props = withDefaults(
+	defineProps<{
+		to: string;
+		activeClass?: null | string;
+		behavior?: null | "window" | "browser" | "modalWindow";
+	}>(),
+	{
+		activeClass: null,
+		behavior: null,
+	}
+);
 
 const router = useRouter();
 
@@ -36,35 +45,45 @@ const active = $computed(() => {
 
 function onContextmenu(ev) {
 	const selection = window.getSelection();
-	if (selection && selection.toString() !== '') return;
-	os.contextMenu([{
-		type: 'label',
-		text: props.to,
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(props.to);
-		},
-	}, {
-		icon: 'ph-arrows-out-simple ph-bold ph-lg',
-		text: i18n.ts.showInPage,
-		action: () => {
-			router.push(props.to, 'forcePage');
-		},
-	}, null, {
-		icon: 'ph-arrow-square-out ph-bold ph-lg',
-		text: i18n.ts.openInNewTab,
-		action: () => {
-			window.open(props.to, '_blank');
-		},
-	}, {
-		icon: 'ph-link-simple ph-bold ph-lg',
-		text: i18n.ts.copyLink,
-		action: () => {
-			copyToClipboard(`${url}${props.to}`);
-		},
-	}], ev);
+	if (selection && selection.toString() !== "") return;
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: props.to,
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(props.to);
+				},
+			},
+			{
+				icon: "ph-arrows-out-simple ph-bold ph-lg",
+				text: i18n.ts.showInPage,
+				action: () => {
+					router.push(props.to, "forcePage");
+				},
+			},
+			null,
+			{
+				icon: "ph-arrow-square-out ph-bold ph-lg",
+				text: i18n.ts.openInNewTab,
+				action: () => {
+					window.open(props.to, "_blank");
+				},
+			},
+			{
+				icon: "ph-link-simple ph-bold ph-lg",
+				text: i18n.ts.copyLink,
+				action: () => {
+					copyToClipboard(`${url}${props.to}`);
+				},
+			},
+		],
+		ev
+	);
 }
 
 function openWindow() {
@@ -83,15 +102,15 @@ function nav(ev: MouseEvent) {
 	if (!ev.ctrlKey) {
 		ev.preventDefault();
 
-		if (props.behavior === 'browser') {
+		if (props.behavior === "browser") {
 			location.href = props.to;
 			return;
 		}
 
 		if (props.behavior) {
-			if (props.behavior === 'window') {
+			if (props.behavior === "window") {
 				return openWindow();
-			} else if (props.behavior === 'modalWindow') {
+			} else if (props.behavior === "modalWindow") {
 				return modalWindow();
 			}
 		}
@@ -100,7 +119,7 @@ function nav(ev: MouseEvent) {
 			return openWindow();
 		}
 
-		router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
+		router.push(props.to, ev.ctrlKey ? "forcePage" : null);
 	}
 }
 </script>
diff --git a/packages/client/src/components/global/MkAcct.vue b/packages/client/src/components/global/MkAcct.vue
index 6c3da424c..c77ad6a4e 100644
--- a/packages/client/src/components/global/MkAcct.vue
+++ b/packages/client/src/components/global/MkAcct.vue
@@ -1,14 +1,18 @@
 <template>
-<span class="mk-acct">
-	<span class="name">@{{ user.username }}</span>
-	<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
-</span>
+	<span class="mk-acct">
+		<span class="name">@{{ user.username }}</span>
+		<span
+			v-if="user.host || detail || $store.state.showFullAcct"
+			class="host"
+			>@{{ user.host || host }}</span
+		>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import { toUnicode } from 'punycode/';
-import { host as hostRaw } from '@/config';
+import * as misskey from "calckey-js";
+import { toUnicode } from "punycode/";
+import { host as hostRaw } from "@/config";
 
 defineProps<{
 	user: misskey.entities.UserDetailed;
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index 29639ca8d..e826e1445 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -1,24 +1,37 @@
 <template>
-	<div v-if="chosen && chosen.length > 0 && defaultStore.state.showAds" v-for="chosenItem in chosen" class="qiivuoyo">
+	<div
+		v-if="chosen && chosen.length > 0 && defaultStore.state.showAds"
+		v-for="chosenItem in chosen"
+		class="qiivuoyo"
+	>
 		<div v-if="!showMenu" class="main" :class="chosenItem.place">
 			<a :href="chosenItem.url" target="_blank">
-				<img :src="chosenItem.imageUrl">
+				<img :src="chosenItem.imageUrl" />
 			</a>
 		</div>
 	</div>
 	<div v-else-if="chosen && defaultStore.state.showAds" class="qiivuoyo">
 		<div v-if="!showMenu" class="main" :class="chosen.place">
 			<a :href="chosen.url" target="_blank">
-				<img :src="chosen.imageUrl">
-				<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="ph-info ph-bold ph-lg info-circle"></span></button>
+				<img :src="chosen.imageUrl" />
+				<button class="_button menu" @click.prevent.stop="toggleMenu">
+					<span class="ph-info ph-bold ph-lg info-circle"></span>
+				</button>
 			</a>
 		</div>
 		<div v-else class="menu">
 			<div class="body">
 				<div>Ads by {{ host }}</div>
 				<!--<MkButton class="button" primary>{{ i18n.ts._ad.like }}</MkButton>-->
-				<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
-				<button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button>
+				<MkButton
+					v-if="chosen.ratio !== 0"
+					class="button"
+					@click="reduceFrequency"
+					>{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton
+				>
+				<button class="_textButton" @click="toggleMenu">
+					{{ i18n.ts._ad.back }}
+				</button>
 			</div>
 		</div>
 	</div>
@@ -26,15 +39,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { instance } from '@/instance';
-import { host } from '@/config';
-import MkButton from '@/components/MkButton.vue';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import { instance } from "@/instance";
+import { host } from "@/config";
+import MkButton from "@/components/MkButton.vue";
+import { defaultStore } from "@/store";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-type Ad = (typeof instance)['ads'][number];
+type Ad = (typeof instance)["ads"][number];
 
 const props = defineProps<{
 	prefer: string[];
@@ -51,26 +64,32 @@ const choseAd = (): Ad | null => {
 		return props.specify;
 	}
 
-	const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
-		...ad,
-		ratio: 0,
-	} : ad);
+	const allAds = instance.ads.map((ad) =>
+		defaultStore.state.mutedAds.includes(ad.id)
+			? {
+					...ad,
+					ratio: 0,
+			  }
+			: ad
+	);
 
-	let ads = allAds.filter(ad => props.prefer.includes(ad.place));
+	let ads = allAds.filter((ad) => props.prefer.includes(ad.place));
 
 	if (ads.length === 0) {
-		ads = allAds.filter(ad => ad.place === 'square');
+		ads = allAds.filter((ad) => ad.place === "square");
 	}
 
-	const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
-	const widgetAds = ads.filter(ad => ad.place === 'widget');
-	ads = ads.filter(ad => ad.ratio !== 0);
-	
+	const lowPriorityAds = ads.filter((ad) => ad.ratio === 0);
+	const widgetAds = ads.filter((ad) => ad.place === "widget");
+	ads = ads.filter((ad) => ad.ratio !== 0);
+
 	if (widgetAds.length !== 0) {
-			return widgetAds;
+		return widgetAds;
 	} else if (ads.length === 0) {
-		 if (lowPriorityAds.length !== 0) {
-			return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
+		if (lowPriorityAds.length !== 0) {
+			return lowPriorityAds[
+				Math.floor(Math.random() * lowPriorityAds.length)
+			];
 		} else {
 			return null;
 		}
@@ -96,7 +115,7 @@ const chosen = ref(choseAd());
 function reduceFrequency(): void {
 	if (chosen.value == null) return;
 	if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
-	defaultStore.push('mutedAds', chosen.value.id);
+	defaultStore.push("mutedAds", chosen.value.id);
 	os.success();
 	chosen.value = choseAd();
 	showMenu.value = false;
@@ -106,7 +125,13 @@ function reduceFrequency(): void {
 <style lang="scss" scoped>
 .qiivuoyo {
 	background-size: auto auto;
-	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
+	background-image: repeating-linear-gradient(
+		45deg,
+		transparent,
+		transparent 8px,
+		var(--ad) 8px,
+		var(--ad) 14px
+	);
 
 	> .main {
 		text-align: center;
@@ -143,7 +168,7 @@ function reduceFrequency(): void {
 		}
 
 		&.widget {
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(300px, 100%);
 				max-height: 300px;
@@ -153,7 +178,7 @@ function reduceFrequency(): void {
 		&.inline {
 			padding: 8px;
 
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(600px, 100%);
 				max-height: 80px;
@@ -163,7 +188,7 @@ function reduceFrequency(): void {
 		&.inline-big {
 			padding: 8px;
 
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(600px, 100%);
 				max-height: 250px;
@@ -171,7 +196,7 @@ function reduceFrequency(): void {
 		}
 
 		&.vertical {
-			> a ,
+			> a,
 			> a > img {
 				max-width: min(100px, 100%);
 			}
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index f2a39de61..d904ece26 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -1,72 +1,127 @@
 <template>
-<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
-	<img class="inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
-</span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target" @click.stop>
-	<img class="inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator && user.instance == null" class="indicator" :user="user"/>
-</MkA>
+	<span
+		v-if="disableLink"
+		v-user-preview="disablePreview ? undefined : user.id"
+		class="eiwwqkts _noSelect"
+		:class="{ cat: user.isCat, square: $store.state.squareAvatars }"
+		:style="{ color }"
+		:title="acct(user)"
+		@click="onClick"
+	>
+		<img class="inner" :src="url" decoding="async" />
+		<MkUserOnlineIndicator
+			v-if="showIndicator && user.instance == null"
+			class="indicator"
+			:user="user"
+		/>
+	</span>
+	<MkA
+		v-else
+		v-user-preview="disablePreview ? undefined : user.id"
+		class="eiwwqkts _noSelect"
+		:class="{ cat: user.isCat, square: $store.state.squareAvatars }"
+		:style="{ color }"
+		:to="userPage(user)"
+		:title="acct(user)"
+		:target="target"
+		@click.stop
+	>
+		<img class="inner" :src="url" decoding="async" />
+		<MkUserOnlineIndicator
+			v-if="showIndicator && user.instance == null"
+			class="indicator"
+			:user="user"
+		/>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
-import { acct, userPage } from '@/filters/user';
-import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
-import { defaultStore } from '@/store';
+import { onMounted, watch } from "vue";
+import * as misskey from "calckey-js";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { extractAvgColorFromBlurhash } from "@/scripts/extract-avg-color-from-blurhash";
+import { acct, userPage } from "@/filters/user";
+import MkUserOnlineIndicator from "@/components/MkUserOnlineIndicator.vue";
+import { defaultStore } from "@/store";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	target?: string | null;
-	disableLink?: boolean;
-	disablePreview?: boolean;
-	showIndicator?: boolean;
-}>(), {
-	target: null,
-	disableLink: false,
-	disablePreview: false,
-	showIndicator: false,
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+		target?: string | null;
+		disableLink?: boolean;
+		disablePreview?: boolean;
+		showIndicator?: boolean;
+	}>(),
+	{
+		target: null,
+		disableLink: false,
+		disablePreview: false,
+		showIndicator: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'click', v: MouseEvent): void;
+	(ev: "click", v: MouseEvent): void;
 }>();
 
-const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
-	? getStaticImageUrl(props.user.avatarUrl)
-	: props.user.avatarUrl);
+const url = $computed(() =>
+	defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(props.user.avatarUrl)
+		: props.user.avatarUrl
+);
 
 function onClick(ev: MouseEvent) {
-	emit('click', ev);
+	emit("click", ev);
 }
 
 let color = $ref();
 
-watch(() => props.user.avatarBlurhash, () => {
-	color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
-}, {
-	immediate: true,
-});
+watch(
+	() => props.user.avatarBlurhash,
+	() => {
+		color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
+	},
+	{
+		immediate: true,
+	}
+);
 </script>
 
 <style lang="scss" scoped>
 @keyframes earwiggleleft {
-	from { transform: rotate(37.6deg) skew(30deg); }
-	25% { transform: rotate(10deg) skew(30deg); }
-	50% { transform: rotate(20deg) skew(30deg); }
-	75% { transform: rotate(0deg) skew(30deg); }
-	to { transform: rotate(37.6deg) skew(30deg); }
+	from {
+		transform: rotate(37.6deg) skew(30deg);
+	}
+	25% {
+		transform: rotate(10deg) skew(30deg);
+	}
+	50% {
+		transform: rotate(20deg) skew(30deg);
+	}
+	75% {
+		transform: rotate(0deg) skew(30deg);
+	}
+	to {
+		transform: rotate(37.6deg) skew(30deg);
+	}
 }
 
 @keyframes earwiggleright {
-	from { transform: rotate(-37.6deg) skew(-30deg); }
-	30% { transform: rotate(-10deg) skew(-30deg); }
-	55% { transform: rotate(-20deg) skew(-30deg); }
-	75% { transform: rotate(0deg) skew(-30deg); }
-	to { transform: rotate(-37.6deg) skew(-30deg); }
+	from {
+		transform: rotate(-37.6deg) skew(-30deg);
+	}
+	30% {
+		transform: rotate(-10deg) skew(-30deg);
+	}
+	55% {
+		transform: rotate(-20deg) skew(-30deg);
+	}
+	75% {
+		transform: rotate(0deg) skew(-30deg);
+	}
+	to {
+		transform: rotate(-37.6deg) skew(-30deg);
+	}
 }
 
 .eiwwqkts {
@@ -109,11 +164,12 @@ watch(() => props.user.avatarBlurhash, () => {
 	}
 
 	&.cat {
-		&:before, &:after {
+		&:before,
+		&:after {
 			background: #ebbcba;
 			border: solid 4px currentColor;
 			box-sizing: border-box;
-			content: '';
+			content: "";
 			display: inline-block;
 			height: 50%;
 			width: 50%;
diff --git a/packages/client/src/components/global/MkEllipsis.vue b/packages/client/src/components/global/MkEllipsis.vue
index 0a46f486d..6226c12ec 100644
--- a/packages/client/src/components/global/MkEllipsis.vue
+++ b/packages/client/src/components/global/MkEllipsis.vue
@@ -24,7 +24,9 @@
 }
 
 @keyframes ellipsis {
-	0%, 80%, 100% {
+	0%,
+	80%,
+	100% {
 		opacity: 1;
 	}
 	40% {
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 9b2d79a5a..eb08ff5c2 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -1,17 +1,32 @@
 <template>
-<img v-if="customEmoji" 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" :title="alt" decoding="async"/>
-<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
-<span v-else>{{ emoji }}</span>
+	<img
+		v-if="customEmoji"
+		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"
+		:title="alt"
+		decoding="async"
+	/>
+	<span v-else-if="char && useOsNativeEmojis">{{ char }}</span>
+	<span v-else>{{ emoji }}</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { CustomEmoji } from 'calckey-js/built/entities';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { char2filePath } from '@/scripts/twemoji-base';
-import { defaultStore } from '@/store';
-import { instance } from '@/instance';
+import { computed, ref, watch } from "vue";
+import { CustomEmoji } from "calckey-js/built/entities";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { char2filePath } from "@/scripts/twemoji-base";
+import { defaultStore } from "@/store";
+import { instance } from "@/instance";
 
 const props = defineProps<{
 	emoji: string;
@@ -21,11 +36,19 @@ const props = defineProps<{
 	isReaction?: boolean;
 }>();
 
-const isCustom = computed(() => props.emoji.startsWith(':'));
-const char = computed(() => isCustom.value ? null : props.emoji);
-const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
+const isCustom = computed(() => props.emoji.startsWith(":"));
+const char = computed(() => (isCustom.value ? null : props.emoji));
+const useOsNativeEmojis = computed(
+	() => defaultStore.state.useOsNativeEmojis && !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)) : null);
+const customEmoji = computed(() =>
+	isCustom.value
+		? ce.value.find(
+				(x) => x.name === props.emoji.substr(1, props.emoji.length - 2)
+		  )
+		: null
+);
 const url = computed(() => {
 	if (char.value) {
 		return char2filePath(char.value);
@@ -35,7 +58,9 @@ const url = computed(() => {
 			: customEmoji.value.url;
 	}
 });
-const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
+const alt = computed(() =>
+	customEmoji.value ? `:${customEmoji.value.name}:` : char.value
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
index 266e6b253..38d6244b9 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -1,16 +1,25 @@
 <template>
-<transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjcg">
-		<img src="/static-assets/badges/error.png" class="_ghost" alt="Error"/>
-		<p><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.somethingHappened }}</p>
-		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
-	</div>
-</transition>
+	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+		<div class="mjndxjcg">
+			<img
+				src="/static-assets/badges/error.png"
+				class="_ghost"
+				alt="Error"
+			/>
+			<p>
+				<i class="ph-warning ph-bold ph-lg"></i>
+				{{ i18n.ts.somethingHappened }}
+			</p>
+			<MkButton class="button" @click="() => $emit('retry')">{{
+				i18n.ts.retry
+			}}</MkButton>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
index dc61e577b..343108f04 100644
--- a/packages/client/src/components/global/MkLoading.vue
+++ b/packages/client/src/components/global/MkLoading.vue
@@ -1,27 +1,51 @@
 <template>
-<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]">
-	<div :class="$style.container" aria-hidden="true">
-		<svg :class="[$style.spinner]" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
-			<circle :class="[$style.path]" cx="25" cy="25" r="20" fill="none" stroke-width="6px" style="fill:none;stroke:currentColor;stroke-width:6px;"></circle>
-		</svg>
+	<div
+		:class="[
+			$style.root,
+			{
+				[$style.inline]: inline,
+				[$style.colored]: colored,
+				[$style.mini]: mini,
+			},
+		]"
+	>
+		<div :class="$style.container" aria-hidden="true">
+			<svg
+				:class="[$style.spinner]"
+				viewBox="0 0 50 50"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle
+					:class="[$style.path]"
+					cx="25"
+					cy="25"
+					r="20"
+					fill="none"
+					stroke-width="6px"
+					style="fill: none; stroke: currentColor; stroke-width: 6px"
+				></circle>
+			</svg>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
-const props = withDefaults(defineProps<{
-	inline?: boolean;
-	colored?: boolean;
-	mini?: boolean;
-	em?: boolean;
-}>(), {
-	inline: false,
-	colored: true,
-	mini: false,
-	em: false,
-});
+const props = withDefaults(
+	defineProps<{
+		inline?: boolean;
+		colored?: boolean;
+		mini?: boolean;
+		em?: boolean;
+	}>(),
+	{
+		inline: false,
+		colored: true,
+		mini: false,
+		em: false,
+	}
+);
 </script>
 
 <style lang="scss" module>
@@ -102,5 +126,4 @@ const props = withDefaults(defineProps<{
 	stroke-linecap: round;
 	animation: dash 1.2s ease-in-out infinite;
 }
-
 </style>
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index 19e1d88e1..c235b4835 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -1,24 +1,36 @@
 <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"
+		:customEmojis="customEmojis"
+		:isNote="isNote"
+		class="havbbuyv"
+		:class="{ nowrap }"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MfmCore from '@/components/mfm';
+import {} from "vue";
+import MfmCore from "@/components/mfm";
 
-const props = withDefaults(defineProps<{
-	text: string;
-	plain?: boolean;
-	nowrap?: boolean;
-	author?: any;
-	customEmojis?: any;
-	isNote?: boolean;
-}>(), {
-	plain: false,
-	nowrap: false,
-	author: null,
-	isNote: true,
-});
+const props = withDefaults(
+	defineProps<{
+		text: string;
+		plain?: boolean;
+		nowrap?: boolean;
+		author?: any;
+		customEmojis?: any;
+		isNote?: boolean;
+	}>(),
+	{
+		plain: false,
+		nowrap: false,
+		author: null,
+		isNote: true,
+	}
+);
 </script>
 
 <style lang="scss">
@@ -34,14 +46,20 @@ const props = withDefaults(defineProps<{
 	--mfm-zoom-size: 600%;
 }
 
-.mfm-x2, .mfm-x3, .mfm-x4 {
+.mfm-x2,
+.mfm-x3,
+.mfm-x4 {
 	font-size: var(--mfm-zoom-size);
 
-	.mfm-x2, .mfm-x3, .mfm-x4 {
+	.mfm-x2,
+	.mfm-x3,
+	.mfm-x4 {
 		/* only half effective */
 		font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
 
-		.mfm-x2, .mfm-x3, .mfm-x4 {
+		.mfm-x2,
+		.mfm-x3,
+		.mfm-x4 {
 			/* disabled */
 			font-size: 100%;
 		}
@@ -49,103 +67,237 @@ const props = withDefaults(defineProps<{
 }
 
 @keyframes mfm-spin {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(360deg); }
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
 }
 
 @keyframes mfm-spinX {
-	0% { transform: perspective(128px) rotateX(0deg); }
-	100% { transform: perspective(128px) rotateX(360deg); }
+	0% {
+		transform: perspective(128px) rotateX(0deg);
+	}
+	100% {
+		transform: perspective(128px) rotateX(360deg);
+	}
 }
 
 @keyframes mfm-spinY {
-	0% { transform: perspective(128px) rotateY(0deg); }
-	100% { transform: perspective(128px) rotateY(360deg); }
+	0% {
+		transform: perspective(128px) rotateY(0deg);
+	}
+	100% {
+		transform: perspective(128px) rotateY(360deg);
+	}
 }
 
 @keyframes mfm-jump {
-	0% { transform: translateY(0); }
-	25% { transform: translateY(-16px); }
-	50% { transform: translateY(0); }
-	75% { transform: translateY(-8px); }
-	100% { transform: translateY(0); }
+	0% {
+		transform: translateY(0);
+	}
+	25% {
+		transform: translateY(-16px);
+	}
+	50% {
+		transform: translateY(0);
+	}
+	75% {
+		transform: translateY(-8px);
+	}
+	100% {
+		transform: translateY(0);
+	}
 }
 
 @keyframes mfm-bounce {
-	0% { transform: translateY(0) scale(1, 1); }
-	25% { transform: translateY(-16px) scale(1, 1); }
-	50% { transform: translateY(0) scale(1, 1); }
-	75% { transform: translateY(0) scale(1.5, 0.75); }
-	100% { transform: translateY(0) scale(1, 1); }
+	0% {
+		transform: translateY(0) scale(1, 1);
+	}
+	25% {
+		transform: translateY(-16px) scale(1, 1);
+	}
+	50% {
+		transform: translateY(0) scale(1, 1);
+	}
+	75% {
+		transform: translateY(0) scale(1.5, 0.75);
+	}
+	100% {
+		transform: translateY(0) scale(1, 1);
+	}
 }
 
 // const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
 // let css = '';
 // for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
 @keyframes mfm-twitch {
-	0% { transform: translate(7px, -2px) }
-	5% { transform: translate(-3px, 1px) }
-	10% { transform: translate(-7px, -1px) }
-	15% { transform: translate(0px, -1px) }
-	20% { transform: translate(-8px, 6px) }
-	25% { transform: translate(-4px, -3px) }
-	30% { transform: translate(-4px, -6px) }
-	35% { transform: translate(-8px, -8px) }
-	40% { transform: translate(4px, 6px) }
-	45% { transform: translate(-3px, 1px) }
-	50% { transform: translate(2px, -10px) }
-	55% { transform: translate(-7px, 0px) }
-	60% { transform: translate(-2px, 4px) }
-	65% { transform: translate(3px, -8px) }
-	70% { transform: translate(6px, 7px) }
-	75% { transform: translate(-7px, -2px) }
-	80% { transform: translate(-7px, -8px) }
-	85% { transform: translate(9px, 3px) }
-	90% { transform: translate(-3px, -2px) }
-	95% { transform: translate(-10px, 2px) }
-	100% { transform: translate(-2px, -6px) }
+	0% {
+		transform: translate(7px, -2px);
+	}
+	5% {
+		transform: translate(-3px, 1px);
+	}
+	10% {
+		transform: translate(-7px, -1px);
+	}
+	15% {
+		transform: translate(0px, -1px);
+	}
+	20% {
+		transform: translate(-8px, 6px);
+	}
+	25% {
+		transform: translate(-4px, -3px);
+	}
+	30% {
+		transform: translate(-4px, -6px);
+	}
+	35% {
+		transform: translate(-8px, -8px);
+	}
+	40% {
+		transform: translate(4px, 6px);
+	}
+	45% {
+		transform: translate(-3px, 1px);
+	}
+	50% {
+		transform: translate(2px, -10px);
+	}
+	55% {
+		transform: translate(-7px, 0px);
+	}
+	60% {
+		transform: translate(-2px, 4px);
+	}
+	65% {
+		transform: translate(3px, -8px);
+	}
+	70% {
+		transform: translate(6px, 7px);
+	}
+	75% {
+		transform: translate(-7px, -2px);
+	}
+	80% {
+		transform: translate(-7px, -8px);
+	}
+	85% {
+		transform: translate(9px, 3px);
+	}
+	90% {
+		transform: translate(-3px, -2px);
+	}
+	95% {
+		transform: translate(-10px, 2px);
+	}
+	100% {
+		transform: translate(-2px, -6px);
+	}
 }
 
 // const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
 // let css = '';
 // for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
 @keyframes mfm-shake {
-	0% { transform: translate(-3px, -1px) rotate(-8deg) }
-	5% { transform: translate(0px, -1px) rotate(-10deg) }
-	10% { transform: translate(1px, -3px) rotate(0deg) }
-	15% { transform: translate(1px, 1px) rotate(11deg) }
-	20% { transform: translate(-2px, 1px) rotate(1deg) }
-	25% { transform: translate(-1px, -2px) rotate(-2deg) }
-	30% { transform: translate(-1px, 2px) rotate(-3deg) }
-	35% { transform: translate(2px, 1px) rotate(6deg) }
-	40% { transform: translate(-2px, -3px) rotate(-9deg) }
-	45% { transform: translate(0px, -1px) rotate(-12deg) }
-	50% { transform: translate(1px, 2px) rotate(10deg) }
-	55% { transform: translate(0px, -3px) rotate(8deg) }
-	60% { transform: translate(1px, -1px) rotate(8deg) }
-	65% { transform: translate(0px, -1px) rotate(-7deg) }
-	70% { transform: translate(-1px, -3px) rotate(6deg) }
-	75% { transform: translate(0px, -2px) rotate(4deg) }
-	80% { transform: translate(-2px, -1px) rotate(3deg) }
-	85% { transform: translate(1px, -3px) rotate(-10deg) }
-	90% { transform: translate(1px, 0px) rotate(3deg) }
-	95% { transform: translate(-2px, 0px) rotate(-3deg) }
-	100% { transform: translate(2px, 1px) rotate(2deg) }
+	0% {
+		transform: translate(-3px, -1px) rotate(-8deg);
+	}
+	5% {
+		transform: translate(0px, -1px) rotate(-10deg);
+	}
+	10% {
+		transform: translate(1px, -3px) rotate(0deg);
+	}
+	15% {
+		transform: translate(1px, 1px) rotate(11deg);
+	}
+	20% {
+		transform: translate(-2px, 1px) rotate(1deg);
+	}
+	25% {
+		transform: translate(-1px, -2px) rotate(-2deg);
+	}
+	30% {
+		transform: translate(-1px, 2px) rotate(-3deg);
+	}
+	35% {
+		transform: translate(2px, 1px) rotate(6deg);
+	}
+	40% {
+		transform: translate(-2px, -3px) rotate(-9deg);
+	}
+	45% {
+		transform: translate(0px, -1px) rotate(-12deg);
+	}
+	50% {
+		transform: translate(1px, 2px) rotate(10deg);
+	}
+	55% {
+		transform: translate(0px, -3px) rotate(8deg);
+	}
+	60% {
+		transform: translate(1px, -1px) rotate(8deg);
+	}
+	65% {
+		transform: translate(0px, -1px) rotate(-7deg);
+	}
+	70% {
+		transform: translate(-1px, -3px) rotate(6deg);
+	}
+	75% {
+		transform: translate(0px, -2px) rotate(4deg);
+	}
+	80% {
+		transform: translate(-2px, -1px) rotate(3deg);
+	}
+	85% {
+		transform: translate(1px, -3px) rotate(-10deg);
+	}
+	90% {
+		transform: translate(1px, 0px) rotate(3deg);
+	}
+	95% {
+		transform: translate(-2px, 0px) rotate(-3deg);
+	}
+	100% {
+		transform: translate(2px, 1px) rotate(2deg);
+	}
 }
 
 @keyframes mfm-rubberBand {
-	from { transform: scale3d(1, 1, 1); }
-	30% { transform: scale3d(1.25, 0.75, 1); }
-	40% { transform: scale3d(0.75, 1.25, 1); }
-	50% { transform: scale3d(1.15, 0.85, 1); }
-	65% { transform: scale3d(0.95, 1.05, 1); }
-	75% { transform: scale3d(1.05, 0.95, 1); }
-	to { transform: scale3d(1, 1, 1); }
+	from {
+		transform: scale3d(1, 1, 1);
+	}
+	30% {
+		transform: scale3d(1.25, 0.75, 1);
+	}
+	40% {
+		transform: scale3d(0.75, 1.25, 1);
+	}
+	50% {
+		transform: scale3d(1.15, 0.85, 1);
+	}
+	65% {
+		transform: scale3d(0.95, 1.05, 1);
+	}
+	75% {
+		transform: scale3d(1.05, 0.95, 1);
+	}
+	to {
+		transform: scale3d(1, 1, 1);
+	}
 }
 
 @keyframes mfm-rainbow {
-	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
-	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+	0% {
+		filter: hue-rotate(0deg) contrast(150%) saturate(150%);
+	}
+	100% {
+		filter: hue-rotate(360deg) contrast(150%) saturate(150%);
+	}
 }
 </style>
 
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index ccfe5b95c..ad1d80ca6 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -1,24 +1,78 @@
 <template>
-	<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
-		<i @click="goBack()" v-if="props.displayBackButton" v-tooltip.noDelay="i18n.ts.goBack" class="icon backButton ph-caret-left ph-bold ph-lg"></i>
+	<div
+		v-if="show"
+		ref="el"
+		class="fdidabkb"
+		:class="{ slim: narrow, thin: thin_ }"
+		:style="{ background: bg }"
+		@click="onClick"
+	>
+		<i
+			@click="goBack()"
+			v-if="props.displayBackButton"
+			v-tooltip.noDelay="i18n.ts.goBack"
+			class="icon backButton ph-caret-left ph-bold ph-lg"
+		></i>
 		<div v-if="narrow" class="buttons left" @click="openAccountMenu">
-			<MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/>
+			<MkAvatar
+				v-if="props.displayMyAvatar && $i"
+				class="avatar"
+				:user="$i"
+				:disable-preview="true"
+			/>
 		</div>
-	<template v-if="metadata">
-		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
-			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
-				<i v-else-if="metadata.icon && !narrow" class="icon" :class="metadata.icon"></i>
+		<template v-if="metadata">
+			<div
+				v-if="!hideTitle"
+				class="titleContainer"
+				@click="showTabsPopup"
+			>
+				<MkAvatar
+					v-if="metadata.avatar"
+					class="avatar"
+					:user="metadata.avatar"
+					:disable-preview="true"
+					:show-indicator="true"
+				/>
+				<i
+					v-else-if="metadata.icon && !narrow"
+					class="icon"
+					:class="metadata.icon"
+				></i>
 
 				<div class="title">
-					<MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true" class="title"/>
-					<div v-else-if="metadata.title && !(tabs != null && tabs.length > 0 && narrow)" class="title">{{ metadata.title }}</div>
+					<MkUserName
+						v-if="metadata.userName"
+						:user="metadata.userName"
+						:nowrap="true"
+						class="title"
+					/>
+					<div
+						v-else-if="
+							metadata.title &&
+							!(tabs != null && tabs.length > 0 && narrow)
+						"
+						class="title"
+					>
+						{{ metadata.title }}
+					</div>
 					<div v-if="!narrow && metadata.subtitle" class="subtitle">
 						{{ metadata.subtitle }}
 					</div>
 				</div>
 			</div>
 			<div ref="tabsEl" v-if="hasTabs" class="tabs">
-				<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+				<button
+					v-for="tab in tabs"
+					:ref="(el) => (tabRefs[tab.key] = el)"
+					v-tooltip.noDelay="tab.title"
+					class="tab _button"
+					:class="{
+						active: tab.key != null && tab.key === props.tab,
+					}"
+					@mousedown="(ev) => onTabMousedown(tab, ev)"
+					@click="(ev) => onTabClick(tab, ev)"
+				>
 					<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
 					<span class="title">{{ tab.title }}</span>
 				</button>
@@ -27,21 +81,39 @@
 		</template>
 		<div class="buttons right">
 			<template v-for="action in actions">
-				<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
+				<button
+					v-tooltip.noDelay="action.text"
+					class="_button button"
+					:class="{ highlighted: action.highlighted }"
+					@click.stop="action.handler"
+					@touchstart="preventDrag"
+				>
+					<i :class="action.icon"></i>
+				</button>
 			</template>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
-import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
-import { scrollToTop } from '@/scripts/scroll';
-import { globalEvents } from '@/events';
-import { injectPageMetadata } from '@/scripts/page-metadata';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { i18n } from '@/i18n';
+import {
+	computed,
+	onMounted,
+	onUnmounted,
+	ref,
+	inject,
+	watch,
+	shallowReactive,
+	nextTick,
+	reactive,
+} from "vue";
+import tinycolor from "tinycolor2";
+import { popupMenu } from "@/os";
+import { scrollToTop } from "@/scripts/scroll";
+import { globalEvents } from "@/events";
+import { injectPageMetadata } from "@/scripts/page-metadata";
+import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
+import { i18n } from "@/i18n";
 
 type Tab = {
 	key?: string | null;
@@ -65,13 +137,13 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:tab', key: string);
+	(ev: "update:tab", key: string);
 }>();
 
 const metadata = injectPageMetadata();
 
-const hideTitle = inject('shouldOmitHeaderTitle', false);
-const thin_ = props.thin || inject('shouldHeaderThin', false);
+const hideTitle = inject("shouldOmitHeaderTitle", false);
+const thin_ = props.thin || inject("shouldHeaderThin", false);
 
 const el = $ref<HTMLElement | null>(null);
 const tabRefs = {};
@@ -87,9 +159,12 @@ const show = $computed(() => {
 });
 
 const openAccountMenu = (ev: MouseEvent) => {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
+	openAccountMenu_(
+		{
+			withExtraOperation: true,
+		},
+		ev
+	);
 };
 
 const showTabsPopup = (ev: MouseEvent) => {
@@ -97,7 +172,7 @@ const showTabsPopup = (ev: MouseEvent) => {
 	if (!narrow) return;
 	ev.preventDefault();
 	ev.stopPropagation();
-	const menu = props.tabs.map(tab => ({
+	const menu = props.tabs.map((tab) => ({
 		text: tab.title,
 		icon: tab.icon,
 		active: tab.key != null && tab.key === props.tab,
@@ -113,13 +188,13 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el, { behavior: 'smooth' });
+	scrollToTop(el, { behavior: "smooth" });
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
@@ -130,7 +205,7 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 		tab.onClick(ev);
 	}
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
@@ -139,8 +214,14 @@ function goBack(): void {
 }
 
 const calcBg = () => {
-	const rawBg = metadata?.bg || 'var(--bg)';
-	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+	const rawBg = metadata?.bg || "var(--bg)";
+	const tinyBg = tinycolor(
+		rawBg.startsWith("var(")
+			? getComputedStyle(document.documentElement).getPropertyValue(
+					rawBg.slice(4, -1)
+			  )
+			: rawBg
+	);
 	tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
 };
@@ -149,31 +230,39 @@ let ro: ResizeObserver | null;
 
 onMounted(() => {
 	calcBg();
-	globalEvents.on('themeChanged', calcBg);
+	globalEvents.on("themeChanged", calcBg);
 
-	watch(() => [props.tab, props.tabs], () => {
-		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
-			if (tabEl && tabHighlightEl) {
-				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
-				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-				const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
-				tabEl.style = `--width: ${tabSizeX}px`;
-				setTimeout(() => {
-					const parentRect = tabsEl.getBoundingClientRect();
-					const rect = tabEl.getBoundingClientRect();
-					const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
-					tabHighlightEl.style.width = tabSizeX + 'px';
-					tabHighlightEl.style.transform = `translateX(${left}px)`;
-					window.requestAnimationFrame(() => {
-						tabsEl?.scrollTo({left: left - 60, behavior: "smooth"});
-					})
-				}, 200);
-			}
-		});
-	}, {
-		immediate: true,
-	});
+	watch(
+		() => [props.tab, props.tabs],
+		() => {
+			nextTick(() => {
+				const tabEl = tabRefs[props.tab];
+				if (tabEl && tabHighlightEl) {
+					// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+					// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+					const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
+					tabEl.style = `--width: ${tabSizeX}px`;
+					setTimeout(() => {
+						const parentRect = tabsEl.getBoundingClientRect();
+						const rect = tabEl.getBoundingClientRect();
+						const left =
+							rect.left - parentRect.left + tabsEl?.scrollLeft;
+						tabHighlightEl.style.width = tabSizeX + "px";
+						tabHighlightEl.style.transform = `translateX(${left}px)`;
+						window.requestAnimationFrame(() => {
+							tabsEl?.scrollTo({
+								left: left - 60,
+								behavior: "smooth",
+							});
+						});
+					}, 200);
+				}
+			});
+		},
+		{
+			immediate: true,
+		}
+	);
 
 	if (el && el.parentElement) {
 		narrow = el.parentElement.offsetWidth < 500;
@@ -187,7 +276,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	globalEvents.off('themeChanged', calcBg);
+	globalEvents.off("themeChanged", calcBg);
 	if (ro) ro.disconnect();
 });
 </script>
@@ -227,8 +316,18 @@ onUnmounted(() => {
 		}
 		> .tabs {
 			padding-inline: 12px;
-			mask: linear-gradient(to right, transparent, black 10px 80%, transparent);
-			-webkit-mask: linear-gradient(to right, transparent, black 10px 80%, transparent);
+			mask: linear-gradient(
+				to right,
+				transparent,
+				black 10px 80%,
+				transparent
+			);
+			-webkit-mask: linear-gradient(
+				to right,
+				transparent,
+				black 10px 80%,
+				transparent
+			);
 			margin-left: -10px;
 			padding-left: 22px;
 			scrollbar-width: none;
@@ -238,7 +337,8 @@ onUnmounted(() => {
 			&::-webkit-scrollbar {
 				display: none;
 			}
-			&::after { // Force right padding
+			&::after {
+				// Force right padding
 				content: "";
 				display: inline-block;
 				min-width: 20%;
@@ -393,7 +493,7 @@ onUnmounted(() => {
 			width: 38px;
 			--width: 38px;
 			overflow: hidden;
-			transition: color .2s, opacity .2s, width .2s;
+			transition: color 0.2s, opacity 0.2s, width 0.2s;
 
 			&:hover {
 				opacity: 1;
@@ -413,7 +513,7 @@ onUnmounted(() => {
 				margin-left: 8px;
 			}
 			> .title {
-				transition: opacity .2s;
+				transition: opacity 0.2s;
 			}
 		}
 
@@ -424,8 +524,8 @@ onUnmounted(() => {
 			height: 3px;
 			background: var(--accent);
 			border-radius: 999px;
-			transition: width .2s, transform .2s;
-			transition-timing-function: cubic-bezier(0,0,0,1.2);
+			transition: width 0.2s, transform 0.2s;
+			transition-timing-function: cubic-bezier(0, 0, 0, 1.2);
 			pointer-events: none;
 		}
 	}
diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
index 53adf0777..3dc93efdd 100644
--- a/packages/client/src/components/global/MkSpacer.vue
+++ b/packages/client/src/components/global/MkSpacer.vue
@@ -1,38 +1,44 @@
 <template>
-<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
-	<div ref="content" :class="$style.content">
-		<slot></slot>
+	<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
+		<div ref="content" :class="$style.content">
+			<slot></slot>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, onMounted, onUnmounted, ref } from 'vue';
-import { deviceKind } from '@/scripts/device-kind';
+import { inject, onMounted, onUnmounted, ref } from "vue";
+import { deviceKind } from "@/scripts/device-kind";
 
-const props = withDefaults(defineProps<{
-	contentMax?: number | null;
-	marginMin?: number;
-	marginMax?: number;
-}>(), {
-	contentMax: null,
-	marginMin: 12,
-	marginMax: 24,
-});
+const props = withDefaults(
+	defineProps<{
+		contentMax?: number | null;
+		marginMin?: number;
+		marginMax?: number;
+	}>(),
+	{
+		contentMax: null,
+		marginMin: 12,
+		marginMax: 24,
+	}
+);
 
 let ro: ResizeObserver;
 let root = $ref<HTMLElement>();
 let content = $ref<HTMLElement>();
 let margin = $ref(0);
-const shouldSpacerMin = inject('shouldSpacerMin', false);
+const shouldSpacerMin = inject("shouldSpacerMin", false);
 
-const adjust = (rect: { width: number; height: number; }) => {
-	if (shouldSpacerMin || deviceKind === 'smartphone') {
+const adjust = (rect: { width: number; height: number }) => {
+	if (shouldSpacerMin || deviceKind === "smartphone") {
 		margin = props.marginMin;
 		return;
 	}
 
-	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
+	if (
+		rect.width > (props.contentMax ?? 0) ||
+		(rect.width > 360 && window.innerWidth > 400)
+	) {
 		margin = props.marginMax;
 	} else {
 		margin = props.marginMin;
diff --git a/packages/client/src/components/global/MkStickyContainer.vue b/packages/client/src/components/global/MkStickyContainer.vue
index 44f4f065a..0818dd3ef 100644
--- a/packages/client/src/components/global/MkStickyContainer.vue
+++ b/packages/client/src/components/global/MkStickyContainer.vue
@@ -1,22 +1,22 @@
 <template>
-<div ref="rootEl">
-	<div ref="headerEl">
-		<slot name="header"></slot>
+	<div ref="rootEl">
+		<div ref="headerEl">
+			<slot name="header"></slot>
+		</div>
+		<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
+			<slot></slot>
+		</div>
 	</div>
-	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
-		<slot></slot>
-	</div>
-</div>
 </template>
 
 <script lang="ts">
 // なんか動かない
 //const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP');
-const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
+const CURRENT_STICKY_TOP = "CURRENT_STICKY_TOP";
 </script>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
+import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from "vue";
 
 const rootEl = $ref<HTMLElement>();
 const headerEl = $ref<HTMLElement>();
@@ -43,15 +43,19 @@ onMounted(() => {
 
 	watch(parentStickyTop, calc);
 
-	watch($$(childStickyTop), () => {
-		bodyEl.style.setProperty('--stickyTop', `${childStickyTop}px`);
-	}, {
-		immediate: true,
-	});
+	watch(
+		$$(childStickyTop),
+		() => {
+			bodyEl.style.setProperty("--stickyTop", `${childStickyTop}px`);
+		},
+		{
+			immediate: true,
+		}
+	);
 
-	headerEl.style.position = 'sticky';
-	headerEl.style.top = 'var(--stickyTop, 0)';
-	headerEl.style.zIndex = '1000';
+	headerEl.style.position = "sticky";
+	headerEl.style.top = "var(--stickyTop, 0)";
+	headerEl.style.zIndex = "1000";
 
 	observer.observe(headerEl);
 });
@@ -61,6 +65,4 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" module>
-
-</style>
+<style lang="scss" module></style>
diff --git a/packages/client/src/components/global/MkTime.vue b/packages/client/src/components/global/MkTime.vue
index f72b153f5..66a6416e8 100644
--- a/packages/client/src/components/global/MkTime.vue
+++ b/packages/client/src/components/global/MkTime.vue
@@ -1,38 +1,51 @@
 <template>
-<time :title="absolute">
-	<template v-if="mode === 'relative'">{{ relative }}</template>
-	<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
-	<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
-</time>
+	<time :title="absolute">
+		<template v-if="mode === 'relative'">{{ relative }}</template>
+		<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
+		<template v-else-if="mode === 'detail'"
+			>{{ absolute }} ({{ relative }})</template
+		>
+	</time>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from 'vue';
-import { i18n } from '@/i18n';
+import { onUnmounted } from "vue";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	time: Date | string;
-	mode?: 'relative' | 'absolute' | 'detail';
-}>(), {
-	mode: 'relative',
-});
+const props = withDefaults(
+	defineProps<{
+		time: Date | string;
+		mode?: "relative" | "absolute" | "detail";
+	}>(),
+	{
+		mode: "relative",
+	}
+);
 
-const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
+const _time =
+	typeof props.time === "string" ? new Date(props.time) : props.time;
 const absolute = _time.toLocaleString();
 
 let now = $shallowRef(new Date());
 const relative = $computed(() => {
-	const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
-	return (
-		ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
-		ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
-		ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
-		ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
-		ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
-		ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
-		ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
-		ago >= -1 ? i18n.ts._ago.justNow :
-		i18n.ts._ago.future);
+	const ago = (now.getTime() - _time.getTime()) / 1000; /*ms*/
+	return ago >= 31536000
+		? i18n.t("_ago.yearsAgo", { n: Math.round(ago / 31536000).toString() })
+		: ago >= 2592000
+		? i18n.t("_ago.monthsAgo", { n: Math.round(ago / 2592000).toString() })
+		: ago >= 604800
+		? i18n.t("_ago.weeksAgo", { n: Math.round(ago / 604800).toString() })
+		: ago >= 86400
+		? i18n.t("_ago.daysAgo", { n: Math.round(ago / 86400).toString() })
+		: ago >= 3600
+		? i18n.t("_ago.hoursAgo", { n: Math.round(ago / 3600).toString() })
+		: ago >= 60
+		? i18n.t("_ago.minutesAgo", { n: (~~(ago / 60)).toString() })
+		: ago >= 10
+		? i18n.t("_ago.secondsAgo", { n: (~~(ago % 60)).toString() })
+		: ago >= -1
+		? i18n.ts._ago.justNow
+		: i18n.ts._ago.future;
 });
 
 function tick() {
@@ -46,7 +59,7 @@ function tick() {
 
 let tickId: number;
 
-if (props.mode === 'relative' || props.mode === 'detail') {
+if (props.mode === "relative" || props.mode === "detail") {
 	tickId = window.requestAnimationFrame(tick);
 
 	onUnmounted(() => {
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 1fe4b0269..787119104 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -1,30 +1,41 @@
 <template>
-<component
-	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	@contextmenu.stop="() => {}" @click.stop
->
-	<template v-if="!self">
-		<span class="schema">{{ schema }}//</span>
-		<span class="hostname">{{ hostname }}</span>
-		<span v-if="port != ''" class="port">:{{ port }}</span>
-	</template>
-	<template v-if="pathname === '/' && self">
-		<span class="self">{{ hostname }}</span>
-	</template>
-	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substr(1) : pathname }}</span>
-	<span class="query">{{ query }}</span>
-	<span class="hash">{{ hash }}</span>
-	<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
-</component>
+	<component
+		:is="self ? 'MkA' : 'a'"
+		ref="el"
+		class="ieqqeuvs _link"
+		:[attr]="self ? url.substr(local.length) : url"
+		:rel="rel"
+		:target="target"
+		@contextmenu.stop="() => {}"
+		@click.stop
+	>
+		<template v-if="!self">
+			<span class="schema">{{ schema }}//</span>
+			<span class="hostname">{{ hostname }}</span>
+			<span v-if="port != ''" class="port">:{{ port }}</span>
+		</template>
+		<template v-if="pathname === '/' && self">
+			<span class="self">{{ hostname }}</span>
+		</template>
+		<span v-if="pathname != ''" class="pathname">{{
+			self ? pathname.substr(1) : pathname
+		}}</span>
+		<span class="query">{{ query }}</span>
+		<span class="hash">{{ hash }}</span>
+		<i
+			v-if="target === '_blank'"
+			class="ph-arrow-square-out ph-bold ph-lg icon"
+		></i>
+	</component>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import { toUnicode as decodePunycode } from 'punycode/';
-import { url as local } from '@/config';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { safeURIDecode } from '@/scripts/safe-uri-decode';
+import { defineAsyncComponent, ref } from "vue";
+import { toUnicode as decodePunycode } from "punycode/";
+import { url as local } from "@/config";
+import * as os from "@/os";
+import { useTooltip } from "@/scripts/use-tooltip";
+import { safeURIDecode } from "@/scripts/safe-uri-decode";
 
 const props = defineProps<{
 	url: string;
@@ -33,15 +44,22 @@ const props = defineProps<{
 
 const self = props.url.startsWith(local);
 const url = new URL(props.url);
-if (!['http:', 'https:'].includes(url.protocol)) throw new Error('invalid url');
+if (!["http:", "https:"].includes(url.protocol)) throw new Error("invalid url");
 const el = ref();
 
 useTooltip(el, (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
-		showing,
-		url: props.url,
-		source: el.value,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkUrlPreviewPopup.vue")
+		),
+		{
+			showing,
+			url: props.url,
+			source: el.value,
+		},
+		{},
+		"closed"
+	);
 });
 
 const schema = url.protocol;
@@ -50,8 +68,8 @@ const port = url.port;
 const pathname = safeURIDecode(url.pathname);
 const query = safeURIDecode(url.search);
 const hash = safeURIDecode(url.hash);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
+const attr = self ? "to" : "href";
+const target = self ? null : "_blank";
 </script>
 
 <style lang="scss" scoped>
@@ -60,7 +78,7 @@ const target = self ? null : '_blank';
 
 	> .icon {
 		padding-left: 2px;
-		font-size: .9em;
+		font-size: 0.9em;
 	}
 
 	> .self {
diff --git a/packages/client/src/components/global/MkUserName.vue b/packages/client/src/components/global/MkUserName.vue
index 4dfa91b18..a79add3c2 100644
--- a/packages/client/src/components/global/MkUserName.vue
+++ b/packages/client/src/components/global/MkUserName.vue
@@ -1,17 +1,26 @@
 <template>
-<Mfm :class="$style.root" :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
+	<Mfm
+		:class="$style.root"
+		:text="user.name || user.username"
+		:plain="true"
+		:nowrap="nowrap"
+		:custom-emojis="user.emojis"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
+import {} from "vue";
+import * as misskey from "calckey-js";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	nowrap?: boolean;
-}>(), {
-	nowrap: true,
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+		nowrap?: boolean;
+	}>(),
+	{
+		nowrap: true,
+	}
+);
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/global/RouterView.vue b/packages/client/src/components/global/RouterView.vue
index e21a57471..8423ce773 100644
--- a/packages/client/src/components/global/RouterView.vue
+++ b/packages/client/src/components/global/RouterView.vue
@@ -1,32 +1,44 @@
 <template>
-<KeepAlive :max="defaultStore.state.numberOfPageCache">
-	<Suspense>
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+	<KeepAlive :max="defaultStore.state.numberOfPageCache">
+		<Suspense>
+			<component
+				:is="currentPageComponent"
+				:key="key"
+				v-bind="Object.fromEntries(currentPageProps)"
+			/>
 
-		<template #fallback>
-			<MkLoading/>
-		</template>
-	</Suspense>
-</KeepAlive>
+			<template #fallback>
+				<MkLoading />
+			</template>
+		</Suspense>
+	</KeepAlive>
 </template>
 
 <script lang="ts" setup>
-import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue';
-import { Resolved, Router } from '@/nirax';
-import { defaultStore } from '@/store';
+import {
+	inject,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	onUnmounted,
+	provide,
+	watch,
+} from "vue";
+import { Resolved, Router } from "@/nirax";
+import { defaultStore } from "@/store";
 
 const props = defineProps<{
 	router?: Router;
 }>();
 
-const router = props.router ?? inject('router');
+const router = props.router ?? inject("router");
 
 if (router == null) {
-	throw new Error('no router provided');
+	throw new Error("no router provided");
 }
 
-const currentDepth = inject('routerCurrentDepth', 0);
-provide('routerCurrentDepth', currentDepth + 1);
+const currentDepth = inject("routerCurrentDepth", 0);
+provide("routerCurrentDepth", currentDepth + 1);
 
 function resolveNested(current: Resolved, d = 0): Resolved | null {
 	if (d === currentDepth) {
@@ -43,19 +55,22 @@ function resolveNested(current: Resolved, d = 0): Resolved | null {
 const current = resolveNested(router.current)!;
 let currentPageComponent = $shallowRef(current.route.component);
 let currentPageProps = $ref(current.props);
-let key = $ref(current.route.path + JSON.stringify(Object.fromEntries(current.props)));
+let key = $ref(
+	current.route.path + JSON.stringify(Object.fromEntries(current.props))
+);
 
 function onChange({ resolved, key: newKey }) {
 	const current = resolveNested(resolved);
 	if (current == null) return;
 	currentPageComponent = current.route.component;
 	currentPageProps = current.props;
-	key = current.route.path + JSON.stringify(Object.fromEntries(current.props));
+	key =
+		current.route.path + JSON.stringify(Object.fromEntries(current.props));
 }
 
-router.addListener('change', onChange);
+router.addListener("change", onChange);
 
 onBeforeUnmount(() => {
-	router.removeListener('change', onChange);
+	router.removeListener("change", onChange);
 });
 </script>
diff --git a/packages/client/src/components/page/page.block.vue b/packages/client/src/components/page/page.block.vue
index d7984afac..edeb33a14 100644
--- a/packages/client/src/components/page/page.block.vue
+++ b/packages/client/src/components/page/page.block.vue
@@ -1,44 +1,64 @@
 <template>
-<component :is="'x-' + block.type" :key="block.id" :block="block" :hpml="hpml" :h="h"/>
+	<component
+		:is="'x-' + block.type"
+		:key="block.id"
+		:block="block"
+		:hpml="hpml"
+		:h="h"
+	/>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import XText from './page.text.vue';
-import XSection from './page.section.vue';
-import XImage from './page.image.vue';
-import XButton from './page.button.vue';
-import XNumberInput from './page.number-input.vue';
-import XTextInput from './page.text-input.vue';
-import XTextareaInput from './page.textarea-input.vue';
-import XSwitch from './page.switch.vue';
-import XIf from './page.if.vue';
-import XTextarea from './page.textarea.vue';
-import XPost from './page.post.vue';
-import XCounter from './page.counter.vue';
-import XRadioButton from './page.radio-button.vue';
-import XCanvas from './page.canvas.vue';
-import XNote from './page.note.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { Block } from '@/scripts/hpml/block';
+import { defineComponent, PropType } from "vue";
+import XText from "./page.text.vue";
+import XSection from "./page.section.vue";
+import XImage from "./page.image.vue";
+import XButton from "./page.button.vue";
+import XNumberInput from "./page.number-input.vue";
+import XTextInput from "./page.text-input.vue";
+import XTextareaInput from "./page.textarea-input.vue";
+import XSwitch from "./page.switch.vue";
+import XIf from "./page.if.vue";
+import XTextarea from "./page.textarea.vue";
+import XPost from "./page.post.vue";
+import XCounter from "./page.counter.vue";
+import XRadioButton from "./page.radio-button.vue";
+import XCanvas from "./page.canvas.vue";
+import XNote from "./page.note.vue";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { Block } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote
+		XText,
+		XSection,
+		XImage,
+		XButton,
+		XNumberInput,
+		XTextInput,
+		XTextareaInput,
+		XTextarea,
+		XPost,
+		XSwitch,
+		XIf,
+		XCounter,
+		XRadioButton,
+		XCanvas,
+		XNote,
 	},
 	props: {
 		block: {
 			type: Object as PropType<Block>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.button.vue b/packages/client/src/components/page/page.button.vue
index e8878df8d..b3c42eb60 100644
--- a/packages/client/src/components/page/page.button.vue
+++ b/packages/client/src/components/page/page.button.vue
@@ -1,58 +1,62 @@
 <template>
-<div>
-	<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
+	<div>
+		<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{
+			hpml.interpolate(block.text)
+		}}</MkButton>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, unref } from 'vue';
-import MkButton from '../MkButton.vue';
-import * as os from '@/os';
-import { ButtonBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, PropType, unref } from "vue";
+import MkButton from "../MkButton.vue";
+import * as os from "@/os";
+import { ButtonBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 	props: {
 		block: {
 			type: Object as PropType<ButtonBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	methods: {
 		click() {
-			if (this.block.action === 'dialog') {
+			if (this.block.action === "dialog") {
 				this.hpml.eval();
 				os.alert({
-					text: this.hpml.interpolate(this.block.content)
+					text: this.hpml.interpolate(this.block.content),
 				});
-			} else if (this.block.action === 'resetRandom') {
+			} else if (this.block.action === "resetRandom") {
 				this.hpml.updateRandomSeed(Math.random());
 				this.hpml.eval();
-			} else if (this.block.action === 'pushEvent') {
-				os.api('page-push', {
+			} else if (this.block.action === "pushEvent") {
+				os.api("page-push", {
 					pageId: this.hpml.page.id,
 					event: this.block.event,
-					...(this.block.var ? {
-						var: unref(this.hpml.vars)[this.block.var]
-					} : {})
+					...(this.block.var
+						? {
+								var: unref(this.hpml.vars)[this.block.var],
+						  }
+						: {}),
 				});
 
 				os.alert({
-					type: 'success',
-					text: this.hpml.interpolate(this.block.message)
+					type: "success",
+					text: this.hpml.interpolate(this.block.message),
 				});
-			} else if (this.block.action === 'callAiScript') {
+			} else if (this.block.action === "callAiScript") {
 				this.hpml.callAiScript(this.block.fn);
 			}
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.canvas.vue b/packages/client/src/components/page/page.canvas.vue
index 8f49b88e5..1ed96e2ac 100644
--- a/packages/client/src/components/page/page.canvas.vue
+++ b/packages/client/src/components/page/page.canvas.vue
@@ -1,25 +1,25 @@
 <template>
-<div class="ysrxegms">
-	<canvas ref="canvas" :width="block.width" :height="block.height"/>
-</div>
+	<div class="ysrxegms">
+		<canvas ref="canvas" :width="block.width" :height="block.height" />
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import * as os from '@/os';
-import { CanvasBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
+import * as os from "@/os";
+import { CanvasBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<CanvasBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const canvas: Ref<any> = ref(null);
@@ -29,9 +29,9 @@ export default defineComponent({
 		});
 
 		return {
-			canvas
+			canvas,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.counter.vue b/packages/client/src/components/page/page.counter.vue
index 6eeef7143..9ee49fe4e 100644
--- a/packages/client/src/components/page/page.counter.vue
+++ b/packages/client/src/components/page/page.counter.vue
@@ -1,29 +1,31 @@
 <template>
-<div>
-	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
+	<div>
+		<MkButton class="llumlmnx" @click="click()">{{
+			hpml.interpolate(block.text)
+		}}</MkButton>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkButton from '../MkButton.vue';
-import * as os from '@/os';
-import { CounterVarBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { computed, defineComponent, PropType } from "vue";
+import MkButton from "../MkButton.vue";
+import * as os from "@/os";
+import { CounterVarBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 	props: {
 		block: {
 			type: Object as PropType<CounterVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -31,14 +33,17 @@ export default defineComponent({
 		});
 
 		function click() {
-			props.hpml.updatePageVar(props.block.name, value.value + (props.block.inc || 1));
+			props.hpml.updatePageVar(
+				props.block.name,
+				value.value + (props.block.inc || 1)
+			);
 			props.hpml.eval();
 		}
 
 		return {
-			click
+			click,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.if.vue b/packages/client/src/components/page/page.if.vue
index 6dc7a429a..7cc25f212 100644
--- a/packages/client/src/components/page/page.if.vue
+++ b/packages/client/src/components/page/page.if.vue
@@ -1,31 +1,37 @@
 <template>
-<div v-show="hpml.vars.value[block.var]">
-	<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
-</div>
+	<div v-show="hpml.vars.value[block.var]">
+		<XBlock
+			v-for="child in block.children"
+			:key="child.id"
+			:block="child"
+			:hpml="hpml"
+			:h="h"
+		/>
+	</div>
 </template>
 
 <script lang="ts">
-import { IfBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
+import { IfBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { defineComponent, defineAsyncComponent, PropType } from "vue";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
 	},
 	props: {
 		block: {
 			type: Object as PropType<IfBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue
index 8ba70c585..0b82975d9 100644
--- a/packages/client/src/components/page/page.image.vue
+++ b/packages/client/src/components/page/page.image.vue
@@ -1,22 +1,31 @@
 <template>
-<div class="lzyxtsnt">
-	<ImgWithBlurhash v-if="image" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :cover="false"/>
-</div>
+	<div class="lzyxtsnt">
+		<ImgWithBlurhash
+			v-if="image"
+			:hash="image.blurhash"
+			:src="image.url"
+			:alt="image.comment"
+			:title="image.comment"
+			:cover="false"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, PropType } from 'vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import * as os from '@/os';
-import { ImageBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, PropType } from "vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import * as os from "@/os";
+import { ImageBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 const props = defineProps<{
-	block: PropType<ImageBlock>,
-	hpml: PropType<Hpml>,
+	block: PropType<ImageBlock>;
+	hpml: PropType<Hpml>;
 }>();
 
-const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
+const image = props.hpml.page.attachedFiles.find(
+	(x) => x.id === props.block.fileId
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue
index 431f0b08d..9e10d0f63 100644
--- a/packages/client/src/components/page/page.note.vue
+++ b/packages/client/src/components/page/page.note.vue
@@ -1,16 +1,24 @@
 <template>
-<div class="voxdxuby">
-	<XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
-	<XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
-</div>
+	<div class="voxdxuby">
+		<XNote
+			v-if="note && !block.detailed"
+			:key="note.id + ':normal'"
+			v-model:note="note"
+		/>
+		<XNoteDetailed
+			v-if="note && block.detailed"
+			:key="note.id + ':detail'"
+			v-model:note="note"
+		/>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os';
-import { NoteBlock } from '@/scripts/hpml/block';
+import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import * as os from "@/os";
+import { NoteBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
@@ -20,23 +28,24 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<NoteBlock>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const note: Ref<Record<string, any> | null> = ref(null);
 
 		onMounted(() => {
-			os.api('notes/show', { noteId: props.block.note })
-			.then(result => {
-				note.value = result;
-			});
+			os.api("notes/show", { noteId: props.block.note }).then(
+				(result) => {
+					note.value = result;
+				}
+			);
 		});
 
 		return {
-			note
+			note,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.number-input.vue b/packages/client/src/components/page/page.number-input.vue
index 47ff2a017..3426cf667 100644
--- a/packages/client/src/components/page/page.number-input.vue
+++ b/packages/client/src/components/page/page.number-input.vue
@@ -1,31 +1,36 @@
 <template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" type="number" @update:modelValue="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
+	<div>
+		<MkInput
+			class="kudkigyw"
+			:model-value="value"
+			type="number"
+			@update:modelValue="updateValue($event)"
+		>
+			<template #label>{{ hpml.interpolate(block.text) }}</template>
+		</MkInput>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { NumberInputVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkInput from "../form/input.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { NumberInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkInput
+		MkInput,
 	},
 	props: {
 		block: {
 			type: Object as PropType<NumberInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -39,9 +44,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 7ab9092bd..ee30da1f0 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -1,21 +1,26 @@
 <template>
-<div class="ngbfujlo">
-	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
-	<MkButton class="button" primary :disabled="posting || posted" @click="post()">
-		<i v-if="posted" class="ph-check ph-bold ph-lg"></i>
-		<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i>
-	</MkButton>
-</div>
+	<div class="ngbfujlo">
+		<MkTextarea :model-value="text" readonly style="margin: 0"></MkTextarea>
+		<MkButton
+			class="button"
+			primary
+			:disabled="posting || posted"
+			@click="post()"
+		>
+			<i v-if="posted" class="ph-check ph-bold ph-lg"></i>
+			<i v-else class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+		</MkButton>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import MkButton from '../MkButton.vue';
-import { apiUrl } from '@/config';
-import * as os from '@/os';
-import { PostBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, PropType } from "vue";
+import MkTextarea from "../form/textarea.vue";
+import MkButton from "../MkButton.vue";
+import { apiUrl } from "@/config";
+import * as os from "@/os";
+import { PostBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
@@ -25,12 +30,12 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<PostBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -40,35 +45,38 @@ export default defineComponent({
 		};
 	},
 	watch: {
-		'hpml.vars': {
+		"hpml.vars": {
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 	methods: {
 		upload() {
 			const promise = new Promise((ok) => {
 				const canvas = this.hpml.canvases[this.block.canvasId];
-				canvas.toBlob(blob => {
+				canvas.toBlob((blob) => {
 					const formData = new FormData();
-					formData.append('file', blob);
+					formData.append("file", blob);
 					if (this.$store.state.uploadFolder) {
-						formData.append('folderId', this.$store.state.uploadFolder);
+						formData.append(
+							"folderId",
+							this.$store.state.uploadFolder
+						);
 					}
 
-					fetch(apiUrl + '/drive/files/create', {
-						method: 'POST',
+					fetch(apiUrl + "/drive/files/create", {
+						method: "POST",
 						body: formData,
 						headers: {
 							authorization: `Bearer ${this.$i.token}`,
 						},
 					})
-					.then(response => response.json())
-					.then(f => {
-						ok(f);
-					});
+						.then((response) => response.json())
+						.then((f) => {
+							ok(f);
+						});
 				});
 			});
 			os.promiseDialog(promise);
@@ -76,15 +84,17 @@ export default defineComponent({
 		},
 		async post() {
 			this.posting = true;
-			const file = this.block.attachCanvasImage ? await this.upload() : null;
-			os.apiWithDialog('notes/create', {
-				text: this.text === '' ? null : this.text,
+			const file = this.block.attachCanvasImage
+				? await this.upload()
+				: null;
+			os.apiWithDialog("notes/create", {
+				text: this.text === "" ? null : this.text,
 				fileIds: file ? [file.id] : undefined,
 			}).then(() => {
 				this.posted = true;
 			});
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.radio-button.vue b/packages/client/src/components/page/page.radio-button.vue
index 5a726da22..3d3878e4f 100644
--- a/packages/client/src/components/page/page.radio-button.vue
+++ b/packages/client/src/components/page/page.radio-button.vue
@@ -1,30 +1,37 @@
 <template>
-<div>
-	<div>{{ hpml.interpolate(block.title) }}</div>
-	<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:modelValue="updateValue($event)">{{ item }}</MkRadio>
-</div>
+	<div>
+		<div>{{ hpml.interpolate(block.title) }}</div>
+		<MkRadio
+			v-for="item in block.values"
+			:key="item"
+			:modelValue="value"
+			:value="item"
+			@update:modelValue="updateValue($event)"
+			>{{ item }}</MkRadio
+		>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkRadio from '../form/radio.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { RadioButtonVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkRadio from "../form/radio.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { RadioButtonVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkRadio
+		MkRadio,
 	},
 	props: {
 		block: {
 			type: Object as PropType<RadioButtonVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -38,8 +45,8 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.section.vue b/packages/client/src/components/page/page.section.vue
index a2cd66283..04de165f1 100644
--- a/packages/client/src/components/page/page.section.vue
+++ b/packages/client/src/components/page/page.section.vue
@@ -1,35 +1,41 @@
 <template>
-<section class="sdgxphyu">
-	<component :is="'h' + h">{{ block.title }}</component>
+	<section class="sdgxphyu">
+		<component :is="'h' + h">{{ block.title }}</component>
 
-	<div class="children">
-		<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h + 1"/>
-	</div>
-</section>
+		<div class="children">
+			<XBlock
+				v-for="child in block.children"
+				:key="child.id"
+				:block="child"
+				:hpml="hpml"
+				:h="h + 1"
+			/>
+		</div>
+	</section>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
-import * as os from '@/os';
-import { SectionBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, defineAsyncComponent, PropType } from "vue";
+import * as os from "@/os";
+import { SectionBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+		XBlock: defineAsyncComponent(() => import("./page.block.vue")),
 	},
 	props: {
 		block: {
 			type: Object as PropType<SectionBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/page.switch.vue
index 1ece88157..7a00694e0 100644
--- a/packages/client/src/components/page/page.switch.vue
+++ b/packages/client/src/components/page/page.switch.vue
@@ -1,29 +1,33 @@
 <template>
-<div class="hkcxmtwj">
-	<MkSwitch :model-value="value" @update:modelValue="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
-</div>
+	<div class="hkcxmtwj">
+		<MkSwitch
+			:model-value="value"
+			@update:modelValue="updateValue($event)"
+			>{{ hpml.interpolate(block.text) }}</MkSwitch
+		>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../form/switch.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { SwitchVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkSwitch from "../form/switch.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { SwitchVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkSwitch
+		MkSwitch,
 	},
 	props: {
 		block: {
 			type: Object as PropType<SwitchVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -37,9 +41,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.text-input.vue b/packages/client/src/components/page/page.text-input.vue
index 30a0379df..eb76d1890 100644
--- a/packages/client/src/components/page/page.text-input.vue
+++ b/packages/client/src/components/page/page.text-input.vue
@@ -1,31 +1,36 @@
 <template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" type="text" @update:modelValue="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
+	<div>
+		<MkInput
+			class="kudkigyw"
+			:model-value="value"
+			type="text"
+			@update:modelValue="updateValue($event)"
+		>
+			<template #label>{{ hpml.interpolate(block.text) }}</template>
+		</MkInput>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkInput from "../form/input.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { TextInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkInput
+		MkInput,
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -39,9 +44,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index 54f52ee05..c380f4844 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -1,29 +1,31 @@
 <template>
-<div class="mrdgzndn">
-	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
-	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
-</div>
+	<div class="mrdgzndn">
+		<Mfm :key="text" :text="text" :is-note="false" :i="$i" />
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url" />
+	</div>
 </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 { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+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({
 	components: {
-		MkUrlPreview: defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')),
+		MkUrlPreview: defineAsyncComponent(
+			() => import("@/components/MkUrlPreview.vue")
+		),
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -37,29 +39,29 @@ export default defineComponent({
 			} else {
 				return [];
 			}
-		}
+		},
 	},
 	watch: {
-		'hpml.vars': {
+		"hpml.vars": {
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 });
 </script>
 
-	<style lang="scss" scoped>
-	.mrdgzndn {
-		&:not(:first-child) {
-			margin-top: 0.5em;
-		}
-		&:not(:last-child) {
-			margin-bottom: 0.5em;
-		}
-		> .url {
-			margin: 0.5em 0;
-		}
+<style lang="scss" scoped>
+.mrdgzndn {
+	&:not(:first-child) {
+		margin-top: 0.5em;
 	}
-	</style>
+	&:not(:last-child) {
+		margin-bottom: 0.5em;
+	}
+	> .url {
+		margin: 0.5em 0;
+	}
+}
+</style>
diff --git a/packages/client/src/components/page/page.textarea-input.vue b/packages/client/src/components/page/page.textarea-input.vue
index 6e082b2be..fab665c6d 100644
--- a/packages/client/src/components/page/page.textarea-input.vue
+++ b/packages/client/src/components/page/page.textarea-input.vue
@@ -1,32 +1,35 @@
 <template>
-<div>
-	<MkTextarea :model-value="value" @update:modelValue="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkTextarea>
-</div>
+	<div>
+		<MkTextarea
+			:model-value="value"
+			@update:modelValue="updateValue($event)"
+		>
+			<template #label>{{ hpml.interpolate(block.text) }}</template>
+		</MkTextarea>
+	</div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { HpmlTextInput } from '@/scripts/hpml';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
+import { computed, defineComponent, PropType } from "vue";
+import MkTextarea from "../form/textarea.vue";
+import * as os from "@/os";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { HpmlTextInput } from "@/scripts/hpml";
+import { TextInputVarBlock } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {
-		MkTextarea
+		MkTextarea,
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -40,8 +43,8 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/page.textarea.vue
index 54ba8a86e..aa720321f 100644
--- a/packages/client/src/components/page/page.textarea.vue
+++ b/packages/client/src/components/page/page.textarea.vue
@@ -1,24 +1,28 @@
 <template>
-<MkTextarea :model-value="text" readonly></MkTextarea>
+	<MkTextarea :model-value="text" readonly></MkTextarea>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import { TextBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
+import { watch } from "vue";
+import MkTextarea from "../form/textarea.vue";
+import { TextBlock } from "@/scripts/hpml/block";
+import { Hpml } from "@/scripts/hpml/evaluator";
 
 const props = defineProps<{
 	block: TextBlock;
 	hpml: Hpml;
 }>();
 
-let text = $ref('');
+let text = $ref("");
 
-watch(props.hpml.vars, () => {
-	text = props.hpml.interpolate(props.block.text) as string;
-}, {
-	deep: true,
-	immediate: true,
-});
+watch(
+	props.hpml.vars,
+	() => {
+		text = props.hpml.interpolate(props.block.text) as string;
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
+);
 </script>
diff --git a/packages/client/src/components/page/page.vue b/packages/client/src/components/page/page.vue
index 58c43b22b..f2079c9ba 100644
--- a/packages/client/src/components/page/page.vue
+++ b/packages/client/src/components/page/page.vue
@@ -1,26 +1,42 @@
 <template>
-<div v-if="hpml" class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-	<XBlock v-for="child in page.content" :key="child.id" :block="child" :hpml="hpml" :h="2"/>
-</div>
+	<div
+		v-if="hpml"
+		class="iroscrza"
+		:class="{ center: page.alignCenter, serif: page.font === 'serif' }"
+	>
+		<XBlock
+			v-for="child in page.content"
+			:key="child.id"
+			:block="child"
+			:hpml="hpml"
+			:h="2"
+		/>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, nextTick, onUnmounted, PropType } from 'vue';
-import { parse } from '@syuilo/aiscript';
-import XBlock from './page.block.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { url } from '@/config';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
+import {
+	defineComponent,
+	onMounted,
+	nextTick,
+	onUnmounted,
+	PropType,
+} from "vue";
+import { parse } from "@syuilo/aiscript";
+import XBlock from "./page.block.vue";
+import { Hpml } from "@/scripts/hpml/evaluator";
+import { url } from "@/config";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
 
 export default defineComponent({
 	components: {
-		XBlock
+		XBlock,
 	},
 	props: {
 		page: {
 			type: Object as PropType<Record<string, any>>,
-			required: true
+			required: true,
 		},
 	},
 	setup(props, ctx) {
@@ -28,7 +44,7 @@ export default defineComponent({
 			randomSeed: Math.random(),
 			visitor: $i,
 			url: url,
-			enableAiScript: !defaultStore.state.disablePagesScript
+			enableAiScript: !defaultStore.state.disablePagesScript,
 		});
 
 		onMounted(() => {
@@ -45,15 +61,18 @@ export default defineComponent({
 						});*/
 						return;
 					}
-					hpml.aiscript.exec(ast).then(() => {
-						hpml.eval();
-					}).catch(err => {
-						console.error(err);
-						/*os.alert({
+					hpml.aiscript
+						.exec(ast)
+						.then(() => {
+							hpml.eval();
+						})
+						.catch((err) => {
+							console.error(err);
+							/*os.alert({
 							type: 'error',
 							text: err
 						});*/
-					});
+						});
 				} else {
 					hpml.eval();
 				}
diff --git a/packages/client/src/components/queue-chart.vue b/packages/client/src/components/queue-chart.vue
deleted file mode 100644
index 109708d1a..000000000
--- a/packages/client/src/components/queue-chart.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<canvas ref="chartEl"></canvas>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-} from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-);
-
-const props = defineProps<{
-	domain: string,
-	connection: any,
-}>();
-
-const chartEl = ref<HTMLCanvasElement>(null);
-
-const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-
-// フォントカラー
-Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-onMounted(() => {
-	const chartInstance = new Chart(chartEl.value, {
-		type: 'line',
-		data: {
-			labels: [],
-			datasets: [{
-				label: 'Process',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#9ccfd8',
-				backgroundColor: '#9ccfd81A',
-				data: []
-			}, {
-				label: 'Active',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#31748f',
-				backgroundColor: '#31748f1A',
-				data: []
-			}, {
-				label: 'Waiting',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#f6c177',
-				backgroundColor: '#f6c1771A',
-				yAxisID: 'y2',
-				data: []
-			}, {
-				label: 'Delayed',
-				pointRadius: 0,
-				tension: 0,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#eb6f92',
-				borderDash: [5, 5],
-				fill: false,
-				yAxisID: 'y2',
-				data: []
-			}],
-		},
-		options: {
-			aspectRatio: 2.5,
-			layout: {
-				padding: {
-					left: 16,
-					right: 16,
-					top: 16,
-					bottom: 8,
-				},
-			},
-			scales: {
-				x: {
-					grid: {
-						display: true,
-						color: gridColor,
-						borderColor: '#1f1d2e',
-					},
-					ticks: {
-						display: false,
-						maxTicksLimit: 10
-					},
-				},
-				y: {
-					min: 0,
-					stack: 'queue',
-					stackWeight: 2,
-					grid: {
diff --git a/packages/client/src/pages/_empty_.vue b/packages/client/src/pages/_empty_.vue
index 000b6decc..3dee6cd45 100644
--- a/packages/client/src/pages/_empty_.vue
+++ b/packages/client/src/pages/_empty_.vue
@@ -1,7 +1,7 @@
 <template>
-<div></div>
+	<div></div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 </script>
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index f2b2c67fb..ac0c80870 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -1,52 +1,74 @@
 <template>
-<MkLoading v-if="!loaded"/>
-<transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div v-show="loaded" class="mjndxjch">
-		<img src="/static-assets/badges/error.png" class="_ghost" alt="Error"/>
-		<p><b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.pageLoadError }}</b></p>
-		<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
-		<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
-		<template v-else>
-			<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
-			<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
-			<MkButton class="button primary" @click="reload">{{ i18n.ts.reload }}</MkButton>
-		</template>
-		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></p>
-		<p v-if="error" class="error">ERROR: {{ error }}</p>
-	</div>
-</transition>
+	<MkLoading v-if="!loaded" />
+	<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+		<div v-show="loaded" class="mjndxjch">
+			<img
+				src="/static-assets/badges/error.png"
+				class="_ghost"
+				alt="Error"
+			/>
+			<p>
+				<b
+					><i class="ph-warning ph-bold ph-lg"></i>
+					{{ i18n.ts.pageLoadError }}</b
+				>
+			</p>
+			<p v-if="meta && version === meta.version">
+				{{ i18n.ts.pageLoadErrorDescription }}
+			</p>
+			<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
+			<template v-else>
+				<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
+				<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
+				<MkButton class="button primary" @click="reload">{{
+					i18n.ts.reload
+				}}</MkButton>
+			</template>
+			<p>
+				<MkA to="/docs/general/troubleshooting" class="_link">{{
+					i18n.ts.troubleshooting
+				}}</MkA>
+			</p>
+			<p v-if="error" class="error">ERROR: {{ error }}</p>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import MkButton from '@/components/MkButton.vue';
-import { version } from '@/config';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import MkButton from "@/components/MkButton.vue";
+import { version } from "@/config";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const props = withDefaults(defineProps<{
-	error?: Error;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		error?: Error;
+	}>(),
+	{}
+);
 
 let loaded = $ref(false);
 let serverIsDead = $ref(false);
 let meta = $ref<misskey.entities.LiteInstanceMetadata | null>(null);
 
-os.api('meta', {
+os.api("meta", {
 	detail: false,
-}).then(res => {
-	loaded = true;
-	serverIsDead = false;
-	meta = res;
-	localStorage.setItem('v', res.version);
-}, () => {
-	loaded = true;
-	serverIsDead = true;
-});
+}).then(
+	(res) => {
+		loaded = true;
+		serverIsDead = false;
+		meta = res;
+		localStorage.setItem("v", res.version);
+	},
+	() => {
+		loaded = true;
+		serverIsDead = true;
+	}
+);
 
 function reload() {
 	unisonReload();
@@ -58,7 +80,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.error,
-	icon: 'ph-warning ph-bold ph-lg',
+	icon: "ph-warning ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/_loading_.vue b/packages/client/src/pages/_loading_.vue
index 1dd2e46e1..832c05916 100644
--- a/packages/client/src/pages/_loading_.vue
+++ b/packages/client/src/pages/_loading_.vue
@@ -1,6 +1,5 @@
 <template>
-<MkLoading/>
+	<MkLoading />
 </template>
 
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
diff --git a/packages/client/src/pages/about-calckey.vue b/packages/client/src/pages/about-calckey.vue
index a768be59c..fa0eeff0b 100644
--- a/packages/client/src/pages/about-calckey.vue
+++ b/packages/client/src/pages/about-calckey.vue
@@ -1,82 +1,167 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div style="overflow: clip;">
-		<MkSpacer :content-max="600" :margin-min="20">
-			<div class="_formRoot znqjceqz">
-				<div id="debug"></div>
-				<div ref="containerEl" v-panel class="_formBlock about" :class="{ playing: easterEggEngine != null }">
-					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
-					<div class="misskey">Calckey</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>
-				</div>
-				<div class="_formBlock" style="text-align: center;">
-					{{ i18n.ts._aboutMisskey.about }}<br><a href="https://codeberg.org/calckey/calckey" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a>
-				</div>
-				<div class="_formBlock" style="text-align: center;">
-					<MkButton primary rounded inline @click="iLoveMisskey">I <Mfm text="$[jelly ❤]"/> #Calckey</MkButton>
-				</div>
-				<FormSection>
-					<div class="_formLinks">
-						<FormLink to="https://codeberg.org/calckey/calckey" external>
-							<template #icon><i class="ph-code ph-bold ph-lg"></i></template>
-							{{ i18n.ts._aboutMisskey.source }}
-							<template #suffix>Codeberg</template>
-						</FormLink>
-						<FormLink to="https://liberapay.com/ThatOneCalculator" external>
-							<template #icon><i class="ph-money ph-bold ph-lg"></i></template>
-							{{ i18n.ts._aboutMisskey.donate }}
-							<template #suffix>Donate</template>
-						</FormLink>
-						<FormLink to="https://hosted.weblate.org/engage/calckey/" external>
-							<template #icon><i class="ph-translate ph-bold ph-lg"></i></template>
-							{{ i18n.ts._aboutMisskey.translation }}
-							<template #suffix>Translate</template>
-						</FormLink>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div style="overflow: clip">
+			<MkSpacer :content-max="600" :margin-min="20">
+				<div class="_formRoot znqjceqz">
+					<div id="debug"></div>
+					<div
+						ref="containerEl"
+						v-panel
+						class="_formBlock about"
+						:class="{ playing: easterEggEngine != null }"
+					>
+						<img
+							src="/client-assets/about-icon.png"
+							alt=""
+							class="icon"
+							draggable="false"
+							@load="iconLoaded"
+							@click="gravity"
+						/>
+						<div class="misskey">Calckey</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>
 					</div>
-				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts._aboutMisskey.contributors }}</template>
-					<div class="_formLinks">
-						<FormLink to="/@kainoa@calckey.social"><Mfm :text="'$[sparkle @kainoa@calckey.social] (Main developer)'"/></FormLink>
-						<FormLink to="/@cleo@bz.pawdev.me"><Mfm :text="'@cleo@bz.pawdev.me (Maintainer)'"/></FormLink>
-						<FormLink to="/@panos@i.calckey.cloud"><Mfm :text="'@panos@i.calckey.cloud (Management)'"/></FormLink>
-						<FormLink to="/@freeplay@bz.pawdev.me"><Mfm :text="'@freeplay@bz.pawdev.me (UI/UX Designer)'"/></FormLink>
-						<FormLink to="https://www.youtube.com/c/Henkiwashere" external>Henki (error images artist)</FormLink>
+					<div class="_formBlock" style="text-align: center">
+						{{ i18n.ts._aboutMisskey.about }}<br /><a
+							href="https://codeberg.org/calckey/calckey"
+							target="_blank"
+							class="_link"
+							>{{ i18n.ts.learnMore }}</a
+						>
 					</div>
-					<template #caption><MkLink url="https://codeberg.org/calckey/calckey/activity">{{ i18n.ts._aboutMisskey.allContributors }}</MkLink></template>
-				</FormSection>
-				<FormSection>
-					<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
-					<MkSparkle>
-						<div v-for="patron in patrons" :key="patron" style="margin-bottom: 0.5rem">
-							<Mfm :text="`${patron}`"/>
+					<div class="_formBlock" style="text-align: center">
+						<MkButton primary rounded inline @click="iLoveMisskey"
+							>I <Mfm text="$[jelly ❤]" /> #Calckey</MkButton
+						>
+					</div>
+					<FormSection>
+						<div class="_formLinks">
+							<FormLink
+								to="https://codeberg.org/calckey/calckey"
+								external
+							>
+								<template #icon
+									><i class="ph-code ph-bold ph-lg"></i
+								></template>
+								{{ i18n.ts._aboutMisskey.source }}
+								<template #suffix>Codeberg</template>
+							</FormLink>
+							<FormLink
+								to="https://liberapay.com/ThatOneCalculator"
+								external
+							>
+								<template #icon
+									><i class="ph-money ph-bold ph-lg"></i
+								></template>
+								{{ i18n.ts._aboutMisskey.donate }}
+								<template #suffix>Donate</template>
+							</FormLink>
+							<FormLink
+								to="https://hosted.weblate.org/engage/calckey/"
+								external
+							>
+								<template #icon
+									><i class="ph-translate ph-bold ph-lg"></i
+								></template>
+								{{ i18n.ts._aboutMisskey.translation }}
+								<template #suffix>Translate</template>
+							</FormLink>
 						</div>
-					</MkSparkle>
-					<template #caption>{{ i18n.ts._aboutMisskey.morePatrons }}</template>
-				</FormSection>
-			</div>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+					</FormSection>
+					<FormSection>
+						<template #label>{{
+							i18n.ts._aboutMisskey.contributors
+						}}</template>
+						<div class="_formLinks">
+							<FormLink to="/@kainoa@calckey.social"
+								><Mfm
+									:text="'$[sparkle @kainoa@calckey.social] (Main developer)'"
+							/></FormLink>
+							<FormLink to="/@cleo@bz.pawdev.me"
+								><Mfm :text="'@cleo@bz.pawdev.me (Maintainer)'"
+							/></FormLink>
+							<FormLink to="/@panos@i.calckey.cloud"
+								><Mfm
+									:text="'@panos@i.calckey.cloud (Management)'"
+							/></FormLink>
+							<FormLink to="/@freeplay@bz.pawdev.me"
+								><Mfm
+									:text="'@freeplay@bz.pawdev.me (UI/UX Designer)'"
+							/></FormLink>
+							<FormLink
+								to="https://www.youtube.com/c/Henkiwashere"
+								external
+								>Henki (error images artist)</FormLink
+							>
+						</div>
+						<template #caption
+							><MkLink
+								url="https://codeberg.org/calckey/calckey/activity"
+								>{{
+									i18n.ts._aboutMisskey.allContributors
+								}}</MkLink
+							></template
+						>
+					</FormSection>
+					<FormSection>
+						<template #label
+							><Mfm text="$[jelly ❤]" />
+							{{ i18n.ts._aboutMisskey.patrons }}</template
+						>
+						<MkSparkle>
+							<div
+								v-for="patron in patrons"
+								:key="patron"
+								style="margin-bottom: 0.5rem"
+							>
+								<Mfm :text="`${patron}`" />
+							</div>
+						</MkSparkle>
+						<template #caption>{{
+							i18n.ts._aboutMisskey.morePatrons
+						}}</template>
+					</FormSection>
+				</div>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount } from 'vue';
-import { version } from '@/config';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkLink from '@/components/MkLink.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import { physics } from '@/scripts/physics';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { nextTick, onBeforeUnmount } from "vue";
+import { version } from "@/config";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkLink from "@/components/MkLink.vue";
+import MkSparkle from "@/components/MkSparkle.vue";
+import { physics } from "@/scripts/physics";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const patrons = await os.api('patrons');
+const patrons = await os.api("patrons");
 
 let easterEggReady = false;
 let easterEggEmojis = $ref([]);
@@ -89,8 +174,8 @@ function iconLoaded() {
 	for (let i = 0; i < 32; i++) {
 		easterEggEmojis.push({
 			id: i.toString(),
-			top: -(128 + (Math.random() * 256)),
-			left: (Math.random() * containerWidth),
+			top: -(128 + Math.random() * 256),
+			left: Math.random() * containerWidth,
 			emoji: emojis[Math.floor(Math.random() * emojis.length)],
 		});
 	}
@@ -108,7 +193,7 @@ function gravity() {
 
 function iLoveMisskey() {
 	os.post({
-		initialText: 'I $[jelly ❤] #Calckey',
+		initialText: "I $[jelly ❤] #Calckey",
 		instant: true,
 	});
 }
@@ -138,7 +223,8 @@ definePageMetadata({
 		border-radius: var(--radius);
 
 		&.playing {
-			&, * {
+			&,
+			* {
 				user-select: none;
 			}
 
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index 2a2ac6431..90d9fb806 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -1,44 +1,62 @@
 <template>
-<div class="driuhtrh">
-	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
-			<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
-		</MkInput>
+	<div class="driuhtrh">
+		<div class="query">
+			<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
+				<template #prefix
+					><i class="ph-magnifying-glass ph-bold ph-lg"></i
+				></template>
+			</MkInput>
 
-		<!-- たくさんあると邪魔
+			<!-- たくさんあると邪魔
 		<div class="tags">
 			<span class="tag _button" v-for="tag in tags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
 		</div>
 		-->
+		</div>
+
+		<MkFolder v-if="searchEmojis" class="emojis">
+			<template #header>{{ i18n.ts.searchResult }}</template>
+			<div class="zuvgdzyt">
+				<XEmoji
+					v-for="emoji in searchEmojis"
+					:key="emoji.name"
+					class="emoji"
+					:emoji="emoji"
+				/>
+			</div>
+		</MkFolder>
+
+		<MkFolder
+			v-for="category in customEmojiCategories"
+			:key="category"
+			class="emojis"
+		>
+			<template #header>{{ category || i18n.ts.other }}</template>
+			<div class="zuvgdzyt">
+				<XEmoji
+					v-for="emoji in customEmojis.filter(
+						(e) => e.category === category
+					)"
+					:key="emoji.name"
+					class="emoji"
+					:emoji="emoji"
+				/>
+			</div>
+		</MkFolder>
 	</div>
-
-	<MkFolder v-if="searchEmojis" class="emojis">
-		<template #header>{{ i18n.ts.searchResult }}</template>
-		<div class="zuvgdzyt">
-			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
-		</div>
-	</MkFolder>
-
-	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
-		<template #header>{{ category || i18n.ts.other }}</template>
-		<div class="zuvgdzyt">
-			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
-		</div>
-	</MkFolder>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import XEmoji from './emojis.emoji.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import { emojiCategories, emojiTags } from '@/instance';
-import { i18n } from '@/i18n';
+import { defineComponent, computed } from "vue";
+import XEmoji from "./emojis.emoji.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkTab from "@/components/MkTab.vue";
+import * as os from "@/os";
+import { emojiCategories, emojiTags } from "@/instance";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -52,7 +70,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			q: '',
+			q: "",
 			customEmojiCategories: emojiCategories,
 			customEmojis: this.$instance.emojis,
 			tags: emojiTags,
@@ -63,7 +81,9 @@ export default defineComponent({
 	},
 
 	watch: {
-		q() { this.search(); },
+		q() {
+			this.search();
+		},
 		selectedTags: {
 			handler() {
 				this.search();
@@ -74,15 +94,29 @@ export default defineComponent({
 
 	methods: {
 		search() {
-			if ((this.q === '' || this.q == null) && this.selectedTags.size === 0) {
+			if (
+				(this.q === "" || this.q == null) &&
+				this.selectedTags.size === 0
+			) {
 				this.searchEmojis = null;
 				return;
 			}
 
 			if (this.selectedTags.size === 0) {
-				this.searchEmojis = this.customEmojis.filter(emoji => emoji.name.includes(this.q) || emoji.aliases.includes(this.q));
+				this.searchEmojis = this.customEmojis.filter(
+					(emoji) =>
+						emoji.name.includes(this.q) ||
+						emoji.aliases.includes(this.q)
+				);
 			} else {
-				this.searchEmojis = this.customEmojis.filter(emoji => (emoji.name.includes(this.q) || emoji.aliases.includes(this.q)) && [...this.selectedTags].every(t => emoji.aliases.includes(t)));
+				this.searchEmojis = this.customEmojis.filter(
+					(emoji) =>
+						(emoji.name.includes(this.q) ||
+							emoji.aliases.includes(this.q)) &&
+						[...this.selectedTags].every((t) =>
+							emoji.aliases.includes(t)
+						)
+				);
 			}
 		},
 
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index c8f4594d6..ac4d4c876 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -1,88 +1,150 @@
 <template>
-<div class="taeiyria">
-	<div class="query">
-		<MkInput v-model="host" :debounce="true" class="">
-			<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts.host }}</template>
-		</MkInput>
-		<FormSplit style="margin-top: var(--margin);">
-			<MkSelect v-model="state">
-				<template #label>{{ i18n.ts.state }}</template>
-				<option value="all">{{ i18n.ts.all }}</option>
-				<option value="federating">{{ i18n.ts.federating }}</option>
-				<option value="subscribing">{{ i18n.ts.subscribing }}</option>
-				<option value="publishing">{{ i18n.ts.publishing }}</option>
-				<option value="suspended">{{ i18n.ts.suspended }}</option>
-				<option value="blocked">{{ i18n.ts.blocked }}</option>
-				<option value="notResponding">{{ i18n.ts.notResponding }}</option>
-			</MkSelect>
-			<MkSelect v-model="sort">
-				<template #label>{{ i18n.ts.sort }}</template>
-				<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
-			</MkSelect>
-		</FormSplit>
-	</div>
-
-	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
-		<div class="dqokceoi">
-			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
-				<MkInstanceCardMini :instance="instance"/>
-			</MkA>
+	<div class="taeiyria">
+		<div class="query">
+			<MkInput v-model="host" :debounce="true" class="">
+				<template #prefix
+					><i class="ph-magnifying-glass ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts.host }}</template>
+			</MkInput>
+			<FormSplit style="margin-top: var(--margin)">
+				<MkSelect v-model="state">
+					<template #label>{{ i18n.ts.state }}</template>
+					<option value="all">{{ i18n.ts.all }}</option>
+					<option value="federating">{{ i18n.ts.federating }}</option>
+					<option value="subscribing">
+						{{ i18n.ts.subscribing }}
+					</option>
+					<option value="publishing">{{ i18n.ts.publishing }}</option>
+					<option value="suspended">{{ i18n.ts.suspended }}</option>
+					<option value="blocked">{{ i18n.ts.blocked }}</option>
+					<option value="notResponding">
+						{{ i18n.ts.notResponding }}
+					</option>
+				</MkSelect>
+				<MkSelect v-model="sort">
+					<template #label>{{ i18n.ts.sort }}</template>
+					<option value="+pubSub">
+						{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-pubSub">
+						{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+notes">
+						{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-notes">
+						{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+users">
+						{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-users">
+						{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+following">
+						{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-following">
+						{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+followers">
+						{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})
+					</option>
+					<option value="-followers">
+						{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})
+					</option>
+					<option value="+caughtAt">
+						{{ i18n.ts.registeredAt }} ({{
+							i18n.ts.descendingOrder
+						}})
+					</option>
+					<option value="-caughtAt">
+						{{ i18n.ts.registeredAt }} ({{
+							i18n.ts.ascendingOrder
+						}})
+					</option>
+					<option value="+lastCommunicatedAt">
+						{{ i18n.ts.lastCommunication }} ({{
+							i18n.ts.descendingOrder
+						}})
+					</option>
+					<option value="-lastCommunicatedAt">
+						{{ i18n.ts.lastCommunication }} ({{
+							i18n.ts.ascendingOrder
+						}})
+					</option>
+				</MkSelect>
+			</FormSplit>
 		</div>
-	</MkPagination>
-</div>
+
+		<MkPagination
+			v-slot="{ items }"
+			ref="instances"
+			:key="host + state"
+			:pagination="pagination"
+		>
+			<div class="dqokceoi">
+				<MkA
+					v-for="instance in items"
+					:key="instance.id"
+					v-tooltip.mfm="
+						`Last communicated: ${new Date(
+							instance.lastCommunicatedAt
+						).toLocaleString()}\nStatus: ${getStatus(instance)}`
+					"
+					class="instance"
+					:to="`/instance-info/${instance.host}`"
+				>
+					<MkInstanceCardMini :instance="instance" />
+				</MkA>
+			</div>
+		</MkPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { computed } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
+import FormSplit from "@/components/form/split.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-let host = $ref('');
-let state = $ref('federating');
-let sort = $ref('+pubSub');
+let host = $ref("");
+let state = $ref("federating");
+let sort = $ref("+pubSub");
 const pagination = {
-	endpoint: 'federation/instances' as const,
+	endpoint: "federation/instances" as const,
 	limit: 10,
 	offsetMode: true,
 	params: computed(() => ({
 		sort: sort,
-		host: host !== '' ? host : null,
-		...(
-			state === 'federating' ? { federating: true } :
-			state === 'subscribing' ? { subscribing: true } :
-			state === 'publishing' ? { publishing: true } :
-			state === 'suspended' ? { suspended: true } :
-			state === 'blocked' ? { blocked: true } :
-			state === 'notResponding' ? { notResponding: true } :
-			{}),
+		host: host !== "" ? host : null,
+		...(state === "federating"
+			? { federating: true }
+			: state === "subscribing"
+			? { subscribing: true }
+			: state === "publishing"
+			? { publishing: true }
+			: state === "suspended"
+			? { suspended: true }
+			: state === "blocked"
+			? { blocked: true }
+			: state === "notResponding"
+			? { notResponding: true }
+			: {}),
 	})),
 };
 
 function getStatus(instance) {
-	if (instance.isSuspended) return 'Suspended';
-	if (instance.isBlocked) return 'Blocked';
-	if (instance.isNotResponding) return 'Error';
-	return 'Alive';
+	if (instance.isSuspended) return "Suspended";
+	if (instance.isBlocked) return "Blocked";
+	if (instance.isNotResponding) return "Error";
+	return "Alive";
 }
 </script>
 
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 0a0335a30..4b9e62cf8 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -1,172 +1,247 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="20">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="_formRoot">
-					<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-						<div class="content">
-							<img ref="instanceIcon" :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" aria-label="none" class="icon" :class="instanceIconAnimation" @click="easterEgg"/>
-							<div class="name">
-								<b>{{ $instance.name || host }}</b>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="20">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="_formRoot">
+						<div
+							class="_formBlock fwhjspax"
+							:style="{
+								backgroundImage: `url(${$instance.bannerUrl})`,
+							}"
+						>
+							<div class="content">
+								<img
+									ref="instanceIcon"
+									:src="
+										$instance.iconUrl ||
+										$instance.faviconUrl ||
+										'/favicon.ico'
+									"
+									aria-label="none"
+									class="icon"
+									:class="instanceIconAnimation"
+									@click="easterEgg"
+								/>
+								<div class="name">
+									<b>{{ $instance.name || host }}</b>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<MkKeyValue class="_formBlock">
-						<template #key>{{ i18n.ts.description }}</template>
-						<template #value>{{ $instance.description }}</template>
-					</MkKeyValue>
-
-					<FormSection>
-						<MkKeyValue class="_formBlock" :copy="version">
-							<template #key>Calckey</template>
-							<template #value>{{ version }}</template>
+						<MkKeyValue class="_formBlock">
+							<template #key>{{ i18n.ts.description }}</template>
+							<template #value>{{
+								$instance.description
+							}}</template>
 						</MkKeyValue>
-						<FormLink to="/about-calckey">{{ i18n.ts.aboutMisskey }}</FormLink>
-					</FormSection>
 
-					<FormSection>
-						<FormSplit>
-							<MkKeyValue class="_formBlock">
-								<template #key>{{ i18n.ts.administrator }}</template>
-								<template #value>{{ $instance.maintainerName }}</template>
-							</MkKeyValue>
-							<MkKeyValue class="_formBlock">
-								<template #key>{{ i18n.ts.contact }}</template>
-								<template #value>{{ $instance.maintainerEmail }}</template>
-							</MkKeyValue>
-						</FormSplit>
-						<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ i18n.ts.tos }}</FormLink>
-					</FormSection>
-
-					<FormSuspense :p="initStats">
 						<FormSection>
-							<template #label>{{ i18n.ts.statistics }}</template>
+							<MkKeyValue class="_formBlock" :copy="version">
+								<template #key>Calckey</template>
+								<template #value>{{ version }}</template>
+							</MkKeyValue>
+							<FormLink to="/about-calckey">{{
+								i18n.ts.aboutMisskey
+							}}</FormLink>
+						</FormSection>
+
+						<FormSection>
 							<FormSplit>
 								<MkKeyValue class="_formBlock">
-									<template #key>{{ i18n.ts.users }}</template>
-									<template #value>{{ number(stats.originalUsersCount) }}</template>
+									<template #key>{{
+										i18n.ts.administrator
+									}}</template>
+									<template #value>{{
+										$instance.maintainerName
+									}}</template>
 								</MkKeyValue>
 								<MkKeyValue class="_formBlock">
-									<template #key>{{ i18n.ts.notes }}</template>
-									<template #value>{{ number(stats.originalNotesCount) }}</template>
+									<template #key>{{
+										i18n.ts.contact
+									}}</template>
+									<template #value>{{
+										$instance.maintainerEmail
+									}}</template>
 								</MkKeyValue>
 							</FormSplit>
+							<FormLink
+								v-if="$instance.tosUrl"
+								:to="$instance.tosUrl"
+								class="_formBlock"
+								external
+								>{{ i18n.ts.tos }}</FormLink
+							>
 						</FormSection>
-					</FormSuspense>
 
-					<FormSection>
-						<template #label>Well-known resources</template>
-						<div class="_formLinks">
-							<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
-							<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
-							<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
-							<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
-							<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
-						</div>
-					</FormSection>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<XEmojis/>
-			</swiper-slide>
-			<swiper-slide>
-				<MkInstanceStats :chart-limit="500" :detailed="true"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XFederation/>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSuspense :p="initStats">
+							<FormSection>
+								<template #label>{{
+									i18n.ts.statistics
+								}}</template>
+								<FormSplit>
+									<MkKeyValue class="_formBlock">
+										<template #key>{{
+											i18n.ts.users
+										}}</template>
+										<template #value>{{
+											number(stats.originalUsersCount)
+										}}</template>
+									</MkKeyValue>
+									<MkKeyValue class="_formBlock">
+										<template #key>{{
+											i18n.ts.notes
+										}}</template>
+										<template #value>{{
+											number(stats.originalNotesCount)
+										}}</template>
+									</MkKeyValue>
+								</FormSplit>
+							</FormSection>
+						</FormSuspense>
+
+						<FormSection>
+							<template #label>Well-known resources</template>
+							<div class="_formLinks">
+								<FormLink
+									:to="`/.well-known/host-meta`"
+									external
+									>host-meta</FormLink
+								>
+								<FormLink
+									:to="`/.well-known/host-meta.json`"
+									external
+									>host-meta.json</FormLink
+								>
+								<FormLink :to="`/.well-known/nodeinfo`" external
+									>nodeinfo</FormLink
+								>
+								<FormLink :to="`/robots.txt`" external
+									>robots.txt</FormLink
+								>
+								<FormLink :to="`/manifest.json`" external
+									>manifest.json</FormLink
+								>
+							</div>
+						</FormSection>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<XEmojis />
+				</swiper-slide>
+				<swiper-slide>
+					<MkInstanceStats :chart-limit="500" :detailed="true" />
+				</swiper-slide>
+				<swiper-slide>
+					<XFederation />
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XEmojis from './about.emojis.vue';
-import XFederation from './about.federation.vue';
-import { version, instanceName , host } from '@/config';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkInstanceStats from '@/components/MkInstanceStats.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { iAmModerator } from '@/account';
-import { instance } from '@/instance';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { ref, computed, onMounted, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XEmojis from "./about.emojis.vue";
+import XFederation from "./about.federation.vue";
+import { version, instanceName, host } from "@/config";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkInstanceStats from "@/components/MkInstanceStats.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { iAmModerator } from "@/account";
+import { instance } from "@/instance";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
-withDefaults(defineProps<{
-	initialTab?: string;
-}>(), {
-	initialTab: 'overview',
-});
+withDefaults(
+	defineProps<{
+		initialTab?: string;
+	}>(),
+	{
+		initialTab: "overview",
+	}
+);
 
 let stats = $ref(null);
 let instanceIcon = $ref<HTMLImageElement>();
-let instanceIconAnimation = 'none';
+let instanceIconAnimation = "none";
 let iconClicks = 0;
-let tabs = ['overview', 'emojis', 'charts'];
+let tabs = ["overview", "emojis", "charts"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
-if (iAmModerator) tabs.push('federation');
+if (iAmModerator) tabs.push("federation");
 
-const initStats = () => os.api('stats', {
-}).then((res) => {
-	stats = res;
-});
+const initStats = () =>
+	os.api("stats", {}).then((res) => {
+		stats = res;
+	});
 
 const headerActions = $computed(() => []);
 
-let theTabs = [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-map-trifold ph-bold ph-lg',
-}, {
-	key: 'emojis',
-	title: i18n.ts.customEmojis,
-	icon: 'ph-smiley ph-bold ph-lg',
-}, {
-	key: 'charts',
-	title: i18n.ts.charts,
-	icon: 'ph-chart-bar ph-bold ph-lg',
-}];
+let theTabs = [
+	{
+		key: "overview",
+		title: i18n.ts.overview,
+		icon: "ph-map-trifold ph-bold ph-lg",
+	},
+	{
+		key: "emojis",
+		title: i18n.ts.customEmojis,
+		icon: "ph-smiley ph-bold ph-lg",
+	},
+	{
+		key: "charts",
+		title: i18n.ts.charts,
+		icon: "ph-chart-bar ph-bold ph-lg",
+	},
+];
 
 if (iAmModerator) {
-	theTabs.push(
-		{
-			key: 'federation',
-			title: i18n.ts.federation,
-			icon: 'ph-planet ph-bold ph-lg',
-		},
-	);
+	theTabs.push({
+		key: "federation",
+		title: i18n.ts.federation,
+		icon: "ph-planet ph-bold ph-lg",
+	});
 }
 
 let headerTabs = $computed(() => theTabs);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.instanceInfo,
-	icon: 'ph-info ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.instanceInfo,
+		icon: "ph-info ph-bold ph-lg",
+	}))
+);
 
 async function sleep(seconds) {
 	return new Promise((resolve) => setTimeout(resolve, seconds * 1000));
@@ -174,14 +249,13 @@ async function sleep(seconds) {
 
 onMounted(() => {
 	if (defaultStore.state.woozyMode) {
-		instanceIcon.src = '/static-assets/woozy.png';
+		instanceIcon.src = "/static-assets/woozy.png";
 	}
 });
 
-
 function easterEgg() {
 	iconClicks++;
-	instanceIconAnimation = 'noAnimation';
+	instanceIconAnimation = "noAnimation";
 	console.log(instanceIconAnimation);
 	sleep(0.1);
 	const normalizedCount = (iconClicks % 3) + 1;
@@ -189,14 +263,14 @@ function easterEgg() {
 	if (iconClicks % 3 === 0) {
 		defaultStore.state.woozyMode = !defaultStore.state.woozyMode;
 		sleep(0.4);
-		instanceIconAnimation = 'noAnimation';
-		instanceIconAnimation = 'doSpinY';
+		instanceIconAnimation = "noAnimation";
+		instanceIconAnimation = "doSpinY";
 		console.log(instanceIconAnimation);
 		if (iconClicks % 6 === 0) {
-			instanceIcon.src = instance.iconUrl || instance.faviconUrl || '/favicon.ico'
-		}
-		else {
-			instanceIcon.src = '/static-assets/woozy.png';
+			instanceIcon.src =
+				instance.iconUrl || instance.faviconUrl || "/favicon.ico";
+		} else {
+			instanceIcon.src = "/static-assets/woozy.png";
 		}
 	}
 }
@@ -215,55 +289,124 @@ function onSlideChange() {
 function syncSlide(index) {
 	swiperRef.slideTo(index);
 }
-
 </script>
 
 <style lang="scss" scoped>
 @keyframes iconShake1 {
-	0% { transform: translate(2px, 0px) rotate(-1deg) }
-	10% { transform: translate(2px, -3px) rotate(5deg) }
-	20% { transform: translate(-1px, -3px) rotate(3deg) }
-	30% { transform: translate(-2px, 0px) rotate(-1deg) }
-	40% { transform: translate(-2px, -1px) rotate(4deg) }
-	50% { transform: translate(-1px, -1px) rotate(1deg) }
-	60% { transform: translate(-2px, 0px) rotate(-8deg) }
-	70% { transform: translate(1px, 2px) rotate(-2deg) }
-	80% { transform: translate(-1px, 2px) rotate(4deg) }
-	90% { transform: translate(-1px, 1px) rotate(11deg) }
-	100% { transform: translate(-3px, -3px) rotate(-5deg) }
+	0% {
+		transform: translate(2px, 0px) rotate(-1deg);
+	}
+	10% {
+		transform: translate(2px, -3px) rotate(5deg);
+	}
+	20% {
+		transform: translate(-1px, -3px) rotate(3deg);
+	}
+	30% {
+		transform: translate(-2px, 0px) rotate(-1deg);
+	}
+	40% {
+		transform: translate(-2px, -1px) rotate(4deg);
+	}
+	50% {
+		transform: translate(-1px, -1px) rotate(1deg);
+	}
+	60% {
+		transform: translate(-2px, 0px) rotate(-8deg);
+	}
+	70% {
+		transform: translate(1px, 2px) rotate(-2deg);
+	}
+	80% {
+		transform: translate(-1px, 2px) rotate(4deg);
+	}
+	90% {
+		transform: translate(-1px, 1px) rotate(11deg);
+	}
+	100% {
+		transform: translate(-3px, -3px) rotate(-5deg);
+	}
 }
 
 @keyframes iconShake2 {
-	0% { transform: translate(-1px, 5px) rotate(33deg) }
-	10% { transform: translate(-2px, 7px) rotate(20deg) }
-	20% { transform: translate(8px, 5px) rotate(31deg) }
-	30% { transform: translate(-2px, 5px) rotate(3deg) }
-	40% { transform: translate(4px, 6px) rotate(16deg) }
-	50% { transform: translate(8px, -3px) rotate(19deg) }
-	60% { transform: translate(7px, -2px) rotate(0deg) }
-	70% { transform: translate(4px, 4px) rotate(8deg) }
-	80% { transform: translate(7px, -3px) rotate(13deg) }
-	90% { transform: translate(6px, 7px) rotate(4deg) }
-	100% { transform: translate(4px, -2px) rotate(-2deg) }
+	0% {
+		transform: translate(-1px, 5px) rotate(33deg);
+	}
+	10% {
+		transform: translate(-2px, 7px) rotate(20deg);
+	}
+	20% {
+		transform: translate(8px, 5px) rotate(31deg);
+	}
+	30% {
+		transform: translate(-2px, 5px) rotate(3deg);
+	}
+	40% {
+		transform: translate(4px, 6px) rotate(16deg);
+	}
+	50% {
+		transform: translate(8px, -3px) rotate(19deg);
+	}
+	60% {
+		transform: translate(7px, -2px) rotate(0deg);
+	}
+	70% {
+		transform: translate(4px, 4px) rotate(8deg);
+	}
+	80% {
+		transform: translate(7px, -3px) rotate(13deg);
+	}
+	90% {
+		transform: translate(6px, 7px) rotate(4deg);
+	}
+	100% {
+		transform: translate(4px, -2px) rotate(-2deg);
+	}
 }
 
 @keyframes iconShake3 {
-	0% { transform: translate(12px, -2px) rotate(57deg) }
-	10% { transform: translate(10px, 2px) rotate(12deg) }
-	20% { transform: translate(10px, 4px) rotate(3deg) }
-	30% { transform: translate(17px, 11px) rotate(15deg) }
-	40% { transform: translate(12px, 20px) rotate(-11deg) }
-	50% { transform: translate(5px, 12px) rotate(43deg) }
-	60% { transform: translate(16px, 8px) rotate(-4deg) }
-	70% { transform: translate(14px, 11px) rotate(22deg) }
-	80% { transform: translate(9px, 19px) rotate(-3deg) }
-	90% { transform: translate(0px, 12px) rotate(-3deg) }
-	100% { transform: translate(17px, 3px) rotate(57deg) }
+	0% {
+		transform: translate(12px, -2px) rotate(57deg);
+	}
+	10% {
+		transform: translate(10px, 2px) rotate(12deg);
+	}
+	20% {
+		transform: translate(10px, 4px) rotate(3deg);
+	}
+	30% {
+		transform: translate(17px, 11px) rotate(15deg);
+	}
+	40% {
+		transform: translate(12px, 20px) rotate(-11deg);
+	}
+	50% {
+		transform: translate(5px, 12px) rotate(43deg);
+	}
+	60% {
+		transform: translate(16px, 8px) rotate(-4deg);
+	}
+	70% {
+		transform: translate(14px, 11px) rotate(22deg);
+	}
+	80% {
+		transform: translate(9px, 19px) rotate(-3deg);
+	}
+	90% {
+		transform: translate(0px, 12px) rotate(-3deg);
+	}
+	100% {
+		transform: translate(17px, 3px) rotate(57deg);
+	}
 }
 
 @keyframes spinY {
-	0% { transform: perspective(128px) rotateY(0deg); }
-	100% { transform: perspective(128px) rotateY(360deg); }
+	0% {
+		transform: perspective(128px) rotateY(0deg);
+	}
+	100% {
+		transform: perspective(128px) rotateY(360deg);
+	}
 }
 
 .fwhjspax {
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 30e3d420c..7806cf23c 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -1,121 +1,197 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="cxqhhsmd _formRoot">
-					<a class="_formBlock thumbnail" :href="file.url" target="_blank">
-						<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-					</a>
-					<div class="_formBlock">
-						<MkKeyValue :copy="file.type" oneline style="margin: 1em 0;">
-							<template #key>MIME Type</template>
-							<template #value><span class="_monospace">{{ file.type }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>Size</template>
-							<template #value><span class="_monospace">{{ bytes(file.size) }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue :copy="file.id" oneline style="margin: 1em 0;">
-							<template #key>ID</template>
-							<template #value><span class="_monospace">{{ file.id }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue :copy="file.md5" oneline style="margin: 1em 0;">
-							<template #key>MD5</template>
-							<template #value><span class="_monospace">{{ file.md5 }}</span></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.createdAt }}</template>
-							<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
-						</MkKeyValue>
-					</div>
-					<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
-						<MkUserCardMini :user="file.user"/>
-					</MkA>
-					<div class="_formBlock">
-						<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
-					</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="cxqhhsmd _formRoot">
+						<a
+							class="_formBlock thumbnail"
+							:href="file.url"
+							target="_blank"
+						>
+							<MkDriveFileThumbnail
+								class="thumbnail"
+								:file="file"
+								fit="contain"
+							/>
+						</a>
+						<div class="_formBlock">
+							<MkKeyValue
+								:copy="file.type"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>MIME Type</template>
+								<template #value
+									><span class="_monospace">{{
+										file.type
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>Size</template>
+								<template #value
+									><span class="_monospace">{{
+										bytes(file.size)
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue
+								:copy="file.id"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>ID</template>
+								<template #value
+									><span class="_monospace">{{
+										file.id
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue
+								:copy="file.md5"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>MD5</template>
+								<template #value
+									><span class="_monospace">{{
+										file.md5
+									}}</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.createdAt
+								}}</template>
+								<template #value
+									><span class="_monospace"
+										><MkTime
+											:time="file.createdAt"
+											mode="detail"
+											style="display: block" /></span
+								></template>
+							</MkKeyValue>
+						</div>
+						<MkA
+							v-if="file.user"
+							class="user"
+							:to="`/user-info/${file.user.id}`"
+						>
+							<MkUserCardMini :user="file.user" />
+						</MkA>
+						<div class="_formBlock">
+							<MkSwitch
+								v-model="isSensitive"
+								@update:modelValue="toggleIsSensitive"
+								>NSFW</MkSwitch
+							>
+						</div>
 
-					<div class="_formBlock">
-						<MkButton danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
+						<div class="_formBlock">
+							<MkButton danger @click="del"
+								><i class="ph-trash ph-bold ph-lg"></i>
+								{{ i18n.ts.delete }}</MkButton
+							>
+						</div>
 					</div>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div v-if="info" class="_formRoot">
-					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-					<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
-						<template #key>IP</template>
-						<template #value>{{ info.requestIp }}</template>
-					</MkKeyValue>
-					<FormSection v-if="info.requestHeaders">
-						<template #label>Headers</template>
-						<MkKeyValue v-for="(v, k) in info.requestHeaders" :key="k" class="_formBlock _monospace">
-							<template #key>{{ k }}</template>
-							<template #value>{{ v }}</template>
+				</swiper-slide>
+				<swiper-slide>
+					<div v-if="info" class="_formRoot">
+						<MkInfo v-if="!iAmAdmin" warn>{{
+							i18n.ts.requireAdminForView
+						}}</MkInfo>
+						<MkKeyValue
+							v-if="info.requestIp"
+							class="_formBlock _monospace"
+							:copy="info.requestIp"
+							oneline
+						>
+							<template #key>IP</template>
+							<template #value>{{ info.requestIp }}</template>
 						</MkKeyValue>
-					</FormSection>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<MkObjectView v-if="info" tall :value="info">
-					</MkObjectView>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSection v-if="info.requestHeaders">
+							<template #label>Headers</template>
+							<MkKeyValue
+								v-for="(v, k) in info.requestHeaders"
+								:key="k"
+								class="_formBlock _monospace"
+							>
+								<template #key>{{ k }}</template>
+								<template #value>{{ v }}</template>
+							</MkKeyValue>
+						</FormSection>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<MkObjectView v-if="info" tall :value="info">
+						</MkObjectView>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSection from '@/components/form/section.vue';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { acct } from '@/filters/user';
-import { iAmAdmin, iAmModerator } from '@/account';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSection from "@/components/form/section.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { acct } from "@/filters/user";
+import { iAmAdmin, iAmModerator } from "@/account";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
-let tabs = ['overview'];
-if (iAmModerator) tabs.push('ip');
-tabs.push('raw');
+let tabs = ["overview"];
+if (iAmModerator) tabs.push("ip");
+tabs.push("raw");
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let file: any = $ref(null);
 let info: any = $ref(null);
 let isSensitive: boolean = $ref(false);
 
 const props = defineProps<{
-	fileId: string,
+	fileId: string;
 }>();
 
 async function fetch() {
-	file = await os.api('drive/files/show', { fileId: props.fileId });
-	info = await os.api('admin/drive/show-file', { fileId: props.fileId });
+	file = await os.api("drive/files/show", { fileId: props.fileId });
+	info = await os.api("admin/drive/show-file", { fileId: props.fileId });
 	isSensitive = file.isSensitive;
 }
 
@@ -123,47 +199,60 @@ fetch();
 
 async function del() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: file.name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: file.name }),
 	});
 	if (canceled) return;
 
-	os.apiWithDialog('drive/files/delete', {
+	os.apiWithDialog("drive/files/delete", {
 		fileId: file.id,
 	});
 }
 
 async function toggleIsSensitive(v) {
-	await os.api('drive/files/update', { fileId: props.fileId, isSensitive: v });
+	await os.api("drive/files/update", {
+		fileId: props.fileId,
+		isSensitive: v,
+	});
 	isSensitive = v;
 }
 
-const headerActions = $computed(() => [{
-	text: i18n.ts.openInNewTab,
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	handler: () => {
-		window.open(file.url, '_blank');
+const headerActions = $computed(() => [
+	{
+		text: i18n.ts.openInNewTab,
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		handler: () => {
+			window.open(file.url, "_blank");
+		},
 	},
-}]);
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-info ph-bold ph-lg',
-}, iAmModerator ? {
-	key: 'ip',
-	title: 'IP',
-	icon: 'ph-receipt ph-bold ph-lg',
-} : null, {
-	key: 'raw',
-	title: 'Raw data',
-	icon: 'ph-code ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "overview",
+		title: i18n.ts.overview,
+		icon: "ph-info ph-bold ph-lg",
+	},
+	iAmModerator
+		? {
+				key: "ip",
+				title: "IP",
+				icon: "ph-receipt ph-bold ph-lg",
+		  }
+		: null,
+	{
+		key: "raw",
+		title: "Raw data",
+		icon: "ph-code ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
-	icon: 'ph-file ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: file ? i18n.ts.file + ": " + file.name : i18n.ts.file,
+		icon: "ph-file ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index bdb41b2d2..69fd1bc58 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -1,42 +1,78 @@
 <template>
-<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
-	<template v-if="metadata">
-		<div class="titleContainer" @click="showTabsPopup">
-			<i v-if="metadata.icon" class="icon" :class="metadata.icon"></i>
+	<div ref="el" class="fdidabkc" :style="{ background: bg }" @click="onClick">
+		<template v-if="metadata">
+			<div class="titleContainer" @click="showTabsPopup">
+				<i v-if="metadata.icon" class="icon" :class="metadata.icon"></i>
 
-			<div class="title">
-				<div class="title">{{ metadata.title }}</div>
+				<div class="title">
+					<div class="title">{{ metadata.title }}</div>
+				</div>
+			</div>
+			<div class="tabs">
+				<button
+					v-for="tab in tabs"
+					:ref="(el) => (tabRefs[tab.key] = el)"
+					v-tooltip.noDelay="tab.title"
+					class="tab _button"
+					:class="{
+						active: tab.key != null && tab.key === props.tab,
+					}"
+					@mousedown="(ev) => onTabMousedown(tab, ev)"
+					@click="(ev) => onTabClick(tab, ev)"
+				>
+					<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+					<span v-if="!tab.iconOnly" class="title">{{
+						tab.title
+					}}</span>
+				</button>
+				<div ref="tabHighlightEl" class="highlight"></div>
 			</div>
-		</div>
-		<div class="tabs">
-			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-			<div ref="tabHighlightEl" class="highlight"></div>
-		</div>
-	</template>
-	<div class="buttons right">
-		<template v-if="actions">
-			<template v-for="action in actions">
-				<MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
-				<button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
-			</template>
 		</template>
+		<div class="buttons right">
+			<template v-if="actions">
+				<template v-for="action in actions">
+					<MkButton
+						v-if="action.asFullButton"
+						class="fullButton"
+						primary
+						@click.stop="action.handler"
+						><i :class="action.icon" style="margin-right: 6px"></i
+						>{{ action.text }}</MkButton
+					>
+					<button
+						v-else
+						v-tooltip.noDelay="action.text"
+						class="_button button"
+						:class="{ highlighted: action.highlighted }"
+						@click.stop="action.handler"
+						@touchstart="preventDrag"
+					>
+						<i :class="action.icon"></i>
+					</button>
+				</template>
+			</template>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
-import { url } from '@/config';
-import { scrollToTop } from '@/scripts/scroll';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-import { globalEvents } from '@/events';
-import { injectPageMetadata } from '@/scripts/page-metadata';
+import {
+	computed,
+	onMounted,
+	onUnmounted,
+	ref,
+	inject,
+	watch,
+	nextTick,
+} from "vue";
+import tinycolor from "tinycolor2";
+import { popupMenu } from "@/os";
+import { url } from "@/config";
+import { scrollToTop } from "@/scripts/scroll";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import { globalEvents } from "@/events";
+import { injectPageMetadata } from "@/scripts/page-metadata";
 
 type Tab = {
 	key?: string | null;
@@ -59,7 +95,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'update:tab', key: string);
+	(ev: "update:tab", key: string);
 }>();
 
 const metadata = injectPageMetadata();
@@ -77,7 +113,7 @@ const showTabsPopup = (ev: MouseEvent) => {
 	if (!hasTabs.value) return;
 	ev.preventDefault();
 	ev.stopPropagation();
-	const menu = props.tabs.map(tab => ({
+	const menu = props.tabs.map((tab) => ({
 		text: tab.title,
 		icon: tab.icon,
 		active: tab.key != null && tab.key === props.tab,
@@ -93,13 +129,13 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el.value, { behavior: 'smooth' });
+	scrollToTop(el.value, { behavior: "smooth" });
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
@@ -110,40 +146,52 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
 		tab.onClick(ev);
 	}
 	if (tab.key) {
-		emit('update:tab', tab.key);
+		emit("update:tab", tab.key);
 	}
 }
 
 const calcBg = () => {
-	const rawBg = metadata?.bg || 'var(--bg)';
-	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+	const rawBg = metadata?.bg || "var(--bg)";
+	const tinyBg = tinycolor(
+		rawBg.startsWith("var(")
+			? getComputedStyle(document.documentElement).getPropertyValue(
+					rawBg.slice(4, -1)
+			  )
+			: rawBg
+	);
 	tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
 };
 
 onMounted(() => {
 	calcBg();
-	globalEvents.on('themeChanged', calcBg);
+	globalEvents.on("themeChanged", calcBg);
 
-	watch(() => [props.tab, props.tabs], () => {
-		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
-			if (tabEl && tabHighlightEl) {
-				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
-				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-				const parentRect = tabEl.parentElement.getBoundingClientRect();
-				const rect = tabEl.getBoundingClientRect();
-				tabHighlightEl.style.width = rect.width + 'px';
-				tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
-			}
-		});
-	}, {
-		immediate: true,
-	});
+	watch(
+		() => [props.tab, props.tabs],
+		() => {
+			nextTick(() => {
+				const tabEl = tabRefs[props.tab];
+				if (tabEl && tabHighlightEl) {
+					// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+					// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+					const parentRect =
+						tabEl.parentElement.getBoundingClientRect();
+					const rect = tabEl.getBoundingClientRect();
+					tabHighlightEl.style.width = rect.width + "px";
+					tabHighlightEl.style.left =
+						rect.left - parentRect.left + "px";
+				}
+			});
+		},
+		{
+			immediate: true,
+		}
+	);
 });
 
 onUnmounted(() => {
-	globalEvents.off('themeChanged', calcBg);
+	globalEvents.off("themeChanged", calcBg);
 });
 </script>
 
@@ -158,7 +206,7 @@ onUnmounted(() => {
 	> .buttons {
 		--margin: 8px;
 		display: flex;
-    align-items: center;
+		align-items: center;
 		height: var(--height);
 		margin: 0 var(--margin);
 
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 5d11120a1..27d8a700c 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -1,31 +1,65 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900">
-		<div class="lcixvhis">
-			<div class="_section reports">
-				<div class="_content">
-					<div class="inputs" style="display: flex;">
-						<MkSelect v-model="state" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.state }}</template>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="unresolved">{{ i18n.ts.unresolved }}</option>
-							<option value="resolved">{{ i18n.ts.resolved }}</option>
-						</MkSelect>
-						<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.reporteeOrigin }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-						<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.reporterOrigin }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-					</div>
-					<!-- TODO
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900">
+			<div class="lcixvhis">
+				<div class="_section reports">
+					<div class="_content">
+						<div class="inputs" style="display: flex">
+							<MkSelect
+								v-model="state"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{ i18n.ts.state }}</template>
+								<option value="all">{{ i18n.ts.all }}</option>
+								<option value="unresolved">
+									{{ i18n.ts.unresolved }}
+								</option>
+								<option value="resolved">
+									{{ i18n.ts.resolved }}
+								</option>
+							</MkSelect>
+							<MkSelect
+								v-model="targetUserOrigin"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{
+									i18n.ts.reporteeOrigin
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+							<MkSelect
+								v-model="reporterOrigin"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{
+									i18n.ts.reporterOrigin
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+						</div>
+						<!-- TODO
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
 				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
 					<span>{{ i18n.ts.username }}</span>
@@ -36,37 +70,47 @@
 			</div>
 			-->
 
-					<MkPagination v-slot="{items}" ref="reports" :pagination="pagination" style="margin-top: var(--margin);">
-						<XAbuseReport v-for="report in items" :key="report.id" :report="report" @resolved="resolved"/>
-					</MkPagination>
+						<MkPagination
+							v-slot="{ items }"
+							ref="reports"
+							:pagination="pagination"
+							style="margin-top: var(--margin)"
+						>
+							<XAbuseReport
+								v-for="report in items"
+								:key="report.id"
+								:report="report"
+								@resolved="resolved"
+							/>
+						</MkPagination>
+					</div>
 				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import XAbuseReport from '@/components/MkAbuseReport.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import XAbuseReport from "@/components/MkAbuseReport.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let reports = $ref<InstanceType<typeof MkPagination>>();
 
-let state = $ref('unresolved');
-let reporterOrigin = $ref('combined');
-let targetUserOrigin = $ref('combined');
-let searchUsername = $ref('');
-let searchHost = $ref('');
+let state = $ref("unresolved");
+let reporterOrigin = $ref("combined");
+let targetUserOrigin = $ref("combined");
+let searchUsername = $ref("");
+let searchHost = $ref("");
 
 const pagination = {
-	endpoint: 'admin/abuse-user-reports' as const,
+	endpoint: "admin/abuse-user-reports" as const,
 	limit: 10,
 	params: computed(() => ({
 		state,
@@ -76,7 +120,7 @@ const pagination = {
 };
 
 function resolved(reportId) {
-	reports.removeItem(item => item.id === reportId);
+	reports.removeItem((item) => item.id === reportId);
 }
 
 const headerActions = $computed(() => []);
@@ -85,7 +129,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.abuseReports,
-	icon: 'ph-warning-circle ph-bold ph-lg',
+	icon: "ph-warning-circle ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index 6bc0069fa..9853158de 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -1,106 +1,139 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900">
-		<div class="ztgjmzrw">
-			<section v-for="announcement in announcements" class="_card _gap announcements">
-				<div class="_content announcement">
-					<MkInput v-model="announcement.title">
-						<template #label>{{ i18n.ts.title }}</template>
-					</MkInput>
-					<MkTextarea v-model="announcement.text">
-						<template #label>{{ i18n.ts.text }}</template>
-					</MkTextarea>
-					<MkInput v-model="announcement.imageUrl">
-						<template #label>{{ i18n.ts.imageUrl }}</template>
-					</MkInput>
-					<p v-if="announcement.reads">{{ i18n.t('nUsersRead', { n: announcement.reads }) }}</p>
-					<div class="buttons">
-						<MkButton class="button" inline primary @click="save(announcement)"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton class="button" inline @click="remove(announcement)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.remove }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900">
+			<div class="ztgjmzrw">
+				<section
+					v-for="announcement in announcements"
+					class="_card _gap announcements"
+				>
+					<div class="_content announcement">
+						<MkInput v-model="announcement.title">
+							<template #label>{{ i18n.ts.title }}</template>
+						</MkInput>
+						<MkTextarea v-model="announcement.text">
+							<template #label>{{ i18n.ts.text }}</template>
+						</MkTextarea>
+						<MkInput v-model="announcement.imageUrl">
+							<template #label>{{ i18n.ts.imageUrl }}</template>
+						</MkInput>
+						<p v-if="announcement.reads">
+							{{
+								i18n.t("nUsersRead", { n: announcement.reads })
+							}}
+						</p>
+						<div class="buttons">
+							<MkButton
+								class="button"
+								inline
+								primary
+								@click="save(announcement)"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</MkButton
+							>
+							<MkButton
+								class="button"
+								inline
+								@click="remove(announcement)"
+								><i class="ph-trash ph-bold ph-lg"></i>
+								{{ i18n.ts.remove }}</MkButton
+							>
+						</div>
 					</div>
-				</div>
-			</section>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				</section>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let announcements: any[] = $ref([]);
 
-os.api('admin/announcements/list').then(announcementResponse => {
+os.api("admin/announcements/list").then((announcementResponse) => {
 	announcements = announcementResponse;
 });
 
 function add() {
 	announcements.unshift({
 		id: null,
-		title: '',
-		text: '',
+		title: "",
+		text: "",
 		imageUrl: null,
 	});
 }
 
 function remove(announcement) {
 	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: announcement.title }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: announcement.title }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		announcements = announcements.filter(x => x !== announcement);
-		os.api('admin/announcements/delete', announcement);
+		announcements = announcements.filter((x) => x !== announcement);
+		os.api("admin/announcements/delete", announcement);
 	});
 }
 
 function save(announcement) {
 	if (announcement.id == null) {
-		os.api('admin/announcements/create', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
+		os.api("admin/announcements/create", announcement)
+			.then(() => {
+				os.alert({
+					type: "success",
+					text: i18n.ts.saved,
+				});
+			})
+			.catch((err) => {
+				os.alert({
+					type: "error",
+					text: err,
+				});
 			});
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
 	} else {
-		os.api('admin/announcements/update', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
+		os.api("admin/announcements/update", announcement)
+			.then(() => {
+				os.alert({
+					type: "success",
+					text: i18n.ts.saved,
+				});
+			})
+			.catch((err) => {
+				os.alert({
+					type: "error",
+					text: err,
+				});
 			});
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
 	}
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.add,
-	handler: add,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.add,
+		handler: add,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: 'ph-megaphone-simple ph-bold ph-lg',
+	icon: "ph-megaphone-simple ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 910bd8334..f47300e05 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -1,60 +1,92 @@
 <template>
-<div>
-	<FormSuspense :p="init">
-		<div class="_formRoot">
-			<FormRadios v-model="provider" class="_formBlock">
-				<option :value="null">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option>
-				<option value="hcaptcha">hCaptcha</option>
-				<option value="recaptcha">reCAPTCHA</option>
-			</FormRadios>
+	<div>
+		<FormSuspense :p="init">
+			<div class="_formRoot">
+				<FormRadios v-model="provider" class="_formBlock">
+					<option :value="null">
+						{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})
+					</option>
+					<option value="hcaptcha">hCaptcha</option>
+					<option value="recaptcha">reCAPTCHA</option>
+				</FormRadios>
 
-			<template v-if="provider === 'hcaptcha'">
-				<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.hcaptchaSiteKey }}</template>
-				</FormInput>
-				<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.hcaptchaSecretKey }}</template>
-				</FormInput>
-				<FormSlot class="_formBlock">
-					<template #label>{{ i18n.ts.preview }}</template>
-					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
-				</FormSlot>
-			</template>
-			<template v-else-if="provider === 'recaptcha'">
-				<FormInput v-model="recaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.recaptchaSiteKey }}</template>
-				</FormInput>
-				<FormInput v-model="recaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.recaptchaSecretKey }}</template>
-				</FormInput>
-				<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
-					<template #label>{{ i18n.ts.preview }}</template>
-					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
-				</FormSlot>
-			</template>
+				<template v-if="provider === 'hcaptcha'">
+					<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.hcaptchaSiteKey
+						}}</template>
+					</FormInput>
+					<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.hcaptchaSecretKey
+						}}</template>
+					</FormInput>
+					<FormSlot class="_formBlock">
+						<template #label>{{ i18n.ts.preview }}</template>
+						<MkCaptcha
+							provider="hcaptcha"
+							:sitekey="
+								hcaptchaSiteKey ||
+								'10000000-ffff-ffff-ffff-000000000001'
+							"
+						/>
+					</FormSlot>
+				</template>
+				<template v-else-if="provider === 'recaptcha'">
+					<FormInput v-model="recaptchaSiteKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.recaptchaSiteKey
+						}}</template>
+					</FormInput>
+					<FormInput v-model="recaptchaSecretKey" class="_formBlock">
+						<template #prefix
+							><i class="ph-key ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.recaptchaSecretKey
+						}}</template>
+					</FormInput>
+					<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
+						<template #label>{{ i18n.ts.preview }}</template>
+						<MkCaptcha
+							provider="recaptcha"
+							:sitekey="recaptchaSiteKey"
+						/>
+					</FormSlot>
+				</template>
 
-			<FormButton primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-		</div>
-	</FormSuspense>
-</div>
+				<FormButton primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</FormButton
+				>
+			</div>
+		</FormSuspense>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSlot from '@/components/form/slot.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSlot from "@/components/form/slot.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
 
-const MkCaptcha = defineAsyncComponent(() => import('@/components/MkCaptcha.vue'));
+const MkCaptcha = defineAsyncComponent(
+	() => import("@/components/MkCaptcha.vue")
+);
 
 let provider = $ref(null);
 let hcaptchaSiteKey: string | null = $ref(null);
@@ -63,21 +95,25 @@ let recaptchaSiteKey: string | null = $ref(null);
 let recaptchaSecretKey: string | null = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	hcaptchaSiteKey = meta.hcaptchaSiteKey;
 	hcaptchaSecretKey = meta.hcaptchaSecretKey;
 	recaptchaSiteKey = meta.recaptchaSiteKey;
 	recaptchaSecretKey = meta.recaptchaSecretKey;
 
-	provider = meta.enableHcaptcha ? 'hcaptcha' : meta.enableRecaptcha ? 'recaptcha' : null;
+	provider = meta.enableHcaptcha
+		? "hcaptcha"
+		: meta.enableRecaptcha
+		? "recaptcha"
+		: null;
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
-		enableHcaptcha: provider === 'hcaptcha',
+	os.apiWithDialog("admin/update-meta", {
+		enableHcaptcha: provider === "hcaptcha",
 		hcaptchaSiteKey,
 		hcaptchaSecretKey,
-		enableRecaptcha: provider === 'recaptcha',
+		enableRecaptcha: provider === "recaptcha",
 		recaptchaSiteKey,
 		recaptchaSecretKey,
 	}).then(() => {
diff --git a/packages/client/src/pages/admin/custom-css.vue b/packages/client/src/pages/admin/custom-css.vue
index 8c0e0459e..2362c1f93 100644
--- a/packages/client/src/pages/admin/custom-css.vue
+++ b/packages/client/src/pages/admin/custom-css.vue
@@ -1,23 +1,31 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts.adminCustomCssWarn }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{
+			i18n.ts.adminCustomCssWarn
+		}}</FormInfo>
 
-	<FormTextarea v-model="globalCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
-		<template #label>Instance CSS</template>
-	</FormTextarea>
-</div>
+		<FormTextarea
+			v-model="globalCustomCss"
+			manual-save
+			tall
+			class="_monospace _formBlock"
+			style="tab-size: 2"
+		>
+			<template #label>Instance CSS</template>
+		</FormTextarea>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
+const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
 
 /*
 async function apply() {
@@ -43,6 +51,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customCss,
-	icon: 'ph-code ph-bold ph-lg',
+	icon: "ph-code ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index f8d49d829..f665d3813 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -1,26 +1,48 @@
-<template><MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
+<template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
 		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
-	<FormButton primary @click="indexPosts">{{ i18n.ts.indexPosts }}</FormButton>
-	<FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
-		<MkKeyValue v-for="table in database" :key="table[0]" oneline style="margin: 1em 0;">
-			<template #key>{{ table[0] }}</template>
-			<template #value>{{ bytes(table[1].size) }} ({{ number(table[1].count) }} recs)</template>
-		</MkKeyValue>
-	</FormSuspense>
-</MkSpacer></MkStickyContainer>
+			<FormButton primary @click="indexPosts">{{
+				i18n.ts.indexPosts
+			}}</FormButton>
+			<FormSuspense
+				v-slot="{ result: database }"
+				:p="databasePromiseFactory"
+			>
+				<MkKeyValue
+					v-for="table in database"
+					:key="table[0]"
+					oneline
+					style="margin: 1em 0"
+				>
+					<template #key>{{ table[0] }}</template>
+					<template #value
+						>{{ bytes(table[1].size) }} ({{
+							number(table[1].count)
+						}}
+						recs)</template
+					>
+				</MkKeyValue>
+			</FormSuspense>
+		</MkSpacer></MkStickyContainer
+	>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 async function indexPosts() {
 	const { canceled, result: index } = await os.inputText({
@@ -29,24 +51,28 @@ async function indexPosts() {
 	if (canceled) return;
 
 	if (index == null || index === "") {
-		await os.api('admin/search/index-all');
+		await os.api("admin/search/index-all");
 		await os.alert({
-			type: 'info',
-			text: i18n.ts.indexNotice
+			type: "info",
+			text: i18n.ts.indexNotice,
 		});
-	}
-	else {
-		await os.api('admin/search/index-all', {
-			cursor: index
+	} else {
+		await os.api("admin/search/index-all", {
+			cursor: index,
 		});
 		await os.alert({
-			type: 'info',
-			text: i18n.ts.indexNotice
+			type: "info",
+			text: i18n.ts.indexNotice,
 		});
 	}
 }
 
-const databasePromiseFactory = () => os.api('admin/get-table-stats').then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size));
+const databasePromiseFactory = () =>
+	os
+		.api("admin/get-table-stats")
+		.then((res) =>
+			Object.entries(res).sort((a, b) => b[1].size - a[1].size)
+		);
 
 const headerActions = $computed(() => []);
 
@@ -54,6 +80,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.database,
-	icon: 'ph-database ph-bold ph-lg',
+	icon: "ph-database ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 00116238b..3eaee5566 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -1,73 +1,118 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div class="_formRoot">
-				<FormSwitch v-model="enableEmail" class="_formBlock">
-					<template #label>{{ i18n.ts.enableEmail }} ({{ i18n.ts.recommended }})</template>
-					<template #caption>{{ i18n.ts.emailConfigInfo }}</template>
-				</FormSwitch>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div class="_formRoot">
+					<FormSwitch v-model="enableEmail" class="_formBlock">
+						<template #label
+							>{{ i18n.ts.enableEmail }} ({{
+								i18n.ts.recommended
+							}})</template
+						>
+						<template #caption>{{
+							i18n.ts.emailConfigInfo
+						}}</template>
+					</FormSwitch>
 
-				<template v-if="enableEmail">
-					<FormInput v-model="email" type="email" class="_formBlock">
-						<template #label>{{ i18n.ts.emailAddress }}</template>
-					</FormInput>
+					<template v-if="enableEmail">
+						<FormInput
+							v-model="email"
+							type="email"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.emailAddress
+							}}</template>
+						</FormInput>
 
-					<FormSection>
-						<template #label>{{ i18n.ts.smtpConfig }}</template>
-						<FormSplit :min-width="280">
-							<FormInput v-model="smtpHost" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpHost }}</template>
-							</FormInput>
-							<FormInput v-model="smtpPort" type="number" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpPort }}</template>
-							</FormInput>
-						</FormSplit>
-						<FormSplit :min-width="280">
-							<FormInput v-model="smtpUser" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpUser }}</template>
-							</FormInput>
-							<FormInput v-model="smtpPass" type="password" class="_formBlock">
-								<template #label>{{ i18n.ts.smtpPass }}</template>
-							</FormInput>
-						</FormSplit>
-						<FormInfo class="_formBlock">{{ i18n.ts.emptyToDisableSmtpAuth }}</FormInfo>
-						<FormSwitch v-model="smtpSecure" class="_formBlock">
-							<template #label>{{ i18n.ts.smtpSecure }}</template>
-							<template #caption>{{ i18n.ts.smtpSecureInfo }}</template>
-						</FormSwitch>
-					</FormSection>
-				</template>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSection>
+							<template #label>{{ i18n.ts.smtpConfig }}</template>
+							<FormSplit :min-width="280">
+								<FormInput
+									v-model="smtpHost"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpHost
+									}}</template>
+								</FormInput>
+								<FormInput
+									v-model="smtpPort"
+									type="number"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpPort
+									}}</template>
+								</FormInput>
+							</FormSplit>
+							<FormSplit :min-width="280">
+								<FormInput
+									v-model="smtpUser"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpUser
+									}}</template>
+								</FormInput>
+								<FormInput
+									v-model="smtpPass"
+									type="password"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.smtpPass
+									}}</template>
+								</FormInput>
+							</FormSplit>
+							<FormInfo class="_formBlock">{{
+								i18n.ts.emptyToDisableSmtpAuth
+							}}</FormInfo>
+							<FormSwitch v-model="smtpSecure" class="_formBlock">
+								<template #label>{{
+									i18n.ts.smtpSecure
+								}}</template>
+								<template #caption>{{
+									i18n.ts.smtpSecureInfo
+								}}</template>
+							</FormSwitch>
+						</FormSection>
+					</template>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { fetchInstance, instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { fetchInstance, instance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let enableEmail: boolean = $ref(false);
 let email: any = $ref(null);
 let smtpSecure: boolean = $ref(false);
-let smtpHost: string = $ref('');
+let smtpHost: string = $ref("");
 let smtpPort: number = $ref(0);
-let smtpUser: string = $ref('');
-let smtpPass: string = $ref('');
+let smtpUser: string = $ref("");
+let smtpPass: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	enableEmail = meta.enableEmail;
 	email = meta.email;
 	smtpSecure = meta.smtpSecure;
@@ -80,19 +125,19 @@ async function init() {
 async function testEmail() {
 	const { canceled, result: destination } = await os.inputText({
 		title: i18n.ts.destination,
-		type: 'email',
+		type: "email",
 		placeholder: instance.maintainerEmail,
 	});
 	if (canceled) return;
-	os.apiWithDialog('admin/send-email', {
+	os.apiWithDialog("admin/send-email", {
 		to: destination,
-		subject: 'Test email',
-		text: 'Yo',
+		subject: "Test email",
+		text: "Yo",
 	});
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		enableEmail,
 		email,
 		smtpSecure,
@@ -105,22 +150,25 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-test-tube ph-bold ph-lg',
-	text: i18n.ts.testEmail,
-	handler: testEmail,
-}, {
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-test-tube ph-bold ph-lg",
+		text: i18n.ts.testEmail,
+		handler: testEmail,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.emailServer,
-	icon: 'ph-envelope-simple-open ph-bold ph-lg',
+	icon: "ph-envelope-simple-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 6a969b617..73c3bab34 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -1,61 +1,70 @@
 <template>
-<XModalWindow
-	ref="dialog"
-	:width="370"
-	:with-ok-button="true"
-	@close="$refs.dialog.close()"
-	@closed="$emit('closed')"
-	@ok="ok()"
->
-	<template #header>:{{ emoji.name }}:</template>
+	<XModalWindow
+		ref="dialog"
+		:width="370"
+		:with-ok-button="true"
+		@close="$refs.dialog.close()"
+		@closed="$emit('closed')"
+		@ok="ok()"
+	>
+		<template #header>:{{ emoji.name }}:</template>
 
-	<div class="_monolithic_">
-		<div class="yigymqpb _section">
-			<img :src="emoji.url" class="img"/>
-			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
-			<MkInput v-model="category" class="_formBlock" :datalist="categories">
-				<template #label>{{ i18n.ts.category }}</template>
-			</MkInput>
-			<MkInput v-model="aliases" class="_formBlock">
-				<template #label>{{ i18n.ts.tags }}</template>
-				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
-			</MkInput>
-			<MkTextarea v-model="license" class="_formBlock">
-				<template #label>{{ i18n.ts.license }}</template>
-			</MkTextarea>
-			<MkButton danger @click="del()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
+		<div class="_monolithic_">
+			<div class="yigymqpb _section">
+				<img :src="emoji.url" class="img" />
+				<MkInput v-model="name" class="_formBlock">
+					<template #label>{{ i18n.ts.name }}</template>
+				</MkInput>
+				<MkInput
+					v-model="category"
+					class="_formBlock"
+					:datalist="categories"
+				>
+					<template #label>{{ i18n.ts.category }}</template>
+				</MkInput>
+				<MkInput v-model="aliases" class="_formBlock">
+					<template #label>{{ i18n.ts.tags }}</template>
+					<template #caption>{{
+						i18n.ts.setMultipleBySeparatingWithSpace
+					}}</template>
+				</MkInput>
+				<MkTextarea v-model="license" class="_formBlock">
+					<template #label>{{ i18n.ts.license }}</template>
+				</MkTextarea>
+				<MkButton danger @click="del()"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</MkButton
+				>
+			</div>
 		</div>
-	</div>
-</XModalWindow>
+	</XModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import * as os from '@/os';
-import { unique } from '@/scripts/array';
-import { i18n } from '@/i18n';
-import { emojiCategories } from '@/instance';
+import {} from "vue";
+import XModalWindow from "@/components/MkModalWindow.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import * as os from "@/os";
+import { unique } from "@/scripts/array";
+import { i18n } from "@/i18n";
+import { emojiCategories } from "@/instance";
 
 const props = defineProps<{
-	emoji: any,
+	emoji: any;
 }>();
 
 let dialog = $ref(null);
 let name: string = $ref(props.emoji.name);
 let category: string = $ref(props.emoji.category);
-let aliases: string = $ref(props.emoji.aliases.join(' '));
+let aliases: string = $ref(props.emoji.aliases.join(" "));
 let categories: string[] = $ref(emojiCategories);
-let license: string = $ref(props.emoji.license ?? '');
+let license: string = $ref(props.emoji.license ?? "");
 
 const emit = defineEmits<{
-	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
-	(ev: 'closed'): void
+	(ev: "done", v: { deleted?: boolean; updated?: any }): void;
+	(ev: "closed"): void;
 }>();
 
 function ok() {
@@ -63,21 +72,21 @@ function ok() {
 }
 
 async function update() {
-	await os.apiWithDialog('admin/emoji/update', {
+	await os.apiWithDialog("admin/emoji/update", {
 		id: props.emoji.id,
 		name,
 		category,
-		aliases: aliases.split(' '),
-		license: license === '' ? null : license,
+		aliases: aliases.split(" "),
+		license: license === "" ? null : license,
 	});
 
-	emit('done', {
+	emit("done", {
 		updated: {
 			id: props.emoji.id,
 			name,
 			category,
-			aliases: aliases.split(' '),
-			license: license === '' ? null : license,
+			aliases: aliases.split(" "),
+			license: license === "" ? null : license,
 		},
 	});
 
@@ -86,15 +95,15 @@ async function update() {
 
 async function del() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: name }),
 	});
 	if (canceled) return;
 
-	os.api('admin/emoji/delete', {
+	os.api("admin/emoji/delete", {
 		id: props.emoji.id,
 	}).then(() => {
-		emit('done', {
+		emit("done", {
 			deleted: true,
 		});
 		dialog.close();
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 766fc8b49..2db08cfdd 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -1,89 +1,180 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="900">
-			<div class="ogwlenmc">
-				<div v-if="tab === 'local'" class="local">
-					<MkInput v-model="query" :debounce="true" type="search">
-						<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
-						<template #label>{{ i18n.ts.search }}</template>
-					</MkInput>
-					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
-						<template #label>Select mode</template>
-					</MkSwitch>
-					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-						<MkButton inline @click="selectAll">Select all</MkButton>
-						<MkButton inline @click="setCategoryBulk">Set category</MkButton>
-						<MkButton inline @click="addTagBulk">Add tag</MkButton>
-						<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
-						<MkButton inline @click="setTagBulk">Set tag</MkButton>
-						<MkButton inline @click="setLicenseBulk">Set license</MkButton>
-						<MkButton inline danger @click="delBulk">Delete</MkButton>
-					</div>
-					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.category }}</div>
-									</div>
-								</button>
-							</div>
-						</template>
-					</MkPagination>
-				</div>
-
-				<div v-else-if="tab === 'remote'" class="remote">
-					<FormSplit>
-						<MkInput v-model="queryRemote" :debounce="true" type="search">
-							<template #prefix><i class="ph-magnifying-glass ph-bold ph-lg"></i></template>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					v-model:tab="tab"
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="900">
+				<div class="ogwlenmc">
+					<div v-if="tab === 'local'" class="local">
+						<MkInput v-model="query" :debounce="true" type="search">
+							<template #prefix
+								><i
+									class="ph-magnifying-glass ph-bold ph-lg"
+								></i
+							></template>
 							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
-						<MkInput v-model="host" :debounce="true">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</FormSplit>
-					<MkPagination :pagination="remotePagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.host }}</div>
+						<MkSwitch v-model="selectMode" style="margin: 8px 0">
+							<template #label>Select mode</template>
+						</MkSwitch>
+						<div
+							v-if="selectMode"
+							style="
+								display: flex;
+								gap: var(--margin);
+								flex-wrap: wrap;
+							"
+						>
+							<MkButton inline @click="selectAll"
+								>Select all</MkButton
+							>
+							<MkButton inline @click="setCategoryBulk"
+								>Set category</MkButton
+							>
+							<MkButton inline @click="addTagBulk"
+								>Add tag</MkButton
+							>
+							<MkButton inline @click="removeTagBulk"
+								>Remove tag</MkButton
+							>
+							<MkButton inline @click="setTagBulk"
+								>Set tag</MkButton
+							>
+							<MkButton inline @click="setLicenseBulk"
+								>Set license</MkButton
+							>
+							<MkButton inline danger @click="delBulk"
+								>Delete</MkButton
+							>
+						</div>
+						<MkPagination
+							ref="emojisPaginationComponent"
+							:pagination="pagination"
+						>
+							<template #empty
+								><span>{{
+									i18n.ts.noCustomEmojis
+								}}</span></template
+							>
+							<template #default="{ items }">
+								<div class="ldhfsamy">
+									<button
+										v-for="emoji in items"
+										:key="emoji.id"
+										class="emoji _panel _button"
+										:class="{
+											selected: selectedEmojis.includes(
+												emoji.id
+											),
+										}"
+										@click="
+											selectMode
+												? toggleSelect(emoji)
+												: edit(emoji)
+										"
+									>
+										<img
+											:src="emoji.url"
+											class="img"
+											:alt="emoji.name"
+										/>
+										<div class="body">
+											<div class="name _monospace">
+												{{ emoji.name }}
+											</div>
+											<div class="info">
+												{{ emoji.category }}
+											</div>
+										</div>
+									</button>
+								</div>
+							</template>
+						</MkPagination>
+					</div>
+
+					<div v-else-if="tab === 'remote'" class="remote">
+						<FormSplit>
+							<MkInput
+								v-model="queryRemote"
+								:debounce="true"
+								type="search"
+							>
+								<template #prefix
+									><i
+										class="ph-magnifying-glass ph-bold ph-lg"
+									></i
+								></template>
+								<template #label>{{ i18n.ts.search }}</template>
+							</MkInput>
+							<MkInput v-model="host" :debounce="true">
+								<template #label>{{ i18n.ts.host }}</template>
+							</MkInput>
+						</FormSplit>
+						<MkPagination :pagination="remotePagination">
+							<template #empty
+								><span>{{
+									i18n.ts.noCustomEmojis
+								}}</span></template
+							>
+							<template #default="{ items }">
+								<div class="ldhfsamy">
+									<div
+										v-for="emoji in items"
+										:key="emoji.id"
+										class="emoji _panel _button"
+										@click="remoteMenu(emoji, $event)"
+									>
+										<img
+											:src="emoji.url"
+											class="img"
+											:alt="emoji.name"
+										/>
+										<div class="body">
+											<div class="name _monospace">
+												{{ emoji.name }}
+											</div>
+											<div class="info">
+												{{ emoji.host }}
+											</div>
+										</div>
 									</div>
 								</div>
-							</div>
-						</template>
-					</MkPagination>
+							</template>
+						</MkPagination>
+					</div>
 				</div>
-			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkTab from '@/components/MkTab.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import FormSplit from '@/components/form/split.vue';
-import { selectFile, selectFiles } from '@/scripts/select-file';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {
+	computed,
+	defineAsyncComponent,
+	defineComponent,
+	ref,
+	toRef,
+} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkTab from "@/components/MkTab.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import FormSplit from "@/components/form/split.vue";
+import { selectFile, selectFiles } from "@/scripts/select-file";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
 
-const tab = ref('local');
+const tab = ref("local");
 const query = ref(null);
 const queryRemote = ref(null);
 const host = ref(null);
@@ -91,19 +182,22 @@ const selectMode = ref(false);
 const selectedEmojis = ref<string[]>([]);
 
 const pagination = {
-	endpoint: 'admin/emoji/list' as const,
+	endpoint: "admin/emoji/list" as const,
 	limit: 30,
 	params: computed(() => ({
-		query: (query.value && query.value !== '') ? query.value : null,
+		query: query.value && query.value !== "" ? query.value : null,
 	})),
 };
 
 const remotePagination = {
-	endpoint: 'admin/emoji/list-remote' as const,
+	endpoint: "admin/emoji/list-remote" as const,
 	limit: 30,
 	params: computed(() => ({
-		query: (queryRemote.value && queryRemote.value !== '') ? queryRemote.value : null,
-		host: (host.value && host.value !== '') ? host.value : null,
+		query:
+			queryRemote.value && queryRemote.value !== ""
+				? queryRemote.value
+				: null,
+		host: host.value && host.value !== "" ? host.value : null,
 	})),
 };
 
@@ -111,13 +205,17 @@ const selectAll = () => {
 	if (selectedEmojis.value.length > 0) {
 		selectedEmojis.value = [];
 	} else {
-		selectedEmojis.value = emojisPaginationComponent.value.items.map(item => item.id);
+		selectedEmojis.value = emojisPaginationComponent.value.items.map(
+			(item) => item.id
+		);
 	}
 };
 
 const toggleSelect = (emoji) => {
 	if (selectedEmojis.value.includes(emoji.id)) {
-		selectedEmojis.value = selectedEmojis.value.filter(x => x !== emoji.id);
+		selectedEmojis.value = selectedEmojis.value.filter(
+			(x) => x !== emoji.id
+		);
 	} else {
 		selectedEmojis.value.push(emoji.id);
 	}
@@ -126,9 +224,13 @@ const toggleSelect = (emoji) => {
 const add = async (ev: MouseEvent) => {
 	const files = await selectFiles(ev.currentTarget ?? ev.target, null);
 
-	const promise = Promise.all(files.map(file => os.api('admin/emoji/add', {
-		fileId: file.id,
-	})));
+	const promise = Promise.all(
+		files.map((file) =>
+			os.api("admin/emoji/add", {
+				fileId: file.id,
+			})
+		)
+	);
 	promise.then(() => {
 		emojisPaginationComponent.value.reload();
 	});
@@ -136,87 +238,114 @@ const add = async (ev: MouseEvent) => {
 };
 
 const edit = (emoji) => {
-	os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
-		emoji: emoji,
-	}, {
-		done: result => {
-			if (result.updated) {
-				emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
-					...oldEmoji,
-					...result.updated,
-				}));
-			} else if (result.deleted) {
-				emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
-			}
+	os.popup(
+		defineAsyncComponent(() => import("./emoji-edit-dialog.vue")),
+		{
+			emoji: emoji,
 		},
-	}, 'closed');
+		{
+			done: (result) => {
+				if (result.updated) {
+					emojisPaginationComponent.value.updateItem(
+						result.updated.id,
+						(oldEmoji: any) => ({
+							...oldEmoji,
+							...result.updated,
+						})
+					);
+				} else if (result.deleted) {
+					emojisPaginationComponent.value.removeItem(
+						(item) => item.id === emoji.id
+					);
+				}
+			},
+		},
+		"closed"
+	);
 };
 
 const im = (emoji) => {
-	os.apiWithDialog('admin/emoji/copy', {
+	os.apiWithDialog("admin/emoji/copy", {
 		emojiId: emoji.id,
 	});
 };
 
 const remoteMenu = (emoji, ev: MouseEvent) => {
-	os.popupMenu([{
-		type: 'label',
-		text: ':' + emoji.name + ':',
-	}, {
-		text: i18n.ts.import,
-		icon: 'ph-plus ph-bold ph-lg',
-		action: () => { im(emoji); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				type: "label",
+				text: ":" + emoji.name + ":",
+			},
+			{
+				text: i18n.ts.import,
+				icon: "ph-plus ph-bold ph-lg",
+				action: () => {
+					im(emoji);
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 };
 
 const menu = (ev: MouseEvent) => {
-	os.popupMenu([{
-		icon: 'ph-download-simple ph-bold ph-lg',
-		text: i18n.ts.export,
-		action: async () => {
-			os.api('export-custom-emojis', {
-			})
-				.then(() => {
-					os.alert({
-						type: 'info',
-						text: i18n.ts.exportRequested,
-					});
-				}).catch((err) => {
-					os.alert({
-						type: 'error',
-						text: err.message,
-					});
-				});
-		},
-	}, {
-		icon: 'ph-upload-simple ph-bold ph-lg',
-		text: i18n.ts.import,
-		action: async () => {
-			const file = await selectFile(ev.currentTarget ?? ev.target);
-			os.api('admin/emoji/import-zip', {
-				fileId: file.id,
-			})
-				.then(() => {
-					os.alert({
-						type: 'info',
-						text: i18n.ts.importRequested,
-					});
-				}).catch((err) => {
-					os.alert({
-						type: 'error',
-						text: err.message,
-					});
-				});
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				icon: "ph-download-simple ph-bold ph-lg",
+				text: i18n.ts.export,
+				action: async () => {
+					os.api("export-custom-emojis", {})
+						.then(() => {
+							os.alert({
+								type: "info",
+								text: i18n.ts.exportRequested,
+							});
+						})
+						.catch((err) => {
+							os.alert({
+								type: "error",
+								text: err.message,
+							});
+						});
+				},
+			},
+			{
+				icon: "ph-upload-simple ph-bold ph-lg",
+				text: i18n.ts.import,
+				action: async () => {
+					const file = await selectFile(
+						ev.currentTarget ?? ev.target
+					);
+					os.api("admin/emoji/import-zip", {
+						fileId: file.id,
+					})
+						.then(() => {
+							os.alert({
+								type: "info",
+								text: i18n.ts.importRequested,
+							});
+						})
+						.catch((err) => {
+							os.alert({
+								type: "error",
+								text: err.message,
+							});
+						});
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 };
 
 const setCategoryBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Category',
+		title: "Category",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-category-bulk', {
+	await os.apiWithDialog("admin/emoji/set-category-bulk", {
 		ids: selectedEmojis.value,
 		category: result,
 	});
@@ -225,46 +354,46 @@ const setCategoryBulk = async () => {
 
 const addTagBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Tag',
+		title: "Tag",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/add-aliases-bulk', {
+	await os.apiWithDialog("admin/emoji/add-aliases-bulk", {
 		ids: selectedEmojis.value,
-		aliases: result.split(' '),
+		aliases: result.split(" "),
 	});
 	emojisPaginationComponent.value.reload();
 };
 
 const removeTagBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Tag',
+		title: "Tag",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/remove-aliases-bulk', {
+	await os.apiWithDialog("admin/emoji/remove-aliases-bulk", {
 		ids: selectedEmojis.value,
-		aliases: result.split(' '),
+		aliases: result.split(" "),
 	});
 	emojisPaginationComponent.value.reload();
 };
 
 const setTagBulk = async () => {
 	const { canceled, result } = await os.inputText({
-		title: 'Tag',
+		title: "Tag",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-aliases-bulk', {
+	await os.apiWithDialog("admin/emoji/set-aliases-bulk", {
 		ids: selectedEmojis.value,
-		aliases: result.split(' '),
+		aliases: result.split(" "),
 	});
 	emojisPaginationComponent.value.reload();
 };
 
 const setLicenseBulk = async () => {
 	const { canceled, result } = await os.inputParagraph({
-		title: 'License',
+		title: "License",
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-license-bulk', {
+	await os.apiWithDialog("admin/emoji/set-license-bulk", {
 		ids: selectedEmojis.value,
 		license: result,
 	});
@@ -273,40 +402,48 @@ const setLicenseBulk = async () => {
 
 const delBulk = async () => {
 	const { canceled } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteConfirm,
 	});
 	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/delete-bulk', {
+	await os.apiWithDialog("admin/emoji/delete-bulk", {
 		ids: selectedEmojis.value,
 	});
 	emojisPaginationComponent.value.reload();
 };
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addEmoji,
-	handler: add,
-}, {
-	icon: 'ph-dots-three-outline ph-bold ph-lg',
-	handler: menu,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addEmoji,
+		handler: add,
+	},
+	{
+		icon: "ph-dots-three-outline ph-bold ph-lg",
+		handler: menu,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'local',
-	icon: 'ph-hand-fist ph-bold ph-lg',
-	title: i18n.ts.local,
-}, {
-	key: 'remote',
-	icon: 'ph-planet ph-bold ph-lg',
-	title: i18n.ts.remote,
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "local",
+		icon: "ph-hand-fist ph-bold ph-lg",
+		title: i18n.ts.local,
+	},
+	{
+		key: "remote",
+		icon: "ph-planet ph-bold ph-lg",
+		title: i18n.ts.remote,
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.customEmojis,
-	icon: 'ph-smiley ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.customEmojis,
+		icon: "ph-smiley ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
@@ -321,7 +458,7 @@ definePageMetadata(computed(() => ({
 			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 			grid-gap: 12px;
 			margin: var(--margin) 0;
-	
+
 			> .emoji {
 				display: flex;
 				align-items: center;
diff --git a/packages/client/src/pages/admin/federation.vue b/packages/client/src/pages/admin/federation.vue
index 04294740c..325ba32be 100644
--- a/packages/client/src/pages/admin/federation.vue
+++ b/packages/client/src/pages/admin/federation.vue
@@ -1,26 +1,34 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="900">
-			<XFederation/>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					v-model:tab="tab"
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="900">
+				<XFederation />
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import XFederation from '@/pages/about.federation.vue';
+import { computed } from "vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import XFederation from "@/pages/about.federation.vue";
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.federation,
-	icon: 'ph-planet ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.federation,
+		icon: "ph-planet ph-bold ph-lg",
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 9bae0053c..e752eb82c 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -1,73 +1,120 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions"/></template>
-		<MkSpacer :content-max="900">
-			<div class="xrmjdkdw">
-				<div>
-					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-						<MkSelect v-model="origin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-						<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader :actions="headerActions"
+			/></template>
+			<MkSpacer :content-max="900">
+				<div class="xrmjdkdw">
+					<div>
+						<div
+							class="inputs"
+							style="
+								display: flex;
+								gap: var(--margin);
+								flex-wrap: wrap;
+							"
+						>
+							<MkSelect
+								v-model="origin"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>{{
+									i18n.ts.instance
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+							<MkInput
+								v-model="searchHost"
+								:debounce="true"
+								type="search"
+								style="margin: 0; flex: 1"
+								:disabled="pagination.params.origin === 'local'"
+							>
+								<template #label>{{ i18n.ts.host }}</template>
+							</MkInput>
+						</div>
+						<div
+							class="inputs"
+							style="
+								display: flex;
+								gap: var(--margin);
+								flex-wrap: wrap;
+								padding-top: 1.2em;
+							"
+						>
+							<MkInput
+								v-model="userId"
+								:debounce="true"
+								type="search"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>User ID</template>
+							</MkInput>
+							<MkInput
+								v-model="type"
+								:debounce="true"
+								type="search"
+								style="margin: 0; flex: 1"
+							>
+								<template #label>MIME type</template>
+							</MkInput>
+						</div>
+						<MkFileListForAdmin
+							:pagination="pagination"
+							:view-mode="viewMode"
+						/>
 					</div>
-					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap; padding-top: 1.2em;">
-						<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
-							<template #label>User ID</template>
-						</MkInput>
-						<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
-							<template #label>MIME type</template>
-						</MkInput>
-					</div>
-					<MkFileListForAdmin :pagination="pagination" :view-mode="viewMode"/>
 				</div>
-			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, defineAsyncComponent } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import bytes from "@/filters/bytes";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let origin = $ref('local');
+let origin = $ref("local");
 let type = $ref(null);
-let searchHost = $ref('');
-let userId = $ref('');
-let viewMode = $ref('grid');
+let searchHost = $ref("");
+let userId = $ref("");
+let viewMode = $ref("grid");
 const pagination = {
-	endpoint: 'admin/drive/files' as const,
+	endpoint: "admin/drive/files" as const,
 	limit: 10,
 	params: computed(() => ({
-		type: (type && type !== '') ? type : null,
-		userId: (userId && userId !== '') ? userId : null,
+		type: type && type !== "" ? type : null,
+		userId: userId && userId !== "" ? userId : null,
 		origin: origin,
-		hostname: (searchHost && searchHost !== '') ? searchHost : null,
+		hostname: searchHost && searchHost !== "" ? searchHost : null,
 	})),
 };
 
 function clear() {
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.clearCachedFilesConfirm,
 	}).then(({ canceled }) => {
 		if (canceled) return;
 
-		os.apiWithDialog('admin/drive/clean-remote-files', {});
+		os.apiWithDialog("admin/drive/clean-remote-files", {});
 	});
 }
 
@@ -82,34 +129,46 @@ async function find() {
 	});
 	if (canceled) return;
 
-	os.api('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
-		show(file);
-	}).catch(err => {
-		if (err.code === 'NO_SUCH_FILE') {
-			os.alert({
-				type: 'error',
-				text: i18n.ts.notFound,
-			});
-		}
-	});
+	os.api(
+		"admin/drive/show-file",
+		q.startsWith("http://") || q.startsWith("https://")
+			? { url: q.trim() }
+			: { fileId: q.trim() }
+	)
+		.then((file) => {
+			show(file);
+		})
+		.catch((err) => {
+			if (err.code === "NO_SUCH_FILE") {
+				os.alert({
+					type: "error",
+					text: i18n.ts.notFound,
+				});
+			}
+		});
 }
 
-const headerActions = $computed(() => [{
-	text: i18n.ts.lookup,
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	handler: find,
-}, {
-	text: i18n.ts.clearCachedFiles,
-	icon: 'ph-trash ph-bold ph-lg',
-	handler: clear,
-}]);
+const headerActions = $computed(() => [
+	{
+		text: i18n.ts.lookup,
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		handler: find,
+	},
+	{
+		text: i18n.ts.clearCachedFiles,
+		icon: "ph-trash ph-bold ph-lg",
+		handler: clear,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.files,
-	icon: 'ph-cloud ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.files,
+		icon: "ph-cloud ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index cbab4a640..1e4438a66 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -1,78 +1,131 @@
 <template>
-<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-	<div v-if="!narrow || currentPage?.route.name == null" class="nav">
-		<MkSpacer :content-max="700" :margin-min="16">
-			<div class="lxpfedzu">
-				<div class="banner">
-					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
+	<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
+		<div v-if="!narrow || currentPage?.route.name == null" class="nav">
+			<MkSpacer :content-max="700" :margin-min="16">
+				<div class="lxpfedzu">
+					<div class="banner">
+						<img
+							:src="$instance.iconUrl || '/favicon.ico'"
+							alt=""
+							class="icon"
+						/>
+					</div>
+
+					<MkInfo
+						v-if="thereIsUnresolvedAbuseReport"
+						warn
+						class="info"
+						>{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }}
+						<MkA to="/admin/abuses" class="_link">{{
+							i18n.ts.check
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noMaintainerInformation" warn class="info"
+						>{{ i18n.ts.noMaintainerInformationWarning }}
+						<MkA to="/admin/settings" class="_link">{{
+							i18n.ts.configure
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noBotProtection" warn class="info"
+						>{{ i18n.ts.noBotProtectionWarning }}
+						<MkA to="/admin/security" class="_link">{{
+							i18n.ts.configure
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="noEmailServer" warn class="info"
+						>{{ i18n.ts.noEmailServerWarning }}
+						<MkA to="/admin/email-settings" class="_link">{{
+							i18n.ts.configure
+						}}</MkA></MkInfo
+					>
+					<MkInfo v-if="updateAvailable" warn class="info"
+						>{{ i18n.ts.updateAvailable }}
+						<a
+							href="https://codeberg.org/calckey/calckey/releases"
+							target="_bank"
+							class="_link"
+							>{{ i18n.ts.check }}</a
+						></MkInfo
+					>
+
+					<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
 				</div>
-
-				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
-				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ i18n.ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noBotProtection" warn class="info">{{ i18n.ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noEmailServer" warn class="info">{{ i18n.ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="updateAvailable" warn class="info">{{ i18n.ts.updateAvailable }} <a href="https://codeberg.org/calckey/calckey/releases" target="_bank" class="_link">{{ i18n.ts.check }}</a></MkInfo>
-
-				<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
-			</div>
-		</MkSpacer>
+			</MkSpacer>
+		</div>
+		<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
+			<RouterView />
+		</div>
 	</div>
-	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-		<RouterView/>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, onActivated, provide, watch, ref } from 'vue';
-import { i18n } from '@/i18n';
-import MkSuperMenu from '@/components/MkSuperMenu.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import { scroll } from '@/scripts/scroll';
-import { instance } from '@/instance';
-import { version } from '@/config';
-import { $i } from '@/account'
-import * as os from '@/os';
-import { lookupUser } from '@/scripts/lookup-user';
-import { defaultStore } from '@/store';
-import { useRouter } from '@/router';
-import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import {
+	defineAsyncComponent,
+	inject,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	onActivated,
+	provide,
+	watch,
+	ref,
+} from "vue";
+import { i18n } from "@/i18n";
+import MkSuperMenu from "@/components/MkSuperMenu.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import { scroll } from "@/scripts/scroll";
+import { instance } from "@/instance";
+import { version } from "@/config";
+import { $i } from "@/account";
+import * as os from "@/os";
+import { lookupUser } from "@/scripts/lookup-user";
+import { defaultStore } from "@/store";
+import { useRouter } from "@/router";
+import {
+	definePageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
 
-const isEmpty = (x: string | null) => x == null || x === '';
+const isEmpty = (x: string | null) => x == null || x === "";
 const el = ref<HTMLElement | null>(null);
 const router = useRouter();
 
 const indexInfo = {
 	title: i18n.ts.controlPanel,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 	hideHeader: true,
 };
 
-provide('shouldOmitHeaderTitle', false);
+provide("shouldOmitHeaderTitle", false);
 
 let INFO = $ref(indexInfo);
 let childInfo = $ref(null);
 let narrow = $ref(false);
 let view = $ref(null);
 let pageProps = $ref({});
-let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
-let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha;
+let noMaintainerInformation =
+	isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+let noBotProtection =
+	!instance.disableRegistration &&
+	!instance.enableHcaptcha &&
+	!instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
 let updateAvailable = $ref(false);
 let currentPage = $computed(() => router.currentRef.value.child);
 
-os.api('admin/abuse-user-reports', {
-	state: 'unresolved',
+os.api("admin/abuse-user-reports", {
+	state: "unresolved",
 	limit: 1,
-}).then(reports => {
+}).then((reports) => {
 	if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
 });
 
 if (defaultStore.state.showAdminUpdates) {
-	os.api('latest-version').then(res => {
-		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ''));
-		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ''));
+	os.api("latest-version").then((res) => {
+		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
+		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
 		if (cleanRes > cleanVersion) {
 			updateAvailable = true;
 		}
@@ -85,121 +138,158 @@ const ro = new ResizeObserver((entries, observer) => {
 	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
-const menuDef = $computed(() => [{
-	title: i18n.ts.quickAction,
-	items: [{
-		type: 'button',
-		icon: 'ph-magnifying-glass ph-bold ph-lg',
-		text: i18n.ts.lookup,
-		action: lookup,
-	}, ...(instance.disableRegistration ? [{
-		type: 'button',
-		icon: 'ph-user-plus ph-bold ph-lg',
-		text: i18n.ts.invite,
-		action: invite,
-	}] : [])],
-}, {
-	title: i18n.ts.administration,
-	items: [{
-		icon: 'ph-gauge ph-bold ph-lg',
-		text: i18n.ts.dashboard,
-		to: '/admin/overview',
-		active: currentPage?.route.name === 'overview',
-	}, {
-		icon: 'ph-users ph-bold ph-lg',
-		text: i18n.ts.users,
-		to: '/admin/users',
-		active: currentPage?.route.name === 'users',
-	}, {
-		icon: 'ph-smiley ph-bold ph-lg',
-		text: i18n.ts.customEmojis,
-		to: '/admin/emojis',
-		active: currentPage?.route.name === 'emojis',
-	}, {
-		icon: 'ph-planet ph-bold ph-lg',
-		text: i18n.ts.federation,
-		to: '/admin/federation',
-		active: currentPage?.route.name === 'federation',
-	}, {
-		icon: 'ph-clipboard-text ph-bold ph-lg',
-		text: i18n.ts.jobQueue,
-		to: '/admin/queue',
-		active: currentPage?.route.name === 'queue',
-	}, {
-		icon: 'ph-cloud ph-bold ph-lg',
-		text: i18n.ts.files,
-		to: '/admin/files',
-		active: currentPage?.route.name === 'files',
-	}, {
-		icon: 'ph-megaphone-simple ph-bold ph-lg',
-		text: i18n.ts.announcements,
-		to: '/admin/announcements',
-		active: currentPage?.route.name === 'announcements',
-	}, {
-		icon: 'ph-money ph-bold ph-lg',
-		text: i18n.ts.ads,
-		to: '/admin/ads',
-		active: currentPage?.route.name === 'ads',
-	}, {
-		icon: 'ph-warning-circle ph-bold ph-lg',
-		text: i18n.ts.abuseReports,
-		to: '/admin/abuses',
-		active: currentPage?.route.name === 'abuses',
-	}],
-}, ...($i?.isAdmin ? [{
-	title: i18n.ts.settings,
-	items: [{
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts.general,
-		to: '/admin/settings',
-		active: currentPage?.route.name === 'settings',
-	}, {
-		icon: 'ph-envelope-simple-open ph-bold ph-lg',
-		text: i18n.ts.emailServer,
-		to: '/admin/email-settings',
-		active: currentPage?.route.name === 'email-settings',
-	}, {
-		icon: 'ph-cloud ph-bold ph-lg',
-		text: i18n.ts.objectStorage,
-		to: '/admin/object-storage',
-		active: currentPage?.route.name === 'object-storage',
-	}, {
-		icon: 'ph-lock ph-bold ph-lg',
-		text: i18n.ts.security,
-		to: '/admin/security',
-		active: currentPage?.route.name === 'security',
-	}, {
-		icon: 'ph-flow-arrow ph-bold ph-lg',
-		text: i18n.ts.relays,
-		to: '/admin/relays',
-		active: currentPage?.route.name === 'relays',
-	}, {
-		icon: 'ph-plug ph-bold ph-lg',
-		text: i18n.ts.integration,
-		to: '/admin/integrations',
-		active: currentPage?.route.name === 'integrations',
-	}, {
-		icon: 'ph-prohibit ph-bold ph-lg',
-		text: i18n.ts.instanceBlocking,
-		to: '/admin/instance-block',
-		active: currentPage?.route.name === 'instance-block',
-	}, {
-		icon: 'ph-ghost ph-bold ph-lg',
-		text: i18n.ts.proxyAccount,
-		to: '/admin/proxy-account',
-		active: currentPage?.route.name === 'proxy-account',
+const menuDef = $computed(() => [
+	{
+		title: i18n.ts.quickAction,
+		items: [
+			{
+				type: "button",
+				icon: "ph-magnifying-glass ph-bold ph-lg",
+				text: i18n.ts.lookup,
+				action: lookup,
+			},
+			...(instance.disableRegistration
+				? [
+						{
+							type: "button",
+							icon: "ph-user-plus ph-bold ph-lg",
+							text: i18n.ts.invite,
+							action: invite,
+						},
+				  ]
+				: []),
+		],
 	},
 	{
-		icon: 'ph-database ph-bold ph-lg',
-		text: i18n.ts.database,
-		to: '/admin/database',
-		active: currentPage?.route.name === 'database',
-	}],
-}] : [])]);
+		title: i18n.ts.administration,
+		items: [
+			{
+				icon: "ph-gauge ph-bold ph-lg",
+				text: i18n.ts.dashboard,
+				to: "/admin/overview",
+				active: currentPage?.route.name === "overview",
+			},
+			{
+				icon: "ph-users ph-bold ph-lg",
+				text: i18n.ts.users,
+				to: "/admin/users",
+				active: currentPage?.route.name === "users",
+			},
+			{
+				icon: "ph-smiley ph-bold ph-lg",
+				text: i18n.ts.customEmojis,
+				to: "/admin/emojis",
+				active: currentPage?.route.name === "emojis",
+			},
+			{
+				icon: "ph-planet ph-bold ph-lg",
+				text: i18n.ts.federation,
+				to: "/admin/federation",
+				active: currentPage?.route.name === "federation",
+			},
+			{
+				icon: "ph-clipboard-text ph-bold ph-lg",
+				text: i18n.ts.jobQueue,
+				to: "/admin/queue",
+				active: currentPage?.route.name === "queue",
+			},
+			{
+				icon: "ph-cloud ph-bold ph-lg",
+				text: i18n.ts.files,
+				to: "/admin/files",
+				active: currentPage?.route.name === "files",
+			},
+			{
+				icon: "ph-megaphone-simple ph-bold ph-lg",
+				text: i18n.ts.announcements,
+				to: "/admin/announcements",
+				active: currentPage?.route.name === "announcements",
+			},
+			{
+				icon: "ph-money ph-bold ph-lg",
+				text: i18n.ts.ads,
+				to: "/admin/ads",
+				active: currentPage?.route.name === "ads",
+			},
+			{
+				icon: "ph-warning-circle ph-bold ph-lg",
+				text: i18n.ts.abuseReports,
+				to: "/admin/abuses",
+				active: currentPage?.route.name === "abuses",
+			},
+		],
+	},
+	...($i?.isAdmin
+		? [
+				{
+					title: i18n.ts.settings,
+					items: [
+						{
+							icon: "ph-gear-six ph-bold ph-lg",
+							text: i18n.ts.general,
+							to: "/admin/settings",
+							active: currentPage?.route.name === "settings",
+						},
+						{
+							icon: "ph-envelope-simple-open ph-bold ph-lg",
+							text: i18n.ts.emailServer,
+							to: "/admin/email-settings",
+							active:
+								currentPage?.route.name === "email-settings",
+						},
+						{
+							icon: "ph-cloud ph-bold ph-lg",
+							text: i18n.ts.objectStorage,
+							to: "/admin/object-storage",
+							active:
+								currentPage?.route.name === "object-storage",
+						},
+						{
+							icon: "ph-lock ph-bold ph-lg",
+							text: i18n.ts.security,
+							to: "/admin/security",
+							active: currentPage?.route.name === "security",
+						},
+						{
+							icon: "ph-flow-arrow ph-bold ph-lg",
+							text: i18n.ts.relays,
+							to: "/admin/relays",
+							active: currentPage?.route.name === "relays",
+						},
+						{
+							icon: "ph-plug ph-bold ph-lg",
+							text: i18n.ts.integration,
+							to: "/admin/integrations",
+							active: currentPage?.route.name === "integrations",
+						},
+						{
+							icon: "ph-prohibit ph-bold ph-lg",
+							text: i18n.ts.instanceBlocking,
+							to: "/admin/instance-block",
+							active:
+								currentPage?.route.name === "instance-block",
+						},
+						{
+							icon: "ph-ghost ph-bold ph-lg",
+							text: i18n.ts.proxyAccount,
+							to: "/admin/proxy-account",
+							active: currentPage?.route.name === "proxy-account",
+						},
+						{
+							icon: "ph-database ph-bold ph-lg",
+							text: i18n.ts.database,
+							to: "/admin/database",
+							active: currentPage?.route.name === "database",
+						},
+					],
+				},
+		  ]
+		: []),
+]);
 
 watch(narrow, () => {
 	if (currentPage?.route.name == null && !narrow) {
-		router.push('/admin/overview');
+		router.push("/admin/overview");
 	}
 });
 
@@ -208,7 +298,7 @@ onMounted(() => {
 
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 	if (currentPage?.route.name == null && !narrow) {
-		router.push('/admin/overview');
+		router.push("/admin/overview");
 	}
 });
 
@@ -216,7 +306,7 @@ onActivated(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/admin/overview');
+		router.replace("/admin/overview");
 	}
 });
 
@@ -226,7 +316,7 @@ onUnmounted(() => {
 
 watch(router.currentRef, (to) => {
 	if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
-		router.replace('/admin/overview');
+		router.replace("/admin/overview");
 	}
 });
 
@@ -239,45 +329,55 @@ provideMetadataReceiver((info) => {
 });
 
 const invite = () => {
-	os.api('admin/invite').then(x => {
-		os.alert({
-			type: 'info',
-			text: x.code,
+	os.api("admin/invite")
+		.then((x) => {
+			os.alert({
+				type: "info",
+				text: x.code,
+			});
+		})
+		.catch((err) => {
+			os.alert({
+				type: "error",
+				text: err,
+			});
 		});
-	}).catch(err => {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	});
 };
 
 const lookup = (ev) => {
-	os.popupMenu([{
-		text: i18n.ts.user,
-		icon: 'ph-user ph-bold ph-lg',
-		action: () => {
-			lookupUser();
-		},
-	}, {
-		text: i18n.ts.note,
-		icon: 'ph-pencil ph-bold ph-lg',
-		action: () => {
-			alert('TODO');
-		},
-	}, {
-		text: i18n.ts.file,
-		icon: 'ph-cloud ph-bold ph-lg',
-		action: () => {
-			alert('TODO');
-		},
-	}, {
-		text: i18n.ts.instance,
-		icon: 'ph-planet ph-bold ph-lg',
-		action: () => {
-			alert('TODO');
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.user,
+				icon: "ph-user ph-bold ph-lg",
+				action: () => {
+					lookupUser();
+				},
+			},
+			{
+				text: i18n.ts.note,
+				icon: "ph-pencil ph-bold ph-lg",
+				action: () => {
+					alert("TODO");
+				},
+			},
+			{
+				text: i18n.ts.file,
+				icon: "ph-cloud ph-bold ph-lg",
+				action: () => {
+					alert("TODO");
+				},
+			},
+			{
+				text: i18n.ts.instance,
+				icon: "ph-planet ph-bold ph-lg",
+				action: () => {
+					alert("TODO");
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 };
 
 const headerActions = $computed(() => []);
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
index 70edf5ce0..80231b11e 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -1,39 +1,49 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<FormTextarea v-model="blockedHosts" class="_formBlock">
-				<span>{{ i18n.ts.blockedInstances }}</span>
-				<template #caption>{{ i18n.ts.blockedInstancesDescription }}</template>
-			</FormTextarea>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<FormTextarea v-model="blockedHosts" class="_formBlock">
+					<span>{{ i18n.ts.blockedInstances }}</span>
+					<template #caption>{{
+						i18n.ts.blockedInstancesDescription
+					}}</template>
+				</FormTextarea>
 
-			<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+				<FormButton primary class="_formBlock" @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</FormButton
+				>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormButton from '@/components/MkButton.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let blockedHosts: string = $ref('');
+let blockedHosts: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
-	blockedHosts = meta.blockedHosts.join('\n');
+	const meta = await os.api("admin/meta");
+	blockedHosts = meta.blockedHosts.join("\n");
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
-		blockedHosts: blockedHosts.split('\n').map(h => h.trim()) || [],
+	os.apiWithDialog("admin/update-meta", {
+		blockedHosts: blockedHosts.split("\n").map((h) => h.trim()) || [],
 	}).then(() => {
 		fetchInstance();
 	});
@@ -45,6 +55,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceBlocking,
-	icon: 'ph-prohibit ph-bold ph-lg',
+	icon: "ph-prohibit ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
index 3f16c92c9..2bf047069 100644
--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -1,47 +1,56 @@
 <template>
-<FormSuspense :p="init">
-	<div class="_formRoot">
-		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
-			<template #label>{{ i18n.ts.enable }}</template>
-		</FormSwitch>
+	<FormSuspense :p="init">
+		<div class="_formRoot">
+			<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
+				<template #label>{{ i18n.ts.enable }}</template>
+			</FormSwitch>
 
-		<template v-if="enableDiscordIntegration">
-			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
+			<template v-if="enableDiscordIntegration">
+				<FormInfo class="_formBlock"
+					>Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo
+				>
 
-			<FormInput v-model="discordClientId" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client ID</template>
-			</FormInput>
+				<FormInput v-model="discordClientId" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client ID</template>
+				</FormInput>
 
-			<FormInput v-model="discordClientSecret" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client Secret</template>
-			</FormInput>
-		</template>
+				<FormInput v-model="discordClientSecret" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client Secret</template>
+				</FormInput>
+			</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</FormSuspense>
+			<FormButton primary class="_formBlock" @click="save"
+				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</FormButton
+			>
+		</div>
+	</FormSuspense>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
 
-let uri: string = $ref('');
+let uri: string = $ref("");
 let enableDiscordIntegration: boolean = $ref(false);
 let discordClientId: string | null = $ref(null);
 let discordClientSecret: string | null = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	uri = meta.uri;
 	enableDiscordIntegration = meta.enableDiscordIntegration;
 	discordClientId = meta.discordClientId;
@@ -49,7 +58,7 @@ async function init() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		enableDiscordIntegration,
 		discordClientId,
 		discordClientSecret,
diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue
index 186e4d70f..67c57a7dd 100644
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -1,47 +1,56 @@
 <template>
-<FormSuspense :p="init">
-	<div class="_formRoot">
-		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
-			<template #label>{{ i18n.ts.enable }}</template>
-		</FormSwitch>
+	<FormSuspense :p="init">
+		<div class="_formRoot">
+			<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
+				<template #label>{{ i18n.ts.enable }}</template>
+			</FormSwitch>
 
-		<template v-if="enableGithubIntegration">
-			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
-		
-			<FormInput v-model="githubClientId" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client ID</template>
-			</FormInput>
+			<template v-if="enableGithubIntegration">
+				<FormInfo class="_formBlock"
+					>Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo
+				>
 
-			<FormInput v-model="githubClientSecret" class="_formBlock">
-				<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-				<template #label>Client Secret</template>
-			</FormInput>
-		</template>
+				<FormInput v-model="githubClientId" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client ID</template>
+				</FormInput>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</FormSuspense>
+				<FormInput v-model="githubClientSecret" class="_formBlock">
+					<template #prefix
+						><i class="ph-key ph-bold ph-lg"></i
+					></template>
+					<template #label>Client Secret</template>
+				</FormInput>
+			</template>
+
+			<FormButton primary class="_formBlock" @click="save"
+				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</FormButton
+			>
+		</div>
+	</FormSuspense>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
 
-let uri: string = $ref('');
+let uri: string = $ref("");
 let enableGithubIntegration: boolean = $ref(false);
 let githubClientId: string | null = $ref(null);
 let githubClientSecret: string | null = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	uri = meta.uri;
 	enableGithubIntegration = meta.enableGithubIntegration;
 	githubClientId = meta.githubClientId;
@@ -49,7 +58,7 @@ async function init() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		enableGithubIntegration,
 		githubClientId,
 		githubClientSecret,
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index a4d786b6f..510b32a08 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -1,41 +1,58 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<FormFolder class="_formBlock">
-				<template #icon><i class="ph-github-logo ph-bold ph-lg"></i></template>
-				<template #label>GitHub</template>
-				<template #suffix>{{ enableGithubIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
-				<XGithub/>
-			</FormFolder>
-			<FormFolder class="_formBlock">
-				<template #icon><i class="ph-discord-logo ph-bold ph-lg"></i></template>
-				<template #label>Discord</template>
-				<template #suffix>{{ enableDiscordIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
-				<XDiscord/>
-			</FormFolder>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<FormFolder class="_formBlock">
+					<template #icon
+						><i class="ph-github-logo ph-bold ph-lg"></i
+					></template>
+					<template #label>GitHub</template>
+					<template #suffix>{{
+						enableGithubIntegration
+							? i18n.ts.enabled
+							: i18n.ts.disabled
+					}}</template>
+					<XGithub />
+				</FormFolder>
+				<FormFolder class="_formBlock">
+					<template #icon
+						><i class="ph-discord-logo ph-bold ph-lg"></i
+					></template>
+					<template #label>Discord</template>
+					<template #suffix>{{
+						enableDiscordIntegration
+							? i18n.ts.enabled
+							: i18n.ts.disabled
+					}}</template>
+					<XDiscord />
+				</FormFolder>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XGithub from './integrations.github.vue';
-import XDiscord from './integrations.discord.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormFolder from '@/components/form/folder.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import XGithub from "./integrations.github.vue";
+import XDiscord from "./integrations.discord.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormFolder from "@/components/form/folder.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let enableTwitterIntegration: boolean = $ref(false);
 let enableGithubIntegration: boolean = $ref(false);
 let enableDiscordIntegration: boolean = $ref(false);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	enableTwitterIntegration = meta.enableTwitterIntegration;
 	enableGithubIntegration = meta.enableGithubIntegration;
 	enableDiscordIntegration = meta.enableDiscordIntegration;
@@ -47,6 +64,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'ph-plug ph-bold ph-lg',
+	icon: "ph-plug ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
index 071e5ebe7..d0b9de74b 100644
--- a/packages/client/src/pages/admin/metrics.vue
+++ b/packages/client/src/pages/admin/metrics.vue
@@ -1,57 +1,111 @@
 <template>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-microchip ph-bold ph-lg"></i> {{ i18n.ts.cpuAndMemory }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="cpumem"></canvas>
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">
+			<i class="ph-microchip ph-bold ph-lg"></i>
+			{{ i18n.ts.cpuAndMemory }}
 		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
-					<div class="_cell"><div class="_label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+		<div class="_debobigegoPanel xhexznfu">
+			<div>
+				<canvas :ref="cpumem"></canvas>
+			</div>
+			<div v-if="serverInfo">
+				<div class="_table">
+					<div class="_row">
+						<div class="_cell">
+							<div class="_label">MEM total</div>
+							{{ bytes(serverInfo.mem.total) }}
+						</div>
+						<div class="_cell">
+							<div class="_label">MEM used</div>
+							{{ bytes(memUsage) }} ({{
+								(
+									(memUsage / serverInfo.mem.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+						<div class="_cell">
+							<div class="_label">MEM free</div>
+							{{ bytes(serverInfo.mem.total - memUsage) }} ({{
+								(
+									((serverInfo.mem.total - memUsage) /
+										serverInfo.mem.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-hard-drives ph-bold ph-lg"></i> {{ i18n.ts.disk }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="disk"></canvas>
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">
+			<i class="ph-hard-drives ph-bold ph-lg"></i> {{ i18n.ts.disk }}
 		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
-					<div class="_cell"><div class="_label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+		<div class="_debobigegoPanel xhexznfu">
+			<div>
+				<canvas :ref="disk"></canvas>
+			</div>
+			<div v-if="serverInfo">
+				<div class="_table">
+					<div class="_row">
+						<div class="_cell">
+							<div class="_label">Disk total</div>
+							{{ bytes(serverInfo.fs.total) }}
+						</div>
+						<div class="_cell">
+							<div class="_label">Disk used</div>
+							{{ bytes(serverInfo.fs.used) }} ({{
+								(
+									(serverInfo.fs.used / serverInfo.fs.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+						<div class="_cell">
+							<div class="_label">Disk free</div>
+							{{
+								bytes(serverInfo.fs.total - serverInfo.fs.used)
+							}}
+							({{
+								(
+									((serverInfo.fs.total -
+										serverInfo.fs.used) /
+										serverInfo.fs.total) *
+									100
+								).toFixed(0)
+							}}%)
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-swap ph-bold ph-lg"></i> {{ i18n.ts.network }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="net"></canvas>
+	<div class="_debobigegoItem">
+		<div class="_debobigegoLabel">
+			<i class="ph-swap ph-bold ph-lg"></i> {{ i18n.ts.network }}
 		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Interface</div>{{ serverInfo.net.interface }}</div>
+		<div class="_debobigegoPanel xhexznfu">
+			<div>
+				<canvas :ref="net"></canvas>
+			</div>
+			<div v-if="serverInfo">
+				<div class="_table">
+					<div class="_row">
+						<div class="_cell">
+							<div class="_label">Interface</div>
+							{{ serverInfo.net.interface }}
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, markRaw } from 'vue';
+import { defineComponent, markRaw } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -66,17 +120,17 @@ import {
 	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 { version, url } from '@/config';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+} 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 { version, url } from "@/config";
+import bytes from "@/filters/bytes";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 Chart.register(
 	ArcElement,
@@ -90,7 +144,7 @@ Chart.register(
 	Legend,
 	Title,
 	Tooltip,
-	SubTitle,
+	SubTitle
 );
 
 const alpha = (hex, a) => {
@@ -100,8 +154,8 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
-import * as os from '@/os';
-import { stream } from '@/stream';
+import * as os from "@/os";
+import { stream } from "@/stream";
 
 export default defineComponent({
 	components: {
@@ -120,18 +174,18 @@ export default defineComponent({
 			stats: null,
 			serverInfo: null,
 			connection: null,
-			queueConnection: markRaw(stream.useChannel('queueStats')),
+			queueConnection: markRaw(stream.useChannel("queueStats")),
 			memUsage: 0,
 			chartCpuMem: null,
 			chartNet: null,
 			jobs: [],
 			logs: [],
-			logLevel: 'all',
-			logDomain: '',
+			logLevel: "all",
+			logDomain: "",
 			modLogs: [],
 			dbInfo: null,
-			overviewHeight: '1fr',
-			queueHeight: '1fr',
+			overviewHeight: "1fr",
+			queueHeight: "1fr",
 			paused: false,
 			i18n,
 		};
@@ -140,28 +194,32 @@ export default defineComponent({
 	computed: {
 		gridColor() {
 			// TODO: var(--panel)の色が暗いか明るいかで判定する
-			return this.$store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+			return this.$store.state.darkMode
+				? "rgba(255, 255, 255, 0.1)"
+				: "rgba(0, 0, 0, 0.1)";
 		},
 	},
 
 	mounted() {
 		this.fetchJobs();
 
-		Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+		Chart.defaults.color = getComputedStyle(
+			document.documentElement
+		).getPropertyValue("--fg");
 
-		os.api('admin/server-info', {}).then(res => {
+		os.api("admin/server-info", {}).then((res) => {
 			this.serverInfo = res;
 
-			this.connection = markRaw(stream.useChannel('serverStats'));
-			this.connection.on('stats', this.onStats);
-			this.connection.on('statsLog', this.onStatsLog);
-			this.connection.send('requestLog', {
+			this.connection = markRaw(stream.useChannel("serverStats"));
+			this.connection.on("stats", this.onStats);
+			this.connection.on("statsLog", this.onStatsLog);
+			this.connection.send("requestLog", {
 				id: Math.random().toString().substr(2, 8),
 				length: 150,
 			});
 
 			this.$nextTick(() => {
-				this.queueConnection.send('requestLog', {
+				this.queueConnection.send("requestLog", {
 					id: Math.random().toString().substr(2, 8),
 					length: 200,
 				});
@@ -171,8 +229,8 @@ export default defineComponent({
 
 	beforeUnmount() {
 		if (this.connection) {
-			this.connection.off('stats', this.onStats);
-			this.connection.off('statsLog', this.onStatsLog);
+			this.connection.off("stats", this.onStats);
+			this.connection.off("statsLog", this.onStatsLog);
 			this.connection.dispose();
 		}
 		this.queueConnection.dispose();
@@ -181,229 +239,245 @@ export default defineComponent({
 	methods: {
 		cpumem(el) {
 			if (this.chartCpuMem != null) return;
-			this.chartCpuMem = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'CPU',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#31748f',
-						backgroundColor: alpha('#31748f', 0.1),
-						data: [],
-					}, {
-						label: 'MEM (active)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#c4a7e7',
-						backgroundColor: alpha('#c4a7e7', 0.02),
-						data: [],
-					}, {
-						label: 'MEM (used)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ebbcba',
-						borderDash: [5, 5],
-						fill: false,
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
+			this.chartCpuMem = markRaw(
+				new Chart(el, {
+					type: "line",
+					data: {
+						labels: [],
+						datasets: [
+							{
+								label: "CPU",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#31748f",
+								backgroundColor: alpha("#31748f", 0.1),
+								data: [],
 							},
-							ticks: {
-								display: false,
+							{
+								label: "MEM (active)",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#c4a7e7",
+								backgroundColor: alpha("#c4a7e7", 0.02),
+								data: [],
+							},
+							{
+								label: "MEM (used)",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#ebbcba",
+								borderDash: [5, 5],
+								fill: false,
+								data: [],
+							},
+						],
+					},
+					options: {
+						aspectRatio: 3,
+						layout: {
+							padding: {
+								left: 16,
+								right: 16,
+								top: 16,
+								bottom: 0,
 							},
 						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-								max: 100,
+						legend: {
+							position: "bottom",
+							labels: {
+								boxWidth: 16,
 							},
 						},
+						scales: {
+							x: {
+								gridLines: {
+									display: false,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+							y: {
+								position: "right",
+								gridLines: {
+									display: true,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+									max: 100,
+								},
+							},
+						},
+						tooltips: {
+							intersect: false,
+							mode: "index",
+						},
 					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
+				})
+			);
 		},
 
 		net(el) {
 			if (this.chartNet != null) return;
-			this.chartNet = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'In',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Out',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
+			this.chartNet = markRaw(
+				new Chart(el, {
+					type: "line",
+					data: {
+						labels: [],
+						datasets: [
+							{
+								label: "In",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#94a029",
+								backgroundColor: alpha("#94a029", 0.1),
+								data: [],
 							},
-							ticks: {
-								display: false,
+							{
+								label: "Out",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#ff9156",
+								backgroundColor: alpha("#ff9156", 0.1),
+								data: [],
+							},
+						],
+					},
+					options: {
+						aspectRatio: 3,
+						layout: {
+							padding: {
+								left: 16,
+								right: 16,
+								top: 16,
+								bottom: 0,
 							},
 						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
+						legend: {
+							position: "bottom",
+							labels: {
+								boxWidth: 16,
 							},
 						},
+						scales: {
+							x: {
+								gridLines: {
+									display: false,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+							y: {
+								position: "right",
+								gridLines: {
+									display: true,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+						},
+						tooltips: {
+							intersect: false,
+							mode: "index",
+						},
 					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
+				})
+			);
 		},
 
 		disk(el) {
 			if (this.chartDisk != null) return;
-			this.chartDisk = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'Read',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Write',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
+			this.chartDisk = markRaw(
+				new Chart(el, {
+					type: "line",
+					data: {
+						labels: [],
+						datasets: [
+							{
+								label: "Read",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#94a029",
+								backgroundColor: alpha("#94a029", 0.1),
+								data: [],
 							},
-							ticks: {
-								display: false,
+							{
+								label: "Write",
+								pointRadius: 0,
+								tension: 0,
+								borderWidth: 2,
+								borderColor: "#ff9156",
+								backgroundColor: alpha("#ff9156", 0.1),
+								data: [],
+							},
+						],
+					},
+					options: {
+						aspectRatio: 3,
+						layout: {
+							padding: {
+								left: 16,
+								right: 16,
+								top: 16,
+								bottom: 0,
 							},
 						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
+						legend: {
+							position: "bottom",
+							labels: {
+								boxWidth: 16,
 							},
 						},
+						scales: {
+							x: {
+								gridLines: {
+									display: false,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+							y: {
+								position: "right",
+								gridLines: {
+									display: true,
+									color: this.gridColor,
+									zeroLineColor: this.gridColor,
+								},
+								ticks: {
+									display: false,
+								},
+							},
+						},
+						tooltips: {
+							intersect: false,
+							mode: "index",
+						},
 					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
+				})
+			);
 		},
 
 		fetchJobs() {
-			os.api('admin/queue/deliver-delayed', {}).then(jobs => {
+			os.api("admin/queue/deliver-delayed", {}).then((jobs) => {
 				this.jobs = jobs;
 			});
 		},
@@ -412,18 +486,24 @@ export default defineComponent({
 			if (this.paused) return;
 
 			const cpu = (stats.cpu * 100).toFixed(0);
-			const memActive = (stats.mem.active / this.serverInfo.mem.total * 100).toFixed(0);
-			const memUsed = (stats.mem.used / this.serverInfo.mem.total * 100).toFixed(0);
+			const memActive = (
+				(stats.mem.active / this.serverInfo.mem.total) *
+				100
+			).toFixed(0);
+			const memUsed = (
+				(stats.mem.used / this.serverInfo.mem.total) *
+				100
+			).toFixed(0);
 			this.memUsage = stats.mem.active;
 
-			this.chartCpuMem.data.labels.push('');
+			this.chartCpuMem.data.labels.push("");
 			this.chartCpuMem.data.datasets[0].data.push(cpu);
 			this.chartCpuMem.data.datasets[1].data.push(memActive);
 			this.chartCpuMem.data.datasets[2].data.push(memUsed);
-			this.chartNet.data.labels.push('');
+			this.chartNet.data.labels.push("");
 			this.chartNet.data.datasets[0].data.push(stats.net.rx);
 			this.chartNet.data.datasets[1].data.push(stats.net.tx);
-			this.chartDisk.data.labels.push('');
+			this.chartDisk.data.labels.push("");
 			this.chartDisk.data.datasets[0].data.push(stats.fs.r);
 			this.chartDisk.data.datasets[1].data.push(stats.fs.w);
 			if (this.chartCpuMem.data.datasets[0].data.length > 150) {
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index 2847b10a6..46760b816 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -1,84 +1,158 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div class="_formRoot">
-				<FormSwitch v-model="useObjectStorage" class="_formBlock">{{ i18n.ts.useObjectStorage }}</FormSwitch>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div class="_formRoot">
+					<FormSwitch v-model="useObjectStorage" class="_formBlock">{{
+						i18n.ts.useObjectStorage
+					}}</FormSwitch>
 
-				<template v-if="useObjectStorage">
-					<FormInput v-model="objectStorageBaseUrl" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageBaseUrl }}</template>
-						<template #caption>{{ i18n.ts.objectStorageBaseUrlDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStorageBucket" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageBucket }}</template>
-						<template #caption>{{ i18n.ts.objectStorageBucketDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStoragePrefix" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStoragePrefix }}</template>
-						<template #caption>{{ i18n.ts.objectStoragePrefixDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStorageEndpoint" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageEndpoint }}</template>
-						<template #caption>{{ i18n.ts.objectStorageEndpointDesc }}</template>
-					</FormInput>
-
-					<FormInput v-model="objectStorageRegion" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageRegion }}</template>
-						<template #caption>{{ i18n.ts.objectStorageRegionDesc }}</template>
-					</FormInput>
-
-					<FormSplit :min-width="280">
-						<FormInput v-model="objectStorageAccessKey" class="_formBlock">
-							<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-							<template #label>Access key</template>
+					<template v-if="useObjectStorage">
+						<FormInput
+							v-model="objectStorageBaseUrl"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageBaseUrl
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageBaseUrlDesc
+							}}</template>
 						</FormInput>
 
-						<FormInput v-model="objectStorageSecretKey" class="_formBlock">
-							<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-							<template #label>Secret key</template>
+						<FormInput
+							v-model="objectStorageBucket"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageBucket
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageBucketDesc
+							}}</template>
 						</FormInput>
-					</FormSplit>
 
-					<FormSwitch v-model="objectStorageUseSSL" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageUseSSL }}</template>
-						<template #caption>{{ i18n.ts.objectStorageUseSSLDesc }}</template>
-					</FormSwitch>
+						<FormInput
+							v-model="objectStoragePrefix"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStoragePrefix
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStoragePrefixDesc
+							}}</template>
+						</FormInput>
 
-					<FormSwitch v-model="objectStorageUseProxy" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageUseProxy }}</template>
-						<template #caption>{{ i18n.ts.objectStorageUseProxyDesc }}</template>
-					</FormSwitch>
+						<FormInput
+							v-model="objectStorageEndpoint"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageEndpoint
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageEndpointDesc
+							}}</template>
+						</FormInput>
 
-					<FormSwitch v-model="objectStorageSetPublicRead" class="_formBlock">
-						<template #label>{{ i18n.ts.objectStorageSetPublicRead }}</template>
-					</FormSwitch>
+						<FormInput
+							v-model="objectStorageRegion"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageRegion
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageRegionDesc
+							}}</template>
+						</FormInput>
 
-					<FormSwitch v-model="objectStorageS3ForcePathStyle" class="_formBlock">
-						<template #label>s3ForcePathStyle</template>
-					</FormSwitch>
-				</template>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+						<FormSplit :min-width="280">
+							<FormInput
+								v-model="objectStorageAccessKey"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-key ph-bold ph-lg"></i
+								></template>
+								<template #label>Access key</template>
+							</FormInput>
+
+							<FormInput
+								v-model="objectStorageSecretKey"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-key ph-bold ph-lg"></i
+								></template>
+								<template #label>Secret key</template>
+							</FormInput>
+						</FormSplit>
+
+						<FormSwitch
+							v-model="objectStorageUseSSL"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageUseSSL
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageUseSSLDesc
+							}}</template>
+						</FormSwitch>
+
+						<FormSwitch
+							v-model="objectStorageUseProxy"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageUseProxy
+							}}</template>
+							<template #caption>{{
+								i18n.ts.objectStorageUseProxyDesc
+							}}</template>
+						</FormSwitch>
+
+						<FormSwitch
+							v-model="objectStorageSetPublicRead"
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts.objectStorageSetPublicRead
+							}}</template>
+						</FormSwitch>
+
+						<FormSwitch
+							v-model="objectStorageS3ForcePathStyle"
+							class="_formBlock"
+						>
+							<template #label>s3ForcePathStyle</template>
+						</FormSwitch>
+					</template>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let useObjectStorage: boolean = $ref(false);
 let objectStorageBaseUrl: string | null = $ref(null);
@@ -95,7 +169,7 @@ let objectStorageSetPublicRead: boolean = $ref(false);
 let objectStorageS3ForcePathStyle: boolean = $ref(true);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	useObjectStorage = meta.useObjectStorage;
 	objectStorageBaseUrl = meta.objectStorageBaseUrl;
 	objectStorageBucket = meta.objectStorageBucket;
@@ -112,7 +186,7 @@ async function init() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		useObjectStorage,
 		objectStorageBaseUrl,
 		objectStorageBucket,
@@ -131,17 +205,19 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.objectStorage,
-	icon: 'ph-cloud ph-bold ph-lg',
+	icon: "ph-cloud ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index 140ca4f55..1d74e752a 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -1,43 +1,48 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			none
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init"> none </FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 async function init() {
-	await os.api('admin/meta');
+	await os.api("admin/meta");
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta').then(() => {
+	os.apiWithDialog("admin/update-meta").then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
index ee8f42c43..25dcac494 100644
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -1,23 +1,29 @@
 <template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root" class="_panel">
-		<canvas ref="chartEl"></canvas>
+	<div>
+		<MkLoading v-if="fetching" />
+		<div v-show="!fetching" :class="$style.root" class="_panel">
+			<canvas ref="chartEl"></canvas>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import { Chart } from 'chart.js';
-import tinycolor from 'tinycolor2';
-import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import {
+	markRaw,
+	version as vueVersion,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+} from "vue";
+import { Chart } from "chart.js";
+import tinycolor from "tinycolor2";
+import gradient from "chartjs-plugin-gradient";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -49,43 +55,51 @@ async function renderChart() {
 		}));
 	};
 
-	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+	const raw = await os.api("charts/active-users", {
+		limit: chartLimit,
+		span: "day",
+	});
 
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
 
-	const colorRead = '#eb6f92';
-	const colorWrite = '#f6c177';
+	const colorRead = "#eb6f92";
+	const colorWrite = "#f6c177";
 
 	const max = Math.max(...raw.read);
 
 	chartInstance = new Chart(chartEl, {
-		type: 'bar',
+		type: "bar",
 		data: {
-			datasets: [{
-				parsing: false,
-				label: 'Read',
-				data: format(raw.read).slice().reverse(),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: colorRead,
-				barPercentage: 0.7,
-				categoryPercentage: 0.5,
-				fill: true,
-			}, {
-				parsing: false,
-				label: 'Write',
-				data: format(raw.write).slice().reverse(),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: colorWrite,
-				barPercentage: 0.7,
-				categoryPercentage: 0.5,
-				fill: true,
-			}],
+			datasets: [
+				{
+					parsing: false,
+					label: "Read",
+					data: format(raw.read).slice().reverse(),
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: colorRead,
+					barPercentage: 0.7,
+					categoryPercentage: 0.5,
+					fill: true,
+				},
+				{
+					parsing: false,
+					label: "Write",
+					data: format(raw.write).slice().reverse(),
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: colorWrite,
+					barPercentage: 0.7,
+					categoryPercentage: 0.5,
+					fill: true,
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -99,14 +113,14 @@ async function renderChart() {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					offset: true,
 					time: {
 						stepSize: 1,
-						unit: 'day',
+						unit: "day",
 						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
+							day: "M/d",
+							month: "Y/M",
 						},
 					},
 					grid: {
@@ -119,7 +133,7 @@ async function renderChart() {
 					},
 				},
 				y: {
-					position: 'left',
+					position: "left",
 					suggestedMax: 10,
 					grid: {
 						display: true,
@@ -132,7 +146,7 @@ async function renderChart() {
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			plugins: {
 				legend: {
@@ -140,7 +154,7 @@ async function renderChart() {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
index e481465a1..c655336e8 100644
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -1,34 +1,34 @@
 <template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root">
-		<div class="charts _panel">
-			<div class="chart">
-				<canvas ref="chartEl2"></canvas>
-			</div>
-			<div class="chart">
-				<canvas ref="chartEl"></canvas>
+	<div>
+		<MkLoading v-if="fetching" />
+		<div v-show="!fetching" :class="$style.root">
+			<div class="charts _panel">
+				<div class="chart">
+					<canvas ref="chartEl2"></canvas>
+				</div>
+				<div class="chart">
+					<canvas ref="chartEl"></canvas>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { Chart } from 'chart.js';
-import gradient from 'chartjs-plugin-gradient';
-import tinycolor from 'tinycolor2';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import { i18n } from '@/i18n';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { defaultStore } from '@/store';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import { onMounted, onUnmounted, ref } from "vue";
+import { Chart } from "chart.js";
+import gradient from "chartjs-plugin-gradient";
+import tinycolor from "tinycolor2";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import { i18n } from "@/i18n";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { defaultStore } from "@/store";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -65,47 +65,55 @@ onMounted(async () => {
 		}));
 	};
 
-	const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
+	const raw = await os.api("charts/ap-request", {
+		limit: chartLimit,
+		span: "day",
+	});
 
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	const succColor = '#9ccfd8';
-	const failColor = '#f6c177';
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
+	const succColor = "#9ccfd8";
+	const failColor = "#f6c177";
 
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
 
 	new Chart(chartEl, {
-		type: 'line',
+		type: "line",
 		data: {
-			datasets: [{
-				stack: 'a',
-				parsing: false,
-				label: 'Out: Succ',
-				data: format(raw.deliverSucceeded).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: succColor,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: alpha(succColor, 0.35),
-				fill: true,
-				clip: 8,
-			}, {
-				stack: 'a',
-				parsing: false,
-				label: 'Out: Fail',
-				data: formatMinus(raw.deliverFailed).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: failColor,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: alpha(failColor, 0.35),
-				fill: true,
-				clip: 8,
-			}],
+			datasets: [
+				{
+					stack: "a",
+					parsing: false,
+					label: "Out: Succ",
+					data: format(raw.deliverSucceeded).slice().reverse(),
+					tension: 0.3,
+					pointRadius: 0,
+					borderWidth: 2,
+					borderColor: succColor,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: alpha(succColor, 0.35),
+					fill: true,
+					clip: 8,
+				},
+				{
+					stack: "a",
+					parsing: false,
+					label: "Out: Fail",
+					data: formatMinus(raw.deliverFailed).slice().reverse(),
+					tension: 0.3,
+					pointRadius: 0,
+					borderWidth: 2,
+					borderColor: failColor,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: alpha(failColor, 0.35),
+					fill: true,
+					clip: 8,
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -119,12 +127,12 @@ onMounted(async () => {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					stacked: true,
 					offset: false,
 					time: {
 						stepSize: 1,
-						unit: 'day',
+						unit: "day",
 					},
 					grid: {
 						display: true,
@@ -138,7 +146,7 @@ onMounted(async () => {
 				},
 				y: {
 					stacked: true,
-					position: 'left',
+					position: "left",
 					suggestedMax: 10,
 					grid: {
 						display: true,
@@ -146,13 +154,14 @@ onMounted(async () => {
 					ticks: {
 						display: true,
 						//mirror: true,
-						callback: (value, index, values) => value < 0 ? -value : value,
+						callback: (value, index, values) =>
+							value < 0 ? -value : value,
 					},
 				},
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			elements: {
 				point: {
@@ -166,7 +175,7 @@ onMounted(async () => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -179,23 +188,25 @@ onMounted(async () => {
 	});
 
 	new Chart(chartEl2, {
-		type: 'bar',
+		type: "bar",
 		data: {
-			datasets: [{
-				parsing: false,
-				label: 'In',
-				data: format(raw.inboxReceived).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: '#c4a7e7',
-				barPercentage: 0.8,
-				categoryPercentage: 0.9,
-				fill: true,
-				clip: 8,
-			}],
+			datasets: [
+				{
+					parsing: false,
+					label: "In",
+					data: format(raw.inboxReceived).slice().reverse(),
+					tension: 0.3,
+					pointRadius: 0,
+					borderWidth: 0,
+					borderJoinStyle: "round",
+					borderRadius: 4,
+					backgroundColor: "#c4a7e7",
+					barPercentage: 0.8,
+					categoryPercentage: 0.9,
+					fill: true,
+					clip: 8,
+				},
+			],
 		},
 		options: {
 			aspectRatio: 5,
@@ -209,14 +220,14 @@ onMounted(async () => {
 			},
 			scales: {
 				x: {
-					type: 'time',
+					type: "time",
 					offset: false,
 					time: {
 						stepSize: 1,
-						unit: 'day',
+						unit: "day",
 						displayFormats: {
-							day: 'M/d',
-							month: 'Y/M',
+							day: "M/d",
+							month: "Y/M",
 						},
 					},
 					grid: {
@@ -230,7 +241,7 @@ onMounted(async () => {
 					min: getDate(chartLimit).getTime(),
 				},
 				y: {
-					position: 'left',
+					position: "left",
 					suggestedMax: 10,
 					grid: {
 						display: true,
@@ -239,7 +250,7 @@ onMounted(async () => {
 			},
 			interaction: {
 				intersect: false,
-				mode: 'index',
+				mode: "index",
 			},
 			elements: {
 				point: {
@@ -253,7 +264,7 @@ onMounted(async () => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -284,4 +295,3 @@ onMounted(async () => {
 	}
 }
 </style>
-
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index b9e53d17d..ab4dd2c69 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -1,54 +1,69 @@
 <template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root">
-		<div v-if="topSubInstancesForPie && topPubInstancesForPie" class="pies">
-			<div class="pie deliver _panel">
-				<div class="title">Sub</div>
-				<XPie :data="topSubInstancesForPie" class="chart"/>
-				<div class="subTitle">Top 10</div>
-			</div>
-			<div class="pie inbox _panel">
-				<div class="title">Pub</div>
-				<XPie :data="topPubInstancesForPie" class="chart"/>
-				<div class="subTitle">Top 10</div>
-			</div>
-		</div>
-		<div v-if="!fetching" class="items">
-			<div class="item _panel sub">
-				<div class="icon"><i class="ph-download ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(federationSubActive) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"></MkNumberDiff>
-					</div>
-					<div class="label">Sub</div>
+	<div>
+		<MkLoading v-if="fetching" />
+		<div v-show="!fetching" :class="$style.root">
+			<div
+				v-if="topSubInstancesForPie && topPubInstancesForPie"
+				class="pies"
+			>
+				<div class="pie deliver _panel">
+					<div class="title">Sub</div>
+					<XPie :data="topSubInstancesForPie" class="chart" />
+					<div class="subTitle">Top 10</div>
+				</div>
+				<div class="pie inbox _panel">
+					<div class="title">Pub</div>
+					<XPie :data="topPubInstancesForPie" class="chart" />
+					<div class="subTitle">Top 10</div>
 				</div>
 			</div>
-			<div class="item _panel pub">
-				<div class="icon"><i class="ph-upload ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(federationPubActive) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationPubActiveDiff"></MkNumberDiff>
+			<div v-if="!fetching" class="items">
+				<div class="item _panel sub">
+					<div class="icon">
+						<i class="ph-download ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							{{ number(federationSubActive) }}
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="federationSubActiveDiff"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Sub</div>
+					</div>
+				</div>
+				<div class="item _panel pub">
+					<div class="icon">
+						<i class="ph-upload ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							{{ number(federationPubActive) }}
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="federationPubActiveDiff"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Pub</div>
 					</div>
-					<div class="label">Pub</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import XPie from './overview.pie.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import { i18n } from '@/i18n';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { onMounted, onUnmounted, ref } from "vue";
+import XPie from "./overview.pie.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import { i18n } from "@/i18n";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 let topSubInstancesForPie: any = $ref(null);
 let topPubInstancesForPie: any = $ref(null);
@@ -61,29 +76,48 @@ let fetching = $ref(true);
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 onMounted(async () => {
-	const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
+	const chart = await os.apiGet("charts/federation", {
+		limit: 2,
+		span: "day",
+	});
 	federationPubActive = chart.pubActive[0];
 	federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
 	federationSubActive = chart.subActive[0];
 	federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
 
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+	os.apiGet("federation/stats", { limit: 10 }).then((res) => {
+		topSubInstancesForPie = res.topSubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followersCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowersCount,
+				},
+			]);
+		topPubInstancesForPie = res.topPubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followingCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowingCount,
+				},
+			]);
 	});
 
 	fetching = false;
@@ -92,7 +126,6 @@ onMounted(async () => {
 
 <style lang="scss" module>
 .root {
-
 	&:global {
 		> .pies {
 			display: grid;
@@ -182,4 +215,3 @@ onMounted(async () => {
 	}
 }
 </style>
-
diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
index 7628209c7..1a4984ba7 100644
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -1,21 +1,27 @@
 <template>
-<div class="_panel" :class="$style.root">
-	<MkSelect v-model="src" style="margin: 0 0 12px 0;" small>
-		<option value="notes">Notes</option>
-		<option value="active-users">Active users</option>
-		<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
-		<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
-		<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
-	</MkSelect>
-	<MkHeatmap :src="src"/>
-</div>
+	<div class="_panel" :class="$style.root">
+		<MkSelect v-model="src" style="margin: 0 0 12px 0" small>
+			<option value="notes">Notes</option>
+			<option value="active-users">Active users</option>
+			<option value="ap-requests-inbox-received">
+				Fediverse Requests: inboxReceived
+			</option>
+			<option value="ap-requests-deliver-succeeded">
+				Fediverse Requests: deliverSucceeded
+			</option>
+			<option value="ap-requests-deliver-failed">
+				Fediverse Requests: deliverFailed
+			</option>
+		</MkSelect>
+		<MkHeatmap :src="src" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import MkHeatmap from '@/components/MkHeatmap.vue';
-import MkSelect from '@/components/form/select.vue';
+import MkHeatmap from "@/components/MkHeatmap.vue";
+import MkSelect from "@/components/form/select.vue";
 
-let src = $ref('notes');
+let src = $ref("notes");
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
index 15dbdc463..e5d0d1d32 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -1,28 +1,39 @@
 <template>
-<div class="wbrkwale">
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="instances">
-			<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
-				<MkInstanceCardMini :instance="instance"/>
-			</MkA>
-		</div>
-	</Transition>
-</div>
+	<div class="wbrkwale">
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="fetching" />
+			<div v-else class="instances">
+				<MkA
+					v-for="(instance, i) in instances"
+					:key="instance.id"
+					v-tooltip.mfm.noDelay="
+						`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`
+					"
+					:to="`/instance-info/${instance.host}`"
+					class="instance"
+				>
+					<MkInstanceCardMini :instance="instance" />
+				</MkA>
+			</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
+import { onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
 
 const instances = ref([]);
 const fetching = ref(true);
 
 const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+latestRequestReceivedAt',
+	const fetchedInstances = await os.api("federation/instances", {
+		sort: "+latestRequestReceivedAt",
 		limit: 6,
 	});
 	instances.value = fetchedInstances;
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
index 1a5160172..6184cfb10 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -1,29 +1,37 @@
 <template>
-<div>
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<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" indicator/>
-			</MkA>
-		</div>
-	</Transition>
-</div>
+	<div>
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<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" indicator />
+				</MkA>
+			</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 let moderators: any = $ref(null);
 let fetching = $ref(true);
 
 onMounted(async () => {
-	moderators = await os.api('admin/show-users', {
-		sort: '+updatedAt',
-		state: 'adminOrModerator',
+	moderators = await os.api("admin/show-users", {
+		sort: "+updatedAt",
+		state: "adminOrModerator",
 		limit: 30,
 	});
 
diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue
index 416e96335..9de9f5c4b 100644
--- a/packages/client/src/pages/admin/overview.pie.vue
+++ b/packages/client/src/pages/admin/overview.pie.vue
@@ -1,41 +1,50 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
-import { Chart } from 'chart.js';
-import number from '@/filters/number';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { initChart } from '@/scripts/init-chart';
+import { onMounted, onUnmounted, ref, shallowRef } from "vue";
+import { Chart } from "chart.js";
+import number from "@/filters/number";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
 const props = defineProps<{
-	data: { name: string; value: number; color: string; onClick?: () => void }[];
+	data: {
+		name: string;
+		value: number;
+		color: string;
+		onClick?: () => void;
+	}[];
 }>();
 
 const chartEl = shallowRef<HTMLCanvasElement>(null);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
+	position: "middle",
 });
 
 let chartInstance: Chart;
 
 onMounted(() => {
 	chartInstance = new Chart(chartEl.value, {
-		type: 'doughnut',
+		type: "doughnut",
 		data: {
-			labels: props.data.map(x => x.name),
-			datasets: [{
-				backgroundColor: props.data.map(x => x.color),
-				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
-				borderWidth: 2,
-				hoverOffset: 0,
-				data: props.data.map(x => x.value),
-			}],
+			labels: props.data.map((x) => x.name),
+			datasets: [
+				{
+					backgroundColor: props.data.map((x) => x.color),
+					borderColor: getComputedStyle(
+						document.documentElement
+					).getPropertyValue("--panel"),
+					borderWidth: 2,
+					hoverOffset: 0,
+					data: props.data.map((x) => x.value),
+				},
+			],
 		},
 		options: {
 			layout: {
@@ -47,7 +56,12 @@ onMounted(() => {
 				},
 			},
 			onClick: (ev) => {
-				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
+				const hit = chartInstance.getElementsAtEventForMode(
+					ev,
+					"nearest",
+					{ intersect: true },
+					false
+				)[0];
 				if (hit && props.data[hit.index].onClick) {
 					props.data[hit.index].onClick();
 				}
@@ -58,7 +72,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -70,6 +84,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
index 15d4835a5..ebc344fa0 100644
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ b/packages/client/src/pages/admin/overview.queue-chart.vue
@@ -1,9 +1,9 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -20,11 +20,11 @@ import {
 	Tooltip,
 	SubTitle,
 	Filler,
-} from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+} from "chart.js";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 Chart.register(
 	ArcElement,
@@ -40,7 +40,7 @@ Chart.register(
 	Title,
 	Tooltip,
 	SubTitle,
-	Filler,
+	Filler
 );
 
 const props = defineProps<{
@@ -58,18 +58,24 @@ const alpha = (hex, a) => {
 
 const chartEl = ref<HTMLCanvasElement>(null);
 
-const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+const gridColor = defaultStore.state.darkMode
+	? "rgba(255, 255, 255, 0.1)"
+	: "rgba(0, 0, 0, 0.1)";
 
 // フォントカラー
-Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+Chart.defaults.color = getComputedStyle(
+	document.documentElement
+).getPropertyValue("--fg");
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
 let chartInstance: Chart;
 
 const onStats = (stats) => {
-	chartInstance.data.labels.push('');
-	chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+	chartInstance.data.labels.push("");
+	chartInstance.data.datasets[0].data.push(
+		stats[props.domain].activeSincePrevTick
+	);
 	chartInstance.data.datasets[1].data.push(stats[props.domain].active);
 	chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
 	chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
@@ -85,8 +91,10 @@ const onStats = (stats) => {
 
 const onStatsLog = (statsLog) => {
 	for (const stats of [...statsLog].reverse()) {
-		chartInstance.data.labels.push('');
-		chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+		chartInstance.data.labels.push("");
+		chartInstance.data.datasets[0].data.push(
+			stats[props.domain].activeSincePrevTick
+		);
 		chartInstance.data.datasets[1].data.push(stats[props.domain].active);
 		chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
 		chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
@@ -103,47 +111,52 @@ const onStatsLog = (statsLog) => {
 
 onMounted(() => {
 	chartInstance = new Chart(chartEl.value, {
-		type: 'line',
+		type: "line",
 		data: {
 			labels: [],
-			datasets: [{
-				label: 'Process',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#9ccfd8',
-				backgroundColor: alpha('#9ccfd8', 0.1),
-				data: [],
-			}, {
-				label: 'Active',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#31748f',
-				backgroundColor: alpha('#31748f', 0.1),
-				data: [],
-			}, {
-				label: 'Waiting',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#f6c177',
-				backgroundColor: alpha('#f6c177', 0.1),
-				data: [],
-			}, {
-				label: 'Delayed',
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: '#eb6f92',
-				borderDash: [5, 5],
-				fill: false,
-				data: [],
-			}],
+			datasets: [
+				{
+					label: "Process",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#9ccfd8",
+					backgroundColor: alpha("#9ccfd8", 0.1),
+					data: [],
+				},
+				{
+					label: "Active",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#31748f",
+					backgroundColor: alpha("#31748f", 0.1),
+					data: [],
+				},
+				{
+					label: "Waiting",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#f6c177",
+					backgroundColor: alpha("#f6c177", 0.1),
+					data: [],
+				},
+				{
+					label: "Delayed",
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: "#eb6f92",
+					borderDash: [5, 5],
+					fill: false,
+					data: [],
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -186,7 +199,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -196,16 +209,14 @@ onMounted(() => {
 		},
 	});
 
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
+	props.connection.on("stats", onStats);
+	props.connection.on("statsLog", onStatsLog);
 });
 
 onUnmounted(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
+	props.connection.off("stats", onStats);
+	props.connection.off("statsLog", onStatsLog);
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/overview.queue.chart.vue b/packages/client/src/pages/admin/overview.queue.chart.vue
index 46d030687..01a0d0ec0 100644
--- a/packages/client/src/pages/admin/overview.queue.chart.vue
+++ b/packages/client/src/pages/admin/overview.queue.chart.vue
@@ -1,17 +1,17 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { watch, onMounted, onUnmounted, ref, shallowRef } from 'vue';
-import { Chart } from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { alpha } from '@/scripts/color';
-import { initChart } from '@/scripts/init-chart';
+import { watch, onMounted, onUnmounted, ref, shallowRef } from "vue";
+import { Chart } from "chart.js";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
+import { chartVLine } from "@/scripts/chart-vline";
+import { alpha } from "@/scripts/color";
+import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
@@ -28,7 +28,7 @@ let chartInstance: Chart;
 function setData(values) {
 	if (chartInstance == null) return;
 	for (const value of values) {
-		chartInstance.data.labels.push('');
+		chartInstance.data.labels.push("");
 		chartInstance.data.datasets[0].data.push(value);
 		if (chartInstance.data.datasets[0].data.length > 100) {
 			chartInstance.data.labels.shift();
@@ -40,7 +40,7 @@ function setData(values) {
 
 function pushData(value) {
 	if (chartInstance == null) return;
-	chartInstance.data.labels.push('');
+	chartInstance.data.labels.push("");
 	chartInstance.data.datasets[0].data.push(value);
 	if (chartInstance.data.datasets[0].data.length > 100) {
 		chartInstance.data.labels.shift();
@@ -50,37 +50,49 @@ function pushData(value) {
 }
 
 const label =
-	props.type === 'process' ? 'Process' :
-	props.type === 'active' ? 'Active' :
-	props.type === 'delayed' ? 'Delayed' :
-	props.type === 'waiting' ? 'Waiting' :
-	'?' as never;
+	props.type === "process"
+		? "Process"
+		: props.type === "active"
+		? "Active"
+		: props.type === "delayed"
+		? "Delayed"
+		: props.type === "waiting"
+		? "Waiting"
+		: ("?" as never);
 
 const color =
-	props.type === 'process' ? '#c4a7e7' :
-	props.type === 'active' ? '#31748f' :
-	props.type === 'delayed' ? '#eb6f92' :
-	props.type === 'waiting' ? '#f6c177' :
-	'?' as never;
+	props.type === "process"
+		? "#c4a7e7"
+		: props.type === "active"
+		? "#31748f"
+		: props.type === "delayed"
+		? "#eb6f92"
+		: props.type === "waiting"
+		? "#f6c177"
+		: ("?" as never);
 
 onMounted(() => {
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	const vLineColor = defaultStore.state.darkMode
+		? "rgba(255, 255, 255, 0.2)"
+		: "rgba(0, 0, 0, 0.2)";
 
 	chartInstance = new Chart(chartEl.value, {
-		type: 'line',
+		type: "line",
 		data: {
 			labels: [],
-			datasets: [{
-				label: label,
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: color,
-				backgroundColor: alpha(color, 0.2),
-				fill: true,
-				data: [],
-			}],
+			datasets: [
+				{
+					label: label,
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: color,
+					backgroundColor: alpha(color, 0.2),
+					fill: true,
+					data: [],
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -104,8 +116,7 @@ onMounted(() => {
 				},
 				y: {
 					min: 0,
-					grid: {
-					},
+					grid: {},
 				},
 			},
 			interaction: {
@@ -117,7 +128,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -135,6 +146,4 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/overview.queue.vue
index 7e5888293..5b003887e 100644
--- a/packages/client/src/pages/admin/overview.queue.vue
+++ b/packages/client/src/pages/admin/overview.queue.vue
@@ -1,43 +1,55 @@
 <template>
-<div :class="$style.root">
-	<div class="_table status">
-		<div class="_row">
-			<div class="_cell" style="text-align: center;"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Active</div>{{ number(active) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
+	<div :class="$style.root">
+		<div class="_table status">
+			<div class="_row">
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Process</div>
+					{{ number(activeSincePrevTick) }}
+				</div>
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Active</div>
+					{{ number(active) }}
+				</div>
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Waiting</div>
+					{{ number(waiting) }}
+				</div>
+				<div class="_cell" style="text-align: center">
+					<div class="_label">Delayed</div>
+					{{ number(delayed) }}
+				</div>
+			</div>
+		</div>
+		<div class="charts">
+			<div class="chart">
+				<div class="title">Process</div>
+				<XChart ref="chartProcess" type="process" />
+			</div>
+			<div class="chart">
+				<div class="title">Active</div>
+				<XChart ref="chartActive" type="active" />
+			</div>
+			<div class="chart">
+				<div class="title">Delayed</div>
+				<XChart ref="chartDelayed" type="delayed" />
+			</div>
+			<div class="chart">
+				<div class="title">Waiting</div>
+				<XChart ref="chartWaiting" type="waiting" />
+			</div>
 		</div>
 	</div>
-	<div class="charts">
-		<div class="chart">
-			<div class="title">Process</div>
-			<XChart ref="chartProcess" type="process"/>
-		</div>
-		<div class="chart">
-			<div class="title">Active</div>
-			<XChart ref="chartActive" type="active"/>
-		</div>
-		<div class="chart">
-			<div class="title">Delayed</div>
-			<XChart ref="chartDelayed" type="delayed"/>
-		</div>
-		<div class="chart">
-			<div class="title">Waiting</div>
-			<XChart ref="chartWaiting" type="waiting"/>
-		</div>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, ref } from 'vue';
-import XChart from './overview.queue.chart.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { markRaw, onMounted, onUnmounted, ref } from "vue";
+import XChart from "./overview.queue.chart.vue";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const connection = markRaw(stream.useChannel('queueStats'));
+const connection = markRaw(stream.useChannel("queueStats"));
 
 const activeSincePrevTick = ref(0);
 const active = ref(0);
@@ -84,17 +96,17 @@ const onStatsLog = (statsLog) => {
 };
 
 onMounted(() => {
-	connection.on('stats', onStats);
-	connection.on('statsLog', onStatsLog);
-	connection.send('requestLog', {
+	connection.on("stats", onStats);
+	connection.on("statsLog", onStatsLog);
+	connection.send("requestLog", {
 		id: Math.random().toString().substr(2, 8),
 		length: 100,
 	});
 });
 
 onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
+	connection.off("stats", onStats);
+	connection.off("statsLog", onStatsLog);
 	connection.dispose();
 });
 </script>
@@ -124,4 +136,4 @@ onUnmounted(() => {
 		}
 	}
 }
-</style>	
+</style>
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 797a0ba08..b6d9e0bf1 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -1,59 +1,90 @@
 <template>
-<div>
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.root">
-			<div class="item _panel users">
-				<div class="icon"><i class="ph-users ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/>
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+	<div>
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="fetching" />
+			<div v-else :class="$style.root">
+				<div class="item _panel users">
+					<div class="icon">
+						<i class="ph-users ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="stats.originalUsersCount"
+								style="margin-right: 0.5em"
+							/>
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="usersComparedToThePrevDay"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Users</div>
+					</div>
+				</div>
+				<div class="item _panel notes">
+					<div class="icon">
+						<i class="ph-pencil ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="stats.originalNotesCount"
+								style="margin-right: 0.5em"
+							/>
+							<MkNumberDiff
+								v-tooltip="i18n.ts.dayOverDayChanges"
+								class="diff"
+								:value="notesComparedToThePrevDay"
+							></MkNumberDiff>
+						</div>
+						<div class="label">Posts</div>
+					</div>
+				</div>
+				<div class="item _panel instances">
+					<div class="icon">
+						<i class="ph-planet ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="stats.instances"
+								style="margin-right: 0.5em"
+							/>
+						</div>
+						<div class="label">Instances</div>
+					</div>
+				</div>
+				<div class="item _panel online">
+					<div class="icon">
+						<i class="ph-broadcast ph-bold ph-xl"></i>
+					</div>
+					<div class="body">
+						<div class="value">
+							<MkNumber
+								:value="onlineUsersCount"
+								style="margin-right: 0.5em"
+							/>
+						</div>
+						<div class="label">Online</div>
 					</div>
-					<div class="label">Users</div>
 				</div>
 			</div>
-			<div class="item _panel notes">
-				<div class="icon"><i class="ph-pencil ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/>
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
-					</div>
-					<div class="label">Posts</div>
-				</div>
-			</div>
-			<div class="item _panel instances">
-				<div class="icon"><i class="ph-planet ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
-					</div>
-					<div class="label">Instances</div>
-				</div>
-			</div>
-			<div class="item _panel online">
-				<div class="icon"><i class="ph-broadcast ph-bold ph-xl"></i></div>
-				<div class="body">
-					<div class="value">
-						<MkNumber :value="onlineUsersCount" style="margin-right: 0.5em;"/>
-					</div>
-					<div class="label">Online</div>
-				</div>
-			</div>
-		</div>
-	</Transition>
-</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import MkNumber from '@/components/MkNumber.vue';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import MkNumberDiff from "@/components/MkNumberDiff.vue";
+import MkNumber from "@/components/MkNumber.vue";
+import { i18n } from "@/i18n";
 
 let stats: any = $ref(null);
 let usersComparedToThePrevDay = $ref<number>();
@@ -63,18 +94,20 @@ let fetching = $ref(true);
 
 onMounted(async () => {
 	const [_stats, _onlineUsersCount] = await Promise.all([
-		os.api('stats', {}),
-		os.api('get-online-users-count').then(res => res.count),
+		os.api("stats", {}),
+		os.api("get-online-users-count").then((res) => res.count),
 	]);
 	stats = _stats;
 	onlineUsersCount = _onlineUsersCount;
 
-	os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
-		usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
+	os.apiGet("charts/users", { limit: 2, span: "day" }).then((chart) => {
+		usersComparedToThePrevDay =
+			stats.originalUsersCount - chart.local.total[1];
 	});
 
-	os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
-		notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
+	os.apiGet("charts/notes", { limit: 2, span: "day" }).then((chart) => {
+		notesComparedToThePrevDay =
+			stats.originalNotesCount - chart.local.total[1];
 	});
 
 	fetching = false;
@@ -128,7 +161,7 @@ onMounted(async () => {
 			&.emojis {
 				> .icon {
 					background: #ea9d3422;
-						color: #f6c177;
+					color: #f6c177;
 				}
 			}
 
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index 52f676e72..89370cee8 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -1,19 +1,26 @@
 <template>
-<MkA :class="[$style.root]" :to="`/user-info/${user.id}`">
-	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/>
-	<div class="body">
-		<span class="name"><MkUserName class="name" :user="user"/></span>
-		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
-	</div>
-	<MkMiniChart v-if="chart" class="chart" :src="chart.inc"/>
-</MkA>
+	<MkA :class="[$style.root]" :to="`/user-info/${user.id}`">
+		<MkAvatar
+			class="avatar"
+			:user="user"
+			:disable-link="true"
+			:show-indicator="true"
+		/>
+		<div class="body">
+			<span class="name"><MkUserName class="name" :user="user" /></span>
+			<span class="sub"
+				><span class="acct _monospace">@{{ acct(user) }}</span></span
+			>
+		</div>
+		<MkMiniChart v-if="chart" class="chart" :src="chart.inc" />
+	</MkA>
 </template>
 
 <script lang="ts" setup>
-import * as misskey from 'calckey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { acct } from '@/filters/user';
+import * as misskey from "calckey-js";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { acct } from "@/filters/user";
 
 const props = defineProps<{
 	user: misskey.entities.User;
@@ -21,7 +28,11 @@ const props = defineProps<{
 
 let chart = $ref(null);
 
-os.apiGet('charts/user/notes', { userId: props.user.id, limit: 16, span: 'day' }).then(res => {
+os.apiGet("charts/user/notes", {
+	userId: props.user.id,
+	limit: 16,
+	span: "day",
+}).then((res) => {
 	chart = res;
 });
 </script>
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index 5390d9d8c..9017eb2a2 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -1,30 +1,38 @@
 <template>
-<div :class="$style.root">
-	<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="users">
-			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
-				<MkUserCardMini :user="user"/>
-			</MkA>
-		</div>
-	</Transition>
-</div>
+	<div :class="$style.root">
+		<Transition
+			:name="$store.state.animation ? '_transition_zoom' : ''"
+			mode="out-in"
+		>
+			<MkLoading v-if="fetching" />
+			<div v-else class="users">
+				<MkA
+					v-for="(user, i) in newUsers"
+					:key="user.id"
+					:to="`/user-info/${user.id}`"
+					class="user"
+				>
+					<MkUserCardMini :user="user" />
+				</MkA>
+			</div>
+		</Transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import { onMounted, onUnmounted, ref } from "vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
 let newUsers = $ref(null);
 let fetching = $ref(true);
 
 const fetch = async () => {
-	const _newUsers = await os.api('admin/show-users', {
+	const _newUsers = await os.api("admin/show-users", {
 		limit: 5,
-		sort: '+createdAt',
-		origin: 'local',
+		sort: "+createdAt",
+		origin: "local",
 	});
 	newUsers = _newUsers;
 	fetching = false;
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index f5873d080..4c3391ce4 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -3,77 +3,83 @@
 		<div ref="rootEl" class="edbbcaef">
 			<MkFolder class="item">
 				<template #header>Stats</template>
-				<XStats/>
+				<XStats />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Active users</template>
-				<XActiveUsers/>
+				<XActiveUsers />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Heatmap</template>
-				<XHeatmap/>
+				<XHeatmap />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Moderators</template>
-				<XModerators/>
+				<XModerators />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Federation</template>
-				<XFederation/>
+				<XFederation />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Instances</template>
-				<XInstances/>
+				<XInstances />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Fediverse Requests</template>
-				<XApRequests/>
+				<XApRequests />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>New users</template>
-				<XUsers/>
+				<XUsers />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Deliver queue</template>
-				<XQueue domain="deliver"/>
+				<XQueue domain="deliver" />
 			</MkFolder>
 
 			<MkFolder class="item">
 				<template #header>Inbox queue</template>
-				<XQueue domain="inbox"/>
+				<XQueue domain="inbox" />
 			</MkFolder>
 		</div>
 	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import XFederation from './overview.federation.vue';
-import XInstances from './overview.instances.vue';
-import XQueue from './overview.queue.vue';
-import XApRequests from './overview.ap-requests.vue';
-import XUsers from './overview.users.vue';
-import XActiveUsers from './overview.active-users.vue';
-import XStats from './overview.stats.vue';
-import XModerators from './overview.moderators.vue';
-import XHeatmap from './overview.heatmap.vue';
-import MkTagCloud from '@/components/MkTagCloud.vue';
-import { version, url } from '@/config';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { defaultStore } from '@/store';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import MkFolder from '@/components/MkFolder.vue';
+import {
+	markRaw,
+	version as vueVersion,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+} from "vue";
+import XFederation from "./overview.federation.vue";
+import XInstances from "./overview.instances.vue";
+import XQueue from "./overview.queue.vue";
+import XApRequests from "./overview.ap-requests.vue";
+import XUsers from "./overview.users.vue";
+import XActiveUsers from "./overview.active-users.vue";
+import XStats from "./overview.stats.vue";
+import XModerators from "./overview.moderators.vue";
+import XHeatmap from "./overview.heatmap.vue";
+import MkTagCloud from "@/components/MkTagCloud.vue";
+import { version, url } from "@/config";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import MkFolder from "@/components/MkFolder.vue";
 
 const rootEl = $shallowRef<HTMLElement>();
 let serverInfo: any = $ref(null);
@@ -85,10 +91,10 @@ let federationSubActive = $ref<number | null>(null);
 let federationSubActiveDiff = $ref<number | null>(null);
 let newUsers = $ref(null);
 let activeInstances = $shallowRef(null);
-const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
+const queueStatsConnection = markRaw(stream.useChannel("queueStats"));
 const now = new Date();
 const filesPagination = {
-	endpoint: 'admin/drive/files' as const,
+	endpoint: "admin/drive/files" as const,
 	limit: 9,
 	noPaging: true,
 };
@@ -108,52 +114,68 @@ onMounted(async () => {
 	magicGrid.listen();
 	*/
 
-	os.apiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
+	os.apiGet("charts/federation", { limit: 2, span: "day" }).then((chart) => {
 		federationPubActive = chart.pubActive[0];
 		federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
 		federationSubActive = chart.subActive[0];
 		federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
 	});
 
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+	os.apiGet("federation/stats", { limit: 10 }).then((res) => {
+		topSubInstancesForPie = res.topSubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followersCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowersCount,
+				},
+			]);
+		topPubInstancesForPie = res.topPubInstances
+			.map((x) => ({
+				name: x.host,
+				color: x.themeColor,
+				value: x.followingCount,
+				onClick: () => {
+					os.pageWindow(`/instance-info/${x.host}`);
+				},
+			}))
+			.concat([
+				{
+					name: "(other)",
+					color: "#80808080",
+					value: res.otherFollowingCount,
+				},
+			]);
 	});
 
-	os.api('admin/server-info').then(serverInfoResponse => {
+	os.api("admin/server-info").then((serverInfoResponse) => {
 		serverInfo = serverInfoResponse;
 	});
 
-	os.api('admin/show-users', {
+	os.api("admin/show-users", {
 		limit: 5,
-		sort: '+createdAt',
-	}).then(res => {
+		sort: "+createdAt",
+	}).then((res) => {
 		newUsers = res;
 	});
 
-	os.api('federation/instances', {
-		sort: '+latestRequestReceivedAt',
+	os.api("federation/instances", {
+		sort: "+latestRequestReceivedAt",
 		limit: 25,
-	}).then(res => {
+	}).then((res) => {
 		activeInstances = res;
 	});
 
 	nextTick(() => {
-		queueStatsConnection.send('requestLog', {
+		queueStatsConnection.send("requestLog", {
 			id: Math.random().toString().substr(2, 8),
 			length: 100,
 		});
@@ -170,7 +192,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.dashboard,
-	icon: 'ph-gauge ph-bold ph-lg',
+	icon: "ph-gauge ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/promotions.vue b/packages/client/src/pages/admin/promotions.vue
index 97d5f0e2f..50e764627 100644
--- a/packages/client/src/pages/admin/promotions.vue
+++ b/packages/client/src/pages/admin/promotions.vue
@@ -1,58 +1,82 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900">
-		<div class="uqshojas">
-			<div v-for="ad in ads" class="_panel _formRoot ad">
-				<MkAd v-if="ad.url" :specify="ad"/>
-				<MkInput v-model="ad.url" type="url" class="_formBlock">
-					<template #label>URL</template>
-				</MkInput>
-				<MkInput v-model="ad.imageUrl" class="_formBlock">
-					<template #label>{{ i18n.ts.imageUrl }}</template>
-				</MkInput>
-				<FormRadios v-model="ad.place" class="_formBlock">
-					<template #label>Form</template>
-					<option value="widget">widget</option>
-					<option value="inline">inline</option>
-					<option value="inline-big">inline-big</option>
-				</FormRadios>
-				<FormSplit>
-					<MkInput :disabled="ad.place === 'widget'" v-model="ad.ratio" type="number">
-						<template #label>{{ i18n.ts.ratio }}</template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900">
+			<div class="uqshojas">
+				<div v-for="ad in ads" class="_panel _formRoot ad">
+					<MkAd v-if="ad.url" :specify="ad" />
+					<MkInput v-model="ad.url" type="url" class="_formBlock">
+						<template #label>URL</template>
 					</MkInput>
-					<MkInput v-model="ad.expiresAt" type="date">
-						<template #label>{{ i18n.ts.expiration }}</template>
+					<MkInput v-model="ad.imageUrl" class="_formBlock">
+						<template #label>{{ i18n.ts.imageUrl }}</template>
 					</MkInput>
-				</FormSplit>
-				<MkTextarea v-model="ad.memo" class="_formBlock">
-					<template #label>{{ i18n.ts.memo }}</template>
-				</MkTextarea>
-				<div class="buttons _formBlock">
-					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-					<MkButton class="button" inline danger @click="remove(ad)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.remove }}</MkButton>
+					<FormRadios v-model="ad.place" class="_formBlock">
+						<template #label>Form</template>
+						<option value="widget">widget</option>
+						<option value="inline">inline</option>
+						<option value="inline-big">inline-big</option>
+					</FormRadios>
+					<FormSplit>
+						<MkInput
+							:disabled="ad.place === 'widget'"
+							v-model="ad.ratio"
+							type="number"
+						>
+							<template #label>{{ i18n.ts.ratio }}</template>
+						</MkInput>
+						<MkInput v-model="ad.expiresAt" type="date">
+							<template #label>{{ i18n.ts.expiration }}</template>
+						</MkInput>
+					</FormSplit>
+					<MkTextarea v-model="ad.memo" class="_formBlock">
+						<template #label>{{ i18n.ts.memo }}</template>
+					</MkTextarea>
+					<div class="buttons _formBlock">
+						<MkButton
+							class="button"
+							inline
+							primary
+							style="margin-right: 12px"
+							@click="save(ad)"
+							><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+							{{ i18n.ts.save }}</MkButton
+						>
+						<MkButton
+							class="button"
+							inline
+							danger
+							@click="remove(ad)"
+							><i class="ph-trash ph-bold ph-lg"></i>
+							{{ i18n.ts.remove }}</MkButton
+						>
+					</div>
 				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { formatDateTimeString } from '@/scripts/format-time-string';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormSplit from "@/components/form/split.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { formatDateTimeString } from "@/scripts/format-time-string";
 
 let ads: any[] = $ref([]);
 
-os.api('admin/ad/list').then(adsResponse => {
+os.api("admin/ad/list").then((adsResponse) => {
 	ads = adsResponse;
 	// The date format should be changed to yyyy-MM-dd in order to be properly displayed
 	for (let i in ads) {
@@ -61,14 +85,17 @@ os.api('admin/ad/list').then(adsResponse => {
 });
 
 function add() {
-	const tomorrow = formatDateTimeString(new Date(new Date().setDate(new Date().getDate() + 1)), 'yyyy-MM-dd');
+	const tomorrow = formatDateTimeString(
+		new Date(new Date().setDate(new Date().getDate() + 1)),
+		"yyyy-MM-dd"
+	);
 	ads.unshift({
 		id: null,
-		memo: '',
-		place: 'widget',
-		priority: 'middle',
+		memo: "",
+		place: "widget",
+		priority: "middle",
 		ratio: 1,
-		url: '',
+		url: "",
 		imageUrl: null,
 		expiresAt: tomorrow,
 	});
@@ -76,12 +103,12 @@ function add() {
 
 function remove(ad) {
 	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: ad.url }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: ad.url }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		ads = ads.filter(x => x !== ad);
-		os.apiWithDialog('admin/ad/delete', {
+		ads = ads.filter((x) => x !== ad);
+		os.apiWithDialog("admin/ad/delete", {
 			id: ad.id,
 		});
 	});
@@ -89,30 +116,32 @@ function remove(ad) {
 
 function save(ad) {
 	if (ad.id == null) {
-		os.apiWithDialog('admin/ad/create', {
+		os.apiWithDialog("admin/ad/create", {
 			...ad,
 			expiresAt: new Date(ad.expiresAt).getTime(),
 		});
 	} else {
-		os.apiWithDialog('admin/ad/update', {
+		os.apiWithDialog("admin/ad/update", {
 			...ad,
 			expiresAt: new Date(ad.expiresAt).getTime(),
 		});
 	}
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.add,
-	handler: add,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.add,
+		handler: add,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.ads,
-	icon: 'ph-money ph-bold ph-lg',
+	icon: "ph-money ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index aeec71d37..87b3c684e 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -1,44 +1,60 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<MkInfo class="_formBlock">{{ i18n.ts.proxyAccountDescription }}</MkInfo>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.proxyAccount }}</template>
-				<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
-			</MkKeyValue>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<MkInfo class="_formBlock">{{
+					i18n.ts.proxyAccountDescription
+				}}</MkInfo>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.proxyAccount }}</template>
+					<template #value>{{
+						proxyAccount
+							? `@${proxyAccount.username}`
+							: i18n.ts.none
+					}}</template>
+				</MkKeyValue>
 
-			<FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</FormButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+				<FormButton
+					primary
+					class="_formBlock"
+					@click="chooseProxyAccount"
+					>{{ i18n.ts.selectAccount }}</FormButton
+				>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let proxyAccount: any = $ref(null);
 let proxyAccountId: any = $ref(null);
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	proxyAccountId = meta.proxyAccountId;
 	if (proxyAccountId) {
-		proxyAccount = await os.api('users/show', { userId: proxyAccountId });
+		proxyAccount = await os.api("users/show", { userId: proxyAccountId });
 	}
 }
 
 function chooseProxyAccount() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		proxyAccount = user;
 		proxyAccountId = user.id;
 		save();
@@ -46,7 +62,7 @@ function chooseProxyAccount() {
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		proxyAccountId: proxyAccountId,
 	}).then(() => {
 		fetchInstance();
@@ -59,6 +75,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.proxyAccount,
-	icon: 'ph-ghost ph-bold ph-lg',
+	icon: "ph-ghost ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
index ba6f6505c..bb7d3c1a1 100644
--- a/packages/client/src/pages/admin/queue.chart.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.chart.vue
@@ -1,9 +1,9 @@
 <template>
-<canvas ref="chartEl"></canvas>
+	<canvas ref="chartEl"></canvas>
 </template>
 
 <script lang="ts" setup>
-import { watch, onMounted, onUnmounted, ref } from 'vue';
+import { watch, onMounted, onUnmounted, ref } from "vue";
 import {
 	Chart,
 	ArcElement,
@@ -20,11 +20,11 @@ import {
 	Tooltip,
 	SubTitle,
 	Filler,
-} from 'chart.js';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+} from "chart.js";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
 Chart.register(
 	ArcElement,
@@ -40,7 +40,7 @@ Chart.register(
 	Title,
 	Tooltip,
 	SubTitle,
-	Filler,
+	Filler
 );
 
 const props = defineProps<{
@@ -57,10 +57,14 @@ const alpha = (hex, a) => {
 
 const chartEl = ref<HTMLCanvasElement>(null);
 
-const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+const gridColor = defaultStore.state.darkMode
+	? "rgba(255, 255, 255, 0.1)"
+	: "rgba(0, 0, 0, 0.1)";
 
 // フォントカラー
-Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+Chart.defaults.color = getComputedStyle(
+	document.documentElement
+).getPropertyValue("--fg");
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
@@ -69,7 +73,7 @@ let chartInstance: Chart;
 function setData(values) {
 	if (chartInstance == null) return;
 	for (const value of values) {
-		chartInstance.data.labels.push('');
+		chartInstance.data.labels.push("");
 		chartInstance.data.datasets[0].data.push(value);
 		if (chartInstance.data.datasets[0].data.length > 200) {
 			chartInstance.data.labels.shift();
@@ -81,7 +85,7 @@ function setData(values) {
 
 function pushData(value) {
 	if (chartInstance == null) return;
-	chartInstance.data.labels.push('');
+	chartInstance.data.labels.push("");
 	chartInstance.data.datasets[0].data.push(value);
 	if (chartInstance.data.datasets[0].data.length > 200) {
 		chartInstance.data.labels.shift();
@@ -91,34 +95,44 @@ function pushData(value) {
 }
 
 const label =
-	props.type === 'process' ? 'Process' :
-	props.type === 'active' ? 'Active' :
-	props.type === 'delayed' ? 'Delayed' :
-	props.type === 'waiting' ? 'Waiting' :
-	'?' as never;
+	props.type === "process"
+		? "Process"
+		: props.type === "active"
+		? "Active"
+		: props.type === "delayed"
+		? "Delayed"
+		: props.type === "waiting"
+		? "Waiting"
+		: ("?" as never);
 
 const color =
-	props.type === 'process' ? '#9ccfd8' :
-	props.type === 'active' ? '#31748f' :
-	props.type === 'delayed' ? '#eb6f92' :
-	props.type === 'waiting' ? '#f6c177' :
-	'?' as never;
+	props.type === "process"
+		? "#9ccfd8"
+		: props.type === "active"
+		? "#31748f"
+		: props.type === "delayed"
+		? "#eb6f92"
+		: props.type === "waiting"
+		? "#f6c177"
+		: ("?" as never);
 
 onMounted(() => {
 	chartInstance = new Chart(chartEl.value, {
-		type: 'line',
+		type: "line",
 		data: {
 			labels: [],
-			datasets: [{
-				label: label,
-				pointRadius: 0,
-				tension: 0.3,
-				borderWidth: 2,
-				borderJoinStyle: 'round',
-				borderColor: color,
-				backgroundColor: alpha(color, 0.1),
-				data: [],
-			}],
+			datasets: [
+				{
+					label: label,
+					pointRadius: 0,
+					tension: 0.3,
+					borderWidth: 2,
+					borderJoinStyle: "round",
+					borderColor: color,
+					backgroundColor: alpha(color, 0.1),
+					data: [],
+				},
+			],
 		},
 		options: {
 			aspectRatio: 2.5,
@@ -135,7 +149,7 @@ onMounted(() => {
 					grid: {
 						display: true,
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 					ticks: {
 						display: false,
@@ -146,7 +160,7 @@ onMounted(() => {
 					min: 0,
 					grid: {
 						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
+						borderColor: "rgb(0, 0, 0, 0)",
 					},
 				},
 			},
@@ -159,7 +173,7 @@ onMounted(() => {
 				},
 				tooltip: {
 					enabled: false,
-					mode: 'index',
+					mode: "index",
 					animation: {
 						duration: 0,
 					},
@@ -176,6 +190,4 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/admin/queue.chart.vue b/packages/client/src/pages/admin/queue.chart.vue
index 186a22c43..e9d0f0655 100644
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.vue
@@ -1,52 +1,66 @@
 <template>
-<div class="pumxzjhg">
-	<div class="_table status">
-		<div class="_row">
-			<div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
-			<div class="_cell"><div class="_label">Active</div>{{ number(active) }}</div>
-			<div class="_cell"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
-			<div class="_cell"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
-		</div>
-	</div>
-	<div class="charts">
-		<div class="chart">
-			<div class="title">Process</div>
-			<XChart ref="chartProcess" type="process"/>
-		</div>
-		<div class="chart">
-			<div class="title">Active</div>
-			<XChart ref="chartActive" type="active"/>
-		</div>
-		<div class="chart">
-			<div class="title">Delayed</div>
-			<XChart ref="chartDelayed" type="delayed"/>
-		</div>
-		<div class="chart">
-			<div class="title">Waiting</div>
-			<XChart ref="chartWaiting" type="waiting"/>
-		</div>
-	</div>
-	<div class="jobs">
-		<div v-if="jobs.length > 0">
-			<div v-for="job in jobs" :key="job[0]">
-				<span>{{ job[0] }}</span>
-				<span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
+	<div class="pumxzjhg">
+		<div class="_table status">
+			<div class="_row">
+				<div class="_cell">
+					<div class="_label">Process</div>
+					{{ number(activeSincePrevTick) }}
+				</div>
+				<div class="_cell">
+					<div class="_label">Active</div>
+					{{ number(active) }}
+				</div>
+				<div class="_cell">
+					<div class="_label">Waiting</div>
+					{{ number(waiting) }}
+				</div>
+				<div class="_cell">
+					<div class="_label">Delayed</div>
+					{{ number(delayed) }}
+				</div>
 			</div>
 		</div>
-		<span v-else style="opacity: 0.5;">{{ i18n.ts.noJobs }}</span>
+		<div class="charts">
+			<div class="chart">
+				<div class="title">Process</div>
+				<XChart ref="chartProcess" type="process" />
+			</div>
+			<div class="chart">
+				<div class="title">Active</div>
+				<XChart ref="chartActive" type="active" />
+			</div>
+			<div class="chart">
+				<div class="title">Delayed</div>
+				<XChart ref="chartDelayed" type="delayed" />
+			</div>
+			<div class="chart">
+				<div class="title">Waiting</div>
+				<XChart ref="chartWaiting" type="waiting" />
+			</div>
+		</div>
+		<div class="jobs">
+			<div v-if="jobs.length > 0">
+				<div v-for="job in jobs" :key="job[0]">
+					<span>{{ job[0] }}</span>
+					<span style="margin-left: 8px; opacity: 0.7"
+						>({{ number(job[1]) }} jobs)</span
+					>
+				</div>
+			</div>
+			<span v-else style="opacity: 0.5">{{ i18n.ts.noJobs }}</span>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, ref } from 'vue';
-import XChart from './queue.chart.chart.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { markRaw, onMounted, onUnmounted, ref } from "vue";
+import XChart from "./queue.chart.chart.vue";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const connection = markRaw(stream.useChannel('queueStats'));
+const connection = markRaw(stream.useChannel("queueStats"));
 
 const activeSincePrevTick = ref(0);
 const active = ref(0);
@@ -94,21 +108,28 @@ const onStatsLog = (statsLog) => {
 };
 
 onMounted(() => {
-	os.api(props.domain === 'inbox' ? 'admin/queue/inbox-delayed' : props.domain === 'deliver' ? 'admin/queue/deliver-delayed' : null, {}).then(result => {
+	os.api(
+		props.domain === "inbox"
+			? "admin/queue/inbox-delayed"
+			: props.domain === "deliver"
+			? "admin/queue/deliver-delayed"
+			: null,
+		{}
+	).then((result) => {
 		jobs.value = result;
 	});
 
-	connection.on('stats', onStats);
-	connection.on('statsLog', onStatsLog);
-	connection.send('requestLog', {
+	connection.on("stats", onStats);
+	connection.on("statsLog", onStatsLog);
+	connection.send("requestLog", {
 		id: Math.random().toString().substr(2, 8),
 		length: 200,
 	});
 });
 
 onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
+	connection.off("stats", onStats);
+	connection.off("statsLog", onStatsLog);
 	connection.dispose();
 });
 </script>
@@ -144,6 +165,5 @@ onUnmounted(() => {
 		background: var(--panel);
 		border-radius: var(--radius);
 	}
-
 }
 </style>
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index f4c74b706..b43da1f0a 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -1,57 +1,68 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<XQueue v-if="tab === 'deliver'" domain="deliver"/>
-		<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<XQueue v-if="tab === 'deliver'" domain="deliver" />
+			<XQueue v-else-if="tab === 'inbox'" domain="inbox" />
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import XQueue from './queue.chart.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import * as config from '@/config';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { markRaw, onMounted, onBeforeUnmount, nextTick } from "vue";
+import XQueue from "./queue.chart.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import * as config from "@/config";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let tab = $ref('deliver');
+let tab = $ref("deliver");
 
 function clear() {
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		title: i18n.ts.clearQueueConfirmTitle,
 		text: i18n.ts.clearQueueConfirmText,
 	}).then(({ canceled }) => {
 		if (canceled) return;
 
-		os.apiWithDialog('admin/queue/clear');
+		os.apiWithDialog("admin/queue/clear");
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-arrow-square-up-right ph-bold ph-lg',
-	text: i18n.ts.dashboard,
-	handler: () => {
-		window.open(config.url + '/queue', '_blank');
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-arrow-square-up-right ph-bold ph-lg",
+		text: i18n.ts.dashboard,
+		handler: () => {
+			window.open(config.url + "/queue", "_blank");
+		},
 	},
-}]);
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'deliver',
-	title: 'Deliver',
-	icon: 'ph-upload ph-bold ph-lg',
-}, {
-	key: 'inbox',
-	title: 'Inbox',
-	icon: 'ph-download ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "deliver",
+		title: "Deliver",
+		icon: "ph-upload ph-bold ph-lg",
+	},
+	{
+		key: "inbox",
+		title: "Inbox",
+		icon: "ph-download ph-bold ph-lg",
+	},
+]);
 
 definePageMetadata({
 	title: i18n.ts.jobQueue,
-	icon: 'ph-clipboard-text ph-bold ph-lg',
+	icon: "ph-clipboard-text ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 232faefac..2565ac16c 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -1,82 +1,114 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel _block" style="padding: 16px;">
-			<div>{{ relay.inbox }}</div>
-			<div class="status">
-				<i v-if="relay.status === 'accepted'" class="ph-check ph-bold ph-lg icon accepted"></i>
-				<i v-else-if="relay.status === 'rejected'" class="ph-prohibit ph-bold ph-lg icon rejected"></i>
-				<i v-else class="ph-clock ph-bold ph-lg icon requesting"></i>
-				<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<div
+				v-for="relay in relays"
+				:key="relay.inbox"
+				class="relaycxt _panel _block"
+				style="padding: 16px"
+			>
+				<div>{{ relay.inbox }}</div>
+				<div class="status">
+					<i
+						v-if="relay.status === 'accepted'"
+						class="ph-check ph-bold ph-lg icon accepted"
+					></i>
+					<i
+						v-else-if="relay.status === 'rejected'"
+						class="ph-prohibit ph-bold ph-lg icon rejected"
+					></i>
+					<i
+						v-else
+						class="ph-clock ph-bold ph-lg icon requesting"
+					></i>
+					<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
+				</div>
+				<MkButton
+					class="button"
+					inline
+					danger
+					@click="remove(relay.inbox)"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.remove }}</MkButton
+				>
 			</div>
-			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.remove }}</MkButton>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let relays: any[] = $ref([]);
 
 async function addRelay() {
 	const { canceled, result: inbox } = await os.inputText({
 		title: i18n.ts.addRelay,
-		type: 'url',
+		type: "url",
 		placeholder: i18n.ts.inboxUrl,
 	});
 	if (canceled) return;
-	os.api('admin/relays/add', {
+	os.api("admin/relays/add", {
 		inbox,
-	}).then((relay: any) => {
-		refresh();
-	}).catch((err: any) => {
-		os.alert({
-			type: 'error',
-			text: err.message || err,
+	})
+		.then((relay: any) => {
+			refresh();
+		})
+		.catch((err: any) => {
+			os.alert({
+				type: "error",
+				text: err.message || err,
+			});
 		});
-	});
 }
 
 function remove(inbox: string) {
-	os.api('admin/relays/remove', {
+	os.api("admin/relays/remove", {
 		inbox,
-	}).then(() => {
-		refresh();
-	}).catch((err: any) => {
-		os.alert({
-			type: 'error',
-			text: err.message || err,
+	})
+		.then(() => {
+			refresh();
+		})
+		.catch((err: any) => {
+			os.alert({
+				type: "error",
+				text: err.message || err,
+			});
 		});
-	});
 }
 
 function refresh() {
-	os.api('admin/relays/list').then((relayList: any) => {
+	os.api("admin/relays/list").then((relayList: any) => {
 		relays = relayList;
 	});
 }
 
 refresh();
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addRelay,
-	handler: addRelay,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addRelay,
+		handler: addRelay,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.relays,
-	icon: 'ph-flow-arrow ph-bold ph-lg',
+	icon: "ph-flow-arrow ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 60079c8eb..b93c80361 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -1,146 +1,280 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div class="_formRoot">
-				<FormFolder class="_formBlock">
-					<template #icon><i class="ph-robot ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.botProtection }}</template>
-					<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
-					<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
-					<template v-else #suffix>{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</template>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div class="_formRoot">
+					<FormFolder class="_formBlock">
+						<template #icon
+							><i class="ph-robot ph-bold ph-lg"></i
+						></template>
+						<template #label>{{ i18n.ts.botProtection }}</template>
+						<template v-if="enableHcaptcha" #suffix
+							>hCaptcha</template
+						>
+						<template v-else-if="enableRecaptcha" #suffix
+							>reCAPTCHA</template
+						>
+						<template v-else #suffix
+							>{{ i18n.ts.none }} ({{
+								i18n.ts.notRecommended
+							}})</template
+						>
 
-					<XBotProtection/>
-				</FormFolder>
+						<XBotProtection />
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #icon><i class="ph-eye-slash ph-bold ph-lg"></i></template>
-					<template #label>{{ i18n.ts.sensitiveMediaDetection }}</template>
-					<template v-if="sensitiveMediaDetection === 'all'" #suffix>{{ i18n.ts.all }}</template>
-					<template v-else-if="sensitiveMediaDetection === 'local'" #suffix>{{ i18n.ts.localOnly }}</template>
-					<template v-else-if="sensitiveMediaDetection === 'remote'" #suffix>{{ i18n.ts.remoteOnly }}</template>
-					<template v-else #suffix>{{ i18n.ts.none }}</template>
+					<FormFolder class="_formBlock">
+						<template #icon
+							><i class="ph-eye-slash ph-bold ph-lg"></i
+						></template>
+						<template #label>{{
+							i18n.ts.sensitiveMediaDetection
+						}}</template>
+						<template
+							v-if="sensitiveMediaDetection === 'all'"
+							#suffix
+							>{{ i18n.ts.all }}</template
+						>
+						<template
+							v-else-if="sensitiveMediaDetection === 'local'"
+							#suffix
+							>{{ i18n.ts.localOnly }}</template
+						>
+						<template
+							v-else-if="sensitiveMediaDetection === 'remote'"
+							#suffix
+							>{{ i18n.ts.remoteOnly }}</template
+						>
+						<template v-else #suffix>{{ i18n.ts.none }}</template>
 
-					<div class="_formRoot">
-						<span class="_formBlock">{{ i18n.ts._sensitiveMediaDetection.description }}</span>
+						<div class="_formRoot">
+							<span class="_formBlock">{{
+								i18n.ts._sensitiveMediaDetection.description
+							}}</span>
 
-						<FormRadios v-model="sensitiveMediaDetection" class="_formBlock">
-							<option value="none">{{ i18n.ts.none }}</option>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.localOnly }}</option>
-							<option value="remote">{{ i18n.ts.remoteOnly }}</option>
-						</FormRadios>
+							<FormRadios
+								v-model="sensitiveMediaDetection"
+								class="_formBlock"
+							>
+								<option value="none">{{ i18n.ts.none }}</option>
+								<option value="all">{{ i18n.ts.all }}</option>
+								<option value="local">
+									{{ i18n.ts.localOnly }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remoteOnly }}
+								</option>
+							</FormRadios>
 
-						<FormRange v-model="sensitiveMediaDetectionSensitivity" :min="0" :max="4" :step="1" :text-converter="(v) => `${v + 1}`" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.sensitivity }}</template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.sensitivityDescription }}</template>
-						</FormRange>
+							<FormRange
+								v-model="sensitiveMediaDetectionSensitivity"
+								:min="0"
+								:max="4"
+								:step="1"
+								:text-converter="(v) => `${v + 1}`"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts._sensitiveMediaDetection.sensitivity
+								}}</template>
+								<template #caption>{{
+									i18n.ts._sensitiveMediaDetection
+										.sensitivityDescription
+								}}</template>
+							</FormRange>
 
-						<FormSwitch v-model="enableSensitiveMediaDetectionForVideos" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.analyzeVideos }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.analyzeVideosDescription }}</template>
-						</FormSwitch>
+							<FormSwitch
+								v-model="enableSensitiveMediaDetectionForVideos"
+								class="_formBlock"
+							>
+								<template #label
+									>{{
+										i18n.ts._sensitiveMediaDetection
+											.analyzeVideos
+									}}<span class="_beta">{{
+										i18n.ts.beta
+									}}</span></template
+								>
+								<template #caption>{{
+									i18n.ts._sensitiveMediaDetection
+										.analyzeVideosDescription
+								}}</template>
+							</FormSwitch>
 
-						<FormSwitch v-model="setSensitiveFlagAutomatically" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomatically }} ({{ i18n.ts.notRecommended }})</template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomaticallyDescription }}</template>
-						</FormSwitch>
+							<FormSwitch
+								v-model="setSensitiveFlagAutomatically"
+								class="_formBlock"
+							>
+								<template #label
+									>{{
+										i18n.ts._sensitiveMediaDetection
+											.setSensitiveFlagAutomatically
+									}}
+									({{ i18n.ts.notRecommended }})</template
+								>
+								<template #caption>{{
+									i18n.ts._sensitiveMediaDetection
+										.setSensitiveFlagAutomaticallyDescription
+								}}</template>
+							</FormSwitch>
 
-						<!-- 現状 false positive が多すぎて実用に耐えない
+							<!-- 現状 false positive が多すぎて実用に耐えない
 						<FormSwitch v-model="disallowUploadWhenPredictedAsPorn" class="_formBlock">
 							<template #label>{{ i18n.ts._sensitiveMediaDetection.disallowUploadWhenPredictedAsPorn }}</template>
 						</FormSwitch>
 						-->
 
-						<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-					</div>
-				</FormFolder>
+							<FormButton primary class="_formBlock" @click="save"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</FormButton
+							>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>Active Email Validation</template>
-					<template v-if="enableActiveEmailValidation" #suffix>Enabled</template>
-					<template v-else #suffix>Disabled</template>
+					<FormFolder class="_formBlock">
+						<template #label>Active Email Validation</template>
+						<template v-if="enableActiveEmailValidation" #suffix
+							>Enabled</template
+						>
+						<template v-else #suffix>Disabled</template>
 
-					<div class="_formRoot">
-						<span class="_formBlock">{{ i18n.ts.activeEmailValidationDescription }}</span>
-						<FormSwitch v-model="enableActiveEmailValidation" class="_formBlock" @update:modelValue="save">
-							<template #label>Enable</template>
-						</FormSwitch>
-					</div>
-				</FormFolder>
+						<div class="_formRoot">
+							<span class="_formBlock">{{
+								i18n.ts.activeEmailValidationDescription
+							}}</span>
+							<FormSwitch
+								v-model="enableActiveEmailValidation"
+								class="_formBlock"
+								@update:modelValue="save"
+							>
+								<template #label>Enable</template>
+							</FormSwitch>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>Log IP address</template>
-					<template v-if="enableIpLogging" #suffix>Enabled</template>
-					<template v-else #suffix>Disabled</template>
+					<FormFolder class="_formBlock">
+						<template #label>Log IP address</template>
+						<template v-if="enableIpLogging" #suffix
+							>Enabled</template
+						>
+						<template v-else #suffix>Disabled</template>
 
-					<div class="_formRoot">
-						<FormSwitch v-model="enableIpLogging" class="_formBlock" @update:modelValue="save">
-							<template #label>Enable</template>
-						</FormSwitch>
-					</div>
-				</FormFolder>
+						<div class="_formRoot">
+							<FormSwitch
+								v-model="enableIpLogging"
+								class="_formBlock"
+								@update:modelValue="save"
+							>
+								<template #label>Enable</template>
+							</FormSwitch>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>Summaly Proxy</template>
+					<FormFolder class="_formBlock">
+						<template #label>Summaly Proxy</template>
 
-					<div class="_formRoot">
-						<FormInput v-model="summalyProxy" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>Summaly Proxy URL</template>
-						</FormInput>
+						<div class="_formRoot">
+							<FormInput
+								v-model="summalyProxy"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>Summaly Proxy URL</template>
+							</FormInput>
 
-						<FormButton primary class="_formBlock" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-					</div>
-				</FormFolder>
+							<FormButton primary class="_formBlock" @click="save"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</FormButton
+							>
+						</div>
+					</FormFolder>
 
-				<FormFolder class="_formBlock">
-					<template #label>{{ i18n.ts.instanceSecurity }}</template>
+					<FormFolder class="_formBlock">
+						<template #label>{{
+							i18n.ts.instanceSecurity
+						}}</template>
 
-					<div class="_formRoot">
-						<FormSwitch v-if="!privateMode" v-model="secureMode">
-							<template #label>{{ i18n.ts.secureMode }}</template>
-							<template #caption>{{ i18n.ts.secureModeInfo }}</template>
-						</FormSwitch>
-						<FormSwitch v-model="privateMode">
-							<template #label>{{ i18n.ts.privateMode }}</template>
-							<template #caption>{{ i18n.ts.privateModeInfo }}</template>
-						</FormSwitch>
-						<FormTextarea v-if="privateMode" v-model="allowedHosts">
-							<template #label>{{ i18n.ts.allowedInstances }}</template>
-							<template #caption>{{ i18n.ts.allowedInstancesDescription }}</template>
-						</FormTextarea>
-						<FormButton primary class="_formBlock" @click="saveInstance"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-					</div>
-				</FormFolder>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+						<div class="_formRoot">
+							<FormSwitch
+								v-if="!privateMode"
+								v-model="secureMode"
+							>
+								<template #label>{{
+									i18n.ts.secureMode
+								}}</template>
+								<template #caption>{{
+									i18n.ts.secureModeInfo
+								}}</template>
+							</FormSwitch>
+							<FormSwitch v-model="privateMode">
+								<template #label>{{
+									i18n.ts.privateMode
+								}}</template>
+								<template #caption>{{
+									i18n.ts.privateModeInfo
+								}}</template>
+							</FormSwitch>
+							<FormTextarea
+								v-if="privateMode"
+								v-model="allowedHosts"
+							>
+								<template #label>{{
+									i18n.ts.allowedInstances
+								}}</template>
+								<template #caption>{{
+									i18n.ts.allowedInstancesDescription
+								}}</template>
+							</FormTextarea>
+							<FormButton
+								primary
+								class="_formBlock"
+								@click="saveInstance"
+								><i
+									class="ph-floppy-disk-back ph-bold ph-lg"
+								></i>
+								{{ i18n.ts.save }}</FormButton
+							>
+						</div>
+					</FormFolder>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XBotProtection from './bot-protection.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormRange from '@/components/form/range.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import XBotProtection from "./bot-protection.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormRange from "@/components/form/range.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let summalyProxy: string = $ref('');
+let summalyProxy: string = $ref("");
 let enableHcaptcha: boolean = $ref(false);
 let enableRecaptcha: boolean = $ref(false);
-let sensitiveMediaDetection: string = $ref('none');
+let sensitiveMediaDetection: string = $ref("none");
 let sensitiveMediaDetectionSensitivity: number = $ref(0);
 let setSensitiveFlagAutomatically: boolean = $ref(false);
 let enableSensitiveMediaDetectionForVideos: boolean = $ref(false);
@@ -149,41 +283,53 @@ let enableActiveEmailValidation: boolean = $ref(false);
 
 let secureMode: boolean = $ref(false);
 let privateMode: boolean = $ref(false);
-let allowedHosts: string = $ref('');
+let allowedHosts: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	summalyProxy = meta.summalyProxy;
 	enableHcaptcha = meta.enableHcaptcha;
 	enableRecaptcha = meta.enableRecaptcha;
 	sensitiveMediaDetection = meta.sensitiveMediaDetection;
 	sensitiveMediaDetectionSensitivity =
-		meta.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0 :
-		meta.sensitiveMediaDetectionSensitivity === 'low' ? 1 :
-		meta.sensitiveMediaDetectionSensitivity === 'medium' ? 2 :
-		meta.sensitiveMediaDetectionSensitivity === 'high' ? 3 :
-		meta.sensitiveMediaDetectionSensitivity === 'veryHigh' ? 4 : 0;
+		meta.sensitiveMediaDetectionSensitivity === "veryLow"
+			? 0
+			: meta.sensitiveMediaDetectionSensitivity === "low"
+			? 1
+			: meta.sensitiveMediaDetectionSensitivity === "medium"
+			? 2
+			: meta.sensitiveMediaDetectionSensitivity === "high"
+			? 3
+			: meta.sensitiveMediaDetectionSensitivity === "veryHigh"
+			? 4
+			: 0;
 	setSensitiveFlagAutomatically = meta.setSensitiveFlagAutomatically;
-	enableSensitiveMediaDetectionForVideos = meta.enableSensitiveMediaDetectionForVideos;
+	enableSensitiveMediaDetectionForVideos =
+		meta.enableSensitiveMediaDetectionForVideos;
 	enableIpLogging = meta.enableIpLogging;
 	enableActiveEmailValidation = meta.enableActiveEmailValidation;
 
 	secureMode = meta.secureMode;
 	privateMode = meta.privateMode;
-	allowedHosts = meta.allowedHosts.join('\n');
+	allowedHosts = meta.allowedHosts.join("\n");
 }
 
 function save() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		summalyProxy,
 		sensitiveMediaDetection,
 		sensitiveMediaDetectionSensitivity:
-			sensitiveMediaDetectionSensitivity === 0 ? 'veryLow' :
-			sensitiveMediaDetectionSensitivity === 1 ? 'low' :
-			sensitiveMediaDetectionSensitivity === 2 ? 'medium' :
-			sensitiveMediaDetectionSensitivity === 3 ? 'high' :
-			sensitiveMediaDetectionSensitivity === 4 ? 'veryHigh' :
-			0,
+			sensitiveMediaDetectionSensitivity === 0
+				? "veryLow"
+				: sensitiveMediaDetectionSensitivity === 1
+				? "low"
+				: sensitiveMediaDetectionSensitivity === 2
+				? "medium"
+				: sensitiveMediaDetectionSensitivity === 3
+				? "high"
+				: sensitiveMediaDetectionSensitivity === 4
+				? "veryHigh"
+				: 0,
 		setSensitiveFlagAutomatically,
 		enableSensitiveMediaDetectionForVideos,
 		enableIpLogging,
@@ -194,10 +340,10 @@ function save() {
 }
 
 function saveInstance() {
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		secureMode,
 		privateMode,
-		allowedHosts: allowedHosts.split('\n'),
+		allowedHosts: allowedHosts.split("\n"),
 	}).then(() => {
 		fetchInstance();
 	});
@@ -209,6 +355,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index 9716b4f9b..5349df805 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -1,211 +1,397 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-			<FormSuspense :p="init">
-				<div class="_formRoot">
-					<FormInput v-model="name" class="_formBlock">
-						<template #label>{{ i18n.ts.instanceName }}</template>
-					</FormInput>
-
-					<FormTextarea v-model="description" class="_formBlock">
-						<template #label>{{ i18n.ts.instanceDescription }}</template>
-					</FormTextarea>
-
-					<FormInput v-model="tosUrl" class="_formBlock">
-						<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-						<template #label>{{ i18n.ts.tosUrl }}</template>
-					</FormInput>
-
-					<FormSplit :min-width="300">
-						<FormInput v-model="maintainerName" class="_formBlock">
-							<template #label>{{ i18n.ts.maintainerName }}</template>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
+				<FormSuspense :p="init">
+					<div class="_formRoot">
+						<FormInput v-model="name" class="_formBlock">
+							<template #label>{{
+								i18n.ts.instanceName
+							}}</template>
 						</FormInput>
 
-						<FormInput v-model="maintainerEmail" type="email" class="_formBlock">
-							<template #prefix><i class="ph-envelope-simple-open ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.maintainerEmail }}</template>
-						</FormInput>
-					</FormSplit>
-
-					<FormTextarea v-model="pinnedUsers" class="_formBlock">
-						<template #label>{{ i18n.ts.pinnedUsers }}</template>
-						<template #caption>{{ i18n.ts.pinnedUsersDescription }}</template>
-					</FormTextarea>
-
-					<FormSection>
-						<FormSwitch v-model="enableRegistration" class="_formBlock">
-							<template #label>{{ i18n.ts.enableRegistration }}</template>
-						</FormSwitch>
-
-						<FormSwitch v-model="emailRequiredForSignup" class="_formBlock">
-							<template #label>{{ i18n.ts.emailRequiredForSignup }}</template>
-						</FormSwitch>
-					</FormSection>
-
-					<FormSection>
-						<FormSwitch v-model="enableRecommendedTimeline" class="_formBlock">{{ i18n.ts.enableRecommendedTimeline }}</FormSwitch>
-						<FormTextarea v-model="recommendedInstances" class="_formBlock">
-							<template #label>{{ i18n.ts.recommendedInstances }}</template>
-							<template #caption>{{ i18n.ts.recommendedInstancesDescription }}</template>
-						</FormTextarea>
-					</FormSection>
-
-					<FormSection>
-						<FormSwitch v-model="enableLocalTimeline" class="_formBlock">{{ i18n.ts.enableLocalTimeline }}</FormSwitch>
-						<FormSwitch v-model="enableGlobalTimeline" class="_formBlock">{{ i18n.ts.enableGlobalTimeline }}</FormSwitch>
-						<FormInfo class="_formBlock">{{ i18n.ts.disablingTimelinesInfo }}</FormInfo>
-					</FormSection>
-
-					<FormSection>
-						<MkRadios v-model="defaultReaction" class="_formBlock">
-							<template #label>{{ i18n.ts.defaultReaction }}</template>
-							<option value="⭐">
-								<MkEmoji class="emoji" emoji="⭐" style="height: 1.7em"/>
-							</option>
-							<option value="👍">
-								<MkEmoji class="emoji" emoji="👍" style="height: 1.7em"/>
-							</option>
-							<option value="❤️">
-								<MkEmoji class="emoji" emoji="❤️" style="height: 1.7em"/>
-							</option>
-							<option value="custom">
-								<FormInput v-model="defaultReactionCustom" class="_formBlock" :small="true" :placeholder="`:custom:`" style="margin: 0 0 !important"/>
-							</option>
-						</MkRadios>
-					</FormSection>
-
-					<FormSection>
-						<template #label>{{ i18n.ts.theme }}</template>
-
-						<FormInput v-model="iconUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.iconUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="bannerUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.bannerUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="logoImageUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.logoImageUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="backgroundImageUrl" class="_formBlock">
-							<template #prefix><i class="ph-link-simple ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="themeColor" class="_formBlock">
-							<template #prefix><i class="ph-palette ph-bold ph-lg"></i></template>
-							<template #label>{{ i18n.ts.themeColor }}</template>
-							<template #caption>#RRGGBB</template>
-						</FormInput>
-
-						<FormTextarea v-model="defaultLightTheme" class="_formBlock">
-							<template #label>{{ i18n.ts.instanceDefaultLightTheme }}</template>
-							<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
+						<FormTextarea v-model="description" class="_formBlock">
+							<template #label>{{
+								i18n.ts.instanceDescription
+							}}</template>
 						</FormTextarea>
 
-						<FormTextarea v-model="defaultDarkTheme" class="_formBlock">
-							<template #label>{{ i18n.ts.instanceDefaultDarkTheme }}</template>
-							<template #caption>{{ i18n.ts.instanceDefaultThemeDescription }}</template>
-						</FormTextarea>
-					</FormSection>
+						<FormInput v-model="tosUrl" class="_formBlock">
+							<template #prefix
+								><i class="ph-link-simple ph-bold ph-lg"></i
+							></template>
+							<template #label>{{ i18n.ts.tosUrl }}</template>
+						</FormInput>
 
-					<FormSection>
-						<template #label>{{ i18n.ts.splash }}</template>
-
-						<FormTextarea v-model="customMOTD" class="_formBlock">
-							<template #label>{{ i18n.ts.customMOTD }}</template>
-							<template #caption>{{ i18n.ts.customMOTDDescription }}</template>
-						</FormTextarea>
-
-						<FormTextarea v-model="customSplashIcons" class="_formBlock">
-							<template #label>{{ i18n.ts.customSplashIcons }}</template>
-							<template #caption>{{ i18n.ts.customSplashIconsDescription }}</template>
-						</FormTextarea>
-					</FormSection>
-
-					<FormSection>
-						<template #label>{{ i18n.ts.files }}</template>
-
-						<FormSwitch v-model="cacheRemoteFiles" class="_formBlock">
-							<template #label>{{ i18n.ts.cacheRemoteFiles }}</template>
-							<template #caption>{{ i18n.ts.cacheRemoteFilesDescription }}</template>
-						</FormSwitch>
-
-						<FormSplit :min-width="280">
-							<FormInput v-model="localDriveCapacityMb" type="number" class="_formBlock">
-								<template #label>{{ i18n.ts.driveCapacityPerLocalAccount }}</template>
-								<template #suffix>MB</template>
-								<template #caption>{{ i18n.ts.inMb }}</template>
+						<FormSplit :min-width="300">
+							<FormInput
+								v-model="maintainerName"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.maintainerName
+								}}</template>
 							</FormInput>
 
-							<FormInput v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles" class="_formBlock">
-								<template #label>{{ i18n.ts.driveCapacityPerRemoteAccount }}</template>
-								<template #suffix>MB</template>
-								<template #caption>{{ i18n.ts.inMb }}</template>
+							<FormInput
+								v-model="maintainerEmail"
+								type="email"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i
+										class="ph-envelope-simple-open ph-bold ph-lg"
+									></i
+								></template>
+								<template #label>{{
+									i18n.ts.maintainerEmail
+								}}</template>
 							</FormInput>
 						</FormSplit>
-					</FormSection>
 
-					<FormSection>
-						<template #label>ServiceWorker</template>
+						<FormTextarea v-model="pinnedUsers" class="_formBlock">
+							<template #label>{{
+								i18n.ts.pinnedUsers
+							}}</template>
+							<template #caption>{{
+								i18n.ts.pinnedUsersDescription
+							}}</template>
+						</FormTextarea>
 
-						<FormSwitch v-model="enableServiceWorker" class="_formBlock">
-							<template #label>{{ i18n.ts.enableServiceworker }}</template>
-							<template #caption>{{ i18n.ts.serviceworkerInfo }}</template>
-						</FormSwitch>
+						<FormSection>
+							<FormSwitch
+								v-model="enableRegistration"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.enableRegistration
+								}}</template>
+							</FormSwitch>
 
-						<template v-if="enableServiceWorker">
-							<FormInput v-model="swPublicKey" class="_formBlock">
-								<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-								<template #label>Public key</template>
+							<FormSwitch
+								v-model="emailRequiredForSignup"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.emailRequiredForSignup
+								}}</template>
+							</FormSwitch>
+						</FormSection>
+
+						<FormSection>
+							<FormSwitch
+								v-model="enableRecommendedTimeline"
+								class="_formBlock"
+								>{{
+									i18n.ts.enableRecommendedTimeline
+								}}</FormSwitch
+							>
+							<FormTextarea
+								v-model="recommendedInstances"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.recommendedInstances
+								}}</template>
+								<template #caption>{{
+									i18n.ts.recommendedInstancesDescription
+								}}</template>
+							</FormTextarea>
+						</FormSection>
+
+						<FormSection>
+							<FormSwitch
+								v-model="enableLocalTimeline"
+								class="_formBlock"
+								>{{ i18n.ts.enableLocalTimeline }}</FormSwitch
+							>
+							<FormSwitch
+								v-model="enableGlobalTimeline"
+								class="_formBlock"
+								>{{ i18n.ts.enableGlobalTimeline }}</FormSwitch
+							>
+							<FormInfo class="_formBlock">{{
+								i18n.ts.disablingTimelinesInfo
+							}}</FormInfo>
+						</FormSection>
+
+						<FormSection>
+							<MkRadios
+								v-model="defaultReaction"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.defaultReaction
+								}}</template>
+								<option value="⭐">
+									<MkEmoji
+										class="emoji"
+										emoji="⭐"
+										style="height: 1.7em"
+									/>
+								</option>
+								<option value="👍">
+									<MkEmoji
+										class="emoji"
+										emoji="👍"
+										style="height: 1.7em"
+									/>
+								</option>
+								<option value="❤️">
+									<MkEmoji
+										class="emoji"
+										emoji="❤️"
+										style="height: 1.7em"
+									/>
+								</option>
+								<option value="custom">
+									<FormInput
+										v-model="defaultReactionCustom"
+										class="_formBlock"
+										:small="true"
+										:placeholder="`:custom:`"
+										style="margin: 0 0 !important"
+									/>
+								</option>
+							</MkRadios>
+						</FormSection>
+
+						<FormSection>
+							<template #label>{{ i18n.ts.theme }}</template>
+
+							<FormInput v-model="iconUrl" class="_formBlock">
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.iconUrl
+								}}</template>
 							</FormInput>
 
-							<FormInput v-model="swPrivateKey" class="_formBlock">
-								<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-								<template #label>Private key</template>
+							<FormInput v-model="bannerUrl" class="_formBlock">
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.bannerUrl
+								}}</template>
 							</FormInput>
-						</template>
-					</FormSection>
 
-					<FormSection>
-						<template #label>DeepL Translation</template>
+							<FormInput
+								v-model="logoImageUrl"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.logoImageUrl
+								}}</template>
+							</FormInput>
 
-						<FormInput v-model="deeplAuthKey" class="_formBlock">
-							<template #prefix><i class="ph-key ph-bold ph-lg"></i></template>
-							<template #label>DeepL Auth Key</template>
-						</FormInput>
-						<FormSwitch v-model="deeplIsPro" class="_formBlock">
-							<template #label>Pro account</template>
-						</FormSwitch>
-					</FormSection>
-				</div>
-			</FormSuspense>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+							<FormInput
+								v-model="backgroundImageUrl"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-link-simple ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.backgroundImageUrl
+								}}</template>
+							</FormInput>
+
+							<FormInput v-model="themeColor" class="_formBlock">
+								<template #prefix
+									><i class="ph-palette ph-bold ph-lg"></i
+								></template>
+								<template #label>{{
+									i18n.ts.themeColor
+								}}</template>
+								<template #caption>#RRGGBB</template>
+							</FormInput>
+
+							<FormTextarea
+								v-model="defaultLightTheme"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.instanceDefaultLightTheme
+								}}</template>
+								<template #caption>{{
+									i18n.ts.instanceDefaultThemeDescription
+								}}</template>
+							</FormTextarea>
+
+							<FormTextarea
+								v-model="defaultDarkTheme"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.instanceDefaultDarkTheme
+								}}</template>
+								<template #caption>{{
+									i18n.ts.instanceDefaultThemeDescription
+								}}</template>
+							</FormTextarea>
+						</FormSection>
+
+						<FormSection>
+							<template #label>{{ i18n.ts.splash }}</template>
+
+							<FormTextarea
+								v-model="customMOTD"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.customMOTD
+								}}</template>
+								<template #caption>{{
+									i18n.ts.customMOTDDescription
+								}}</template>
+							</FormTextarea>
+
+							<FormTextarea
+								v-model="customSplashIcons"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.customSplashIcons
+								}}</template>
+								<template #caption>{{
+									i18n.ts.customSplashIconsDescription
+								}}</template>
+							</FormTextarea>
+						</FormSection>
+
+						<FormSection>
+							<template #label>{{ i18n.ts.files }}</template>
+
+							<FormSwitch
+								v-model="cacheRemoteFiles"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.cacheRemoteFiles
+								}}</template>
+								<template #caption>{{
+									i18n.ts.cacheRemoteFilesDescription
+								}}</template>
+							</FormSwitch>
+
+							<FormSplit :min-width="280">
+								<FormInput
+									v-model="localDriveCapacityMb"
+									type="number"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.driveCapacityPerLocalAccount
+									}}</template>
+									<template #suffix>MB</template>
+									<template #caption>{{
+										i18n.ts.inMb
+									}}</template>
+								</FormInput>
+
+								<FormInput
+									v-model="remoteDriveCapacityMb"
+									type="number"
+									:disabled="!cacheRemoteFiles"
+									class="_formBlock"
+								>
+									<template #label>{{
+										i18n.ts.driveCapacityPerRemoteAccount
+									}}</template>
+									<template #suffix>MB</template>
+									<template #caption>{{
+										i18n.ts.inMb
+									}}</template>
+								</FormInput>
+							</FormSplit>
+						</FormSection>
+
+						<FormSection>
+							<template #label>ServiceWorker</template>
+
+							<FormSwitch
+								v-model="enableServiceWorker"
+								class="_formBlock"
+							>
+								<template #label>{{
+									i18n.ts.enableServiceworker
+								}}</template>
+								<template #caption>{{
+									i18n.ts.serviceworkerInfo
+								}}</template>
+							</FormSwitch>
+
+							<template v-if="enableServiceWorker">
+								<FormInput
+									v-model="swPublicKey"
+									class="_formBlock"
+								>
+									<template #prefix
+										><i class="ph-key ph-bold ph-lg"></i
+									></template>
+									<template #label>Public key</template>
+								</FormInput>
+
+								<FormInput
+									v-model="swPrivateKey"
+									class="_formBlock"
+								>
+									<template #prefix
+										><i class="ph-key ph-bold ph-lg"></i
+									></template>
+									<template #label>Private key</template>
+								</FormInput>
+							</template>
+						</FormSection>
+
+						<FormSection>
+							<template #label>DeepL Translation</template>
+
+							<FormInput
+								v-model="deeplAuthKey"
+								class="_formBlock"
+							>
+								<template #prefix
+									><i class="ph-key ph-bold ph-lg"></i
+								></template>
+								<template #label>DeepL Auth Key</template>
+							</FormInput>
+							<FormSwitch v-model="deeplIsPro" class="_formBlock">
+								<template #label>Pro account</template>
+							</FormSwitch>
+						</FormSection>
+					</div>
+				</FormSuspense>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkRadios from '@/components/form/radios.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import MkRadios from "@/components/form/radios.vue";
+import * as os from "@/os";
+import { fetchInstance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let name: string | null = $ref(null);
 let description: string | null = $ref(null);
@@ -222,10 +408,10 @@ let defaultDarkTheme: any = $ref(null);
 let enableLocalTimeline: boolean = $ref(false);
 let enableGlobalTimeline: boolean = $ref(false);
 let enableRecommendedTimeline: boolean = $ref(false);
-let pinnedUsers: string = $ref('');
-let customMOTD: string = $ref('');
-let recommendedInstances: string = $ref('');
-let customSplashIcons: string = $ref('');
+let pinnedUsers: string = $ref("");
+let customMOTD: string = $ref("");
+let recommendedInstances: string = $ref("");
+let customSplashIcons: string = $ref("");
 let cacheRemoteFiles: boolean = $ref(false);
 let localDriveCapacityMb: any = $ref(0);
 let remoteDriveCapacityMb: any = $ref(0);
@@ -234,13 +420,13 @@ let emailRequiredForSignup: boolean = $ref(false);
 let enableServiceWorker: boolean = $ref(false);
 let swPublicKey: any = $ref(null);
 let swPrivateKey: any = $ref(null);
-let deeplAuthKey: string = $ref('');
+let deeplAuthKey: string = $ref("");
 let deeplIsPro: boolean = $ref(false);
-let defaultReaction: string = $ref('');
-let defaultReactionCustom: string = $ref('');
+let defaultReaction: string = $ref("");
+let defaultReactionCustom: string = $ref("");
 
 async function init() {
-	const meta = await os.api('admin/meta');
+	const meta = await os.api("admin/meta");
 	name = meta.name;
 	description = meta.description;
 	tosUrl = meta.tosUrl;
@@ -256,10 +442,10 @@ async function init() {
 	enableLocalTimeline = !meta.disableLocalTimeline;
 	enableGlobalTimeline = !meta.disableGlobalTimeline;
 	enableRecommendedTimeline = !meta.disableRecommendedTimeline;
-	pinnedUsers = meta.pinnedUsers.join('\n');
-	customMOTD = meta.customMOTD.join('\n');
-	customSplashIcons = meta.customSplashIcons.join('\n');
-	recommendedInstances = meta.recommendedInstances.join('\n');
+	pinnedUsers = meta.pinnedUsers.join("\n");
+	customMOTD = meta.customMOTD.join("\n");
+	customSplashIcons = meta.customSplashIcons.join("\n");
+	recommendedInstances = meta.recommendedInstances.join("\n");
 	cacheRemoteFiles = meta.cacheRemoteFiles;
 	localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
 	remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
@@ -270,15 +456,19 @@ async function init() {
 	swPrivateKey = meta.swPrivateKey;
 	deeplAuthKey = meta.deeplAuthKey;
 	deeplIsPro = meta.deeplIsPro;
-	defaultReaction = ['⭐', '👍', '❤️'].includes(meta.defaultReaction) ? meta.defaultReaction : 'custom';
-	defaultReactionCustom = ['⭐', '👍', '❤️'].includes(meta.defaultReaction) ? '' : meta.defaultReaction;
+	defaultReaction = ["⭐", "👍", "❤️"].includes(meta.defaultReaction)
+		? meta.defaultReaction
+		: "custom";
+	defaultReactionCustom = ["⭐", "👍", "❤️"].includes(meta.defaultReaction)
+		? ""
+		: meta.defaultReaction;
 }
 
 function save() {
-	if (defaultReaction === 'custom') {
+	if (defaultReaction === "custom") {
 		defaultReaction = defaultReactionCustom;
 	}
-	os.apiWithDialog('admin/update-meta', {
+	os.apiWithDialog("admin/update-meta", {
 		name,
 		description,
 		tosUrl,
@@ -286,18 +476,18 @@ function save() {
 		bannerUrl,
 		logoImageUrl,
 		backgroundImageUrl,
-		themeColor: themeColor === '' ? null : themeColor,
-		defaultLightTheme: defaultLightTheme === '' ? null : defaultLightTheme,
-		defaultDarkTheme: defaultDarkTheme === '' ? null : defaultDarkTheme,
+		themeColor: themeColor === "" ? null : themeColor,
+		defaultLightTheme: defaultLightTheme === "" ? null : defaultLightTheme,
+		defaultDarkTheme: defaultDarkTheme === "" ? null : defaultDarkTheme,
 		maintainerName,
 		maintainerEmail,
 		disableLocalTimeline: !enableLocalTimeline,
 		disableGlobalTimeline: !enableGlobalTimeline,
 		disableRecommendedTimeline: !enableRecommendedTimeline,
-		pinnedUsers: pinnedUsers.split('\n'),
-		customMOTD: customMOTD.split('\n'),
-		customSplashIcons: customSplashIcons.split('\n'),
-		recommendedInstances: recommendedInstances.split('\n'),
+		pinnedUsers: pinnedUsers.split("\n"),
+		customMOTD: customMOTD.split("\n"),
+		customSplashIcons: customSplashIcons.split("\n"),
+		recommendedInstances: recommendedInstances.split("\n"),
 		cacheRemoteFiles,
 		localDriveCapacityMb: parseInt(localDriveCapacityMb, 10),
 		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb, 10),
@@ -314,17 +504,19 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.save,
-	handler: save,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.save,
+		handler: save,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 96da80fcf..cf956c684 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -1,77 +1,146 @@
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-		<MkSpacer :content-max="900">
-			<div class="lknzcolw">
-				<div class="users">
-					<div class="inputs">
-						<MkSelect v-model="sort" style="flex: 1;">
-							<template #label>{{ i18n.ts.sort }}</template>
-							<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
-							<option value="-updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.descendingOrder }})</option>
-						</MkSelect>
-						<MkSelect v-model="state" style="flex: 1;">
-							<template #label>{{ i18n.ts.state }}</template>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="available">{{ i18n.ts.normal }}</option>
-							<option value="admin">{{ i18n.ts.administrator }}</option>
-							<option value="moderator">{{ i18n.ts.moderator }}</option>
-							<option value="silenced">{{ i18n.ts.silence }}</option>
-							<option value="suspended">{{ i18n.ts.suspend }}</option>
-						</MkSelect>
-						<MkSelect v-model="origin" style="flex: 1;">
-							<template #label>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-					</div>
-					<div class="inputs">
-						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:modelValue="$refs.users.reload()">
-							<template #prefix>@</template>
-							<template #label>{{ i18n.ts.username }}</template>
-						</MkInput>
-						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:modelValue="$refs.users.reload()">
-							<template #prefix>@</template>
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</div>
+	<div>
+		<MkStickyContainer>
+			<template #header
+				><MkPageHeader
+					:actions="headerActions"
+					:tabs="headerTabs"
+					:display-back-button="true"
+			/></template>
+			<MkSpacer :content-max="900">
+				<div class="lknzcolw">
+					<div class="users">
+						<div class="inputs">
+							<MkSelect v-model="sort" style="flex: 1">
+								<template #label>{{ i18n.ts.sort }}</template>
+								<option value="-createdAt">
+									{{ i18n.ts.registeredDate }} ({{
+										i18n.ts.ascendingOrder
+									}})
+								</option>
+								<option value="+createdAt">
+									{{ i18n.ts.registeredDate }} ({{
+										i18n.ts.descendingOrder
+									}})
+								</option>
+								<option value="-updatedAt">
+									{{ i18n.ts.lastUsed }} ({{
+										i18n.ts.ascendingOrder
+									}})
+								</option>
+								<option value="+updatedAt">
+									{{ i18n.ts.lastUsed }} ({{
+										i18n.ts.descendingOrder
+									}})
+								</option>
+							</MkSelect>
+							<MkSelect v-model="state" style="flex: 1">
+								<template #label>{{ i18n.ts.state }}</template>
+								<option value="all">{{ i18n.ts.all }}</option>
+								<option value="available">
+									{{ i18n.ts.normal }}
+								</option>
+								<option value="admin">
+									{{ i18n.ts.administrator }}
+								</option>
+								<option value="moderator">
+									{{ i18n.ts.moderator }}
+								</option>
+								<option value="silenced">
+									{{ i18n.ts.silence }}
+								</option>
+								<option value="suspended">
+									{{ i18n.ts.suspend }}
+								</option>
+							</MkSelect>
+							<MkSelect v-model="origin" style="flex: 1">
+								<template #label>{{
+									i18n.ts.instance
+								}}</template>
+								<option value="combined">
+									{{ i18n.ts.all }}
+								</option>
+								<option value="local">
+									{{ i18n.ts.local }}
+								</option>
+								<option value="remote">
+									{{ i18n.ts.remote }}
+								</option>
+							</MkSelect>
+						</div>
+						<div class="inputs">
+							<MkInput
+								v-model="searchUsername"
+								style="flex: 1"
+								type="text"
+								:spellcheck="false"
+								@update:modelValue="$refs.users.reload()"
+							>
+								<template #prefix>@</template>
+								<template #label>{{
+									i18n.ts.username
+								}}</template>
+							</MkInput>
+							<MkInput
+								v-model="searchHost"
+								style="flex: 1"
+								type="text"
+								:spellcheck="false"
+								:disabled="pagination.params.origin === 'local'"
+								@update:modelValue="$refs.users.reload()"
+							>
+								<template #prefix>@</template>
+								<template #label>{{ i18n.ts.host }}</template>
+							</MkInput>
+						</div>
 
-					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
-						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
-							<MkUserCardMini :user="user"/>
-						</MkA>
-					</MkPagination>
+						<MkPagination
+							v-slot="{ items }"
+							ref="paginationComponent"
+							:pagination="pagination"
+							class="users"
+						>
+							<MkA
+								v-for="user in items"
+								:key="user.id"
+								v-tooltip.mfm="
+									`Last posted: ${new Date(
+										user.updatedAt
+									).toLocaleString()}`
+								"
+								class="user"
+								:to="`/user-info/${user.id}`"
+							>
+								<MkUserCardMini :user="user" />
+							</MkA>
+						</MkPagination>
+					</div>
 				</div>
-			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { lookupUser } from '@/scripts/lookup-user';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import { computed } from "vue";
+import MkInput from "@/components/form/input.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { lookupUser } from "@/scripts/lookup-user";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
 let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
 
-let sort = $ref('+createdAt');
-let state = $ref('all');
-let origin = $ref('local');
-let searchUsername = $ref('');
-let searchHost = $ref('');
+let sort = $ref("+createdAt");
+let state = $ref("all");
+let origin = $ref("local");
+let searchUsername = $ref("");
+let searchHost = $ref("");
 const pagination = {
-	endpoint: 'admin/show-users' as const,
+	endpoint: "admin/show-users" as const,
 	limit: 10,
 	params: computed(() => ({
 		sort: sort,
@@ -84,7 +153,7 @@ const pagination = {
 };
 
 function searchUser() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		show(user);
 	});
 }
@@ -97,14 +166,14 @@ async function addUser() {
 
 	const { canceled: canceled2, result: password } = await os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled2) return;
 
-	os.apiWithDialog('admin/accounts/create', {
+	os.apiWithDialog("admin/accounts/create", {
 		username: username,
 		password: password,
-	}).then(res => {
+	}).then((res) => {
 		paginationComponent.reload();
 	});
 }
@@ -113,34 +182,39 @@ function show(user) {
 	os.pageWindow(`/user-info/${user.id}`);
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	text: i18n.ts.search,
-	handler: searchUser,
-}, {
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addUser,
-	handler: addUser,
-}, {
-	asFullButton: true,
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	text: i18n.ts.lookup,
-	handler: lookupUser,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		text: i18n.ts.search,
+		handler: searchUser,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addUser,
+		handler: addUser,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		text: i18n.ts.lookup,
+		handler: lookupUser,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.users,
-	icon: 'ph-users ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.users,
+		icon: "ph-users ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
 .lknzcolw {
 	> .users {
-
 		> .inputs {
 			display: flex;
 			margin-bottom: 16px;
@@ -153,7 +227,7 @@ definePageMetadata(computed(() => ({
 				}
 			}
 		}
-	
+
 		> .users {
 			margin-top: var(--margin);
 			display: grid;
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 452ab8014..ba48f3bd0 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -1,33 +1,52 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
-			<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
-				<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
-				<div class="_content">
-					<Mfm :text="announcement.text"/>
-					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-				</div>
-				<div v-if="$i && !announcement.isRead" class="_footer">
-					<MkButton primary @click="read(items, announcement, i)"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.gotIt }}</MkButton>
-				</div>
-			</section>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
+			<MkPagination
+				v-slot="{ items }"
+				:pagination="pagination"
+				class="ruryvtyk _content"
+			>
+				<section
+					v-for="(announcement, i) in items"
+					:key="announcement.id"
+					class="_card announcement"
+				>
+					<div class="_title">
+						<span v-if="$i && !announcement.isRead">🆕 </span
+						>{{ announcement.title }}
+					</div>
+					<div class="_content">
+						<Mfm :text="announcement.text" />
+						<img
+							v-if="announcement.imageUrl"
+							:src="announcement.imageUrl"
+						/>
+					</div>
+					<div v-if="$i && !announcement.isRead" class="_footer">
+						<MkButton primary @click="read(items, announcement, i)"
+							><i class="ph-check ph-bold ph-lg"></i>
+							{{ i18n.ts.gotIt }}</MkButton
+						>
+					</div>
+				</section>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'announcements' as const,
+	endpoint: "announcements" as const,
 	limit: 10,
 };
 
@@ -37,7 +56,7 @@ function read(items, announcement, i) {
 		...announcement,
 		isRead: true,
 	};
-	os.api('i/read-announcement', { announcementId: announcement.id });
+	os.api("i/read-announcement", { announcementId: announcement.id });
 }
 
 const headerActions = $computed(() => []);
@@ -46,7 +65,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: 'ph-megaphone-simple ph-bold ph-lg',
+	icon: "ph-megaphone-simple ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index f883645e3..c33eed75f 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -1,30 +1,42 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="antennaId"
-				class="tl"
-				src="antenna"
-				:antenna="antennaId"
-				:sound="true"
-				@queue="queueUpdated"
-			/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div
+			ref="rootEl"
+			v-hotkey.global="keymap"
+			v-size="{ min: [800] }"
+			class="tqmomfks"
+		>
+			<div v-if="queue > 0" class="new">
+				<button class="_buttonPrimary" @click="top()">
+					{{ i18n.ts.newNoteRecived }}
+				</button>
+			</div>
+			<div class="tl _block">
+				<XTimeline
+					ref="tlEl"
+					:key="antennaId"
+					class="tl"
+					src="antenna"
+					:antenna="antennaId"
+					:sound="true"
+					@queue="queueUpdated"
+				/>
+			</div>
 		</div>
-	</div>
-</MkStickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, inject, watch } from "vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import { scroll } from "@/scripts/scroll";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -37,7 +49,7 @@ let queue = $ref(0);
 let rootEl = $ref<HTMLElement>();
 let tlEl = $ref<InstanceType<typeof XTimeline>>();
 const keymap = $computed(() => ({
-	't': focus,
+	t: focus,
 }));
 
 function queueUpdated(q) {
@@ -62,15 +74,15 @@ function settings() {
 }
 
 async function doMarkRead() {
-	const ret = await os.api('antennas/mark-read', {
+	const ret = await os.api("antennas/mark-read", {
 		antennaId: props.antennaId,
 	});
 
 	if (ret) {
-		return true
+		return true;
 	}
 
-	throw new Error('Failed to mark all as read');
+	throw new Error("Failed to mark all as read");
 }
 
 async function markRead() {
@@ -81,32 +93,50 @@ function focus() {
 	tlEl.focus();
 }
 
-watch(() => props.antennaId, async () => {
-	antenna = await os.api('antennas/show', {
-		antennaId: props.antennaId,
-	});
-}, { immediate: true });
+watch(
+	() => props.antennaId,
+	async () => {
+		antenna = await os.api("antennas/show", {
+			antennaId: props.antennaId,
+		});
+	},
+	{ immediate: true }
+);
 
-const headerActions = $computed(() => antenna ? [{
-	icon: 'ph-calendar-blank ph-bold ph-lg',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}, {
-	icon: 'ph-gear-six ph-bold ph-lg',
-	text: i18n.ts.settings,
-	handler: settings,
-}, {
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.markAllAsRead,
-	handler: markRead,
-}] : []);
+const headerActions = $computed(() =>
+	antenna
+		? [
+				{
+					icon: "ph-calendar-blank ph-bold ph-lg",
+					text: i18n.ts.jumpToSpecifiedDate,
+					handler: timetravel,
+				},
+				{
+					icon: "ph-gear-six ph-bold ph-lg",
+					text: i18n.ts.settings,
+					handler: settings,
+				},
+				{
+					icon: "ph-check ph-bold ph-lg",
+					text: i18n.ts.markAllAsRead,
+					handler: markRead,
+				},
+		  ]
+		: []
+);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => antenna ? {
-	title: antenna.name,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		antenna
+			? {
+					title: antenna.name,
+					icon: "ph-flying-saucer ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index 0707f52f9..214145d37 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -1,78 +1,109 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="_formRoot">
-			<div class="_formBlock">
-				<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:modelValue="onEndpointChange()">
-					<template #label>Endpoint</template>
-				</MkInput>
-				<MkTextarea v-model="body" class="_formBlock" code>
-					<template #label>Params (JSON or JSON5)</template>
-				</MkTextarea>
-				<MkSwitch v-model="withCredential" class="_formBlock">
-					With credential
-				</MkSwitch>
-				<MkButton class="_formBlock" primary :disabled="sending" @click="send">
-					<template v-if="sending"><MkEllipsis/></template>
-					<template v-else><i class="ph-paper-plane-tilt ph-bold ph-lg"></i> Send</template>
-				</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="_formRoot">
+				<div class="_formBlock">
+					<MkInput
+						v-model="endpoint"
+						:datalist="endpoints"
+						class="_formBlock"
+						@update:modelValue="onEndpointChange()"
+					>
+						<template #label>Endpoint</template>
+					</MkInput>
+					<MkTextarea v-model="body" class="_formBlock" code>
+						<template #label>Params (JSON or JSON5)</template>
+					</MkTextarea>
+					<MkSwitch v-model="withCredential" class="_formBlock">
+						With credential
+					</MkSwitch>
+					<MkButton
+						class="_formBlock"
+						primary
+						:disabled="sending"
+						@click="send"
+					>
+						<template v-if="sending"><MkEllipsis /></template>
+						<template v-else
+							><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+							Send</template
+						>
+					</MkButton>
+				</div>
+				<div v-if="res" class="_formBlock">
+					<MkTextarea v-model="res" code readonly tall>
+						<template #label>Response</template>
+					</MkTextarea>
+				</div>
 			</div>
-			<div v-if="res" class="_formBlock">
-				<MkTextarea v-model="res" code readonly tall>
-					<template #label>Response</template>
-				</MkTextarea>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import JSON5 from 'json5';
-import { Endpoints } from 'calckey-js';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import JSON5 from "json5";
+import { Endpoints } from "calckey-js";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const body = ref('{}');
-const endpoint = ref('');
+const body = ref("{}");
+const endpoint = ref("");
 const endpoints = ref<any[]>([]);
 const sending = ref(false);
-const res = ref('');
+const res = ref("");
 const withCredential = ref(true);
 
-os.api('endpoints').then(endpointResponse => {
+os.api("endpoints").then((endpointResponse) => {
 	endpoints.value = endpointResponse;
 });
 
 function send() {
 	sending.value = true;
 	const requestBody = JSON5.parse(body.value);
-	os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
-		sending.value = false;
-		res.value = JSON5.stringify(resp, null, 2);
-	}, err => {
-		sending.value = false;
-		res.value = JSON5.stringify(err, null, 2);
-	});
+	os.api(
+		endpoint.value as keyof Endpoints,
+		requestBody,
+		requestBody.i || (withCredential.value ? undefined : null)
+	).then(
+		(resp) => {
+			sending.value = false;
+			res.value = JSON5.stringify(resp, null, 2);
+		},
+		(err) => {
+			sending.value = false;
+			res.value = JSON5.stringify(err, null, 2);
+		}
+	);
 }
 
 function onEndpointChange() {
-	os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
+	os.api(
+		"endpoint",
+		{ endpoint: endpoint.value },
+		withCredential.value ? undefined : null
+	).then((resp) => {
 		const endpointBody = {};
 		for (const p of resp.params) {
 			endpointBody[p.name] =
-				p.type === 'String' ? '' :
-				p.type === 'Number' ? 0 :
-				p.type === 'Boolean' ? false :
-				p.type === 'Array' ? [] :
-				p.type === 'Object' ? {} :
-				null;
+				p.type === "String"
+					? ""
+					: p.type === "Number"
+					? 0
+					: p.type === "Boolean"
+					? false
+					: p.type === "Array"
+					? []
+					: p.type === "Object"
+					? {}
+					: null;
 		}
 		body.value = JSON5.stringify(endpointBody, null, 2);
 	});
@@ -83,7 +114,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'API console',
-	icon: 'ph-terminal-window ph-bold ph-lg',
+	title: "API console",
+	icon: "ph-terminal-window ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/apps.vue b/packages/client/src/pages/apps.vue
index 377c692e9..0ef511027 100644
--- a/packages/client/src/pages/apps.vue
+++ b/packages/client/src/pages/apps.vue
@@ -1,87 +1,121 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div style="overflow: clip;">
-		<MkSpacer :content-max="600" :margin-min="20">
-			<div class="_formRoot">
-				<FormSection>
-					<template #label>{{ i18n.ts._apps.crossPlatform }}</template>
-					<div class="_formBlock" style="text-align: center;">
-						<pwa-install/>
-						<MkButton primary rounded inline @click="installPwa">{{ i18n.ts._apps.pwa }}</MkButton>
-					</div>
-					<div class="_formLinks">
-						<FormLink to="https://kaiteki.app" external>
-							<template #icon>
-								<i class="ph-android-logo ph-bold ph-xl"/>
-								<i class="ph-windows-logo ph-bold ph-xl"/>
-								<i class="ph-linux-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.kaiteki }}
-							<template #suffix>{{ i18n.ts._apps.firstClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-					</div>
-				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts._apps.mobile }}</template>
-					<div class="_formLinks">
-						<FormLink to="https://play.google.com/store/apps/details?id=jp.panta.misskeyandroidclient" external>
-							<template #icon>
-								<i class="ph-android-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.milktea }}
-							<template #suffix>{{ i18n.ts._apps.firstClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-						<FormLink to="https://testflight.apple.com/join/xNdgUbh6" external>
-							<template #icon>
-								<i class="ph-apple-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.mona }}
-							<template #suffix>{{ i18n.ts._apps.thirdClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-					</div>
-				</FormSection>
-				<FormSection>
-					<template #label>{{ i18n.ts.desktop }}</template>
-					<div class="_formLinks">
-						<FormLink to="https://thedesk.top/" external>
-							<template #icon>
-								<i class="ph-apple-logo ph-bold ph-xl"/>
-								<i class="ph-windows-logo ph-bold ph-xl"/>
-								<i class="ph-linux-logo ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.theDesk }}
-							<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-						<FormLink to="https://uboar.github.io/missli/" external>
-							<template #icon>
-								<i class="ph-globe ph-bold ph-xl"/>
-							</template>
-							{{ i18n.ts._apps.missLi }}
-							<template #suffix>{{ i18n.ts._apps.secondClass }}, {{ i18n.ts._apps.free }}</template>
-						</FormLink>
-					</div>
-				</FormSection>
-			</div>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div style="overflow: clip">
+			<MkSpacer :content-max="600" :margin-min="20">
+				<div class="_formRoot">
+					<FormSection>
+						<template #label>{{
+							i18n.ts._apps.crossPlatform
+						}}</template>
+						<div class="_formBlock" style="text-align: center">
+							<pwa-install />
+							<MkButton
+								primary
+								rounded
+								inline
+								@click="installPwa"
+								>{{ i18n.ts._apps.pwa }}</MkButton
+							>
+						</div>
+						<div class="_formLinks">
+							<FormLink to="https://kaiteki.app" external>
+								<template #icon>
+									<i class="ph-android-logo ph-bold ph-xl" />
+									<i class="ph-windows-logo ph-bold ph-xl" />
+									<i class="ph-linux-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.kaiteki }}
+								<template #suffix
+									>{{ i18n.ts._apps.firstClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+						</div>
+					</FormSection>
+					<FormSection>
+						<template #label>{{ i18n.ts._apps.mobile }}</template>
+						<div class="_formLinks">
+							<FormLink
+								to="https://play.google.com/store/apps/details?id=jp.panta.misskeyandroidclient"
+								external
+							>
+								<template #icon>
+									<i class="ph-android-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.milktea }}
+								<template #suffix
+									>{{ i18n.ts._apps.firstClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+							<FormLink
+								to="https://testflight.apple.com/join/xNdgUbh6"
+								external
+							>
+								<template #icon>
+									<i class="ph-apple-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.mona }}
+								<template #suffix
+									>{{ i18n.ts._apps.thirdClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+						</div>
+					</FormSection>
+					<FormSection>
+						<template #label>{{ i18n.ts.desktop }}</template>
+						<div class="_formLinks">
+							<FormLink to="https://thedesk.top/" external>
+								<template #icon>
+									<i class="ph-apple-logo ph-bold ph-xl" />
+									<i class="ph-windows-logo ph-bold ph-xl" />
+									<i class="ph-linux-logo ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.theDesk }}
+								<template #suffix
+									>{{ i18n.ts._apps.secondClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+							<FormLink
+								to="https://uboar.github.io/missli/"
+								external
+							>
+								<template #icon>
+									<i class="ph-globe ph-bold ph-xl" />
+								</template>
+								{{ i18n.ts._apps.missLi }}
+								<template #suffix
+									>{{ i18n.ts._apps.secondClass }},
+									{{ i18n.ts._apps.free }}</template
+								>
+							</FormLink>
+						</div>
+					</FormSection>
+				</div>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import '@khmyznikov/pwa-install';
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import "@khmyznikov/pwa-install";
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
 function installPwa(ev: MouseEvent) {
-	const pwaInstall = document.getElementsByTagName('pwa-install')[0];
+	const pwaInstall = document.getElementsByTagName("pwa-install")[0];
 	pwaInstall.showDialog();
 }
 
diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue
index 9d57a8c92..189650f30 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/packages/client/src/pages/auth.form.vue
@@ -1,33 +1,39 @@
 <template>
-<section class="_section">
-	<div class="_title">{{ i18n.t('_auth.shareAccess', { name: app.name }) }}</div>
-	<div class="_content">
-		<h2>{{ app.name }}</h2>
-		<p class="id">{{ app.id }}</p>
-		<p class="description">{{ app.description }}</p>
-	</div>
-	<div class="_content">
-		<h2>{{ i18n.ts._auth.permissionAsk }}</h2>
-		<ul>
-			<li v-for="p in app.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
-		</ul>
-	</div>
-	<div class="_footer">
-		<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
-		<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
-	</div>
-</section>
+	<section class="_section">
+		<div class="_title">
+			{{ i18n.t("_auth.shareAccess", { name: app.name }) }}
+		</div>
+		<div class="_content">
+			<h2>{{ app.name }}</h2>
+			<p class="id">{{ app.id }}</p>
+			<p class="description">{{ app.description }}</p>
+		</div>
+		<div class="_content">
+			<h2>{{ i18n.ts._auth.permissionAsk }}</h2>
+			<ul>
+				<li v-for="p in app.permission" :key="p">
+					{{ i18n.t(`_permissions.${p}`) }}
+				</li>
+			</ul>
+		</div>
+		<div class="_footer">
+			<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+			<MkButton inline primary @click="accept">{{
+				i18n.ts.accept
+			}}</MkButton>
+		</div>
+	</section>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const emit = defineEmits<{
-	(ev: 'denied'): void;
-	(ev: 'accepted'): void;
+	(ev: "denied"): void;
+	(ev: "accepted"): void;
 }>();
 
 const props = defineProps<{
@@ -45,18 +51,18 @@ const props = defineProps<{
 const app = props.session.app;
 
 function cancel() {
-	os.api('auth/deny', {
+	os.api("auth/deny", {
 		token: props.session.token,
 	}).then(() => {
-		emit('denied');
+		emit("denied");
 	});
 }
 
 function accept() {
-	os.api('auth/accept', {
+	os.api("auth/accept", {
 		token: props.session.token,
 	}).then(() => {
-		emit('accepted');
+		emit("accepted");
 	});
 }
 </script>
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index 34508610c..8762f54c8 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -1,113 +1,154 @@
 <template>
-<div v-if="$i && fetching" class="">
-	<MkLoading/>
-</div>
-<div v-else-if="$i">
-	<XForm
-		v-if="state == 'waiting'"
-		ref="form"
-		class="form"
-		:session="session"
-		@denied="state = 'denied'"
-		@accepted="accepted"
-	/>
-	<div v-if="state == 'denied'" class="denied">
-		<h1>{{ i18n.ts._auth.denied }}</h1>
+	<div v-if="$i && fetching" class="">
+		<MkLoading />
 	</div>
-	<div v-if="state == 'accepted'" class="accepted">
-		<h1>{{ session.app.isAuthorized ? i18n.t('already-authorized') : i18n.ts.allowed }}</h1>
-		<p v-if="session.app.callbackUrl && !auth_code">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
-		<MkKeyValue v-if="session.app.callbackUrl && auth_code" :copy="auth_code">
-			<template #key>{{ i18n.ts._auth.copyAsk }}</template>
-			<template #value>{{ auth_code }}</template>
-		</MkKeyValue>
-		<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
+	<div v-else-if="$i">
+		<XForm
+			v-if="state == 'waiting'"
+			ref="form"
+			class="form"
+			:session="session"
+			@denied="state = 'denied'"
+			@accepted="accepted"
+		/>
+		<div v-if="state == 'denied'" class="denied">
+			<h1>{{ i18n.ts._auth.denied }}</h1>
+		</div>
+		<div v-if="state == 'accepted'" class="accepted">
+			<h1>
+				{{
+					session.app.isAuthorized
+						? i18n.t("already-authorized")
+						: i18n.ts.allowed
+				}}
+			</h1>
+			<p v-if="session.app.callbackUrl && !auth_code">
+				{{ i18n.ts._auth.callback }}<MkEllipsis />
+			</p>
+			<MkKeyValue
+				v-if="session.app.callbackUrl && auth_code"
+				:copy="auth_code"
+			>
+				<template #key>{{ i18n.ts._auth.copyAsk }}</template>
+				<template #value>{{ auth_code }}</template>
+			</MkKeyValue>
+			<p v-if="!session.app.callbackUrl">
+				{{ i18n.ts._auth.pleaseGoBack }}
+			</p>
+		</div>
+		<div v-if="state == 'fetch-session-error'" class="error">
+			<p>{{ i18n.ts.somethingHappened }}</p>
+		</div>
 	</div>
-	<div v-if="state == 'fetch-session-error'" class="error">
-		<p>{{ i18n.ts.somethingHappened }}</p>
+	<div v-else class="signin">
+		<MkSignin @login="onLogin" />
 	</div>
-</div>
-<div v-else class="signin">
-	<MkSignin @login="onLogin"/>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import XForm from './auth.form.vue';
-import MkSignin from '@/components/MkSignin.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import XForm from "./auth.form.vue";
+import MkSignin from "@/components/MkSignin.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import { login } from "@/account";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
 		XForm,
 		MkSignin,
-		MkKeyValue
+		MkKeyValue,
 	},
-	props: ['token'],
+	props: ["token"],
 	data() {
 		return {
 			state: null,
 			session: null,
 			fetching: true,
 			i18n,
-			auth_code: null
+			auth_code: null,
 		};
 	},
 	mounted() {
 		if (!this.$i) return;
 
 		// Fetch session
-		os.api('auth/session/show', {
+		os.api("auth/session/show", {
 			token: this.token,
-		}).then(session => {
-			this.session = session;
-			this.fetching = false;
+		})
+			.then((session) => {
+				this.session = session;
+				this.fetching = false;
 
-			// 既に連携していた場合
-			if (this.session.app.isAuthorized) {
-				os.api('auth/accept', {
-					token: this.session.token,
-				}).then(() => {
-					this.accepted();
-				});
-			} else {
-				this.state = 'waiting';
-			}
-		}).catch(error => {
-			this.state = 'fetch-session-error';
-			this.fetching = false;
-		});
+				// 既に連携していた場合
+				if (this.session.app.isAuthorized) {
+					os.api("auth/accept", {
+						token: this.session.token,
+					}).then(() => {
+						this.accepted();
+					});
+				} else {
+					this.state = "waiting";
+				}
+			})
+			.catch((error) => {
+				this.state = "fetch-session-error";
+				this.fetching = false;
+			});
 	},
 	methods: {
 		accepted() {
-			this.state = 'accepted';
-			const getUrlParams = () => window.location.search.substring(1).split('&').reduce((result, query) => { const [k, v] = query.split('='); result[k] = decodeURI(v); return result; }, {});
-			const isMastodon = !!getUrlParams().mastodon
+			this.state = "accepted";
+			const getUrlParams = () =>
+				window.location.search
+					.substring(1)
+					.split("&")
+					.reduce((result, query) => {
+						const [k, v] = query.split("=");
+						result[k] = decodeURI(v);
+						return result;
+					}, {});
+			const isMastodon = !!getUrlParams().mastodon;
 			if (this.session.app.callbackUrl && isMastodon) {
 				const callbackUrl = new URL(this.session.app.callbackUrl);
 				callbackUrl.searchParams.append("code", this.session.token);
-				if (!!getUrlParams().state) callbackUrl.searchParams.append("state", getUrlParams().state);
+				if (!!getUrlParams().state)
+					callbackUrl.searchParams.append(
+						"state",
+						getUrlParams().state
+					);
 				location.href = callbackUrl.toString();
 			} else if (this.session.app.callbackUrl) {
 				const url = new URL(this.session.app.callbackUrl);
-				if (['javascript:', 'file:', 'data:', 'mailto:', 'tel:'].includes(url.protocol)) throw new Error('invalid url');
-				if (this.session.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob") {
+				if (
+					[
+						"javascript:",
+						"file:",
+						"data:",
+						"mailto:",
+						"tel:",
+					].includes(url.protocol)
+				)
+					throw new Error("invalid url");
+				if (
+					this.session.app.callbackUrl === "urn:ietf:wg:oauth:2.0:oob"
+				) {
 					this.auth_code = this.session.token;
 				} else {
-					location.href = `${this.session.app.callbackUrl}?token=${this.session.token}&code=${this.session.token}&state=${getUrlParams().state || ''}`;
+					location.href = `${this.session.app.callbackUrl}?token=${
+						this.session.token
+					}&code=${this.session.token}&state=${
+						getUrlParams().state || ""
+					}`;
 				}
 			}
-		}, onLogin(res) {
+		},
+		onLogin(res) {
 			login(res.i);
 		},
 	},
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index 3aca69f3d..433c87c38 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -1,41 +1,54 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="_formRoot">
-			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="_formRoot">
+				<MkInput v-model="name" class="_formBlock">
+					<template #label>{{ i18n.ts.name }}</template>
+				</MkInput>
 
-			<MkTextarea v-model="description" class="_formBlock">
-				<template #label>{{ i18n.ts.description }}</template>
-			</MkTextarea>
+				<MkTextarea v-model="description" class="_formBlock">
+					<template #label>{{ i18n.ts.description }}</template>
+				</MkTextarea>
 
-			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
-				<div v-else-if="bannerUrl">
-					<img :src="bannerUrl" style="width: 100%;"/>
-					<MkButton @click="removeBannerImage()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
+				<div class="banner">
+					<MkButton v-if="bannerId == null" @click="setBannerImage"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts._channel.setBanner }}</MkButton
+					>
+					<div v-else-if="bannerUrl">
+						<img :src="bannerUrl" style="width: 100%" />
+						<MkButton @click="removeBannerImage()"
+							><i class="ph-trash ph-bold ph-lg"></i>
+							{{ i18n.ts._channel.removeBanner }}</MkButton
+						>
+					</div>
+				</div>
+				<div class="_formBlock">
+					<MkButton primary @click="save()"
+						><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+						{{
+							channelId ? i18n.ts.save : i18n.ts.create
+						}}</MkButton
+					>
 				</div>
 			</div>
-			<div class="_formBlock">
-				<MkButton primary @click="save()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, inject, watch } from "vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import { selectFile } from "@/scripts/select-file";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -49,20 +62,25 @@ let description = $ref(null);
 let bannerUrl = $ref<string | null>(null);
 let bannerId = $ref<string | null>(null);
 
-watch(() => bannerId, async () => {
-	if (bannerId == null) {
-		bannerUrl = null;
-	} else {
-		bannerUrl = (await os.api('drive/files/show', {
-			fileId: bannerId,
-		})).url;
+watch(
+	() => bannerId,
+	async () => {
+		if (bannerId == null) {
+			bannerUrl = null;
+		} else {
+			bannerUrl = (
+				await os.api("drive/files/show", {
+					fileId: bannerId,
+				})
+			).url;
+		}
 	}
-});
+);
 
 async function fetchChannel() {
 	if (props.channelId == null) return;
 
-	channel = await os.api('channels/show', {
+	channel = await os.api("channels/show", {
 		channelId: props.channelId,
 	});
 
@@ -83,11 +101,11 @@ function save() {
 
 	if (props.channelId) {
 		params.channelId = props.channelId;
-		os.api('channels/update', params).then(() => {
+		os.api("channels/update", params).then(() => {
 			os.success();
 		});
 	} else {
-		os.api('channels/create', params).then(created => {
+		os.api("channels/create", params).then((created) => {
 			os.success();
 			router.push(`/channels/${created.id}`);
 		});
@@ -95,7 +113,7 @@ function save() {
 }
 
 function setBannerImage(evt) {
-	selectFile(evt.currentTarget ?? evt.target, null).then(file => {
+	selectFile(evt.currentTarget ?? evt.target, null).then((file) => {
 		bannerId = file.id;
 	});
 }
@@ -108,15 +126,19 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => props.channelId ? {
-	title: i18n.ts._channel.edit,
-	icon: 'ph-television ph-bold ph-lg',
-} : {
-	title: i18n.ts._channel.create,
-	icon: 'ph-television ph-bold ph-lg',
-}));
+definePageMetadata(
+	computed(() =>
+		props.channelId
+			? {
+					title: i18n.ts._channel.edit,
+					icon: "ph-television ph-bold ph-lg",
+			  }
+			: {
+					title: i18n.ts._channel.create,
+					icon: "ph-television ph-bold ph-lg",
+			  }
+	)
+);
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index e1524974d..4c9124ae2 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -1,47 +1,116 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div v-if="channel">
-			<div class="wpgynlbz _panel _gap" :class="{ hide: !showBanner }">
-				<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
-				<button class="_button toggle" @click="() => showBanner = !showBanner">
-					<template v-if="showBanner"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-					<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-				</button>
-				<div v-if="!showBanner" class="hideOverlay">
-				</div>
-				<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
-					<div class="status">
-						<div><i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-						<div><i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div v-if="channel">
+				<div
+					class="wpgynlbz _panel _gap"
+					:class="{ hide: !showBanner }"
+				>
+					<XChannelFollowButton
+						:channel="channel"
+						:full="true"
+						class="subscribe"
+					/>
+					<button
+						class="_button toggle"
+						@click="() => (showBanner = !showBanner)"
+					>
+						<template v-if="showBanner"
+							><i class="ph-caret-up ph-bold ph-lg"></i
+						></template>
+						<template v-else
+							><i class="ph-caret-down ph-bold ph-lg"></i
+						></template>
+					</button>
+					<div v-if="!showBanner" class="hideOverlay"></div>
+					<div
+						:style="{
+							backgroundImage: channel.bannerUrl
+								? `url(${channel.bannerUrl})`
+								: null,
+						}"
+						class="banner"
+					>
+						<div class="status">
+							<div>
+								<i
+									class="ph-users ph-bold ph-lg ph-fw ph-lg"
+								></i
+								><I18n
+									:src="i18n.ts._channel.usersCount"
+									tag="span"
+									style="margin-left: 4px"
+									><template #n
+										><b>{{
+											channel.usersCount
+										}}</b></template
+									></I18n
+								>
+							</div>
+							<div>
+								<i
+									class="ph-pencil ph-bold ph-lg ph-fw ph-lg"
+								></i
+								><I18n
+									:src="i18n.ts._channel.notesCount"
+									tag="span"
+									style="margin-left: 4px"
+									><template #n
+										><b>{{
+											channel.notesCount
+										}}</b></template
+									></I18n
+								>
+							</div>
+						</div>
+						<div class="fade"></div>
+					</div>
+					<div v-if="channel.description" class="description">
+						<Mfm
+							:text="channel.description"
+							:is-note="false"
+							:i="$i"
+						/>
 					</div>
-					<div class="fade"></div>
-				</div>
-				<div v-if="channel.description" class="description">
-					<Mfm :text="channel.description" :is-note="false" :i="$i"/>
 				</div>
+
+				<XPostForm
+					v-if="$i"
+					:channel="channel"
+					class="post-form _panel _gap"
+					fixed
+				/>
+
+				<XTimeline
+					:key="channelId"
+					class="_gap"
+					src="channel"
+					:channel="channelId"
+					@before="before"
+					@after="after"
+				/>
 			</div>
-
-			<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
-
-			<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import MkContainer from '@/components/MkContainer.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, inject, watch } from "vue";
+import MkContainer from "@/components/MkContainer.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import XChannelFollowButton from "@/components/MkChannelFollowButton.vue";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const router = useRouter();
 
@@ -52,37 +121,44 @@ const props = defineProps<{
 let channel = $ref(null);
 let showBanner = $ref(true);
 
-watch(() => props.channelId, async () => {
-	channel = await os.api('channels/show', {
-		channelId: props.channelId,
-	});
-}, { immediate: true });
+watch(
+	() => props.channelId,
+	async () => {
+		channel = await os.api("channels/show", {
+			channelId: props.channelId,
+		});
+	},
+	{ immediate: true }
+);
 
 function edit() {
 	router.push(`/channels/${channel?.id}/edit`);
 }
 
-const headerActions = $computed(() =>  [
-	...(
-		channel
-		&& channel?.userId === $i?.id
+const headerActions = $computed(() => [
+	...(channel && channel?.userId === $i?.id
 		? [
-			{
-				icon: 'ph-gear-six ph-bold ph-lg',
-				text: i18n.ts.edit,
-				handler: edit,
-			}
-		]
-		: []
-	),
+				{
+					icon: "ph-gear-six ph-bold ph-lg",
+					text: i18n.ts.edit,
+					handler: edit,
+				},
+		  ]
+		: []),
 ]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => channel ? {
-	title: channel.name,
-	icon: 'ph-television ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		channel
+			? {
+					title: channel.name,
+					icon: "ph-television ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
@@ -99,7 +175,7 @@ definePageMetadata(computed(() => channel ? {
 	> .toggle {
 		position: absolute;
 		z-index: 2;
-    top: 8px;
+		top: 8px;
 		right: 8px;
 		font-size: 1.2em;
 		width: 48px;
@@ -107,12 +183,12 @@ definePageMetadata(computed(() => channel ? {
 		color: #fff;
 		background: rgba(0, 0, 0, 0.5);
 		border-radius: 100%;
-		
+
 		> i {
 			vertical-align: middle;
 		}
 	}
-	
+
 	> .banner {
 		position: relative;
 		height: 200px;
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 7d96e6018..2d8eeefcf 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -1,105 +1,149 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="_content grwlizim featured">
-					<MkPagination v-slot="{items}" :pagination="featuredPagination">
-						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_content grwlizim following">
-					<MkPagination v-slot="{items}" :pagination="followingPagination">
-						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_content grwlizim owned">
-					<MkButton class="new" @click="create()"><i class="ph-plus ph-bold ph-lg"></i></MkButton>
-					<MkPagination v-slot="{items}" :pagination="ownedPagination">
-						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="_content grwlizim featured">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="featuredPagination"
+						>
+							<MkChannelPreview
+								v-for="channel in items"
+								:key="channel.id"
+								class="_gap"
+								:channel="channel"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_content grwlizim following">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="followingPagination"
+						>
+							<MkChannelPreview
+								v-for="channel in items"
+								:key="channel.id"
+								class="_gap"
+								:channel="channel"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_content grwlizim owned">
+						<MkButton class="new" @click="create()"
+							><i class="ph-plus ph-bold ph-lg"></i
+						></MkButton>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="ownedPagination"
+						>
+							<MkChannelPreview
+								v-for="channel in items"
+								:key="channel.id"
+								class="_gap"
+								:channel="channel"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, inject, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkChannelPreview from '@/components/MkChannelPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, defineComponent, inject, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkChannelPreview from "@/components/MkChannelPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
-const tabs = ['featured', 'following', 'owned'];
+const tabs = ["featured", "following", "owned"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const featuredPagination = {
-	endpoint: 'channels/featured' as const,
+	endpoint: "channels/featured" as const,
 	limit: 10,
 	noPaging: false,
 };
 const followingPagination = {
-	endpoint: 'channels/followed' as const,
+	endpoint: "channels/followed" as const,
 	limit: 10,
 };
 const ownedPagination = {
-	endpoint: 'channels/owned' as const,
+	endpoint: "channels/owned" as const,
 	limit: 10,
 };
 
 function create() {
-	router.push('/channels/new');
+	router.push("/channels/new");
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.create,
-	handler: create,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.create,
+		handler: create,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	title: i18n.ts._channel.featured,
-	icon: 'ph-fire-simple ph-bold ph-lg',
-}, {
-	key: 'following',
-	title: i18n.ts._channel.following,
-	icon: 'ph-heart ph-bold ph-lg',
-}, {
-	key: 'owned',
-	title: i18n.ts._channel.owned,
-	icon: 'ph-crown-simple ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "featured",
+		title: i18n.ts._channel.featured,
+		icon: "ph-fire-simple ph-bold ph-lg",
+	},
+	{
+		key: "following",
+		title: i18n.ts._channel.following,
+		icon: "ph-heart ph-bold ph-lg",
+	},
+	{
+		key: "owned",
+		title: i18n.ts._channel.owned,
+		icon: "ph-crown-simple ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.channel,
-	icon: 'ph-television ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.channel,
+		icon: "ph-television ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index eb58b4769..bd6788b51 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -1,108 +1,136 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions"/></template>
-	<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"/>
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" /></template>
+		<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" />
+					</div>
 				</div>
-				<div class="user">
-					<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
-				</div>
-			</div>
 
-			<XNotes :pagination="pagination" :detail="true"/>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				<XNotes :pagination="pagination" :detail="true" />
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, provide } from 'vue';
-import type * as misskey from 'calckey-js';
-import XNotes from '@/components/MkNotes.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, watch, provide } from "vue";
+import type * as misskey from "calckey-js";
+import XNotes from "@/components/MkNotes.vue";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
-	clipId: string,
+	clipId: string;
 }>();
 
 let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
 const pagination = {
-	endpoint: 'clips/notes' as const,
+	endpoint: "clips/notes" as const,
 	limit: 10,
 	params: computed(() => ({
 		clipId: props.clipId,
 	})),
 };
 
-const isOwned: boolean | null = $computed<boolean | null>(() => $i && clip && ($i.id === clip.userId));
+const isOwned: boolean | null = $computed<boolean | null>(
+	() => $i && clip && $i.id === clip.userId
+);
 
-watch(() => props.clipId, async () => {
-	clip = await os.api('clips/show', {
-		clipId: props.clipId,
-	});
-}, {
-	immediate: true,
-});
-
-provide('currentClipPage', $$(clip));
-
-const headerActions = $computed(() => clip && isOwned ? [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.edit,
-	handler: async (): Promise<void> => {
-		const { canceled, result } = await os.form(clip.name, {
-			name: {
-				type: 'string',
-				label: i18n.ts.name,
-				default: clip.name,
-			},
-			description: {
-				type: 'string',
-				required: false,
-				multiline: true,
-				label: i18n.ts.description,
-				default: clip.description,
-			},
-			isPublic: {
-				type: 'boolean',
-				label: i18n.ts.public,
-				default: clip.isPublic,
-			},
-		});
-		if (canceled) return;
-
-		os.apiWithDialog('clips/update', {
-			clipId: clip.id,
-			...result,
+watch(
+	() => props.clipId,
+	async () => {
+		clip = await os.api("clips/show", {
+			clipId: props.clipId,
 		});
 	},
-}, {
-	icon: 'ph-trash ph-bold ph-lg',
-	text: i18n.ts.delete,
-	danger: true,
-	handler: async (): Promise<void> => {
-		const { canceled } = await os.confirm({
-			type: 'warning',
-			text: i18n.t('deleteAreYouSure', { x: clip.name }),
-		});
-		if (canceled) return;
+	{
+		immediate: true,
+	}
+);
 
-		await os.apiWithDialog('clips/delete', {
-			clipId: clip.id,
-		});
-	},
-}] : null);
+provide("currentClipPage", $$(clip));
 
-definePageMetadata(computed(() => clip ? {
-	title: clip.name,
-	icon: 'ph-paperclip ph-bold ph-lg',
-} : null));
+const headerActions = $computed(() =>
+	clip && isOwned
+		? [
+				{
+					icon: "ph-pencil ph-bold ph-lg",
+					text: i18n.ts.edit,
+					handler: async (): Promise<void> => {
+						const { canceled, result } = await os.form(clip.name, {
+							name: {
+								type: "string",
+								label: i18n.ts.name,
+								default: clip.name,
+							},
+							description: {
+								type: "string",
+								required: false,
+								multiline: true,
+								label: i18n.ts.description,
+								default: clip.description,
+							},
+							isPublic: {
+								type: "boolean",
+								label: i18n.ts.public,
+								default: clip.isPublic,
+							},
+						});
+						if (canceled) return;
+
+						os.apiWithDialog("clips/update", {
+							clipId: clip.id,
+							...result,
+						});
+					},
+				},
+				{
+					icon: "ph-trash ph-bold ph-lg",
+					text: i18n.ts.delete,
+					danger: true,
+					handler: async (): Promise<void> => {
+						const { canceled } = await os.confirm({
+							type: "warning",
+							text: i18n.t("deleteAreYouSure", { x: clip.name }),
+						});
+						if (canceled) return;
+
+						await os.apiWithDialog("clips/delete", {
+							clipId: clip.id,
+						});
+					},
+				},
+		  ]
+		: null
+);
+
+definePageMetadata(
+	computed(() =>
+		clip
+			? {
+					title: clip.name,
+					icon: "ph-paperclip ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index bd38e9e42..8aeb97b46 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -1,15 +1,15 @@
 <template>
-<div>
-	<XDrive ref="drive" @cd="x => folder = x"/>
-</div>
+	<div>
+		<XDrive ref="drive" @cd="(x) => (folder = x)" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XDrive from '@/components/MkDrive.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import XDrive from "@/components/MkDrive.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let folder = $ref(null);
 
@@ -17,9 +17,11 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: folder ? folder.name : i18n.ts.drive,
-	icon: 'ph-cloud ph-bold ph-lg',
-	hideHeader: true,
-})));
+definePageMetadata(
+	computed(() => ({
+		title: folder ? folder.name : i18n.ts.drive,
+		icon: "ph-cloud ph-bold ph-lg",
+		hideHeader: true,
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index e88eda5b2..c8b7d6442 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -1,46 +1,55 @@
 <template>
-<button class="zuvgdzyu _button" @click="menu">
-	<img :src="emoji.url" class="img" :alt="emoji.name"/>
-	<div class="body">
-		<div class="name _monospace">{{ emoji.name }}</div>
-		<div class="info">{{ emoji.aliases.join(" ") }}</div>
-	</div>
-</button>
+	<button class="zuvgdzyu _button" @click="menu">
+		<img :src="emoji.url" class="img" :alt="emoji.name" />
+		<div class="body">
+			<div class="name _monospace">{{ emoji.name }}</div>
+			<div class="info">{{ emoji.aliases.join(" ") }}</div>
+		</div>
+	</button>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as os from "@/os";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	emoji: Record<string, unknown>; // TODO
 }>();
 
 function menu(ev) {
-	os.popupMenu([{
-		type: "label",
-		text: ":" + props.emoji.name + ":",
-	}, {
-		text: i18n.ts.copy,
-		icon: "ph-clipboard-text ph-bold ph-lg",
-		action: () => {
-			copyToClipboard(`:${props.emoji.name}:`);
-			os.success();
-		},
-	}, {
-		text: i18n.ts.license,
-		icon: "ph-info ph-bold ph-lg",
-		action: () => {
-			os.apiGet("emoji", { name: props.emoji.name }).then(res => {
-				os.alert({
-					type: "info",
-					text: `${res.license || i18n.ts.notSet}`,
-				});
-			});
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				type: "label",
+				text: ":" + props.emoji.name + ":",
+			},
+			{
+				text: i18n.ts.copy,
+				icon: "ph-clipboard-text ph-bold ph-lg",
+				action: () => {
+					copyToClipboard(`:${props.emoji.name}:`);
+					os.success();
+				},
+			},
+			{
+				text: i18n.ts.license,
+				icon: "ph-info ph-bold ph-lg",
+				action: () => {
+					os.apiGet("emoji", { name: props.emoji.name }).then(
+						(res) => {
+							os.alert({
+								type: "info",
+								text: `${res.license || i18n.ts.notSet}`,
+							});
+						}
+					);
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 </script>
 
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue
index 0f66307ab..2d21bfcb4 100644
--- a/packages/client/src/pages/explore.featured.vue
+++ b/packages/client/src/pages/explore.featured.vue
@@ -1,38 +1,41 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="local">{{ i18n.ts.local }}</option>
-		<option value="remote">{{ i18n.ts.remote }}</option>
-	</MkTab>
-	<XNotes v-if="tab === 'local'" :pagination="paginationForLocal"/>
-	<XNotes v-else-if="tab === 'remote'" :pagination="paginationForRemote"/>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
+			<option value="local">{{ i18n.ts.local }}</option>
+			<option value="remote">{{ i18n.ts.remote }}</option>
+		</MkTab>
+		<XNotes v-if="tab === 'local'" :pagination="paginationForLocal" />
+		<XNotes
+			v-else-if="tab === 'remote'"
+			:pagination="paginationForRemote"
+		/>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import XNotes from '@/components/MkNotes.vue';
-import MkTab from '@/components/MkTab.vue';
-import { i18n } from '@/i18n';
+import XNotes from "@/components/MkNotes.vue";
+import MkTab from "@/components/MkTab.vue";
+import { i18n } from "@/i18n";
 
 const paginationForLocal = {
-	endpoint: 'notes/featured' as const,
+	endpoint: "notes/featured" as const,
 	limit: 10,
-	origin: 'local',
+	origin: "local",
 	offsetMode: true,
 	params: {
 		days: 14,
-	}
+	},
 };
 
 const paginationForRemote = {
-	endpoint: 'notes/featured' as const,
+	endpoint: "notes/featured" as const,
 	limit: 20,
 	offsetMode: true,
 	params: {
-		origin: 'remote',
+		origin: "remote",
 		days: 7,
-	}
-}
+	},
+};
 
 // const paginationForRemote = {
 // 	endpoint: 'notes/polls/recommendation' as const,
@@ -40,5 +43,5 @@ const paginationForRemote = {
 // 	offsetMode: true,
 // };
 
-let tab = $ref('local');
+let tab = $ref("local");
 </script>
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index d810b3115..378801532 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -1,139 +1,253 @@
-
 4.8 KiB
 <template>
-<MkSpacer :content-max="1200">
-	<MkTab v-model="origin" style="margin-bottom: var(--margin);">
-		<option value="local">{{ i18n.ts.local }}</option>
-		<option value="remote">{{ i18n.ts.remote }}</option>
-	</MkTab>
-	<div v-if="origin === 'local'">
-		<template v-if="tag == null">
-			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="ph-bookmark ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
-				<XUserList :pagination="pinnedUsers"/>
-			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="ph-chart-line-up ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsers"/>
-			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="ph-activity ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsers"/>
-			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="ph-butterfly ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsers"/>
-			</MkFolder>
-		</template>
-	</div>
-	<div v-else>
-		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
-			<template #header><i class="ph-compass ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
+	<MkSpacer :content-max="1200">
+		<MkTab v-model="origin" style="margin-bottom: var(--margin)">
+			<option value="local">{{ i18n.ts.local }}</option>
+			<option value="remote">{{ i18n.ts.remote }}</option>
+		</MkTab>
+		<div v-if="origin === 'local'">
+			<template v-if="tag == null">
+				<MkFolder class="_gap" persist-key="explore-pinned-users">
+					<template #header
+						><i
+							class="ph-bookmark ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.pinnedUsers }}</template
+					>
+					<XUserList :pagination="pinnedUsers" />
+				</MkFolder>
+				<MkFolder
+					v-if="$i != null"
+					class="_gap"
+					persist-key="explore-popular-users"
+				>
+					<template #header
+						><i
+							class="ph-chart-line-up ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.popularUsers }}</template
+					>
+					<XUserList :pagination="popularUsers" />
+				</MkFolder>
+				<MkFolder
+					v-if="$i != null"
+					class="_gap"
+					persist-key="explore-recently-updated-users"
+				>
+					<template #header
+						><i
+							class="ph-activity ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyUpdatedUsers }}</template
+					>
+					<XUserList :pagination="recentlyUpdatedUsers" />
+				</MkFolder>
+				<MkFolder
+					v-if="$i != null"
+					class="_gap"
+					persist-key="explore-recently-registered-users"
+				>
+					<template #header
+						><i
+							class="ph-butterfly ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyRegisteredUsers }}</template
+					>
+					<XUserList :pagination="recentlyRegisteredUsers" />
+				</MkFolder>
+			</template>
+		</div>
+		<div v-else>
+			<MkFolder
+				ref="tagsEl"
+				:foldable="true"
+				:expanded="false"
+				class="_gap"
+			>
+				<template #header
+					><i
+						class="ph-compass ph-bold ph-lg ph-fw"
+						style="margin-right: 0.5em"
+					></i
+					>{{ i18n.ts.popularTags }}</template
+				>
 
-			<div class="vxjfqztj">
-				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
-				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
-			</div>
-		</MkFolder>
+				<div class="vxjfqztj">
+					<MkA
+						v-for="tag in tagsLocal"
+						:key="'local:' + tag.tag"
+						:to="`/explore/tags/${tag.tag}`"
+						class="local"
+						>{{ tag.tag }}</MkA
+					>
+					<MkA
+						v-for="tag in tagsRemote"
+						:key="'remote:' + tag.tag"
+						:to="`/explore/tags/${tag.tag}`"
+						>{{ tag.tag }}</MkA
+					>
+				</div>
+			</MkFolder>
 
-		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="ph-hash ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
-			<XUserList :pagination="tagUsers"/>
-		</MkFolder>
+			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
+				<template #header
+					><i
+						class="ph-hash ph-bold ph-lg ph-fw"
+						style="margin-right: 0.5em"
+					></i
+					>{{ tag }}</template
+				>
+				<XUserList :pagination="tagUsers" />
+			</MkFolder>
 
-		<template v-if="tag == null && $i != null">
-			<MkFolder class="_gap">
-				<template #header><i class="ph-chart-line-up ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsersF"/>
-			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="ph-activity ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsersF"/>
-			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="ph-rocke-launch ph-bold ph-lg ph-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsersF"/>
-			</MkFolder>
-		</template>
-	</div>
-</MkSpacer>
+			<template v-if="tag == null && $i != null">
+				<MkFolder class="_gap">
+					<template #header
+						><i
+							class="ph-chart-line-up ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.popularUsers }}</template
+					>
+					<XUserList :pagination="popularUsersF" />
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header
+						><i
+							class="ph-activity ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyUpdatedUsers }}</template
+					>
+					<XUserList :pagination="recentlyUpdatedUsersF" />
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header
+						><i
+							class="ph-rocke-launch ph-bold ph-lg ph-fw"
+							style="margin-right: 0.5em"
+						></i
+						>{{ i18n.ts.recentlyDiscoveredUsers }}</template
+					>
+					<XUserList :pagination="recentlyRegisteredUsersF" />
+				</MkFolder>
+			</template>
+		</div>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import XUserList from '@/components/MkUserList.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkTab from '@/components/MkTab.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { instance } from '@/instance';
+import { computed, watch } from "vue";
+import XUserList from "@/components/MkUserList.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkTab from "@/components/MkTab.vue";
+import number from "@/filters/number";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { instance } from "@/instance";
 
 const props = defineProps<{
-		tag?: string;
-	}>();
+	tag?: string;
+}>();
 
-let origin = $ref('local');
+let origin = $ref("local");
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
 
-watch(() => props.tag, () => {
-	if (tagsEl) tagsEl.toggleContent(props.tag == null);
-});
+watch(
+	() => props.tag,
+	() => {
+		if (tagsEl) tagsEl.toggleContent(props.tag == null);
+	}
+);
 
 const tagUsers = $computed(() => ({
-	endpoint: 'hashtags/users' as const,
+	endpoint: "hashtags/users" as const,
 	limit: 30,
 	params: {
 		tag: props.tag,
-		origin: 'combined',
-		sort: '+follower',
+		origin: "combined",
+		sort: "+follower",
 	},
 }));
 
-const pinnedUsers = { endpoint: 'pinned-users' };
-const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	state: 'alive',
-	origin: 'local',
-	sort: '+follower',
-} };
-const recentlyUpdatedUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'local',
-	sort: '+updatedAt',
-} };
-const recentlyRegisteredUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'local',
-	state: 'alive',
-	sort: '+createdAt',
-} };
-const popularUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	state: 'alive',
-	origin: 'remote',
-	sort: '+follower',
-} };
-const recentlyUpdatedUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'combined',
-	sort: '+updatedAt',
-} };
-const recentlyRegisteredUsersF = { endpoint: 'users', limit: 10, noPaging: true, params: {
-	origin: 'combined',
-	sort: '+createdAt',
-} };
+const pinnedUsers = { endpoint: "pinned-users" };
+const popularUsers = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		state: "alive",
+		origin: "local",
+		sort: "+follower",
+	},
+};
+const recentlyUpdatedUsers = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "local",
+		sort: "+updatedAt",
+	},
+};
+const recentlyRegisteredUsers = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "local",
+		state: "alive",
+		sort: "+createdAt",
+	},
+};
+const popularUsersF = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		state: "alive",
+		origin: "remote",
+		sort: "+follower",
+	},
+};
+const recentlyUpdatedUsersF = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "combined",
+		sort: "+updatedAt",
+	},
+};
+const recentlyRegisteredUsersF = {
+	endpoint: "users",
+	limit: 10,
+	noPaging: true,
+	params: {
+		origin: "combined",
+		sort: "+createdAt",
+	},
+};
 
-os.api('hashtags/list', {
-	sort: '+attachedLocalUsers',
+os.api("hashtags/list", {
+	sort: "+attachedLocalUsers",
 	attachedToLocalUserOnly: true,
 	limit: 30,
-}).then(tags => {
+}).then((tags) => {
 	tagsLocal = tags;
 });
-os.api('hashtags/list', {
-	sort: '+attachedRemoteUsers',
+os.api("hashtags/list", {
+	sort: "+attachedRemoteUsers",
 	attachedToRemoteUserOnly: true,
 	limit: 30,
-}).then(tags => {
+}).then((tags) => {
 	tagsRemote = tags;
 });
 </script>
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index cbc53f066..0915d6ac8 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -1,72 +1,90 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div class="lznhrdub">
-		<MkSpacer :content-max="1200">
-			<swiper
-				:modules="[Virtual]"
-				:space-between="20"
-				:virtual="true"
-				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-				@swiper="setSwiperRef"
-				@slide-change="onSlideChange"
-			>
-				<swiper-slide>
-					<XFeatured/>
-				</swiper-slide>
-				<swiper-slide>
-					<XUsers/>
-				</swiper-slide>
-			</swiper>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<div class="lznhrdub">
+			<MkSpacer :content-max="1200">
+				<swiper
+					:modules="[Virtual]"
+					:space-between="20"
+					:virtual="true"
+					:allow-touch-move="
+						!(
+							deviceKind === 'desktop' &&
+							!defaultStore.state.swipeOnDesktop
+						)
+					"
+					@swiper="setSwiperRef"
+					@slide-change="onSlideChange"
+				>
+					<swiper-slide>
+						<XFeatured />
+					</swiper-slide>
+					<swiper-slide>
+						<XUsers />
+					</swiper-slide>
+				</swiper>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XFeatured from './explore.featured.vue';
-import XUsers from './explore.users.vue';
-import type MkFolder from '@/components/MkFolder.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XFeatured from "./explore.featured.vue";
+import XUsers from "./explore.users.vue";
+import type MkFolder from "@/components/MkFolder.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const props = defineProps<{
 	tag?: string;
 }>();
 
-const tabs = ['featured', 'users'];
+const tabs = ["featured", "users"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 
-watch(() => props.tag, () => {
-	if (tagsEl) tagsEl.toggleContent(props.tag == null);
-});
+watch(
+	() => props.tag,
+	() => {
+		if (tagsEl) tagsEl.toggleContent(props.tag == null);
+	}
+);
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	icon: 'ph-lightning ph-bold ph-lg',
-	title: i18n.ts.featured,
-}, {
-	key: 'users',
-	icon: 'ph-users ph-bold ph-lg',
-	title: i18n.ts.users,
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "featured",
+		icon: "ph-lightning ph-bold ph-lg",
+		title: i18n.ts.featured,
+	},
+	{
+		key: "users",
+		icon: "ph-users ph-bold ph-lg",
+		title: i18n.ts.users,
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.explore,
-	icon: 'ph-compass ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.explore,
+		icon: "ph-compass ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
@@ -86,5 +104,4 @@ function syncSlide(index) {
 onMounted(() => {
 	syncSlide(tabs.indexOf(swiperRef.activeIndex));
 });
-
 </script>
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 1fca212c2..84b5979ba 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -22,7 +22,11 @@
 						:no-gap="false"
 						:ad="false"
 					>
-						<XNote :key="item.id" :note="item.note" :class="$style.note" />
+						<XNote
+							:key="item.id"
+							:note="item.note"
+							:class="$style.note"
+						/>
 					</XList>
 				</template>
 			</MkPagination>
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 289a43bd4..2aac52163 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -1,62 +1,102 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<MkSpacer :content-max="800">
-		<MkPagination ref="paginationComponent" :pagination="pagination">
-			<template #empty>
-				<div class="_fullinfo">
-					<img src="/static-assets/badges/info.png" class="_ghost"/>
-					<div>{{ i18n.ts.noFollowRequests }}</div>
-				</div>
-			</template>
-			<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"/>
-						<div class="body">
-							<div class="name">
-								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
-								<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"/>
-							</div>
-							<div class="actions">
-								<button class="_button" @click="accept(req.follower)"><i class="ph-check ph-bold ph-lg"></i></button>
-								<button class="_button" @click="reject(req.follower)"><i class="ph-x ph-bold ph-lg"></i></button>
+	<MkStickyContainer>
+		<template #header><MkPageHeader /></template>
+		<MkSpacer :content-max="800">
+			<MkPagination ref="paginationComponent" :pagination="pagination">
+				<template #empty>
+					<div class="_fullinfo">
+						<img
+							src="/static-assets/badges/info.png"
+							class="_ghost"
+						/>
+						<div>{{ i18n.ts.noFollowRequests }}</div>
+					</div>
+				</template>
+				<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"
+							/>
+							<div class="body">
+								<div class="name">
+									<MkA
+										v-user-preview="req.follower.id"
+										class="name"
+										:to="userPage(req.follower)"
+										><MkUserName :user="req.follower"
+									/></MkA>
+									<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"
+									/>
+								</div>
+								<div class="actions">
+									<button
+										class="_button"
+										@click="accept(req.follower)"
+									>
+										<i class="ph-check ph-bold ph-lg"></i>
+									</button>
+									<button
+										class="_button"
+										@click="reject(req.follower)"
+									>
+										<i class="ph-x ph-bold ph-lg"></i>
+									</button>
+								</div>
 							</div>
 						</div>
 					</div>
-				</div>
-			</template>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
+				</template>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import { userPage, acct } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, computed } from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import { userPage, acct } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
-	endpoint: 'following/requests/list' as const,
+	endpoint: "following/requests/list" as const,
 	limit: 10,
 };
 
 function accept(user) {
-	os.api('following/requests/accept', { userId: user.id }).then(() => {
+	os.api("following/requests/accept", { userId: user.id }).then(() => {
 		paginationComponent.value.reload();
 	});
 }
 
 function reject(user) {
-	os.api('following/requests/reject', { userId: user.id }).then(() => {
+	os.api("following/requests/reject", { userId: user.id }).then(() => {
 		paginationComponent.value.reload();
 	});
 }
@@ -65,10 +105,12 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.followRequests,
-	icon: 'ph-hand-waving ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.followRequests,
+		icon: "ph-hand-waving ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue
index 57ef57660..6af698fa9 100644
--- a/packages/client/src/pages/follow.vue
+++ b/packages/client/src/pages/follow.vue
@@ -1,19 +1,18 @@
 <template>
-<div class="mk-follow-page">
-</div>
+	<div class="mk-follow-page"></div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as Acct from "calckey-js/built/acct";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import { i18n } from "@/i18n";
 
 async function follow(user): Promise<void> {
 	const { canceled } = await os.confirm({
-		type: 'question',
-		text: i18n.t('followConfirm', { name: user.name || user.username }),
+		type: "question",
+		text: i18n.t("followConfirm", { name: user.name || user.username }),
 	});
 
 	if (canceled) {
@@ -21,39 +20,39 @@ async function follow(user): Promise<void> {
 		return;
 	}
 
-	os.apiWithDialog('following/create', {
+	os.apiWithDialog("following/create", {
 		userId: user.id,
 	});
 }
 
-const acct = new URL(location.href).searchParams.get('acct');
+const acct = new URL(location.href).searchParams.get("acct");
 if (acct == null) {
-	throw new Error('acct required');
+	throw new Error("acct required");
 }
 
 let promise;
 
-if (acct.startsWith('https://')) {
-	promise = os.api('ap/show', {
+if (acct.startsWith("https://")) {
+	promise = os.api("ap/show", {
 		uri: acct,
 	});
-	promise.then(res => {
-		if (res.type === 'User') {
+	promise.then((res) => {
+		if (res.type === "User") {
 			follow(res.object);
-		} else if (res.type === 'Note') {
+		} else if (res.type === "Note") {
 			mainRouter.push(`/notes/${res.object.id}`);
 		} else {
 			os.alert({
-				type: 'error',
-				text: 'Not a user',
+				type: "error",
+				text: "Not a user",
 			}).then(() => {
 				window.close();
 			});
 		}
 	});
 } else {
-	promise = os.api('users/show', Acct.parse(acct));
-	promise.then(user => {
+	promise = os.api("users/show", Acct.parse(acct));
+	promise.then((user) => {
 		follow(user);
 	});
 }
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index c2b93d6a0..f03201cac 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -1,47 +1,78 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<FormInput v-model="title">
-				<template #label>{{ i18n.ts.title }}</template>
-			</FormInput>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<FormInput v-model="title">
+					<template #label>{{ i18n.ts.title }}</template>
+				</FormInput>
 
-			<FormTextarea v-model="description" :max="500">
-				<template #label>{{ i18n.ts.description }}</template>
-			</FormTextarea>
+				<FormTextarea v-model="description" :max="500">
+					<template #label>{{ i18n.ts.description }}</template>
+				</FormTextarea>
 
-			<div class="">
-				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
-					<div class="name">{{ file.name }}</div>
-					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ph-x ph-bold ph-lg"></i></button>
+				<div class="">
+					<div
+						v-for="file in files"
+						:key="file.id"
+						class="wqugxsfx"
+						:style="{
+							backgroundImage: file
+								? `url(${file.thumbnailUrl})`
+								: null,
+						}"
+					>
+						<div class="name">{{ file.name }}</div>
+						<button
+							v-tooltip="i18n.ts.remove"
+							class="remove _button"
+							@click="remove(file)"
+						>
+							<i class="ph-x ph-bold ph-lg"></i>
+						</button>
+					</div>
+					<FormButton primary @click="selectFile"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.attachFile }}</FormButton
+					>
 				</div>
-				<FormButton primary @click="selectFile"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.attachFile }}</FormButton>
-			</div>
 
-			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
+				<FormSwitch v-model="isSensitive">{{
+					i18n.ts.markAsSensitive
+				}}</FormSwitch>
 
-			<FormButton v-if="postId" primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
-			<FormButton v-else primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.publish }}</FormButton>
+				<FormButton v-if="postId" primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</FormButton
+				>
+				<FormButton v-else primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.publish }}</FormButton
+				>
 
-			<FormButton v-if="postId" danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</FormButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+				<FormButton v-if="postId" danger @click="del"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</FormButton
+				>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import { selectFiles } from '@/scripts/select-file';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, inject, watch } from "vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import { selectFiles } from "@/scripts/select-file";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -56,30 +87,30 @@ let title = $ref(null);
 let isSensitive = $ref(false);
 
 function selectFile(evt) {
-	selectFiles(evt.currentTarget ?? evt.target, null).then(selected => {
+	selectFiles(evt.currentTarget ?? evt.target, null).then((selected) => {
 		files = files.concat(selected);
 	});
 }
 
 function remove(file) {
-	files = files.filter(f => f.id !== file.id);
+	files = files.filter((f) => f.id !== file.id);
 }
 
 async function save() {
 	if (props.postId) {
-		await os.apiWithDialog('gallery/posts/update', {
+		await os.apiWithDialog("gallery/posts/update", {
 			postId: props.postId,
 			title: title,
 			description: description,
-			fileIds: files.map(file => file.id),
+			fileIds: files.map((file) => file.id),
 			isSensitive: isSensitive,
 		});
 		router.push(`/gallery/${props.postId}`);
 	} else {
-		const created = await os.apiWithDialog('gallery/posts/create', {
+		const created = await os.apiWithDialog("gallery/posts/create", {
 			title: title,
 			description: description,
-			fileIds: files.map(file => file.id),
+			fileIds: files.map((file) => file.id),
 			isSensitive: isSensitive,
 		});
 		router.push(`/gallery/${created.id}`);
@@ -88,38 +119,53 @@ async function save() {
 
 async function del() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteConfirm,
 	});
 	if (canceled) return;
-	await os.apiWithDialog('gallery/posts/delete', {
+	await os.apiWithDialog("gallery/posts/delete", {
 		postId: props.postId,
 	});
-	router.push('/gallery');
+	router.push("/gallery");
 }
 
-watch(() => props.postId, () => {
-	init = () => props.postId ? os.api('gallery/posts/show', {
-		postId: props.postId,
-	}).then(post => {
-		files = post.files;
-		title = post.title;
-		description = post.description;
-		isSensitive = post.isSensitive;
-	}) : Promise.resolve(null);
-}, { immediate: true });
+watch(
+	() => props.postId,
+	() => {
+		init = () =>
+			props.postId
+				? os
+						.api("gallery/posts/show", {
+							postId: props.postId,
+						})
+						.then((post) => {
+							files = post.files;
+							title = post.title;
+							description = post.description;
+							isSensitive = post.isSensitive;
+						})
+				: Promise.resolve(null);
+	},
+	{ immediate: true }
+);
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => props.postId ? {
-	title: i18n.ts.edit,
-	icon: 'ph-pencil ph-bold ph-lg',
-} : {
-	title: i18n.ts.postToGallery,
-	icon: 'ph-pencil ph-bold ph-lg',
-}));
+definePageMetadata(
+	computed(() =>
+		props.postId
+			? {
+					title: i18n.ts.edit,
+					icon: "ph-pencil ph-bold ph-lg",
+			  }
+			: {
+					title: i18n.ts.postToGallery,
+					icon: "ph-pencil ph-bold ph-lg",
+			  }
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index 2845ce957..d4794ffbc 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -1,67 +1,121 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="1200">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<MkFolder class="_gap">
-					<template #header><i class="ph-clock ph-bold ph-lg"></i> {{ i18n.ts.recentPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="1200">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<MkFolder class="_gap">
+						<template #header
+							><i class="ph-clock ph-bold ph-lg"></i>
+							{{ i18n.ts.recentPosts }}</template
+						>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="recentPostsPagination"
+							:disable-auto-load="true"
+						>
+							<div class="vfpdbgtk">
+								<MkGalleryPostPreview
+									v-for="post in items"
+									:key="post.id"
+									:post="post"
+									class="post"
+								/>
+							</div>
+						</MkPagination>
+					</MkFolder>
+					<MkFolder class="_gap">
+						<template #header
+							><i class="ph-fire-simple ph-bold ph-lg"></i>
+							{{ i18n.ts.popularPosts }}</template
+						>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="popularPostsPagination"
+							:disable-auto-load="true"
+						>
+							<div class="vfpdbgtk">
+								<MkGalleryPostPreview
+									v-for="post in items"
+									:key="post.id"
+									:post="post"
+									class="post"
+								/>
+							</div>
+						</MkPagination>
+					</MkFolder>
+				</swiper-slide>
+				<swiper-slide>
+					<MkPagination
+						v-slot="{ items }"
+						:pagination="likedPostsPagination"
+					>
 						<div class="vfpdbgtk">
-							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+							<MkGalleryPostPreview
+								v-for="like in items"
+								:key="like.id"
+								:post="like.post"
+								class="post"
+							/>
 						</div>
 					</MkPagination>
-				</MkFolder>
-				<MkFolder class="_gap">
-					<template #header><i class="ph-fire-simple ph-bold ph-lg"></i> {{ i18n.ts.popularPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
+				</swiper-slide>
+				<swiper-slide>
+					<MkA to="/gallery/new" class="_link" style="margin: 16px"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.postToGallery }}</MkA
+					>
+					<MkPagination
+						v-slot="{ items }"
+						:pagination="myPostsPagination"
+					>
 						<div class="vfpdbgtk">
-							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+							<MkGalleryPostPreview
+								v-for="post in items"
+								:key="post.id"
+								:post="post"
+								class="post"
+							/>
 						</div>
 					</MkPagination>
-				</MkFolder>
-			</swiper-slide>
-			<swiper-slide>
-				<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
-					<div class="vfpdbgtk">
-						<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
-					</div>
-				</MkPagination>
-			</swiper-slide>
-			<swiper-slide>
-				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.postToGallery }}</MkA>
-				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
-					<div class="vfpdbgtk">
-						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-					</div>
-				</MkPagination>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, defineComponent, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { i18n } from "@/i18n";
+import { useRouter } from "@/router";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
@@ -69,58 +123,67 @@ const props = defineProps<{
 	tag?: string;
 }>();
 
-const tabs = ['explore', 'liked', 'my'];
+const tabs = ["explore", "liked", "my"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let tagsRef = $ref();
 
 const recentPostsPagination = {
-	endpoint: 'gallery/posts' as const,
+	endpoint: "gallery/posts" as const,
 	limit: 6,
 };
 const popularPostsPagination = {
-	endpoint: 'gallery/featured' as const,
+	endpoint: "gallery/featured" as const,
 	limit: 5,
 };
 const myPostsPagination = {
-	endpoint: 'i/gallery/posts' as const,
+	endpoint: "i/gallery/posts" as const,
 	limit: 5,
 };
 const likedPostsPagination = {
-	endpoint: 'i/gallery/likes' as const,
+	endpoint: "i/gallery/likes" as const,
 	limit: 5,
 };
 
-watch(() => props.tag, () => {
-	if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
-});
+watch(
+	() => props.tag,
+	() => {
+		if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
+	}
+);
 
-const headerActions = $computed(() => [{
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.create,
-	handler: () => {
-		router.push('/gallery/new');
+const headerActions = $computed(() => [
+	{
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.create,
+		handler: () => {
+			router.push("/gallery/new");
+		},
 	},
-}]);
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'explore',
-	title: i18n.ts.gallery,
-	icon: 'ph-image-square ph-bold ph-lg',
-}, {
-	key: 'liked',
-	title: i18n.ts._gallery.liked,
-	icon: 'ph-heart ph-bold ph-lg',
-}, {
-	key: 'my',
-	title: i18n.ts._gallery.my,
-	icon: 'ph-crown-simple ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "explore",
+		title: i18n.ts.gallery,
+		icon: "ph-image-square ph-bold ph-lg",
+	},
+	{
+		key: "liked",
+		title: i18n.ts._gallery.liked,
+		icon: "ph-heart ph-bold ph-lg",
+	},
+	{
+		key: "my",
+		title: i18n.ts._gallery.my,
+		icon: "ph-crown-simple ph-bold ph-lg",
+	},
+]);
 
 definePageMetadata({
 	title: i18n.ts.gallery,
-	icon: 'ph-image-square ph-bold ph-lg',
+	icon: "ph-image-square ph-bold ph-lg",
 });
 
 let swiperRef = null;
@@ -151,7 +214,6 @@ onMounted(() => {
 	margin: 0 var(--margin);
 
 	> .post {
-
 	}
 }
 </style>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index dd2a445ab..0c104b4c7 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -1,73 +1,163 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
-		<div class="_root">
-			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-				<div v-if="post" class="rkxwuolj">
-					<div class="files">
-						<div v-for="file in post.files" :key="file.id" class="file">
-							<img :src="file.url"/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
+			<div class="_root">
+				<transition
+					:name="$store.state.animation ? 'fade' : ''"
+					mode="out-in"
+				>
+					<div v-if="post" class="rkxwuolj">
+						<div class="files">
+							<div
+								v-for="file in post.files"
+								:key="file.id"
+								class="file"
+							>
+								<img :src="file.url" />
+							</div>
 						</div>
+						<div class="body _block">
+							<div class="title">{{ post.title }}</div>
+							<div class="description">
+								<Mfm :text="post.description" />
+							</div>
+							<div class="info">
+								<i class="ph-clock ph-bold ph-lg"></i>
+								<MkTime :time="post.createdAt" mode="detail" />
+							</div>
+							<div class="actions">
+								<div class="like">
+									<MkButton
+										v-if="post.isLiked"
+										v-tooltip="i18n.ts._gallery.unlike"
+										class="button"
+										primary
+										@click="unlike()"
+										><i class="ph-heart ph-fill ph-lg"></i
+										><span
+											v-if="post.likedCount > 0"
+											class="count"
+											>{{ post.likedCount }}</span
+										></MkButton
+									>
+									<MkButton
+										v-else
+										v-tooltip="i18n.ts._gallery.like"
+										class="button"
+										@click="like()"
+										><i class="ph-heart ph-bold"></i
+										><span
+											v-if="post.likedCount > 0"
+											class="count"
+											>{{ post.likedCount }}</span
+										></MkButton
+									>
+								</div>
+								<div class="other">
+									<button
+										v-if="$i && $i.id === post.user.id"
+										v-tooltip="i18n.ts.edit"
+										v-click-anime
+										class="_button"
+										@click="edit"
+									>
+										<i
+											class="ph-pencil ph-bold ph-lg ph-fw ph-lg"
+										></i>
+									</button>
+									<button
+										v-tooltip="i18n.ts.shareWithNote"
+										v-click-anime
+										class="_button"
+										@click="shareWithNote"
+									>
+										<i
+											class="ph-repeat ph-bold ph-lg ph-fw ph-lg"
+										></i>
+									</button>
+									<button
+										v-if="shareAvailable()"
+										v-tooltip="i18n.ts.share"
+										v-click-anime
+										class="_button"
+										@click="share"
+									>
+										<i
+											class="ph-share-network ph-bold ph-lg ph-fw ph-lg"
+										></i>
+									</button>
+								</div>
+							</div>
+							<div class="user">
+								<MkAvatar :user="post.user" class="avatar" />
+								<div class="name">
+									<MkUserName
+										:user="post.user"
+										style="display: block"
+									/>
+									<MkAcct :user="post.user" />
+								</div>
+								<MkFollowButton
+									v-if="!$i || $i.id != post.user.id"
+									:user="post.user"
+									:inline="true"
+									:transparent="false"
+									:full="true"
+									large
+									class="koudoku"
+								/>
+							</div>
+						</div>
+						<MkAd :prefer="['horizontal', 'horizontal-big']" />
+						<MkContainer
+							:max-height="300"
+							:foldable="true"
+							class="other"
+						>
+							<template #header
+								><i class="ph-clock ph-bold ph-lg"></i>
+								{{ i18n.ts.recentPosts }}</template
+							>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="otherPostsPagination"
+							>
+								<div class="sdrarzaf">
+									<MkGalleryPostPreview
+										v-for="post in items"
+										:key="post.id"
+										:post="post"
+										class="post"
+									/>
+								</div>
+							</MkPagination>
+						</MkContainer>
 					</div>
-					<div class="body _block">
-						<div class="title">{{ post.title }}</div>
-						<div class="description"><Mfm :text="post.description"/></div>
-						<div class="info">
-							<i class="ph-clock ph-bold ph-lg"></i> <MkTime :time="post.createdAt" mode="detail"/>
-						</div>
-						<div class="actions">
-							<div class="like">
-								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ph-heart ph-fill ph-lg"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ph-heart ph-bold"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-							</div>
-							<div class="other">
-								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ph-repeat ph-bold ph-lg ph-fw ph-lg"></i></button>
-								<button v-if="shareAvailable()" v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ph-share-network ph-bold ph-lg ph-fw ph-lg"></i></button>
-							</div>
-						</div>
-						<div class="user">
-							<MkAvatar :user="post.user" class="avatar"/>
-							<div class="name">
-								<MkUserName :user="post.user" style="display: block;"/>
-								<MkAcct :user="post.user"/>
-							</div>
-							<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
-						</div>
-					</div>
-					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-					<MkContainer :max-height="300" :foldable="true" class="other">
-						<template #header><i class="ph-clock ph-bold ph-lg"></i> {{ i18n.ts.recentPosts }}</template>
-						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-							<div class="sdrarzaf">
-								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-							</div>
-						</MkPagination>
-					</MkContainer>
-				</div>
-				<MkError v-else-if="error" @retry="fetch()"/>
-				<MkLoading v-else/>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+					<MkError v-else-if="error" @retry="fetch()" />
+					<MkLoading v-else />
+				</transition>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, inject, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { url } from '@/config';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { shareAvailable } from '@/scripts/share-available';
+import { computed, defineComponent, inject, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import { url } from "@/config";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { shareAvailable } from "@/scripts/share-available";
 
 const router = useRouter();
 
@@ -78,7 +168,7 @@ const props = defineProps<{
 let post = $ref(null);
 let error = $ref(null);
 const otherPostsPagination = {
-	endpoint: 'users/gallery/posts' as const,
+	endpoint: "users/gallery/posts" as const,
 	limit: 6,
 	params: computed(() => ({
 		userId: post.user.id,
@@ -87,13 +177,15 @@ const otherPostsPagination = {
 
 function fetchPost() {
 	post = null;
-	os.api('gallery/posts/show', {
+	os.api("gallery/posts/show", {
 		postId: props.postId,
-	}).then(_post => {
-		post = _post;
-	}).catch(_error => {
-		error = _error;
-	});
+	})
+		.then((_post) => {
+			post = _post;
+		})
+		.catch((_error) => {
+			error = _error;
+		});
 }
 
 function share() {
@@ -111,7 +203,7 @@ function shareWithNote() {
 }
 
 function like() {
-	os.apiWithDialog('gallery/posts/like', {
+	os.apiWithDialog("gallery/posts/like", {
 		postId: props.postId,
 	}).then(() => {
 		post.isLiked = true;
@@ -120,7 +212,7 @@ function like() {
 }
 
 async function unlike() {
-	os.api('gallery/posts/unlike', {
+	os.api("gallery/posts/unlike", {
 		postId: props.postId,
 	}).then(() => {
 		post.isLiked = false;
@@ -134,18 +226,26 @@ function edit() {
 
 watch(() => props.postId, fetchPost, { immediate: true });
 
-const headerActions = $computed(() => [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.edit,
-	handler: edit,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.edit,
+		handler: edit,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => post ? {
-	title: post.title,
-	avatar: post.user,
-} : null));
+definePageMetadata(
+	computed(() =>
+		post
+			? {
+					title: post.title,
+					avatar: post.user,
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
@@ -255,7 +355,6 @@ definePageMetadata(computed(() => post ? {
 	margin: var(--margin);
 
 	> .post {
-
 	}
 }
 </style>
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index f84e3b014..5c8147351 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -1,164 +1,356 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer
+			v-if="instance"
+			:content-max="600"
+			:margin-min="16"
+			:margin-max="32"
 		>
-			<swiper-slide>
-				<div class="_formRoot">
-					<div class="fnfelxur">
-						<img :src="faviconUrl" alt="" class="icon"/>
-						<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
-					</div>
-					<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
-						<template #key>Host</template>
-						<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
-					</MkKeyValue>
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.software }}</template>
-						<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
-					</MkKeyValue>
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.administrator }}</template>
-						<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
-					</MkKeyValue>
-					<MkKeyValue>
-						<template #key>{{ i18n.ts.description }}</template>
-						<template #value>{{ instance.description }}</template>
-					</MkKeyValue>
-
-					<FormSection v-if="iAmModerator">
-						<template #label>Moderation</template>
-						<FormSuspense :p="init">
-							<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
-							<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
-						</FormSuspense>
-						<MkButton @click="refreshMetadata"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> Refresh metadata</MkButton>
-					</FormSection>
-
-					<FormSection>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.registeredAt }}</template>
-							<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.updatedAt }}</template>
-							<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.latestRequestSentAt }}</template>
-							<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.latestStatus }}</template>
-							<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
-							<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
-						</MkKeyValue>
-					</FormSection>
-
-					<FormSection>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>Following (Pub)</template>
-							<template #value>{{ number(instance.followingCount) }}</template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>Followers (Sub)</template>
-							<template #value>{{ number(instance.followersCount) }}</template>
-						</MkKeyValue>
-					</FormSection>
-
-					<FormSection>
-						<template #label>Well-known resources</template>
-						<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
-						<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
-						<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
-						<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
-						<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
-					</FormSection>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<div class="cmhjzshl">
-						<div class="selects">
-							<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-								<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
-								<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
-								<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
-								<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
-								<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
-								<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
-								<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
-								<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
-								<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
-								<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
-								<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
-							</MkSelect>
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="_formRoot">
+						<div class="fnfelxur">
+							<img :src="faviconUrl" alt="" class="icon" />
+							<span class="name">{{
+								instance.name || `(${i18n.ts.unknown})`
+							}}</span>
 						</div>
-						<div class="charts">
-							<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-							<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-							<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-							<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+						<MkKeyValue :copy="host" oneline style="margin: 1em 0">
+							<template #key>Host</template>
+							<template #value
+								><span class="_monospace"
+									><MkLink :url="`https://${host}`">{{
+										host
+									}}</MkLink></span
+								></template
+							>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0">
+							<template #key>{{ i18n.ts.software }}</template>
+							<template #value
+								><span class="_monospace"
+									>{{
+										instance.softwareName ||
+										`(${i18n.ts.unknown})`
+									}}
+									/
+									{{
+										instance.softwareVersion ||
+										`(${i18n.ts.unknown})`
+									}}</span
+								></template
+							>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0">
+							<template #key>{{
+								i18n.ts.administrator
+							}}</template>
+							<template #value
+								>{{
+									instance.maintainerName ||
+									`(${i18n.ts.unknown})`
+								}}
+								({{
+									instance.maintainerEmail ||
+									`(${i18n.ts.unknown})`
+								}})</template
+							>
+						</MkKeyValue>
+						<MkKeyValue>
+							<template #key>{{ i18n.ts.description }}</template>
+							<template #value>{{
+								instance.description
+							}}</template>
+						</MkKeyValue>
+
+						<FormSection v-if="iAmModerator">
+							<template #label>Moderation</template>
+							<FormSuspense :p="init">
+								<FormSwitch
+									v-model="suspended"
+									class="_formBlock"
+									@update:modelValue="toggleSuspend"
+									>{{
+										i18n.ts.stopActivityDelivery
+									}}</FormSwitch
+								>
+								<FormSwitch
+									v-model="isBlocked"
+									class="_formBlock"
+									@update:modelValue="toggleBlock"
+									>{{ i18n.ts.blockThisInstance }}</FormSwitch
+								>
+							</FormSuspense>
+							<MkButton @click="refreshMetadata"
+								><i
+									class="ph-arrows-clockwise ph-bold ph-lg"
+								></i>
+								Refresh metadata</MkButton
+							>
+						</FormSection>
+
+						<FormSection>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.registeredAt
+								}}</template>
+								<template #value
+									><MkTime
+										mode="detail"
+										:time="instance.caughtAt"
+								/></template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.updatedAt
+								}}</template>
+								<template #value
+									><MkTime
+										mode="detail"
+										:time="instance.infoUpdatedAt"
+								/></template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.latestRequestSentAt
+								}}</template>
+								<template #value
+									><MkTime
+										v-if="instance.latestRequestSentAt"
+										:time="instance.latestRequestSentAt"
+									/><span v-else>N/A</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.latestStatus
+								}}</template>
+								<template #value>{{
+									instance.latestStatus
+										? instance.latestStatus
+										: "N/A"
+								}}</template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.latestRequestReceivedAt
+								}}</template>
+								<template #value
+									><MkTime
+										v-if="instance.latestRequestReceivedAt"
+										:time="instance.latestRequestReceivedAt"
+									/><span v-else>N/A</span></template
+								>
+							</MkKeyValue>
+						</FormSection>
+
+						<FormSection>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>Following (Pub)</template>
+								<template #value>{{
+									number(instance.followingCount)
+								}}</template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>Followers (Sub)</template>
+								<template #value>{{
+									number(instance.followersCount)
+								}}</template>
+							</MkKeyValue>
+						</FormSection>
+
+						<FormSection>
+							<template #label>Well-known resources</template>
+							<FormLink
+								:to="`https://${host}/.well-known/host-meta`"
+								external
+								style="margin-bottom: 8px"
+								>host-meta</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/.well-known/host-meta.json`"
+								external
+								style="margin-bottom: 8px"
+								>host-meta.json</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/.well-known/nodeinfo`"
+								external
+								style="margin-bottom: 8px"
+								>nodeinfo</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/robots.txt`"
+								external
+								style="margin-bottom: 8px"
+								>robots.txt</FormLink
+							>
+							<FormLink
+								:to="`https://${host}/manifest.json`"
+								external
+								style="margin-bottom: 8px"
+								>manifest.json</FormLink
+							>
+						</FormSection>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<div class="cmhjzshl">
+							<div class="selects">
+								<MkSelect
+									v-model="chartSrc"
+									style="margin: 0 10px 0 0; flex: 1"
+								>
+									<option value="instance-requests">
+										{{ i18n.ts._instanceCharts.requests }}
+									</option>
+									<option value="instance-users">
+										{{ i18n.ts._instanceCharts.users }}
+									</option>
+									<option value="instance-users-total">
+										{{ i18n.ts._instanceCharts.usersTotal }}
+									</option>
+									<option value="instance-notes">
+										{{ i18n.ts._instanceCharts.notes }}
+									</option>
+									<option value="instance-notes-total">
+										{{ i18n.ts._instanceCharts.notesTotal }}
+									</option>
+									<option value="instance-ff">
+										{{ i18n.ts._instanceCharts.ff }}
+									</option>
+									<option value="instance-ff-total">
+										{{ i18n.ts._instanceCharts.ffTotal }}
+									</option>
+									<option value="instance-drive-usage">
+										{{ i18n.ts._instanceCharts.cacheSize }}
+									</option>
+									<option value="instance-drive-usage-total">
+										{{
+											i18n.ts._instanceCharts
+												.cacheSizeTotal
+										}}
+									</option>
+									<option value="instance-drive-files">
+										{{ i18n.ts._instanceCharts.files }}
+									</option>
+									<option value="instance-drive-files-total">
+										{{ i18n.ts._instanceCharts.filesTotal }}
+									</option>
+								</MkSelect>
+							</div>
+							<div class="charts">
+								<div class="label">
+									{{ i18n.t("recentNHours", { n: 90 }) }}
+								</div>
+								<MkChart
+									class="chart"
+									:src="chartSrc"
+									span="hour"
+									:limit="90"
+									:args="{ host: host }"
+									:detailed="true"
+								></MkChart>
+								<div class="label">
+									{{ i18n.t("recentNDays", { n: 90 }) }}
+								</div>
+								<MkChart
+									class="chart"
+									:src="chartSrc"
+									span="day"
+									:limit="90"
+									:args="{ host: host }"
+									:detailed="true"
+								></MkChart>
+							</div>
 						</div>
 					</div>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
-						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
-							<MkUserCardMini :user="user"/>
-						</MkA>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="_formRoot">
-					<MkObjectView tall :value="instance">
-					</MkObjectView>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="usersPagination"
+							style="
+								display: grid;
+								grid-template-columns: repeat(
+									auto-fill,
+									minmax(270px, 1fr)
+								);
+								grid-gap: 12px;
+							"
+						>
+							<MkA
+								v-for="user in items"
+								:key="user.id"
+								v-tooltip.mfm="
+									`Last posted: ${new Date(
+										user.updatedAt
+									).toLocaleString()}`
+								"
+								class="user"
+								:to="`/user-info/${user.id}`"
+							>
+								<MkUserCardMini :user="user" />
+							</MkA>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="_formRoot">
+						<MkObjectView tall :value="instance"> </MkObjectView>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import type * as misskey from 'calckey-js';
-import MkChart from '@/components/MkChart.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import FormLink from '@/components/form/link.vue';
-import MkLink from '@/components/MkLink.vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkSelect from '@/components/form/select.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { iAmModerator } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import type * as misskey from "calckey-js";
+import MkChart from "@/components/MkChart.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import FormLink from "@/components/form/link.vue";
+import MkLink from "@/components/MkLink.vue";
+import MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkSelect from "@/components/form/select.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { iAmModerator } from "@/account";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import "swiper/scss";
+import "swiper/scss/virtual";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 type AugmentedInstanceMetadata = misskey.entities.DetailedInstanceMetadata & {
 	blockedHosts: string[];
@@ -171,12 +363,12 @@ const props = defineProps<{
 	host: string;
 }>();
 
-let tabs = ['overview'];
-if (iAmModerator) tabs.push('chart', 'users', 'raw');
+let tabs = ["overview"];
+if (iAmModerator) tabs.push("chart", "users", "raw");
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
-let chartSrc = $ref('instance-requests');
+let chartSrc = $ref("instance-requests");
 let meta = $ref<AugmentedInstanceMetadata | null>(null);
 let instance = $ref<AugmentedInstance | null>(null);
 let suspended = $ref(false);
@@ -184,29 +376,29 @@ let isBlocked = $ref(false);
 let faviconUrl = $ref(null);
 
 const usersPagination = {
-	endpoint: iAmModerator ? 'admin/show-users' : 'users' as const,
+	endpoint: iAmModerator ? "admin/show-users" : ("users" as const),
 	limit: 10,
 	params: {
-		sort: '+updatedAt',
-		state: 'all',
+		sort: "+updatedAt",
+		state: "all",
 		hostname: props.host,
 	},
 	offsetMode: true,
 };
 
 async function init() {
-	meta = await os.api('admin/meta');
+	meta = await os.api("admin/meta");
 }
 
 async function fetch() {
-	instance = (await os.api('federation/show-instance', {
+	instance = (await os.api("federation/show-instance", {
 		host: props.host,
 	})) as AugmentedInstance;
 	suspended = instance.isSuspended;
 	isBlocked = instance.isBlocked;
 	faviconUrl =
-		getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ??
-		getProxiedImageUrlNullable(instance.iconUrl, 'preview');
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.iconUrl, "preview");
 }
 
 async function toggleBlock() {
@@ -220,58 +412,64 @@ async function toggleBlock() {
 	} else {
 		blockedHosts = meta.blockedHosts.filter((x) => x !== instance!.host);
 	}
-	await os.api('admin/update-meta', {
+	await os.api("admin/update-meta", {
 		blockedHosts,
 	});
 }
 
 async function toggleSuspend(v) {
-	await os.api('admin/federation/update-instance', {
+	await os.api("admin/federation/update-instance", {
 		host: instance.host,
 		isSuspended: suspended,
 	});
 }
 
 function refreshMetadata() {
-	os.api('admin/federation/refresh-remote-instance-metadata', {
+	os.api("admin/federation/refresh-remote-instance-metadata", {
 		host: instance.host,
 	});
 	os.alert({
-		text: 'Refresh requested',
+		text: "Refresh requested",
 	});
 }
 
 fetch();
 
-const headerActions = $computed(() => [{
-	text: `https://${props.host}`,
-	icon: 'ph-arrow-square-out ph-bold ph-lg',
-	handler: () => {
-		window.open(`https://${props.host}`, '_blank');
+const headerActions = $computed(() => [
+	{
+		text: `https://${props.host}`,
+		icon: "ph-arrow-square-out ph-bold ph-lg",
+		handler: () => {
+			window.open(`https://${props.host}`, "_blank");
+		},
 	},
-}]);
+]);
 
-let theTabs = [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-info ph-bold ph-lg',
-}];
+let theTabs = [
+	{
+		key: "overview",
+		title: i18n.ts.overview,
+		icon: "ph-info ph-bold ph-lg",
+	},
+];
 
 if (iAmModerator) {
 	theTabs.push(
 		{
-			key: 'chart',
+			key: "chart",
 			title: i18n.ts.charts,
-			icon: 'ph-chart-bar ph-bold ph-lg',
-		}, {
-			key: 'users',
-			title: i18n.ts.users,
-			icon: 'ph-users ph-bold ph-lg',
-		}, {
-			key: 'raw',
-			title: 'Raw',
-			icon: 'ph-code ph-bold ph-lg',
+			icon: "ph-chart-bar ph-bold ph-lg",
 		},
+		{
+			key: "users",
+			title: i18n.ts.users,
+			icon: "ph-users ph-bold ph-lg",
+		},
+		{
+			key: "raw",
+			title: "Raw",
+			icon: "ph-code ph-bold ph-lg",
+		}
 	);
 }
 
@@ -279,7 +477,7 @@ let headerTabs = $computed(() => theTabs);
 
 definePageMetadata({
 	title: props.host,
-	icon: 'ph-hard-drives ph-bold ph-lg',
+	icon: "ph-hard-drives ph-bold ph-lg",
 });
 
 let swiperRef = null;
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index b2fed66de..768c58cc6 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -1,106 +1,162 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div>
-		<MkSpacer :content-max="800">
-			<swiper
-				:modules="[Virtual]"
-				:space-between="20"
-				:virtual="true"
-				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-				@swiper="setSwiperRef"
-				@slide-change="onSlideChange"
-			>
-				<swiper-slide>
-					<div class="_content yweeujhr dms">
-						<MkButton primary class="start" v-if="!isMobile" @click="startUser"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
-						<MkPagination v-slot="{items}" :pagination="dmsPagination">
-							<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
-						</MkPagination>
-					</div>
-				</swiper-slide>
-				<swiper-slide>
-					<div class="_content yweeujhr groups">
-						<div v-if="!isMobile" class="groupsbuttons">
-							<MkButton primary class="start" :link="true" to="/my/groups"><i class="ph-user-circle-gear ph-bold ph-lg"></i> {{ i18n.ts.manageGroups }}</MkButton>
-							<MkButton primary class="start" @click="startGroup"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.startMessaging }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<div>
+			<MkSpacer :content-max="800">
+				<swiper
+					:modules="[Virtual]"
+					:space-between="20"
+					:virtual="true"
+					:allow-touch-move="
+						!(
+							deviceKind === 'desktop' &&
+							!defaultStore.state.swipeOnDesktop
+						)
+					"
+					@swiper="setSwiperRef"
+					@slide-change="onSlideChange"
+				>
+					<swiper-slide>
+						<div class="_content yweeujhr dms">
+							<MkButton
+								primary
+								class="start"
+								v-if="!isMobile"
+								@click="startUser"
+								><i class="ph-plus ph-bold ph-lg"></i>
+								{{ i18n.ts.startMessaging }}</MkButton
+							>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="dmsPagination"
+							>
+								<MkChatPreview
+									v-for="message in items"
+									:key="message.id"
+									class="yweeujhr message _block"
+									:message="message"
+								/>
+							</MkPagination>
 						</div>
-						<MkPagination v-slot="{items}" :pagination="groupsPagination">
-							<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
-						</MkPagination>
-					</div>
-				</swiper-slide>
-			</swiper>
-		</MkSpacer>
-	</div>
-</MkStickyContainer>
+					</swiper-slide>
+					<swiper-slide>
+						<div class="_content yweeujhr groups">
+							<div v-if="!isMobile" class="groupsbuttons">
+								<MkButton
+									primary
+									class="start"
+									:link="true"
+									to="/my/groups"
+									><i
+										class="ph-user-circle-gear ph-bold ph-lg"
+									></i>
+									{{ i18n.ts.manageGroups }}</MkButton
+								>
+								<MkButton
+									primary
+									class="start"
+									@click="startGroup"
+									><i class="ph-plus ph-bold ph-lg"></i>
+									{{ i18n.ts.startMessaging }}</MkButton
+								>
+							</div>
+							<MkPagination
+								v-slot="{ items }"
+								:pagination="groupsPagination"
+							>
+								<MkChatPreview
+									v-for="message in items"
+									:key="message.id"
+									class="yweeujhr message _block"
+									:message="message"
+								/>
+							</MkPagination>
+						</div>
+					</swiper-slide>
+				</swiper>
+			</MkSpacer>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, markRaw, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkButton from '@/components/MkButton.vue';
-import MkChatPreview from '@/components/MkChatPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { ref, markRaw, onMounted, onUnmounted, watch } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkButton from "@/components/MkButton.vue";
+import MkChatPreview from "@/components/MkChatPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { $i } from "@/account";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
 let messages = $ref([]);
 let connection = $ref(null);
 
-const tabs = ['dms', 'groups'];
+const tabs = ["dms", "groups"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const MOBILE_THRESHOLD = 500;
-const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
-window.addEventListener('resize', () => {
-	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+const isMobile = ref(
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
+);
+window.addEventListener("resize", () => {
+	isMobile.value =
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.addUser,
-	handler: startMenu,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.addUser,
+		handler: startMenu,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'dms',
-	title: i18n.ts._messaging.dms,
-	icon: 'ph-user ph-bold ph-lg',
-}, {
-	key: 'groups',
-	title: i18n.ts._messaging.groups,
-	icon: 'ph-users-three ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "dms",
+		title: i18n.ts._messaging.dms,
+		icon: "ph-user ph-bold ph-lg",
+	},
+	{
+		key: "groups",
+		title: i18n.ts._messaging.groups,
+		icon: "ph-users-three ph-bold ph-lg",
+	},
+]);
 
 definePageMetadata({
 	title: i18n.ts.messaging,
-	icon: 'ph-chats-teardrop ph-bold ph-lg',
+	icon: "ph-chats-teardrop ph-bold ph-lg",
 });
 
 const dmsPagination = {
-	endpoint: 'messaging/history' as const,
+	endpoint: "messaging/history" as const,
 	limit: 15,
 	params: {
 		group: false,
 	},
 };
 const groupsPagination = {
-	endpoint: 'messaging/history' as const,
+	endpoint: "messaging/history" as const,
 	limit: 5,
 	params: {
 		group: true,
@@ -109,20 +165,26 @@ const groupsPagination = {
 
 function onMessage(message): void {
 	if (message.recipientId) {
-		messages = messages.filter(m => !(
-			(m.recipientId === message.recipientId && m.userId === message.userId) ||
-				(m.recipientId === message.userId && m.userId === message.recipientId)));
+		messages = messages.filter(
+			(m) =>
+				!(
+					(m.recipientId === message.recipientId &&
+						m.userId === message.userId) ||
+					(m.recipientId === message.userId &&
+						m.userId === message.recipientId)
+				)
+		);
 
 		messages.unshift(message);
 	} else if (message.groupId) {
-		messages = messages.filter(m => m.groupId !== message.groupId);
+		messages = messages.filter((m) => m.groupId !== message.groupId);
 		messages.unshift(message);
 	}
 }
 
 function onRead(ids): void {
 	for (const id of ids) {
-		const found = messages.find(m => m.id === id);
+		const found = messages.find((m) => m.id === id);
 		if (found) {
 			if (found.recipientId) {
 				found.isRead = true;
@@ -134,30 +196,39 @@ function onRead(ids): void {
 }
 
 function startMenu(ev) {
-	os.popupMenu([{
-		text: i18n.ts.messagingWithUser,
-		icon: 'ph-user ph-bold ph-lg',
-		action: () => { startUser(); },
-	}, {
-		text: i18n.ts.messagingWithGroup,
-		icon: 'ph-users-three ph-bold ph-lg',
-		action: () => { startGroup(); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.messagingWithUser,
+				icon: "ph-user ph-bold ph-lg",
+				action: () => {
+					startUser();
+				},
+			},
+			{
+				text: i18n.ts.messagingWithGroup,
+				icon: "ph-users-three ph-bold ph-lg",
+				action: () => {
+					startGroup();
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
-
 async function startUser(): void {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		router.push(`/my/messaging/${Acct.toString(user)}`);
 	});
 }
 
 async function startGroup(): void {
-	const groups1 = await os.api('users/groups/owned');
-	const groups2 = await os.api('users/groups/joined');
+	const groups1 = await os.api("users/groups/owned");
+	const groups2 = await os.api("users/groups/joined");
 	if (groups1.length === 0 && groups2.length === 0) {
 		os.alert({
-			type: 'warning',
+			type: "warning",
 			title: i18n.ts.youHaveNoGroups,
 			text: i18n.ts.joinOrCreateGroup,
 		});
@@ -165,8 +236,9 @@ async function startGroup(): void {
 	}
 	const { canceled, result: group } = await os.select({
 		title: i18n.ts.group,
-		items: groups1.concat(groups2).map(group => ({
-			value: group, text: group.name,
+		items: groups1.concat(groups2).map((group) => ({
+			value: group,
+			text: group.name,
 		})),
 	});
 	if (canceled) return;
@@ -191,18 +263,26 @@ function syncSlide(index) {
 onMounted(() => {
 	syncSlide(tabs.indexOf(swiperRef.activeIndex));
 
-	connection = markRaw(stream.useChannel('messagingIndex'));
+	connection = markRaw(stream.useChannel("messagingIndex"));
 
-	connection.on('message', onMessage);
-	connection.on('read', onRead);
+	connection.on("message", onMessage);
+	connection.on("read", onRead);
 
-	os.api('messaging/history', { group: false, limit: 5 }).then(userMessages => {
-		os.api('messaging/history', { group: true, limit: 5 }).then(groupMessages => {
-			const _messages = userMessages.concat(groupMessages);
-			_messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
-			messages = _messages;
-		});
-	});
+	os.api("messaging/history", { group: false, limit: 5 }).then(
+		(userMessages) => {
+			os.api("messaging/history", { group: true, limit: 5 }).then(
+				(groupMessages) => {
+					const _messages = userMessages.concat(groupMessages);
+					_messages.sort(
+						(a, b) =>
+							new Date(b.createdAt).getTime() -
+							new Date(a.createdAt).getTime()
+					);
+					messages = _messages;
+				}
+			);
+		}
+	);
 });
 
 onUnmounted(() => {
@@ -210,17 +290,17 @@ onUnmounted(() => {
 });
 </script>
 
-	<style lang="scss" scoped>
-	.yweeujhr {
-		> .start {
-			margin: 0 auto var(--margin) auto;
-		}
-
-		> .groupsbuttons {
-			max-width: 100%;
-			display: flex;
-			justify-content: center;
-			margin-bottom: 1rem;
-		}
+<style lang="scss" scoped>
+.yweeujhr {
+	> .start {
+		margin: 0 auto var(--margin) auto;
 	}
-	</style>
+
+	> .groupsbuttons {
+		max-width: 100%;
+		display: flex;
+		justify-content: center;
+		margin-bottom: 1rem;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 4e7fa30a6..4bc12ce9a 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -1,45 +1,64 @@
 <template>
-<div
-	class="pemppnzi _block"
-	@dragover.stop="onDragover"
-	@drop.stop="onDrop"
->
-	<textarea
-		ref="textEl"
-		v-model="text"
-		:placeholder="i18n.ts.inputMessageHere"
-		@keydown="onKeydown"
-		@compositionupdate="onCompositionUpdate"
-		@paste="onPaste"
-	></textarea>
-	<footer>
-		<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
-		<div class="buttons">
-			<button class="_button" @click="chooseFile"><i class="ph-upload ph-bold ph-lg"></i></button>
-			<button class="_button" @click="insertEmoji"><i class="ph-smiley ph-bold ph-lg"></i></button>
-			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
-				<template v-if="!sending"><i class="ph-paper-plane-tilt ph-bold ph-lg"></i></template><template v-if="sending"><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i></template>
-			</button>
-		</div>
-	</footer>
-	<input ref="fileEl" type="file" @change="onChangeFile"/>
-</div>
+	<div
+		class="pemppnzi _block"
+		@dragover.stop="onDragover"
+		@drop.stop="onDrop"
+	>
+		<textarea
+			ref="textEl"
+			v-model="text"
+			:placeholder="i18n.ts.inputMessageHere"
+			@keydown="onKeydown"
+			@compositionupdate="onCompositionUpdate"
+			@paste="onPaste"
+		></textarea>
+		<footer>
+			<div v-if="file" class="file" @click="file = null">
+				{{ file.name }}
+			</div>
+			<div class="buttons">
+				<button class="_button" @click="chooseFile">
+					<i class="ph-upload ph-bold ph-lg"></i>
+				</button>
+				<button class="_button" @click="insertEmoji">
+					<i class="ph-smiley ph-bold ph-lg"></i>
+				</button>
+				<button
+					class="send _button"
+					:disabled="!canSend || sending"
+					:title="i18n.ts.send"
+					@click="send"
+				>
+					<template v-if="!sending"
+						><i
+							class="ph-paper-plane-tilt ph-bold ph-lg"
+						></i></template
+					><template v-if="sending"
+						><i
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i
+					></template>
+				</button>
+			</div>
+		</footer>
+		<input ref="fileEl" type="file" @change="onChangeFile" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as Misskey from 'calckey-js';
-import autosize from 'autosize';
+import { onMounted, watch } from "vue";
+import * as Misskey from "calckey-js";
+import autosize from "autosize";
 //import insertTextAtCursor from 'insert-text-at-cursor';
-import { throttle } from 'throttle-debounce';
-import { Autocomplete } from '@/scripts/autocomplete';
-import { formatTimeString } from '@/scripts/format-time-string';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { uploadFile } from '@/scripts/upload';
+import { throttle } from "throttle-debounce";
+import { Autocomplete } from "@/scripts/autocomplete";
+import { formatTimeString } from "@/scripts/format-time-string";
+import { selectFile } from "@/scripts/select-file";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { uploadFile } from "@/scripts/upload";
 
 const props = defineProps<{
 	user?: Misskey.entities.UserDetailed | null;
@@ -49,15 +68,22 @@ const props = defineProps<{
 let textEl = $ref<HTMLTextAreaElement>();
 let fileEl = $ref<HTMLInputElement>();
 
-let text = $ref<string>('');
+let text = $ref<string>("");
 let file = $ref<Misskey.entities.DriveFile | null>(null);
 let sending = $ref(false);
 const typing = throttle(3000, () => {
-	stream.send('typingOnMessaging', props.user ? { partner: props.user.id } : { group: props.group?.id });
+	stream.send(
+		"typingOnMessaging",
+		props.user ? { partner: props.user.id } : { group: props.group?.id }
+	);
 });
 
-let draftKey = $computed(() => props.user ? 'user:' + props.user.id : 'group:' + props.group?.id);
-let canSend = $computed(() => (text != null && text.trim() !== '') || file != null);
+let draftKey = $computed(() =>
+	props.user ? "user:" + props.user.id : "group:" + props.group?.id
+);
+let canSend = $computed(
+	() => (text != null && text.trim() !== "") || file != null
+);
 
 watch([$$(text), $$(file)], saveDraft);
 
@@ -68,18 +94,22 @@ async function onPaste(ev: ClipboardEvent) {
 	const items = clipboardData.items;
 
 	if (items.length === 1) {
-		if (items[0].kind === 'file') {
+		if (items[0].kind === "file") {
 			const pastedFile = items[0].getAsFile();
 			if (!pastedFile) return;
-			const lio = pastedFile.name.lastIndexOf('.');
-			const ext = lio >= 0 ? pastedFile.name.slice(lio) : '';
-			const formatted = formatTimeString(new Date(pastedFile.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, '1') + ext;
+			const lio = pastedFile.name.lastIndexOf(".");
+			const ext = lio >= 0 ? pastedFile.name.slice(lio) : "";
+			const formatted =
+				formatTimeString(
+					new Date(pastedFile.lastModified),
+					defaultStore.state.pastedFileName
+				).replace(/{{number}}/g, "1") + ext;
 			if (formatted) upload(pastedFile, formatted);
 		}
 	} else {
-		if (items[0].kind === 'file') {
+		if (items[0].kind === "file") {
 			os.alert({
-				type: 'error',
+				type: "error",
 				text: i18n.ts.onlyOneFileCanBeAttached,
 			});
 		}
@@ -89,11 +119,12 @@ async function onPaste(ev: ClipboardEvent) {
 function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	}
 }
 
@@ -108,7 +139,7 @@ function onDrop(ev: DragEvent): void {
 	} else if (ev.dataTransfer.files.length > 1) {
 		ev.preventDefault();
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.onlyOneFileCanBeAttached,
 		});
 		return;
@@ -116,7 +147,7 @@ function onDrop(ev: DragEvent): void {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		file = JSON.parse(driveFile);
 		ev.preventDefault();
 	}
@@ -125,18 +156,23 @@ function onDrop(ev: DragEvent): void {
 
 function onKeydown(ev: KeyboardEvent) {
 	typing();
-	let sendOnEnter = localStorage.getItem('enterSendsMessage') === 'true' || defaultStore.state.enterSendsMessage;
+	let sendOnEnter =
+		localStorage.getItem("enterSendsMessage") === "true" ||
+		defaultStore.state.enterSendsMessage;
 	if (sendOnEnter) {
-		if ((ev.key === 'Enter') && (ev.ctrlKey || ev.metaKey)) {
-			textEl.value += '\n';
-		}
-		else if (ev.key === 'Enter' && !ev.shiftKey && !('ontouchstart' in document.documentElement) && canSend) {
+		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey)) {
+			textEl.value += "\n";
+		} else if (
+			ev.key === "Enter" &&
+			!ev.shiftKey &&
+			!("ontouchstart" in document.documentElement) &&
+			canSend
+		) {
 			ev.preventDefault();
 			send();
 		}
-	}
-	else {
-		if ((ev.key === 'Enter') && (ev.ctrlKey || ev.metaKey) && canSend) {
+	} else {
+		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey) && canSend) {
 			ev.preventDefault();
 			send();
 		}
@@ -148,9 +184,11 @@ function onCompositionUpdate() {
 }
 
 function chooseFile(ev: MouseEvent) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(selectedFile => {
-		file = selectedFile;
-	});
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(
+		(selectedFile) => {
+			file = selectedFile;
+		}
+	);
 }
 
 function onChangeFile() {
@@ -158,35 +196,40 @@ function onChangeFile() {
 }
 
 function upload(fileToUpload: File, name?: string) {
-	uploadFile(fileToUpload, defaultStore.state.uploadFolder, name).then(res => {
-		file = res;
-	});
+	uploadFile(fileToUpload, defaultStore.state.uploadFolder, name).then(
+		(res) => {
+			file = res;
+		}
+	);
 }
 
 function send() {
 	sending = true;
-	os.api('messaging/messages/create', {
+	os.api("messaging/messages/create", {
 		userId: props.user ? props.user.id : undefined,
 		groupId: props.group ? props.group.id : undefined,
 		text: text ? text : undefined,
 		fileId: file ? file.id : undefined,
-	}).then(message => {
-		clear();
-	}).catch(err => {
-		console.error(err);
-	}).then(() => {
-		sending = false;
-	});
+	})
+		.then((message) => {
+			clear();
+		})
+		.catch((err) => {
+			console.error(err);
+		})
+		.then(() => {
+			sending = false;
+		});
 }
 
 function clear() {
-	text = '';
+	text = "";
 	file = null;
 	deleteDraft();
 }
 
 function saveDraft() {
-	const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
 
 	drafts[draftKey] = {
 		updatedAt: new Date(),
@@ -196,15 +239,15 @@ function saveDraft() {
 		},
 	};
 
-	localStorage.setItem('message_drafts', JSON.stringify(drafts));
+	localStorage.setItem("message_drafts", JSON.stringify(drafts));
 }
 
 function deleteDraft() {
-	const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
+	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
 
 	delete drafts[draftKey];
 
-	localStorage.setItem('message_drafts', JSON.stringify(drafts));
+	localStorage.setItem("message_drafts", JSON.stringify(drafts));
 }
 
 async function insertEmoji(ev: MouseEvent) {
@@ -218,7 +261,9 @@ onMounted(() => {
 	new Autocomplete(textEl, $$(text));
 
 	// 書きかけの投稿を復元
-	const draft = JSON.parse(localStorage.getItem('message_drafts') || '{}')[draftKey];
+	const draft = JSON.parse(localStorage.getItem("message_drafts") || "{}")[
+		draftKey
+	];
 	if (draft) {
 		text = draft.data.text;
 		file = draft.data.file;
@@ -277,7 +322,7 @@ defineExpose({
 		list-style: none;
 
 		&:after {
-			content: '';
+			content: "";
 			display: block;
 			clear: both;
 		}
@@ -354,7 +399,7 @@ defineExpose({
 		}
 	}
 
-	input[type=file] {
+	input[type="file"] {
 		display: none;
 	}
 }
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index d28128506..e8cffc061 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -1,50 +1,93 @@
 <template>
-<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
-	<MkAvatar v-if="!isMe" class="avatar" :user="message.user" :show-indicator="true"/>
-	<div class="content">
-		<div class="balloon" :class="{ noText: message.text == null }">
-			<button v-if="isMe" class="delete-button" :title="i18n.ts.delete" @click="del">
-				<img src="/client-assets/remove.png" alt="Delete"/>
-			</button>
-			<div v-if="!message.isDeleted" class="content">
-				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
+	<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
+		<MkAvatar
+			v-if="!isMe"
+			class="avatar"
+			:user="message.user"
+			:show-indicator="true"
+		/>
+		<div class="content">
+			<div class="balloon" :class="{ noText: message.text == null }">
+				<button
+					v-if="isMe"
+					class="delete-button"
+					:title="i18n.ts.delete"
+					@click="del"
+				>
+					<img src="/client-assets/remove.png" alt="Delete" />
+				</button>
+				<div v-if="!message.isDeleted" class="content">
+					<Mfm
+						v-if="message.text"
+						ref="text"
+						class="text"
+						:text="message.text"
+						:i="$i"
+					/>
+				</div>
+				<div v-else class="content">
+					<p class="is-deleted">{{ i18n.ts.deleted }}</p>
+				</div>
 			</div>
-			<div v-else class="content">
-				<p class="is-deleted">{{ i18n.ts.deleted }}</p>
+			<div v-if="message.file" class="file" width="400px">
+				<XMediaList
+					v-if="
+						message.file.type.split('/')[0] == 'image' ||
+						message.file.type.split('/')[0] == 'video'
+					"
+					:in-dm="true"
+					width="400px"
+					:media-list="[message.file]"
+					style="border-radius: 5px"
+				/>
+				<a
+					v-else
+					:href="message.file.url"
+					rel="noopener"
+					target="_blank"
+					:title="message.file.name"
+				>
+					<p>{{ message.file.name }}</p>
+				</a>
 			</div>
+			<div></div>
+			<MkUrlPreview
+				v-for="url in urls"
+				:key="url"
+				:url="url"
+				style="margin: 8px 0"
+			/>
+			<footer>
+				<template v-if="isGroup">
+					<span v-if="message.reads.length > 0" class="read"
+						>{{ i18n.ts.messageRead }}
+						{{ message.reads.length }}</span
+					>
+				</template>
+				<template v-else>
+					<span v-if="isMe && message.isRead" class="read">{{
+						i18n.ts.messageRead
+					}}</span>
+				</template>
+				<MkTime :time="message.createdAt" />
+				<template v-if="message.is_edited"
+					><i class="ph-pencil ph-bold ph-lg"></i
+				></template>
+			</footer>
 		</div>
-		<div v-if="message.file" class="file" width="400px">
-			<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :in-dm="true" width="400px" :media-list="[message.file]" style="border-radius: 5px"/>
-			<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
-				<p>{{ message.file.name }}</p>
-			</a>
-		</div>
-		<div></div>
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
-		<footer>
-			<template v-if="isGroup">
-				<span v-if="message.reads.length > 0" class="read">{{ i18n.ts.messageRead }} {{ message.reads.length }}</span>
-			</template>
-			<template v-else>
-				<span v-if="isMe && message.isRead" class="read">{{ i18n.ts.messageRead }}</span>
-			</template>
-			<MkTime :time="message.createdAt"/>
-			<template v-if="message.is_edited"><i class="ph-pencil ph-bold ph-lg"></i></template>
-		</footer>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as mfm from 'mfm-js';
-import type * as Misskey from 'calckey-js';
-import XMediaList from '@/components/MkMediaList.vue';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as mfm from "mfm-js";
+import type * as Misskey from "calckey-js";
+import XMediaList from "@/components/MkMediaList.vue";
+import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
+import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	message: Misskey.entities.MessagingMessage;
@@ -52,10 +95,12 @@ const props = defineProps<{
 }>();
 
 const isMe = $computed(() => props.message.userId === $i?.id);
-const urls = $computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []);
+const urls = $computed(() =>
+	props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []
+);
 
 function del(): void {
-	os.api('messaging/messages/delete', {
+	os.api("messaging/messages/delete", {
 		messageId: props.message.id,
 	});
 }
@@ -274,13 +319,13 @@ function del(): void {
 				}
 
 				> .content {
-
 					> p.is-deleted {
 						color: rgba(#fff, 0.5);
 					}
 
 					> .text {
-						&, ::v-deep(*) {
+						&,
+						::v-deep(*) {
 							color: var(--fgOnAccent) !important;
 						}
 					}
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 17532cebd..ed3b4e227 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -1,71 +1,116 @@
 <template>
-<div
-	ref="rootEl"
-	class="_section"
-	@dragover.prevent.stop="onDragover"
-	@drop.prevent.stop="onDrop"
->
-	<div class="_content mk-messaging-room">
-		<MkSpacer :content-max="800">
-			<div class="body">
-				<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
-					<template #empty>
-						<div class="_fullinfo">
-							<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-							<div>{{ i18n.ts.noMessagesYet }}</div>
-						</div>
-					</template>
-					<template #default="{ items: messages, fetching: pFetching }">
-						<XList
-							v-if="messages.length > 0"
-							v-slot="{ item: message }"
-							:class="{ messages: true, 'deny-move-transition': pFetching }"
-							:items="messages"
-							direction="up"
-							reversed
-						>
-							<XMessage :key="message.id" :message="message" :is-group="group != null"/>
-						</XList>
-					</template>
-				</MkPagination>
-			</div>
-			<footer>
-				<div v-if="typers.length > 0" class="typers">
-					<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
-						<template #users>
-							<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
+	<div
+		ref="rootEl"
+		class="_section"
+		@dragover.prevent.stop="onDragover"
+		@drop.prevent.stop="onDrop"
+	>
+		<div class="_content mk-messaging-room">
+			<MkSpacer :content-max="800">
+				<div class="body">
+					<MkPagination
+						v-if="pagination"
+						ref="pagingComponent"
+						:key="userAcct || groupId"
+						:pagination="pagination"
+					>
+						<template #empty>
+							<div class="_fullinfo">
+								<img
+									src="/static-assets/badges/info.png"
+									class="_ghost"
+									alt="Info"
+								/>
+								<div>{{ i18n.ts.noMessagesYet }}</div>
+							</div>
 						</template>
-					</I18n>
-					<MkEllipsis/>
+						<template
+							#default="{ items: messages, fetching: pFetching }"
+						>
+							<XList
+								v-if="messages.length > 0"
+								v-slot="{ item: message }"
+								:class="{
+									messages: true,
+									'deny-move-transition': pFetching,
+								}"
+								:items="messages"
+								direction="up"
+								reversed
+							>
+								<XMessage
+									:key="message.id"
+									:message="message"
+									:is-group="group != null"
+								/>
+							</XList>
+						</template>
+					</MkPagination>
 				</div>
-				<transition :name="animation ? 'fade' : ''">
-					<div v-show="showIndicator" class="new-message">
-						<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ph-fw ph-lg ph-arrow-circle-down ph-bold ph-lg"></i>{{ i18n.ts.newMessageExists }}</button>
+				<footer>
+					<div v-if="typers.length > 0" class="typers">
+						<I18n
+							:src="i18n.ts.typingUsers"
+							text-tag="span"
+							class="users"
+						>
+							<template #users>
+								<b
+									v-for="typer in typers"
+									:key="typer.id"
+									class="user"
+									>{{ typer.username }}</b
+								>
+							</template>
+						</I18n>
+						<MkEllipsis />
 					</div>
-				</transition>
-				<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
-			</footer>
-		</MkSpacer>
+					<transition :name="animation ? 'fade' : ''">
+						<div v-show="showIndicator" class="new-message">
+							<button
+								class="_buttonPrimary"
+								@click="onIndicatorClick"
+							>
+								<i
+									class="fas ph-fw ph-lg ph-arrow-circle-down ph-bold ph-lg"
+								></i
+								>{{ i18n.ts.newMessageExists }}
+							</button>
+						</div>
+					</transition>
+					<XForm
+						v-if="!fetching"
+						ref="formEl"
+						:user="user"
+						:group="group"
+						class="form"
+					/>
+				</footer>
+			</MkSpacer>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
-import * as Misskey from 'calckey-js';
-import * as Acct from 'calckey-js/built/acct';
-import XMessage from './messaging-room.message.vue';
-import XForm from './messaging-room.form.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import * as sound from '@/scripts/sound';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
+import * as Misskey from "calckey-js";
+import * as Acct from "calckey-js/built/acct";
+import XMessage from "./messaging-room.message.vue";
+import XForm from "./messaging-room.form.vue";
+import XList from "@/components/MkDateSeparatedList.vue";
+import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import {
+	isBottomVisible,
+	onScrollBottom,
+	scrollToBottom,
+} from "@/scripts/scroll";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import * as sound from "@/scripts/sound";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { defaultStore } from "@/store";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	userAcct?: string;
@@ -80,11 +125,11 @@ let fetching = $ref(true);
 let user: Misskey.entities.UserDetailed | null = $ref(null);
 let group: Misskey.entities.UserGroup | null = $ref(null);
 let typers: Misskey.entities.User[] = $ref([]);
-let connection: Misskey.ChannelConnection<Misskey.Channels['messaging']> | null = $ref(null);
+let connection: Misskey.ChannelConnection<
+	Misskey.Channels["messaging"]
+> | null = $ref(null);
 let showIndicator = $ref(false);
-const {
-	animation,
-} = defaultStore.reactiveState;
+const { animation } = defaultStore.reactiveState;
 
 let pagination: Paging | null = $ref(null);
 
@@ -98,11 +143,14 @@ async function fetch() {
 
 	if (props.userAcct) {
 		const acct = Acct.parse(props.userAcct);
-		user = await os.api('users/show', { username: acct.username, host: acct.host || undefined });
+		user = await os.api("users/show", {
+			username: acct.username,
+			host: acct.host || undefined,
+		});
 		group = null;
 
 		pagination = {
-			endpoint: 'messaging/messages',
+			endpoint: "messaging/messages",
 			limit: 20,
 			params: {
 				userId: user.id,
@@ -110,15 +158,15 @@ async function fetch() {
 			reversed: true,
 			pageEl: $$(rootEl).value,
 		};
-		connection = stream.useChannel('messaging', {
+		connection = stream.useChannel("messaging", {
 			otherparty: user.id,
 		});
 	} else {
 		user = null;
-		group = await os.api('users/groups/show', { groupId: props.groupId });
+		group = await os.api("users/groups/show", { groupId: props.groupId });
 
 		pagination = {
-			endpoint: 'messaging/messages',
+			endpoint: "messaging/messages",
 			limit: 20,
 			params: {
 				groupId: group?.id,
@@ -126,19 +174,19 @@ async function fetch() {
 			reversed: true,
 			pageEl: $$(rootEl).value,
 		};
-		connection = stream.useChannel('messaging', {
+		connection = stream.useChannel("messaging", {
 			group: group?.id,
 		});
 	}
 
-	connection.on('message', onMessage);
-	connection.on('read', onRead);
-	connection.on('deleted', onDeleted);
-	connection.on('typers', _typers => {
-		typers = _typers.filter(u => u.id !== $i?.id);
+	connection.on("message", onMessage);
+	connection.on("read", onRead);
+	connection.on("deleted", onDeleted);
+	connection.on("typers", (_typers) => {
+		typers = _typers.filter((u) => u.id !== $i?.id);
 	});
 
-	document.addEventListener('visibilitychange', onVisibilitychange);
+	document.addEventListener("visibilitychange", onVisibilitychange);
 
 	nextTick(() => {
 		// thisScrollToBottom();
@@ -151,13 +199,14 @@ async function fetch() {
 function onDragover(ev: DragEvent) {
 	if (!ev.dataTransfer) return;
 
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isFile = ev.dataTransfer.items[0].kind === "file";
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 
 	if (isFile || isDriveFile) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		ev.dataTransfer.dropEffect =
+			ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
 	} else {
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	}
 }
 
@@ -170,7 +219,7 @@ function onDrop(ev: DragEvent): void {
 		return;
 	} else if (ev.dataTransfer.files.length > 1) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.onlyOneFileCanBeAttached,
 		});
 		return;
@@ -178,7 +227,7 @@ function onDrop(ev: DragEvent): void {
 
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
+	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
 		formEl.file = file;
 	}
@@ -186,13 +235,13 @@ function onDrop(ev: DragEvent): void {
 }
 
 function onMessage(message) {
-	sound.play('chat');
+	sound.play("chat");
 
 	const _isBottom = isBottomVisible(rootEl, 64);
 
 	pagingComponent.prepend(message);
 	if (message.userId !== $i?.id && !document.hidden) {
-		connection?.send('read', {
+		connection?.send("read", {
 			id: message.id,
 		});
 	}
@@ -212,8 +261,10 @@ function onRead(x) {
 	if (user) {
 		if (!Array.isArray(x)) x = [x];
 		for (const id of x) {
-			if (pagingComponent.items.some(y => y.id === id)) {
-				const exist = pagingComponent.items.map(y => y.id).indexOf(id);
+			if (pagingComponent.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.items
+					.map((y) => y.id)
+					.indexOf(id);
 				pagingComponent.items[exist] = {
 					...pagingComponent.items[exist],
 					isRead: true,
@@ -222,8 +273,10 @@ function onRead(x) {
 		}
 	} else if (group) {
 		for (const id of x.ids) {
-			if (pagingComponent.items.some(y => y.id === id)) {
-				const exist = pagingComponent.items.map(y => y.id).indexOf(id);
+			if (pagingComponent.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.items
+					.map((y) => y.id)
+					.indexOf(id);
 				pagingComponent.items[exist] = {
 					...pagingComponent.items[exist],
 					reads: [...pagingComponent.items[exist].reads, x.userId],
@@ -234,15 +287,17 @@ function onRead(x) {
 }
 
 function onDeleted(id) {
-	const msg = pagingComponent.items.find(m => m.id === id);
+	const msg = pagingComponent.items.find((m) => m.id === id);
 	if (msg) {
-		pagingComponent.items = pagingComponent.items.filter(m => m.id !== msg.id);
+		pagingComponent.items = pagingComponent.items.filter(
+			(m) => m.id !== msg.id
+		);
 	}
 }
 
 function thisScrollToBottom() {
-	if (window.location.href.includes('my/messaging/')) {
-		scrollToBottom($$(rootEl).value, { behavior: 'smooth' });
+	if (window.location.href.includes("my/messaging/")) {
+		scrollToBottom($$(rootEl).value, { behavior: "smooth" });
 	}
 }
 
@@ -266,7 +321,7 @@ function onVisibilitychange() {
 	if (document.hidden) return;
 	for (const message of pagingComponent.items) {
 		if (message.userId !== $i?.id && !message.isRead) {
-			connection?.send('read', {
+			connection?.send("read", {
 				id: message.id,
 			});
 		}
@@ -275,21 +330,22 @@ function onVisibilitychange() {
 
 onMounted(() => {
 	fetch();
-	definePageMetadata(computed(() => ({
-		title: group != null ? group.name : user?.name,
-		icon: 'ph-chats-teardrop ph-bold ph-lg',
-	})));
+	definePageMetadata(
+		computed(() => ({
+			title: group != null ? group.name : user?.name,
+			icon: "ph-chats-teardrop ph-bold ph-lg",
+		}))
+	);
 });
 
 onBeforeUnmount(() => {
 	connection?.dispose();
-	document.removeEventListener('visibilitychange', onVisibilitychange);
+	document.removeEventListener("visibilitychange", onVisibilitychange);
 	if (scrollRemove) scrollRemove();
 });
 </script>
 
 <style lang="scss" scoped>
-
 XMessage:last-of-type {
 	margin-bottom: 4rem;
 }
@@ -389,11 +445,13 @@ XMessage:last-of-type {
 	}
 }
 
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
 	transition: opacity 0.1s;
 }
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
 	transition: opacity 0.5s;
 	opacity: 0;
 }
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index 061bf9b2f..1f3f0bea2 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -1,121 +1,143 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<MkSpacer :content-max="800">
-		<div class="mwysmxbg">
-			<div>{{ i18n.ts._mfm.intro }}</div>
-			<br/>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.mention }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.mentionDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_mention"/>
-						<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
+	<MkStickyContainer>
+		<template #header><MkPageHeader /></template>
+		<MkSpacer :content-max="800">
+			<div class="mwysmxbg">
+				<div>{{ i18n.ts._mfm.intro }}</div>
+				<br />
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.mention }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.mentionDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_mention" />
+							<MkTextarea v-model="preview_mention"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_hashtag"/>
-						<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_hashtag" />
+							<MkTextarea v-model="preview_hashtag"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.link }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.linkDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_link"/>
-						<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.link }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.linkDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_link" />
+							<MkTextarea v-model="preview_link"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.emoji }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.emojiDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_emoji"/>
-						<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.emoji }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.emojiDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_emoji" />
+							<MkTextarea v-model="preview_emoji"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.bold }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.boldDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_bold"/>
-						<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.bold }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.boldDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_bold" />
+							<MkTextarea v-model="preview_bold"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.small }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.smallDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_small"/>
-						<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.small }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.smallDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_small" />
+							<MkTextarea v-model="preview_small"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.quote }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.quoteDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_quote"/>
-						<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.quote }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.quoteDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_quote" />
+							<MkTextarea v-model="preview_quote"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.center }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.centerDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_center"/>
-						<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.center }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.centerDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_center" />
+							<MkTextarea v-model="preview_center"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_inlineCode"/>
-						<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_inlineCode" />
+							<MkTextarea v-model="preview_inlineCode"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_blockCode"/>
-						<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_blockCode" />
+							<MkTextarea v-model="preview_blockCode"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_inlineMath"/>
-						<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_inlineMath" />
+							<MkTextarea v-model="preview_inlineMath"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
-			</div>
-			<!-- deprecated
+				<!-- deprecated
 		<div class="section _block">
 			<div class="title">{{ i18n.ts._mfm.search }}</div>
 			<div class="content">
@@ -127,221 +149,267 @@
 			</div>
 		</div>
 		-->
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.flip }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.flipDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_flip"/>
-						<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.flip }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.flipDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_flip" />
+							<MkTextarea v-model="preview_flip"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.font }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.fontDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_font" />
+							<MkTextarea v-model="preview_font"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x2 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x2Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x2" />
+							<MkTextarea v-model="preview_x2"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x3 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x3Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x3" />
+							<MkTextarea v-model="preview_x3"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.x4 }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.x4Description }}</p>
+						<div class="preview">
+							<Mfm :text="preview_x4" />
+							<MkTextarea v-model="preview_x4"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.blur }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.blurDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_blur" />
+							<MkTextarea v-model="preview_blur"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.jelly }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.jellyDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_jelly" />
+							<MkTextarea v-model="preview_jelly"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.tada }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.tadaDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_tada" />
+							<MkTextarea v-model="preview_tada"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.jump }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.jumpDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_jump" />
+							<MkTextarea v-model="preview_jump"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.bounce }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.bounceDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_bounce" />
+							<MkTextarea v-model="preview_bounce"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.spin }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.spinDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_spin" />
+							<MkTextarea v-model="preview_spin"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.shake }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.shakeDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_shake" />
+							<MkTextarea v-model="preview_shake"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.twitch }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.twitchDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_twitch" />
+							<MkTextarea v-model="preview_twitch"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_rainbow" />
+							<MkTextarea v-model="preview_rainbow"
+								><template #label>MFM</template></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_sparkle" />
+							<MkTextarea v-model="preview_sparkle"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.rotate }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.rotateDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_rotate" />
+							<MkTextarea v-model="preview_rotate"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
+					</div>
+				</div>
+				<div class="section _block">
+					<div class="title">{{ i18n.ts._mfm.plain }}</div>
+					<div class="content">
+						<p>{{ i18n.ts._mfm.plainDescription }}</p>
+						<div class="preview">
+							<Mfm :text="preview_plain" />
+							<MkTextarea v-model="preview_plain"
+								><span>MFM</span></MkTextarea
+							>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.font }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.fontDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_font"/>
-						<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x2 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x2Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x2"/>
-						<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x3 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x3Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x3"/>
-						<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x4 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x4Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x4"/>
-						<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.blur }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.blurDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_blur"/>
-						<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.jelly }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.jellyDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_jelly"/>
-						<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.tada }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.tadaDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_tada"/>
-						<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.jump }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.jumpDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_jump"/>
-						<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.bounce }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.bounceDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_bounce"/>
-						<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.spin }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.spinDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_spin"/>
-						<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.shake }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.shakeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_shake"/>
-						<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.twitch }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.twitchDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_twitch"/>
-						<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_rainbow"/>
-						<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_sparkle"/>
-						<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.rotate }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.rotateDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_rotate"/>
-						<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.plain }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.plainDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_plain"/>
-						<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from 'vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import { defineComponent } from "vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
 
-let preview_mention = $ref('@example');
-let preview_hashtag = $ref('#test');
+let preview_mention = $ref("@example");
+let preview_hashtag = $ref("#test");
 let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-let preview_emoji = $ref(instance.emojis.length ? `:${instance.emojis[0].name}:` : ':emojiname:');
+let preview_emoji = $ref(
+	instance.emojis.length ? `:${instance.emojis[0].name}:` : ":emojiname:"
+);
 let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
 let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
 let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
 let preview_inlineCode = $ref('`<: "Hello, world!"`');
-let preview_blockCode = $ref('```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```');
-let preview_inlineMath = $ref('\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)');
+let preview_blockCode = $ref(
+	'```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```'
+);
+let preview_inlineMath = $ref("\\(x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\)");
 let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
 let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
-let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
-let preview_tada = $ref('$[tada 🍮] $[tada.speed=5s 🍮]');
-let preview_jump = $ref('$[jump 🍮] $[jump.speed=5s 🍮]');
-let preview_bounce = $ref('$[bounce 🍮] $[bounce.speed=5s 🍮]');
-let preview_shake = $ref('$[shake 🍮] $[shake.speed=5s 🍮]');
-let preview_twitch = $ref('$[twitch 🍮] $[twitch.speed=5s 🍮]');
-let preview_spin = $ref('$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=5s 🍮]');
-let preview_flip = $ref(`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`);
-let preview_font = $ref(`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`);
-let preview_x2 = $ref('$[x2 🍮]');
-let preview_x3 = $ref('$[x3 🍮]');
-let preview_x4 = $ref('$[x4 🍮]');
+let preview_jelly = $ref("$[jelly 🍮] $[jelly.speed=5s 🍮]");
+let preview_tada = $ref("$[tada 🍮] $[tada.speed=5s 🍮]");
+let preview_jump = $ref("$[jump 🍮] $[jump.speed=5s 🍮]");
+let preview_bounce = $ref("$[bounce 🍮] $[bounce.speed=5s 🍮]");
+let preview_shake = $ref("$[shake 🍮] $[shake.speed=5s 🍮]");
+let preview_twitch = $ref("$[twitch 🍮] $[twitch.speed=5s 🍮]");
+let preview_spin = $ref(
+	"$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=5s 🍮]"
+);
+let preview_flip = $ref(
+	`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`
+);
+let preview_font = $ref(
+	`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`
+);
+let preview_x2 = $ref("$[x2 🍮]");
+let preview_x3 = $ref("$[x3 🍮]");
+let preview_x4 = $ref("$[x4 🍮]");
 let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
-let preview_sparkle = $ref('$[sparkle 🍮]');
-let preview_rotate = $ref('$[rotate 🍮]');
-let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
+let preview_rainbow = $ref("$[rainbow 🍮] $[rainbow.speed=5s 🍮]");
+let preview_sparkle = $ref("$[sparkle 🍮]");
+let preview_rotate = $ref("$[rotate 🍮]");
+let preview_plain = $ref(
+	"<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>"
+);
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,
-	icon: 'ph-question ph-bold ph-lg',
+	icon: "ph-question ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index a71c7b9a5..bf4c2542f 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -1,51 +1,63 @@
 <template>
-<MkSpacer :content-max="800">
-	<div v-if="$i">
-		<div v-if="state == 'waiting'" class="waiting _section">
-			<div class="_content">
-				<MkLoading/>
+	<MkSpacer :content-max="800">
+		<div v-if="$i">
+			<div v-if="state == 'waiting'" class="waiting _section">
+				<div class="_content">
+					<MkLoading />
+				</div>
+			</div>
+			<div v-if="state == 'denied'" class="denied _section">
+				<div class="_content">
+					<p>{{ i18n.ts._auth.denied }}</p>
+				</div>
+			</div>
+			<div v-else-if="state == 'accepted'" class="accepted _section">
+				<div class="_content">
+					<p v-if="callback">
+						{{ i18n.ts._auth.callback }}<MkEllipsis />
+					</p>
+					<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
+				</div>
+			</div>
+			<div v-else class="_section">
+				<div v-if="name" class="_title">
+					{{ i18n.t("_auth.shareAccess", { name: name }) }}
+				</div>
+				<div v-else class="_title">
+					{{ i18n.ts._auth.shareAccessAsk }}
+				</div>
+				<div class="_content">
+					<p>{{ i18n.ts._auth.permissionAsk }}</p>
+					<ul>
+						<li v-for="p in _permissions" :key="p">
+							{{ i18n.t(`_permissions.${p}`) }}
+						</li>
+					</ul>
+				</div>
+				<div class="_footer">
+					<MkButton inline @click="deny">{{
+						i18n.ts.cancel
+					}}</MkButton>
+					<MkButton inline primary @click="accept">{{
+						i18n.ts.accept
+					}}</MkButton>
+				</div>
 			</div>
 		</div>
-		<div v-if="state == 'denied'" class="denied _section">
-			<div class="_content">
-				<p>{{ i18n.ts._auth.denied }}</p>
-			</div>
+		<div v-else class="signin">
+			<MkSignin @login="onLogin" />
 		</div>
-		<div v-else-if="state == 'accepted'" class="accepted _section">
-			<div class="_content">
-				<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
-				<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
-			</div>
-		</div>
-		<div v-else class="_section">
-			<div v-if="name" class="_title">{{ i18n.t('_auth.shareAccess', { name: name }) }}</div>
-			<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
-			<div class="_content">
-				<p>{{ i18n.ts._auth.permissionAsk }}</p>
-				<ul>
-					<li v-for="p in _permissions" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
-				</ul>
-			</div>
-			<div class="_footer">
-				<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
-				<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
-			</div>
-		</div>
-	</div>
-	<div v-else class="signin">
-		<MkSignin @login="onLogin"/>
-	</div>
-</MkSpacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkSignin from '@/components/MkSignin.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { $i, login } from '@/account';
-import { appendQuery, query } from '@/scripts/url';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import MkSignin from "@/components/MkSignin.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { $i, login } from "@/account";
+import { appendQuery, query } from "@/scripts/url";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	session: string;
@@ -55,31 +67,39 @@ const props = defineProps<{
 	permission: string; // コンマ区切り
 }>();
 
-const _permissions = props.permission.split(',');
+const _permissions = props.permission.split(",");
 
 let state = $ref<string | null>(null);
 
 async function accept(): Promise<void> {
-	state = 'waiting';
-	await os.api('miauth/gen-token', {
+	state = "waiting";
+	await os.api("miauth/gen-token", {
 		session: props.session,
 		name: props.name,
 		iconUrl: props.icon,
 		permission: _permissions,
 	});
 
-	state = 'accepted';
+	state = "accepted";
 	if (props.callback) {
 		const cbUrl = new URL(props.callback);
-		if (['javascript:', 'file:', 'data:', 'mailto:', 'tel:'].includes(cbUrl.protocol)) throw new Error('invalid url');
-		location.href = appendQuery(props.callback, query({
-			session: props.session,
-		}));
+		if (
+			["javascript:", "file:", "data:", "mailto:", "tel:"].includes(
+				cbUrl.protocol
+			)
+		)
+			throw new Error("invalid url");
+		location.href = appendQuery(
+			props.callback,
+			query({
+				session: props.session,
+			})
+		);
 	}
 }
 
 function deny(): void {
-	state = 'denied';
+	state = "denied";
 }
 
 function onLogin(res): void {
@@ -87,6 +107,4 @@ function onLogin(res): void {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/my-antennas/create.vue b/packages/client/src/pages/my-antennas/create.vue
index 121c91300..c0d838629 100644
--- a/packages/client/src/pages/my-antennas/create.vue
+++ b/packages/client/src/pages/my-antennas/create.vue
@@ -1,20 +1,20 @@
 <template>
-<div class="geegznzt">
-	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
-</div>
+	<div class="geegznzt">
+		<XAntenna :antenna="draft" @created="onAntennaCreated" />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import XAntenna from './editor.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { useRouter } from '@/router';
+import XAntenna from "./editor.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { useRouter } from "@/router";
 
 const router = useRouter();
 
 let draft = $ref({
-	name: '',
-	src: 'all',
+	name: "",
+	src: "all",
 	userListId: null,
 	userGroupId: null,
 	users: [],
@@ -28,15 +28,13 @@ let draft = $ref({
 });
 
 function onAntennaCreated() {
-	router.push('/my/antennas');
+	router.push("/my/antennas");
 }
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
+	icon: "ph-flying-saucer ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/my-antennas/edit.vue b/packages/client/src/pages/my-antennas/edit.vue
index 7ba6c9776..97c433f90 100644
--- a/packages/client/src/pages/my-antennas/edit.vue
+++ b/packages/client/src/pages/my-antennas/edit.vue
@@ -1,32 +1,38 @@
 <template>
-<div class="">
-	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
-</div>
+	<div class="">
+		<XAntenna
+			v-if="antenna"
+			:antenna="antenna"
+			@updated="onAntennaUpdated"
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { inject, watch } from 'vue';
-import XAntenna from './editor.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { inject, watch } from "vue";
+import XAntenna from "./editor.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const router = useRouter();
 
 let antenna: any = $ref(null);
 
 const props = defineProps<{
-	antennaId: string
+	antennaId: string;
 }>();
 
 function onAntennaUpdated() {
-	router.push('/my/antennas');
+	router.push("/my/antennas");
 }
 
-os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
-	antenna = antennaResponse;
-});
+os.api("antennas/show", { antennaId: props.antennaId }).then(
+	(antennaResponse) => {
+		antenna = antennaResponse;
+	}
+);
 
 const headerActions = $computed(() => []);
 
@@ -34,10 +40,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
+	icon: "ph-flying-saucer ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue
index 55249f879..27889b4d9 100644
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -1,83 +1,151 @@
 <template>
-<div class="shaynizk">
-	<div class="form">
-		<MkInput v-model="name" class="_formBlock">
-			<template #label>{{ i18n.ts.name }}</template>
-		</MkInput>
-		<MkSelect v-model="src" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaSource }}</template>
-			<option value="all">{{ i18n.ts._antennaSources.all }}</option>
-			<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
-			<option value="users">{{ i18n.ts._antennaSources.users }}</option>
-			<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
-			<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
-			<option value="instances">{{ i18n.ts._antennaSources.instances }}</option>
-		</MkSelect>
-		<MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
-			<template #label>{{ i18n.ts.userList }}</template>
-			<option v-for="list in userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
-		</MkSelect>
-		<MkSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
-			<template #label>{{ i18n.ts.userGroup }}</template>
-			<option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
-		</MkSelect>
-		<MkTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
-			<template #label>{{ i18n.ts.users }}</template>
-			<template #caption>{{ i18n.ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ i18n.ts.addUser }}</button></template>
-		</MkTextarea>
-		<MkTextarea v-else-if="src === 'instances'" v-model="instances" class="_formBlock">
-			<template #label>{{ i18n.ts.instances }}</template>
-			<template #caption>{{ i18n.ts.antennaInstancesDescription }} <button class="_textButton" @click="addInstance">{{ i18n.ts.addInstance }}</button></template>
-		</MkTextarea>
-		<MkSwitch v-model="withReplies" class="_formBlock">{{ i18n.ts.withReplies }}</MkSwitch>
-		<MkTextarea v-model="keywords" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaKeywords }}</template>
-			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkTextarea v-model="excludeKeywords" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
-			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ i18n.ts.caseSensitive }}</MkSwitch>
-		<MkSwitch v-model="withFile" class="_formBlock">{{ i18n.ts.withFileAntenna }}</MkSwitch>
-		<MkSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</MkSwitch>
+	<div class="shaynizk">
+		<div class="form">
+			<MkInput v-model="name" class="_formBlock">
+				<template #label>{{ i18n.ts.name }}</template>
+			</MkInput>
+			<MkSelect v-model="src" class="_formBlock">
+				<template #label>{{ i18n.ts.antennaSource }}</template>
+				<option value="all">{{ i18n.ts._antennaSources.all }}</option>
+				<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
+				<option value="users">
+					{{ i18n.ts._antennaSources.users }}
+				</option>
+				<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
+				<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
+				<option value="instances">
+					{{ i18n.ts._antennaSources.instances }}
+				</option>
+			</MkSelect>
+			<MkSelect
+				v-if="src === 'list'"
+				v-model="userListId"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.userList }}</template>
+				<option
+					v-for="list in userLists"
+					:key="list.id"
+					:value="list.id"
+				>
+					{{ list.name }}
+				</option>
+			</MkSelect>
+			<MkSelect
+				v-else-if="src === 'group'"
+				v-model="userGroupId"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.userGroup }}</template>
+				<option
+					v-for="group in userGroups"
+					:key="group.id"
+					:value="group.id"
+				>
+					{{ group.name }}
+				</option>
+			</MkSelect>
+			<MkTextarea
+				v-else-if="src === 'users'"
+				v-model="users"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.users }}</template>
+				<template #caption
+					>{{ i18n.ts.antennaUsersDescription }}
+					<button class="_textButton" @click="addUser">
+						{{ i18n.ts.addUser }}
+					</button></template
+				>
+			</MkTextarea>
+			<MkTextarea
+				v-else-if="src === 'instances'"
+				v-model="instances"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.instances }}</template>
+				<template #caption
+					>{{ i18n.ts.antennaInstancesDescription }}
+					<button class="_textButton" @click="addInstance">
+						{{ i18n.ts.addInstance }}
+					</button></template
+				>
+			</MkTextarea>
+			<MkSwitch v-model="withReplies" class="_formBlock">{{
+				i18n.ts.withReplies
+			}}</MkSwitch>
+			<MkTextarea v-model="keywords" class="_formBlock">
+				<template #label>{{ i18n.ts.antennaKeywords }}</template>
+				<template #caption>{{
+					i18n.ts.antennaKeywordsDescription
+				}}</template>
+			</MkTextarea>
+			<MkTextarea v-model="excludeKeywords" class="_formBlock">
+				<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
+				<template #caption>{{
+					i18n.ts.antennaKeywordsDescription
+				}}</template>
+			</MkTextarea>
+			<MkSwitch v-model="caseSensitive" class="_formBlock">{{
+				i18n.ts.caseSensitive
+			}}</MkSwitch>
+			<MkSwitch v-model="withFile" class="_formBlock">{{
+				i18n.ts.withFileAntenna
+			}}</MkSwitch>
+			<MkSwitch v-model="notify" class="_formBlock">{{
+				i18n.ts.notifyAntenna
+			}}</MkSwitch>
+		</div>
+		<div class="actions">
+			<MkButton inline primary @click="saveAntenna()"
+				><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</MkButton
+			>
+			<MkButton
+				v-if="antenna.id != null"
+				inline
+				danger
+				@click="deleteAntenna()"
+				><i class="ph-trash ph-bold ph-lg"></i>
+				{{ i18n.ts.delete }}</MkButton
+			>
+		</div>
 	</div>
-	<div class="actions">
-		<MkButton inline primary @click="saveAntenna()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { watch } from "vue";
+import * as Acct from "calckey-js/built/acct";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
-	antenna: any
+	antenna: any;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'created'): void,
-	(ev: 'updated'): void,
-	(ev: 'deleted'): void,
+	(ev: "created"): void;
+	(ev: "updated"): void;
+	(ev: "deleted"): void;
 }>();
 
 let name: string = $ref(props.antenna.name);
 let src: string = $ref(props.antenna.src);
 let userListId: any = $ref(props.antenna.userListId);
 let userGroupId: any = $ref(props.antenna.userGroupId);
-let users: string = $ref(props.antenna.users.join('\n'));
-let instances: string = $ref(props.antenna.instances.join('\n'));
-let keywords: string = $ref(props.antenna.keywords.map(x => x.join(' ')).join('\n'));
-let excludeKeywords: string = $ref(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n'));
+let users: string = $ref(props.antenna.users.join("\n"));
+let instances: string = $ref(props.antenna.instances.join("\n"));
+let keywords: string = $ref(
+	props.antenna.keywords.map((x) => x.join(" ")).join("\n")
+);
+let excludeKeywords: string = $ref(
+	props.antenna.excludeKeywords.map((x) => x.join(" ")).join("\n")
+);
 let caseSensitive: boolean = $ref(props.antenna.caseSensitive);
 let withReplies: boolean = $ref(props.antenna.withReplies);
 let withFile: boolean = $ref(props.antenna.withFile);
@@ -85,18 +153,21 @@ let notify: boolean = $ref(props.antenna.notify);
 let userLists: any = $ref(null);
 let userGroups: any = $ref(null);
 
-watch(() => src, async () => {
-	if (src === 'list' && userLists === null) {
-		userLists = await os.api('users/lists/list');
-	}
+watch(
+	() => src,
+	async () => {
+		if (src === "list" && userLists === null) {
+			userLists = await os.api("users/lists/list");
+		}
 
-	if (src === 'group' && userGroups === null) {
-		const groups1 = await os.api('users/groups/owned');
-		const groups2 = await os.api('users/groups/joined');
+		if (src === "group" && userGroups === null) {
+			const groups1 = await os.api("users/groups/owned");
+			const groups2 = await os.api("users/groups/joined");
 
-		userGroups = [...groups1, ...groups2];
+			userGroups = [...groups1, ...groups2];
+		}
 	}
-});
+);
 
 async function saveAntenna() {
 	const antennaData = {
@@ -108,39 +179,51 @@ async function saveAntenna() {
 		withFile,
 		notify,
 		caseSensitive,
-		users: users.trim().split('\n').map(x => x.trim()),
-		instances: instances.trim().split('\n').map(x => x.trim()),
-		keywords: keywords.trim().split('\n').map(x => x.trim().split(' ')),
-		excludeKeywords: excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
+		users: users
+			.trim()
+			.split("\n")
+			.map((x) => x.trim()),
+		instances: instances
+			.trim()
+			.split("\n")
+			.map((x) => x.trim()),
+		keywords: keywords
+			.trim()
+			.split("\n")
+			.map((x) => x.trim().split(" ")),
+		excludeKeywords: excludeKeywords
+			.trim()
+			.split("\n")
+			.map((x) => x.trim().split(" ")),
 	};
 
 	if (props.antenna.id == null) {
-		await os.apiWithDialog('antennas/create', antennaData);
-		emit('created');
+		await os.apiWithDialog("antennas/create", antennaData);
+		emit("created");
 	} else {
-		antennaData['antennaId'] = props.antenna.id;
-		await os.apiWithDialog('antennas/update', antennaData);
-		emit('updated');
+		antennaData["antennaId"] = props.antenna.id;
+		await os.apiWithDialog("antennas/update", antennaData);
+		emit("updated");
 	}
 }
 
 async function deleteAntenna() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: props.antenna.name }),
 	});
 	if (canceled) return;
 
-	await os.api('antennas/delete', {
+	await os.api("antennas/delete", {
 		antennaId: props.antenna.id,
 	});
 
 	os.success();
-	emit('deleted');
+	emit("deleted");
 }
 
 function addUser() {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		users = users.trim();
 		users += `\n@${Acct.toString(user as any)}`;
 		users = users.trim();
@@ -148,9 +231,9 @@ function addUser() {
 }
 
 function addInstance() {
-	os.selectInstance().then(instance => {
+	os.selectInstance().then((instance) => {
 		instances = instances.trim();
-		instances += '\n' + instance.host;
+		instances += "\n" + instance.host;
 		instances = instances.trim();
 	});
 }
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 8339f2bcc..cc3262a79 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -1,36 +1,66 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div class="ieepwinx">
-			<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="ieepwinx">
+				<MkButton
+					:link="true"
+					to="/my/antennas/create"
+					primary
+					class="add"
+					><i class="ph-plus ph-bold ph-lg"></i>
+					{{ i18n.ts.add }}</MkButton
+				>
 
-			<div class="">
-				<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-					<div v-for="antenna in items" :key="antenna.id">
-						<MkA class="uopelskx" :link="true" :to="`/timeline/antenna/${antenna.id}`">
-							<i class="ph-flying-saucer ph-bold ph-lg"></i><i :class="`${antenna.hasUnreadNote ? 'ph-circle ph-fill' : 'ph-check'} ph-xs notify-icon`"></i>
-						</MkA>
-						<MkA class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
-							<div class="name">{{ antenna.name }}</div>
-						</MkA>
-					</div>
-				</MkPagination>
+				<div class="">
+					<MkPagination
+						v-slot="{ items }"
+						ref="list"
+						:pagination="pagination"
+					>
+						<div v-for="antenna in items" :key="antenna.id">
+							<MkA
+								class="uopelskx"
+								:link="true"
+								:to="`/timeline/antenna/${antenna.id}`"
+							>
+								<i class="ph-flying-saucer ph-bold ph-lg"></i
+								><i
+									:class="`${
+										antenna.hasUnreadNote
+											? 'ph-circle ph-fill'
+											: 'ph-check'
+									} ph-xs notify-icon`"
+								></i>
+							</MkA>
+							<MkA
+								class="ljoevbzj"
+								:to="`/my/antennas/${antenna.id}`"
+							>
+								<div class="name">{{ antenna.name }}</div>
+							</MkA>
+						</div>
+					</MkPagination>
+				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { onActivated, onDeactivated, ref } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { onActivated, onDeactivated, ref } from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'antennas/list' as const,
+	endpoint: "antennas/list" as const,
 	limit: 250,
 };
 
@@ -38,7 +68,7 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-const list = ref<typeof MkPagination|null>(null);
+const list = ref<typeof MkPagination | null>(null);
 
 let isCached: boolean = false;
 let refreshTimer: number | null = null;
@@ -49,7 +79,7 @@ const refresh = () => {
 	}
 
 	isCached = true;
-	refreshTimer = setTimeout(refresh, 15000)
+	refreshTimer = setTimeout(refresh, 15000);
 };
 
 onActivated(() => {
@@ -65,13 +95,12 @@ onDeactivated(() => {
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'ph-flying-saucer ph-bold ph-lg',
+	icon: "ph-flying-saucer ph-bold ph-lg",
 });
 </script>
 
 <style lang="scss" scoped>
 .ieepwinx {
-
 	> .add {
 		margin: 0 auto 16px auto;
 	}
@@ -108,9 +137,9 @@ definePageMetadata({
 	}
 
 	.notify-icon {
-    position: relative;
-    top: -1em;
-    left: -0.5em;
+		position: relative;
+		top: -1em;
+		left: -0.5em;
 
 		&.ph-circle ph-fill {
 			color: var(--indicator);
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index 4fa6d6bdc..1c950a3f1 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -1,31 +1,51 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div class="qtcaoidl">
-			<MkButton primary class="add" @click="create"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="qtcaoidl">
+				<MkButton primary class="add" @click="create"
+					><i class="ph-plus ph-bold ph-lg"></i>
+					{{ i18n.ts.add }}</MkButton
+				>
 
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
-				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-					<b>{{ item.name }}</b>
-					<div v-if="item.description" class="description">{{ item.description }}</div>
-				</MkA>
-			</MkPagination>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkPagination
+					v-slot="{ items }"
+					ref="pagingComponent"
+					:pagination="pagination"
+					class="list"
+				>
+					<MkA
+						v-for="item in items"
+						:key="item.id"
+						:to="`/clips/${item.id}`"
+						class="item _panel _gap"
+					>
+						<b>{{ item.name }}</b>
+						<div v-if="item.description" class="description">
+							{{ item.description }}
+						</div>
+					</MkA>
+				</MkPagination>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'clips/list' as const,
+	endpoint: "clips/list" as const,
 	limit: 10,
 };
 
@@ -34,24 +54,24 @@ const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 async function create() {
 	const { canceled, result } = await os.form(i18n.ts.createNewClip, {
 		name: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts.name,
 		},
 		description: {
-			type: 'string',
+			type: "string",
 			required: false,
 			multiline: true,
 			label: i18n.ts.description,
 		},
 		isPublic: {
-			type: 'boolean',
+			type: "boolean",
 			label: i18n.ts.public,
 			default: false,
 		},
 	});
 	if (canceled) return;
 
-	os.apiWithDialog('clips/create', result);
+	os.apiWithDialog("clips/create", result);
 
 	pagingComponent.reload();
 }
@@ -70,9 +90,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.clip,
-	icon: 'ph-paperclip ph-bold ph-lg',
+	icon: "ph-paperclip ph-bold ph-lg",
 	action: {
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index 1ea23847d..192572db1 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -1,27 +1,38 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions"/></template>
-	<div class="mk-group-page">
-		<div class="_section members _gap">
-			<div class="_content">
-				<div class="users">
-					<div v-for="user in users" :key="user.id" class="user _panel">
-						<MkAvatar :user="user" class="avatar" :show-indicator="true" />
-						<div class="body">
-							<MkUserName :user="user" class="name" />
-							<MkAcct :user="user" class="acct" />
-						</div>
-						<div class="action">
-							<button class="_button" @click="removeUser(user)">
-								<i class="ph-x ph-bold ph-lg"></i>
-							</button>
+	<MkStickyContainer>
+		<template #header><MkPageHeader :actions="headerActions" /></template>
+		<div class="mk-group-page">
+			<div class="_section members _gap">
+				<div class="_content">
+					<div class="users">
+						<div
+							v-for="user in users"
+							:key="user.id"
+							class="user _panel"
+						>
+							<MkAvatar
+								:user="user"
+								class="avatar"
+								:show-indicator="true"
+							/>
+							<div class="body">
+								<MkUserName :user="user" class="name" />
+								<MkAcct :user="user" class="acct" />
+							</div>
+							<div class="action">
+								<button
+									class="_button"
+									@click="removeUser(user)"
+								>
+									<i class="ph-x ph-bold ph-lg"></i>
+								</button>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-</MkStickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -124,29 +135,31 @@ definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.members,
 		icon: "ph-users-three ph-bold ph-lg",
-	})),
+	}))
 );
 
 const headerActions = $computed(() => [
 	{
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.invite,
 		handler: invite,
-	}, {
-		icon: 'ph-cursor-text ph-bold ph-lg',
+	},
+	{
+		icon: "ph-cursor-text ph-bold ph-lg",
 		text: i18n.ts.rename,
 		handler: renameGroup,
-	}, {
-		icon: 'ph-arrows-left-right ph-bold ph-lg',
+	},
+	{
+		icon: "ph-arrows-left-right ph-bold ph-lg",
 		text: i18n.ts.transfer,
 		handler: transfer,
-	}, {
-		icon: 'ph-trash ph-bold ph-lg',
+	},
+	{
+		icon: "ph-trash ph-bold ph-lg",
 		text: i18n.ts.delete,
 		handler: deleteGroup,
 	},
 ]);
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index 6ecb70bb6..4c411e71a 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -1,57 +1,79 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800" :margin-min="20">
-		<MkButton primary style="margin: 0 auto var(--margin) auto;" @click="create"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.createGroup }}</MkButton>
-		<MkPagination v-slot="{items}" ref="owned" :pagination="ownedPagination">
-			<div v-for="group in items" :key="group.id" class="_card">
-				<div class="_title"><MkA :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</MkA></div>
-				<div class="_content">
-					<MkAvatars :user-ids="group.userIds"/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="20">
+			<MkButton
+				primary
+				style="margin: 0 auto var(--margin) auto"
+				@click="create"
+				><i class="ph-plus ph-bold ph-lg"></i>
+				{{ i18n.ts.createGroup }}</MkButton
+			>
+			<MkPagination
+				v-slot="{ items }"
+				ref="owned"
+				:pagination="ownedPagination"
+			>
+				<div v-for="group in items" :key="group.id" class="_card">
+					<div class="_title">
+						<MkA :to="`/my/groups/${group.id}`" class="_link">{{
+							group.name
+						}}</MkA>
+					</div>
+					<div class="_content">
+						<MkAvatars :user-ids="group.userIds" />
+					</div>
 				</div>
-			</div>
-		</MkPagination>
-		<MkPagination v-slot="{items}" ref="joined" :pagination="joinedPagination">
-			<div v-for="group in items" :key="group.id" class="_card">
-				<div class="_title">{{ group.name }}</div>
-				<div class="_content">
-					<MkAvatars :user-ids="group.userIds"/>
+			</MkPagination>
+			<MkPagination
+				v-slot="{ items }"
+				ref="joined"
+				:pagination="joinedPagination"
+			>
+				<div v-for="group in items" :key="group.id" class="_card">
+					<div class="_title">{{ group.name }}</div>
+					<div class="_content">
+						<MkAvatars :user-ids="group.userIds" />
+					</div>
+					<div class="_footer">
+						<MkButton danger @click="leave(group)">{{
+							i18n.ts.leaveGroup
+						}}</MkButton>
+					</div>
 				</div>
-				<div class="_footer">
-					<MkButton danger @click="leave(group)">{{ i18n.ts.leaveGroup }}</MkButton>
-				</div>
-			</div>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
+			</MkPagination>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkAvatars from '@/components/MkAvatars.vue';
-import * as os from '@/os';
+import { computed, ref } from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
+import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
-import { i18n } from '@/i18n';
-import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
+import { i18n } from "@/i18n";
+import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
 
-const owned = ref('owned');
-const joined = ref('joined');
+const owned = ref("owned");
+const joined = ref("joined");
 
 const ownedPagination = {
-	endpoint: 'users/groups/owned' as const,
+	endpoint: "users/groups/owned" as const,
 	limit: 10,
 };
 
 const joinedPagination = {
-	endpoint: 'users/groups/joined' as const,
+	endpoint: "users/groups/joined" as const,
 	limit: 10,
 };
 
 const headerActions = $computed(() => [
 	{
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.createGroup,
 		handler: create,
 	},
@@ -61,7 +83,7 @@ definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.groups,
 		icon: "ph-users-three ph-bold ph-lg",
-	})),
+	}))
 );
 
 async function create() {
@@ -69,18 +91,18 @@ async function create() {
 		title: i18n.ts.groupName,
 	});
 	if (canceled) return;
-	await os.api('users/groups/create', { name: name });
+	await os.api("users/groups/create", { name: name });
 	owned.value.reload();
 	os.success();
 }
 
 async function leave(group) {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('leaveGroupConfirm', { name: group.name }),
+		type: "warning",
+		text: i18n.t("leaveGroupConfirm", { name: group.name }),
 	});
 	if (canceled) return;
-	os.apiWithDialog('users/groups/leave', {
+	os.apiWithDialog("users/groups/leave", {
 		groupId: group.id,
 	}).then(() => {
 		joined.value.reload();
@@ -98,7 +120,7 @@ async function leave(group) {
 	._content {
 		padding: 20px;
 
-		>.defgtij {
+		> .defgtij {
 			padding: 0;
 		}
 	}
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 995682019..6ecfd12f4 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -1,37 +1,58 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="700">
-		<div class="qkcjvfiv">
-			<div class="buttonWrapper">
-				<MkButton primary class="add" @click="create"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.createList }}</MkButton>
-				<MkButton @click="deleteAll"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.deleteAll }}</MkButton>
-			</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="qkcjvfiv">
+				<div class="buttonWrapper">
+					<MkButton primary class="add" @click="create"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.createList }}</MkButton
+					>
+					<MkButton @click="deleteAll"
+						><i class="ph-trash ph-bold ph-lg"></i>
+						{{ i18n.ts.deleteAll }}</MkButton
+					>
+				</div>
 
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
-				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
-					<div class="name">{{ list.name }}</div>
-					<MkAvatars :user-ids="list.userIds"/>
-				</MkA>
-			</MkPagination>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkPagination
+					v-slot="{ items }"
+					ref="pagingComponent"
+					:pagination="pagination"
+					class="lists _content"
+				>
+					<MkA
+						v-for="list in items"
+						:key="list.id"
+						class="list _panel"
+						:to="`/my/lists/${list.id}`"
+					>
+						<div class="name">{{ list.name }}</div>
+						<MkAvatars :user-ids="list.userIds" />
+					</MkA>
+				</MkPagination>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkAvatars from '@/components/MkAvatars.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
-	endpoint: 'users/lists/list' as const,
+	endpoint: "users/lists/list" as const,
 	limit: 10,
 };
 
@@ -40,18 +61,18 @@ async function create() {
 		title: i18n.ts.enterListName,
 	});
 	if (canceled) return;
-	await os.apiWithDialog('users/lists/create', { name: name });
+	await os.apiWithDialog("users/lists/create", { name: name });
 	pagingComponent.reload();
 }
 
 async function deleteAll() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: 'all lists' }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: "all lists" }),
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/delete-all');
+	await os.api("users/lists/delete-all");
 	os.success();
 }
 
@@ -61,9 +82,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageLists,
-	icon: 'ph-list-bullets ph-bold ph-lg',
+	icon: "ph-list-bullets ph-bold ph-lg",
 	action: {
-		icon: 'ph-plus ph-bold ph-lg',
+		icon: "ph-plus ph-bold ph-lg",
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index e3c211fc2..e90776dcb 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -1,49 +1,76 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="mk-list-page">
-			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section">
-					<div class="_content">
-						<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
-						<MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton>
-						<MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="mk-list-page">
+				<transition
+					:name="$store.state.animation ? 'zoom' : ''"
+					mode="out-in"
+				>
+					<div v-if="list" class="_section">
+						<div class="_content">
+							<MkButton inline @click="addUser()">{{
+								i18n.ts.addUser
+							}}</MkButton>
+							<MkButton inline @click="renameList()">{{
+								i18n.ts.rename
+							}}</MkButton>
+							<MkButton inline @click="deleteList()">{{
+								i18n.ts.delete
+							}}</MkButton>
+						</div>
 					</div>
-				</div>
-			</transition>
+				</transition>
 
-			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section members _gap">
-					<div class="_title">{{ i18n.ts.members }}</div>
-					<div class="_content">
-						<div class="users">
-							<div v-for="user in users" :key="user.id" class="user _panel">
-								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-								<div class="body">
-									<MkUserName :user="user" class="name"/>
-									<MkAcct :user="user" class="acct"/>
-								</div>
-								<div class="action">
-									<button class="_button" @click="removeUser(user)"><i class="ph-x ph-bold ph-lg"></i></button>
+				<transition
+					:name="$store.state.animation ? 'zoom' : ''"
+					mode="out-in"
+				>
+					<div v-if="list" class="_section members _gap">
+						<div class="_title">{{ i18n.ts.members }}</div>
+						<div class="_content">
+							<div class="users">
+								<div
+									v-for="user in users"
+									:key="user.id"
+									class="user _panel"
+								>
+									<MkAvatar
+										:user="user"
+										class="avatar"
+										:show-indicator="true"
+									/>
+									<div class="body">
+										<MkUserName :user="user" class="name" />
+										<MkAcct :user="user" class="acct" />
+									</div>
+									<div class="action">
+										<button
+											class="_button"
+											@click="removeUser(user)"
+										>
+											<i class="ph-x ph-bold ph-lg"></i>
+										</button>
+									</div>
 								</div>
 							</div>
 						</div>
 					</div>
-				</div>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+				</transition>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	listId: string;
@@ -53,21 +80,21 @@ let list = $ref(null);
 let users = $ref([]);
 
 function fetchList() {
-	os.api('users/lists/show', {
+	os.api("users/lists/show", {
 		listId: props.listId,
-	}).then(_list => {
+	}).then((_list) => {
 		list = _list;
-		os.api('users/show', {
+		os.api("users/show", {
 			userIds: list.userIds,
-		}).then(_users => {
+		}).then((_users) => {
 			users = _users;
 		});
 	});
 }
 
 function addUser() {
-	os.selectUser().then(user => {
-		os.apiWithDialog('users/lists/push', {
+	os.selectUser().then((user) => {
+		os.apiWithDialog("users/lists/push", {
 			listId: list.id,
 			userId: user.id,
 		}).then(() => {
@@ -77,11 +104,11 @@ function addUser() {
 }
 
 function removeUser(user) {
-	os.api('users/lists/pull', {
+	os.api("users/lists/pull", {
 		listId: list.id,
 		userId: user.id,
 	}).then(() => {
-		users = users.filter(x => x.id !== user.id);
+		users = users.filter((x) => x.id !== user.id);
 	});
 }
 
@@ -92,7 +119,7 @@ async function renameList() {
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/update', {
+	await os.api("users/lists/update", {
 		listId: list.id,
 		name: name,
 	});
@@ -102,16 +129,16 @@ async function renameList() {
 
 async function deleteList() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: list.name }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: list.name }),
 	});
 	if (canceled) return;
 
-	await os.api('users/lists/delete', {
+	await os.api("users/lists/delete", {
 		listId: list.id,
 	});
 	os.success();
-	mainRouter.push('/my/lists');
+	mainRouter.push("/my/lists");
 }
 
 watch(() => props.listId, fetchList, { immediate: true });
@@ -120,10 +147,16 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => list ? {
-	title: list.name,
-	icon: 'ph-list-bullets ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		list
+			? {
+					title: list.name,
+					icon: "ph-list-bullets ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/not-found.vue b/packages/client/src/pages/not-found.vue
index d6f701b56..d4ec84cff 100644
--- a/packages/client/src/pages/not-found.vue
+++ b/packages/client/src/pages/not-found.vue
@@ -1,15 +1,19 @@
 <template>
-<div class="ipledcug">
-	<div class="_fullinfo">
-		<img src="/static-assets/badges/not-found.png" class="_ghost" alt="Not found"/>
-		<div>{{ i18n.ts.notFoundDescription }}</div>
+	<div class="ipledcug">
+		<div class="_fullinfo">
+			<img
+				src="/static-assets/badges/not-found.png"
+				class="_ghost"
+				alt="Not found"
+			/>
+			<div>{{ i18n.ts.notFoundDescription }}</div>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const headerActions = $computed(() => []);
 
@@ -17,6 +21,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notFound,
-	icon: 'ph-warning ph-bold ph-lg',
+	icon: "ph-warning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index cff6b252b..29c18c12e 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -1,56 +1,110 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800" :marginMin="6">
-		<div class="fcuexfpr">
-			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-				<div v-if="note" class="note">
-					<div v-if="showNext" class="_gap">
-						<XNotes class="_content" :pagination="nextPagination" :no-gap="true"/>
-					</div>
-
-					<div class="main _gap">
-						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ph-caret-up ph-bold ph-lg"></i></MkButton>
-						<div class="note _gap">
-							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
-							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800" :marginMin="6">
+			<div class="fcuexfpr">
+				<transition
+					:name="$store.state.animation ? 'fade' : ''"
+					mode="out-in"
+				>
+					<div v-if="note" class="note">
+						<div v-if="showNext" class="_gap">
+							<XNotes
+								class="_content"
+								:pagination="nextPagination"
+								:no-gap="true"
+							/>
 						</div>
-						<div v-if="clips && clips.length > 0" class="_content clips _gap">
-							<div class="title">{{ i18n.ts.clip }}</div>
-							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-								<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"/>
-								</div>
-							</MkA>
-						</div>
-						<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="ph-caret-down ph-bold ph-lg"></i></MkButton>
-					</div>
 
-					<div v-if="showPrev" class="_gap">
-						<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
+						<div class="main _gap">
+							<MkButton
+								v-if="!showNext && hasNext"
+								class="load next"
+								@click="showNext = true"
+								><i class="ph-caret-up ph-bold ph-lg"></i
+							></MkButton>
+							<div class="note _gap">
+								<MkRemoteCaution
+									v-if="note.user.host != null"
+									:href="note.url ?? note.uri"
+								/>
+								<XNoteDetailed
+									:key="note.id"
+									v-model:note="note"
+									class="note"
+								/>
+							</div>
+							<div
+								v-if="clips && clips.length > 0"
+								class="_content clips _gap"
+							>
+								<div class="title">{{ i18n.ts.clip }}</div>
+								<MkA
+									v-for="item in clips"
+									:key="item.id"
+									:to="`/clips/${item.id}`"
+									class="item _panel _gap"
+								>
+									<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"
+										/>
+									</div>
+								</MkA>
+							</div>
+							<MkButton
+								v-if="!showPrev && hasPrev"
+								class="load prev"
+								@click="showPrev = true"
+								><i class="ph-caret-down ph-bold ph-lg"></i
+							></MkButton>
+						</div>
+
+						<div v-if="showPrev" class="_gap">
+							<XNotes
+								class="_content"
+								:pagination="prevPagination"
+								:no-gap="true"
+							/>
+						</div>
 					</div>
-				</div>
-				<MkError v-else-if="error" @retry="fetch()"/>
-				<MkLoading v-else/>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+					<MkError v-else-if="error" @retry="fetch()" />
+					<MkLoading v-else />
+				</transition>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import XNotes from '@/components/MkNotes.vue';
-import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, defineComponent, watch } from "vue";
+import * as misskey from "calckey-js";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import XNotes from "@/components/MkNotes.vue";
+import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	noteId: string;
@@ -65,22 +119,30 @@ let showNext = $ref(false);
 let error = $ref();
 
 const prevPagination = {
-	endpoint: 'users/notes' as const,
+	endpoint: "users/notes" as const,
 	limit: 10,
-	params: computed(() => note ? ({
-		userId: note.userId,
-		untilId: note.id,
-	}) : null),
+	params: computed(() =>
+		note
+			? {
+					userId: note.userId,
+					untilId: note.id,
+			  }
+			: null
+	),
 };
 
 const nextPagination = {
 	reversed: true,
-	endpoint: 'users/notes' as const,
+	endpoint: "users/notes" as const,
 	limit: 10,
-	params: computed(() => note ? ({
-		userId: note.userId,
-		sinceId: note.id,
-	}) : null),
+	params: computed(() =>
+		note
+			? {
+					userId: note.userId,
+					sinceId: note.id,
+			  }
+			: null
+	),
 };
 
 function fetchNote() {
@@ -89,32 +151,34 @@ function fetchNote() {
 	showPrev = false;
 	showNext = false;
 	note = null;
-	os.api('notes/show', {
+	os.api("notes/show", {
 		noteId: props.noteId,
-	}).then(res => {
-		note = res;
-		Promise.all([
-			os.api('notes/clips', {
-				noteId: note.id,
-			}),
-			os.api('users/notes', {
-				userId: note.userId,
-				untilId: note.id,
-				limit: 1,
-			}),
-			os.api('users/notes', {
-				userId: note.userId,
-				sinceId: note.id,
-				limit: 1,
-			}),
-		]).then(([_clips, prev, next]) => {
-			clips = _clips;
-			hasPrev = prev.length !== 0;
-			hasNext = next.length !== 0;
+	})
+		.then((res) => {
+			note = res;
+			Promise.all([
+				os.api("notes/clips", {
+					noteId: note.id,
+				}),
+				os.api("users/notes", {
+					userId: note.userId,
+					untilId: note.id,
+					limit: 1,
+				}),
+				os.api("users/notes", {
+					userId: note.userId,
+					sinceId: note.id,
+					limit: 1,
+				}),
+			]).then(([_clips, prev, next]) => {
+				clips = _clips;
+				hasPrev = prev.length !== 0;
+				hasNext = next.length !== 0;
+			});
+		})
+		.catch((err) => {
+			error = err;
 		});
-	}).catch(err => {
-		error = err;
-	});
 }
 
 watch(() => props.noteId, fetchNote, {
@@ -125,16 +189,22 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => note ? {
-	title: i18n.ts.note,
-	subtitle: new Date(note.createdAt).toLocaleString(),
-	avatar: note.user,
-	path: `/notes/${note.id}`,
-	share: {
-		title: i18n.t('noteOf', { user: note.user.name }),
-		text: note.text,
-	},
-} : null));
+definePageMetadata(
+	computed(() =>
+		note
+			? {
+					title: i18n.ts.note,
+					subtitle: new Date(note.createdAt).toLocaleString(),
+					avatar: note.user,
+					path: `/notes/${note.id}`,
+					share: {
+						title: i18n.t("noteOf", { user: note.user.name }),
+						text: note.text,
+					},
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index e587a1f78..7a61df0ba 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -1,137 +1,173 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkPageHeader
-			v-model:tab="tab"
-			:actions="headerActions"
-			:tabs="headerTabs"
-			:display-my-avatar="true"
-		/>
-	</template>
-	<MkSpacer :content-max="800">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<XNotifications class="notifications" :include-types="includeTypes" :unread-only="false"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XNotifications class="notifications" :include-types="includeTypes" :unread-only="true"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XNotes :pagination="mentionsPagination"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XNotes :pagination="directNotesPagination"/>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header>
+			<MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-my-avatar="true"
+			/>
+		</template>
+		<MkSpacer :content-max="800">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<XNotifications
+						class="notifications"
+						:include-types="includeTypes"
+						:unread-only="false"
+					/>
+				</swiper-slide>
+				<swiper-slide>
+					<XNotifications
+						class="notifications"
+						:include-types="includeTypes"
+						:unread-only="true"
+					/>
+				</swiper-slide>
+				<swiper-slide>
+					<XNotes :pagination="mentionsPagination" />
+				</swiper-slide>
+				<swiper-slide>
+					<XNotes :pagination="directNotesPagination" />
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import { notificationTypes } from 'calckey-js';
-import XNotifications from '@/components/MkNotifications.vue';
-import XNotes from '@/components/MkNotes.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, ref, watch } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { notificationTypes } from "calckey-js";
+import XNotifications from "@/components/MkNotifications.vue";
+import XNotes from "@/components/MkNotes.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
-const tabs = ['all', 'unread', 'mentions', 'directNotes'];
+const tabs = ["all", "unread", "mentions", "directNotes"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 let includeTypes = $ref<string[] | null>(null);
-let unreadOnly = $computed(() => tab === 'unread');
-os.api('notifications/mark-all-as-read');
+let unreadOnly = $computed(() => tab === "unread");
+os.api("notifications/mark-all-as-read");
 
 const MOBILE_THRESHOLD = 500;
 const isMobile = ref(
-	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
 );
-window.addEventListener('resize', () => {
+window.addEventListener("resize", () => {
 	isMobile.value =
-		deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
 const mentionsPagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 };
 
 const directNotesPagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 	params: {
-		visibility: 'specified',
+		visibility: "specified",
 	},
 };
 
 function setFilter(ev) {
-	const typeItems = notificationTypes.map(t => ({
+	const typeItems = notificationTypes.map((t) => ({
 		text: i18n.t(`_notification._types.${t}`),
 		active: includeTypes && includeTypes.includes(t),
 		action: () => {
 			includeTypes = [t];
 		},
 	}));
-	const items = includeTypes != null ? [{
-		icon: 'ph-x ph-bold ph-lg',
-		text: i18n.ts.clear,
-		action: () => {
-			includeTypes = null;
-		},
-	}, null, ...typeItems] : typeItems;
+	const items =
+		includeTypes != null
+			? [
+					{
+						icon: "ph-x ph-bold ph-lg",
+						text: i18n.ts.clear,
+						action: () => {
+							includeTypes = null;
+						},
+					},
+					null,
+					...typeItems,
+			  ]
+			: typeItems;
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-const headerActions = $computed(() => [tab === 'all' ? {
-	text: i18n.ts.filter,
-	icon: 'ph-funnel ph-bold ph-lg',
-	highlighted: includeTypes != null,
-	handler: setFilter,
-} : undefined, tab === 'all' ? {
-	text: i18n.ts.markAllAsRead,
-	icon: 'ph-check ph-bold ph-lg',
-	handler: () => {
-		os.apiWithDialog('notifications/mark-all-as-read');
+const headerActions = $computed(() =>
+	[
+		tab === "all"
+			? {
+					text: i18n.ts.filter,
+					icon: "ph-funnel ph-bold ph-lg",
+					highlighted: includeTypes != null,
+					handler: setFilter,
+			  }
+			: undefined,
+		tab === "all"
+			? {
+					text: i18n.ts.markAllAsRead,
+					icon: "ph-check ph-bold ph-lg",
+					handler: () => {
+						os.apiWithDialog("notifications/mark-all-as-read");
+					},
+			  }
+			: undefined,
+	].filter((x) => x !== undefined)
+);
+
+const headerTabs = $computed(() => [
+	{
+		key: "all",
+		title: i18n.ts.all,
+		icon: "ph-bell ph-bold ph-lg",
 	},
-} : undefined].filter(x => x !== undefined));
+	{
+		key: "unread",
+		title: i18n.ts.unread,
+		icon: "ph-circle-wavy-warning ph-bold ph-lg",
+	},
+	{
+		key: "mentions",
+		title: i18n.ts.mentions,
+		icon: "ph-at ph-bold ph-lg",
+	},
+	{
+		key: "directNotes",
+		title: i18n.ts.directNotes,
+		icon: "ph-envelope-simple-open ph-bold ph-lg",
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'all',
-	title: i18n.ts.all,
-	icon: 'ph-bell ph-bold ph-lg',
-}, {
-	key: 'unread',
-	title: i18n.ts.unread,
-	icon: 'ph-circle-wavy-warning ph-bold ph-lg',
-}, {
-	key: 'mentions',
-	title: i18n.ts.mentions,
-	icon: 'ph-at ph-bold ph-lg',
-}, {
-	key: 'directNotes',
-	title: i18n.ts.directNotes,
-	icon: 'ph-envelope-simple-open ph-bold ph-lg',
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.notifications,
-	icon: 'ph-bell ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.notifications,
+		icon: "ph-bell ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index 1d25e5493..bd3c0e638 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,67 +1,126 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.button }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.button }}</template>
-
-	<section class="xfhsjczc">
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._button.text }}</template></MkInput>
-		<MkSwitch v-model="value.primary"><span>{{ i18n.ts._pages.blocks._button.colored }}</span></MkSwitch>
-		<MkSelect v-model="value.action">
-			<template #label>{{ i18n.ts._pages.blocks._button.action }}</template>
-			<option value="dialog">{{ i18n.ts._pages.blocks._button._action.dialog }}</option>
-			<option value="resetRandom">{{ i18n.ts._pages.blocks._button._action.resetRandom }}</option>
-			<option value="pushEvent">{{ i18n.ts._pages.blocks._button._action.pushEvent }}</option>
-			<option value="callAiScript">{{ i18n.ts._pages.blocks._button._action.callAiScript }}</option>
-		</MkSelect>
-		<template v-if="value.action === 'dialog'">
-			<MkInput v-model="value.content"><template #label>{{ i18n.ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
-		</template>
-		<template v-else-if="value.action === 'pushEvent'">
-			<MkInput v-model="value.event"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
-			<MkInput v-model="value.message"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
-			<MkSelect v-model="value.var">
-				<template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.variable }}</template>
-				<option :value="null">{{ i18n.t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
-				<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
-				<optgroup :label="i18n.ts._pages.script.pageVariables">
-					<option v-for="v in hpml.getPageVarsByType()" :value="v">{{ v }}</option>
-				</optgroup>
-				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
-					<option v-for="v in hpml.getEnvVarsByType()" :value="v">{{ v }}</option>
-				</optgroup>
+		<section class="xfhsjczc">
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._button.text
+				}}</template></MkInput
+			>
+			<MkSwitch v-model="value.primary"
+				><span>{{
+					i18n.ts._pages.blocks._button.colored
+				}}</span></MkSwitch
+			>
+			<MkSelect v-model="value.action">
+				<template #label>{{
+					i18n.ts._pages.blocks._button.action
+				}}</template>
+				<option value="dialog">
+					{{ i18n.ts._pages.blocks._button._action.dialog }}
+				</option>
+				<option value="resetRandom">
+					{{ i18n.ts._pages.blocks._button._action.resetRandom }}
+				</option>
+				<option value="pushEvent">
+					{{ i18n.ts._pages.blocks._button._action.pushEvent }}
+				</option>
+				<option value="callAiScript">
+					{{ i18n.ts._pages.blocks._button._action.callAiScript }}
+				</option>
 			</MkSelect>
-		</template>
-		<template v-else-if="value.action === 'callAiScript'">
-			<MkInput v-model="value.fn"><template #label>{{ i18n.ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
-		</template>
-	</section>
-</XContainer>
+			<template v-if="value.action === 'dialog'">
+				<MkInput v-model="value.content"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._dialog.content
+					}}</template></MkInput
+				>
+			</template>
+			<template v-else-if="value.action === 'pushEvent'">
+				<MkInput v-model="value.event"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._pushEvent.event
+					}}</template></MkInput
+				>
+				<MkInput v-model="value.message"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._pushEvent.message
+					}}</template></MkInput
+				>
+				<MkSelect v-model="value.var">
+					<template #label>{{
+						i18n.ts._pages.blocks._button._action._pushEvent
+							.variable
+					}}</template>
+					<option :value="null">
+						{{
+							i18n.t(
+								"_pages.blocks._button._action._pushEvent.no-variable"
+							)
+						}}
+					</option>
+					<option v-for="v in hpml.getVarsByType()" :value="v.name">
+						{{ v.name }}
+					</option>
+					<optgroup :label="i18n.ts._pages.script.pageVariables">
+						<option
+							v-for="v in hpml.getPageVarsByType()"
+							:value="v"
+						>
+							{{ v }}
+						</option>
+					</optgroup>
+					<optgroup
+						:label="i18n.ts._pages.script.enviromentVariables"
+					>
+						<option v-for="v in hpml.getEnvVarsByType()" :value="v">
+							{{ v }}
+						</option>
+					</optgroup>
+				</MkSelect>
+			</template>
+			<template v-else-if="value.action === 'callAiScript'">
+				<MkInput v-model="value.fn"
+					><template #label>{{
+						i18n.ts._pages.blocks._button._action._callAiScript
+							.functionName
+					}}</template></MkInput
+				>
+			</template>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any,
-	hpml: any
-}>(), {
-	value: {
-		text: '',
-		action: 'dialog',
-		content: null,
-		event: null,
-		message: null,
-		primary: false,
-		var: null,
-		fn: null
+withDefaults(
+	defineProps<{
+		value: any;
+		hpml: any;
+	}>(),
+	{
+		value: {
+			text: "",
+			action: "dialog",
+			content: null,
+			event: null,
+			message: null,
+			primary: false,
+			var: null,
+			fn: null,
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index c92835789..390904438 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,39 +1,51 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-paint-brush-household ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.canvas }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-paint-brush-household ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.canvas }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._pages.blocks._canvas.id }}</template>
-		</MkInput>
-		<MkInput v-model="value.width" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._canvas.width }}</template>
-			<template #suffix>px</template>
-		</MkInput>
-		<MkInput v-model="value.height" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._canvas.height }}</template>
-			<template #suffix>px</template>
-		</MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name">
+				<template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i
+				></template>
+				<template #label>{{
+					i18n.ts._pages.blocks._canvas.id
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.width" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._canvas.width
+				}}</template>
+				<template #suffix>px</template>
+			</MkInput>
+			<MkInput v-model="value.height" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._canvas.height
+				}}</template>
+				<template #suffix>px</template>
+			</MkInput>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: '',
-		width: 300,
-		height: 200
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+			width: 300,
+			height: 200,
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index 5b0c2a266..8a387a181 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,35 +1,47 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.counter }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.counter }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._pages.blocks._counter.name }}</template>
-		</MkInput>
-		<MkInput v-model="value.text">
-			<template #label>{{ i18n.ts._pages.blocks._counter.text }}</template>
-		</MkInput>
-		<MkInput v-model="value.inc" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._counter.inc }}</template>
-		</MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name">
+				<template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i
+				></template>
+				<template #label>{{
+					i18n.ts._pages.blocks._counter.name
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.text">
+				<template #label>{{
+					i18n.ts._pages.blocks._counter.text
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.inc" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._counter.inc
+				}}</template>
+			</MkInput>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index 6e4525e4b..b4a262f9e 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -1,57 +1,78 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-question ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.if }}</template
+		>
+		<template #func>
+			<button class="_button" @click="add()">
+				<i class="ph-plus ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-question ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.if }}</template>
-	<template #func>
-		<button class="_button" @click="add()">
-			<i class="ph-plus ph-bold ph-lg"></i>
-		</button>
-	</template>
+		<section class="romcojzs">
+			<MkSelect v-model="value.var">
+				<template #label>{{
+					i18n.ts._pages.blocks._if.variable
+				}}</template>
+				<option
+					v-for="v in hpml.getVarsByType('boolean')"
+					:value="v.name"
+				>
+					{{ v.name }}
+				</option>
+				<optgroup :label="i18n.ts._pages.script.pageVariables">
+					<option
+						v-for="v in hpml.getPageVarsByType('boolean')"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
+					<option
+						v-for="v in hpml.getEnvVarsByType('boolean')"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+			</MkSelect>
 
-	<section class="romcojzs">
-		<MkSelect v-model="value.var">
-			<template #label>{{ i18n.ts._pages.blocks._if.variable }}</template>
-			<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="i18n.ts._pages.script.pageVariables">
-				<option v-for="v in hpml.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
-				<option v-for="v in hpml.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-		</MkSelect>
-
-		<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
-	</section>
-</XContainer>
+			<XBlocks v-model="value.children" class="children" :hpml="hpml" />
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { defineAsyncComponent, inject } from "vue";
+import { v4 as uuid } from "uuid";
+import XContainer from "../page-editor.container.vue";
+import MkSelect from "@/components/form/select.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { defineAsyncComponent, inject } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from '../page-editor.container.vue';
-import MkSelect from '@/components/form/select.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
-const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-
-const props = withDefaults(defineProps<{
-	value: any,
-	hpml: any
-}>(), {
-	value: {
-		children: [],
-		var: null
+const props = withDefaults(
+	defineProps<{
+		value: any;
+		hpml: any;
+	}>(),
+	{
+		value: {
+			children: [],
+			var: null,
+		},
 	}
-});
+);
 
-const getPageBlockList = inject<(any) => any>('getPageBlockList');
+const getPageBlockList = inject<(any) => any>("getPageBlockList");
 
 async function add() {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 81d4a10bf..023df8048 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -1,34 +1,44 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-image ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.image }}</template
+		>
+		<template #func>
+			<button @click="choose()">
+				<i class="ph-folder-notch-open ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-image ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.image }}</template>
-	<template #func>
-		<button @click="choose()">
-			<i class="ph-folder-notch-open ph-bold ph-lg"></i>
-		</button>
-	</template>
-
-	<section class="oyyftmcf">
-		<MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
-	</section>
-</XContainer>
+		<section class="oyyftmcf">
+			<MkDriveFileThumbnail
+				v-if="file"
+				class="preview"
+				:file="file"
+				fit="contain"
+				@click="choose()"
+			/>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { onMounted } from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { onMounted } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		fileId: null
+const props = withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			fileId: null,
+		},
 	}
-});
+);
 
 let file: any = $ref(null);
 
@@ -43,9 +53,9 @@ onMounted(async () => {
 	if (props.value.fileId == null) {
 		await choose();
 	} else {
-		os.api('drive/files/show', {
-			fileId: props.value.fileId
-		}).then(fileResponse => {
+		os.api("drive/files/show", {
+			fileId: props.value.fileId,
+		}).then((fileResponse) => {
 			file = fileResponse;
 		});
 	}
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index 323ac93a8..b9618501b 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,53 +1,79 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-sticker ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.note }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-sticker ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.note }}</template>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="id">
+				<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
+				<template #caption>{{
+					i18n.ts._pages.blocks._note.idDescription
+				}}</template>
+			</MkInput>
+			<MkSwitch v-model="value.detailed"
+				><span>{{
+					i18n.ts._pages.blocks._note.detailed
+				}}</span></MkSwitch
+			>
 
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="id">
-			<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
-			<template #caption>{{ i18n.ts._pages.blocks._note.idDescription }}</template>
-		</MkInput>
-		<MkSwitch v-model="value.detailed"><span>{{ i18n.ts._pages.blocks._note.detailed }}</span></MkSwitch>
-
-		<XNote v-if="note && !value.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
-		<XNoteDetailed v-if="note && value.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
-	</section>
-</XContainer>
+			<XNote
+				v-if="note && !value.detailed"
+				:key="note.id + ':normal'"
+				v-model:note="note"
+				style="margin-bottom: 16px"
+			/>
+			<XNoteDetailed
+				v-if="note && value.detailed"
+				:key="note.id + ':detail'"
+				v-model:note="note"
+				style="margin-bottom: 16px"
+			/>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { watch } from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import XNote from "@/components/MkNote.vue";
+import XNoteDetailed from "@/components/MkNoteDetailed.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { watch } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		note: null,
-		detailed: false
+const props = withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			note: null,
+			detailed: false,
+		},
 	}
-});
+);
 
 let id: any = $ref(props.value.note);
 let note: any = $ref(null);
 
-watch(id, async () => {
-	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-		props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
-	} else {
-		props.value.note = id;
-	}
+watch(
+	id,
+	async () => {
+		if (id && (id.startsWith("http://") || id.startsWith("https://"))) {
+			props.value.note = (id.endsWith("/") ? id.slice(0, -1) : id)
+				.split("/")
+				.pop();
+		} else {
+			props.value.note = id;
+		}
 
-	note = await os.api('notes/show', { noteId: props.value.note });
-}, {
-	immediate: true
-});
+		note = await os.api("notes/show", { noteId: props.value.note });
+	},
+	{
+		immediate: true,
+	}
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index 98d23cb45..aab3ba55f 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,35 +1,47 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.numberInput }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.numberInput }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._pages.blocks._numberInput.name }}</template>
-		</MkInput>
-		<MkInput v-model="value.text">
-			<template #label>{{ i18n.ts._pages.blocks._numberInput.text }}</template>
-		</MkInput>
-		<MkInput v-model="value.default" type="number">
-			<template #label>{{ i18n.ts._pages.blocks._numberInput.default }}</template>
-		</MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name">
+				<template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i
+				></template>
+				<template #label>{{
+					i18n.ts._pages.blocks._numberInput.name
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.text">
+				<template #label>{{
+					i18n.ts._pages.blocks._numberInput.text
+				}}</template>
+			</MkInput>
+			<MkInput v-model="value.default" type="number">
+				<template #label>{{
+					i18n.ts._pages.blocks._numberInput.default
+				}}</template>
+			</MkInput>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index 9828c99d1..27129d65c 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,32 +1,48 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-paper-plane-tilt ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.post }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-paper-plane-tilt ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.post }}</template>
-
-	<section style="padding: 16px;">
-		<MkTextarea v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._post.text }}</template></MkTextarea>
-		<MkSwitch v-model="value.attachCanvasImage"><span>{{ i18n.ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
-		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ i18n.ts._pages.blocks._post.canvasId }}</template></MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 16px">
+			<MkTextarea v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._post.text
+				}}</template></MkTextarea
+			>
+			<MkSwitch v-model="value.attachCanvasImage"
+				><span>{{
+					i18n.ts._pages.blocks._post.attachCanvasImage
+				}}</span></MkSwitch
+			>
+			<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"
+				><template #label>{{
+					i18n.ts._pages.blocks._post.canvasId
+				}}</template></MkInput
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: '',
-		attachCanvasImage: false,
-		canvasId: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			text: "",
+			attachCanvasImage: false,
+			canvasId: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 852c3d60c..62254b7d9 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,40 +1,66 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.radioButton }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.radioButton }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._radioButton.name }}</template></MkInput>
-		<MkInput v-model="value.title"><template #label>{{ i18n.ts._pages.blocks._radioButton.title }}</template></MkInput>
-		<MkTextarea v-model="values"><template #label>{{ i18n.ts._pages.blocks._radioButton.values }}</template></MkTextarea>
-		<MkInput v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._radioButton.default }}</template></MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 16px 16px">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.title"
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.title
+				}}</template></MkInput
+			>
+			<MkTextarea v-model="values"
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.values
+				}}</template></MkTextarea
+			>
+			<MkInput v-model="value.default"
+				><template #label>{{
+					i18n.ts._pages.blocks._radioButton.default
+				}}</template></MkInput
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { watch } from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { watch } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: '',
-		title: '',
-		values: []
+const props = withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+			title: "",
+			values: [],
+		},
 	}
-});
+);
 
-let values: string = $ref(props.value.values.join('\n'));
+let values: string = $ref(props.value.values.join("\n"));
 
-watch(values, () => {
-	props.value.values = values.split('\n');
-}, {
-	deep: true
-});
+watch(
+	values,
+	() => {
+		props.value.values = values.split("\n");
+	},
+	{
+		deep: true,
+	}
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
index ee88d8a05..3db5a7d0f 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -1,48 +1,52 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-sticker ph-bold ph-lg"></i>
+			{{ value.title }}</template
+		>
+		<template #func>
+			<button class="_button" @click="rename()">
+				<i class="ph-pencil ph-bold ph-lg"></i>
+			</button>
+			<button class="_button" @click="add()">
+				<i class="ph-plus ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-sticker ph-bold ph-lg"></i> {{ value.title }}</template>
-	<template #func>
-		<button class="_button" @click="rename()">
-			<i class="ph-pencil ph-bold ph-lg"></i>
-		</button>
-		<button class="_button" @click="add()">
-			<i class="ph-plus ph-bold ph-lg"></i>
-		</button>
-	</template>
-
-	<section class="ilrvjyvi">
-		<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
-	</section>
-</XContainer>
+		<section class="ilrvjyvi">
+			<XBlocks v-model="value.children" class="children" :hpml="hpml" />
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import { defineAsyncComponent, inject, onMounted } from "vue";
+import { v4 as uuid } from "uuid";
+import XContainer from "../page-editor.container.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-import { defineAsyncComponent, inject, onMounted } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from '../page-editor.container.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+const XBlocks = defineAsyncComponent(() => import("../page-editor.blocks.vue"));
 
-const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-
-const props = withDefaults(defineProps<{
-	value: any,
-	hpml: any
-}>(), {
-	value: {
-		title: null,
-		children: []
+const props = withDefaults(
+	defineProps<{
+		value: any;
+		hpml: any;
+	}>(),
+	{
+		value: {
+			title: null,
+			children: [],
+		},
 	}
-});
+);
 
-const getPageBlockList = inject<(any) => any>('getPageBlockList');
+const getPageBlockList = inject<(any) => any>("getPageBlockList");
 
 async function rename() {
 	const { canceled, result: title } = await os.inputText({
-		title: 'Enter title',
-		default: props.value.title
+		title: "Enter title",
+		default: props.value.title,
 	});
 	if (canceled) return;
 	props.value.title = title;
@@ -51,7 +55,7 @@ async function rename() {
 async function add() {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index cc7aabbfe..78302e9b9 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,31 +1,49 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.switch }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.switch }}</template>
-
-	<section class="kjuadyyj">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._switch.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._switch.text }}</template></MkInput>
-		<MkSwitch v-model="value.default"><span>{{ i18n.ts._pages.blocks._switch.default }}</span></MkSwitch>
-	</section>
-</XContainer>
+		<section class="kjuadyyj">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._switch.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._switch.text
+				}}</template></MkInput
+			>
+			<MkSwitch v-model="value.default"
+				><span>{{
+					i18n.ts._pages.blocks._switch.default
+				}}</span></MkSwitch
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index f1a6fbd8d..e2b14b8fb 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,28 +1,46 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.textInput }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textInput }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._textInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textInput.text }}</template></MkInput>
-		<MkInput v-model="value.default" type="text"><template #label>{{ i18n.ts._pages.blocks._textInput.default }}</template></MkInput>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 0 16px">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._textInput.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._textInput.text
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.default" type="text"
+				><template #label>{{
+					i18n.ts._pages.blocks._textInput.default
+				}}</template></MkInput
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index bbe01c9ed..08572b3ee 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -1,27 +1,31 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-align-left ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.text }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-align-left ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.text }}</template>
-
-	<section class="vckmsadr">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</XContainer>
+		<section class="vckmsadr">
+			<textarea v-model="value.text"></textarea>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			text: "",
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index e48512815..5f020f713 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,29 +1,47 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-lightning ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.textareaInput }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textareaInput }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand ph-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._textareaInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textareaInput.text }}</template></MkInput>
-		<MkTextarea v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
-	</section>
-</XContainer>
+		<section style="padding: 0 16px 16px 16px">
+			<MkInput v-model="value.name"
+				><template #prefix
+					><i class="ph-magic-wand ph-bold ph-lg"></i></template
+				><template #label>{{
+					i18n.ts._pages.blocks._textareaInput.name
+				}}</template></MkInput
+			>
+			<MkInput v-model="value.text"
+				><template #label>{{
+					i18n.ts._pages.blocks._textareaInput.text
+				}}</template></MkInput
+			>
+			<MkTextarea v-model="value.default"
+				><template #label>{{
+					i18n.ts._pages.blocks._textareaInput.default
+				}}</template></MkTextarea
+			>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkInput from "@/components/form/input.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkInput from '@/components/form/input.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			name: "",
+		},
 	}
-});
+);
 </script>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index cdae20a2e..3c956f091 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,27 +1,31 @@
 <template>
+	<XContainer :draggable="true" @remove="() => $emit('remove')">
+		<template #header
+			><i class="ph-align-left ph-bold ph-lg"></i>
+			{{ i18n.ts._pages.blocks.textarea }}</template
+		>
 
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-align-left ph-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textarea }}</template>
-
-	<section class="ihymsbbe">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</XContainer>
+		<section class="ihymsbbe">
+			<textarea v-model="value.text"></textarea>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts" setup>
+import {} from "vue";
+import XContainer from "../page-editor.container.vue";
+import { i18n } from "@/i18n";
 
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: ''
+withDefaults(
+	defineProps<{
+		value: any;
+	}>(),
+	{
+		value: {
+			text: "",
+		},
 	}
-});
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
index dc363fe25..2200b4a37 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -1,47 +1,77 @@
 <template>
-<XDraggable v-model="blocks" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
-	<template #item="{element}">
-		<component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
-	</template>
-</XDraggable>
+	<XDraggable
+		v-model="blocks"
+		tag="div"
+		item-key="id"
+		handle=".drag-handle"
+		:group="{ name: 'blocks' }"
+		animation="150"
+		swap-threshold="0.5"
+	>
+		<template #item="{ element }">
+			<component
+				:is="'x-' + element.type"
+				:value="element"
+				:hpml="hpml"
+				@update:value="updateItem"
+				@remove="() => removeItem(element)"
+			/>
+		</template>
+	</XDraggable>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XSection from './els/page-editor.el.section.vue';
-import XText from './els/page-editor.el.text.vue';
-import XTextarea from './els/page-editor.el.textarea.vue';
-import XImage from './els/page-editor.el.image.vue';
-import XButton from './els/page-editor.el.button.vue';
-import XTextInput from './els/page-editor.el.text-input.vue';
-import XTextareaInput from './els/page-editor.el.textarea-input.vue';
-import XNumberInput from './els/page-editor.el.number-input.vue';
-import XSwitch from './els/page-editor.el.switch.vue';
-import XIf from './els/page-editor.el.if.vue';
-import XPost from './els/page-editor.el.post.vue';
-import XCounter from './els/page-editor.el.counter.vue';
-import XRadioButton from './els/page-editor.el.radio-button.vue';
-import XCanvas from './els/page-editor.el.canvas.vue';
-import XNote from './els/page-editor.el.note.vue';
-import * as os from '@/os';
+import { defineComponent, defineAsyncComponent } from "vue";
+import XSection from "./els/page-editor.el.section.vue";
+import XText from "./els/page-editor.el.text.vue";
+import XTextarea from "./els/page-editor.el.textarea.vue";
+import XImage from "./els/page-editor.el.image.vue";
+import XButton from "./els/page-editor.el.button.vue";
+import XTextInput from "./els/page-editor.el.text-input.vue";
+import XTextareaInput from "./els/page-editor.el.textarea-input.vue";
+import XNumberInput from "./els/page-editor.el.number-input.vue";
+import XSwitch from "./els/page-editor.el.switch.vue";
+import XIf from "./els/page-editor.el.if.vue";
+import XPost from "./els/page-editor.el.post.vue";
+import XCounter from "./els/page-editor.el.counter.vue";
+import XRadioButton from "./els/page-editor.el.radio-button.vue";
+import XCanvas from "./els/page-editor.el.canvas.vue";
+import XNote from "./els/page-editor.el.note.vue";
+import * as os from "@/os";
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
+		XDraggable: defineAsyncComponent(() =>
+			import("vuedraggable").then((x) => x.default)
+		),
+		XSection,
+		XText,
+		XImage,
+		XButton,
+		XTextarea,
+		XTextInput,
+		XTextareaInput,
+		XNumberInput,
+		XSwitch,
+		XIf,
+		XPost,
+		XCounter,
+		XRadioButton,
+		XCanvas,
+		XNote,
 	},
 
 	props: {
 		modelValue: {
 			type: Array,
-			required: true
+			required: true,
 		},
 		hpml: {
 			required: true,
 		},
 	},
 
-	emits: ['update:modelValue'],
+	emits: ["update:modelValue"],
 
 	computed: {
 		blocks: {
@@ -49,30 +79,30 @@ export default defineComponent({
 				return this.modelValue;
 			},
 			set(value) {
-				this.$emit('update:modelValue', value);
-			}
-		}
+				this.$emit("update:modelValue", value);
+			},
+		},
 	},
 
 	methods: {
 		updateItem(v) {
-			const i = this.blocks.findIndex(x => x.id === v.id);
+			const i = this.blocks.findIndex((x) => x.id === v.id);
 			const newValue = [
 				...this.blocks.slice(0, i),
 				v,
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
-			this.$emit('update:modelValue', newValue);
+			this.$emit("update:modelValue", newValue);
 		},
 
 		removeItem(el) {
-			const i = this.blocks.findIndex(x => x.id === el.id);
+			const i = this.blocks.findIndex((x) => x.id === el.id);
 			const newValue = [
 				...this.blocks.slice(0, i),
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
-			this.$emit('update:modelValue', newValue);
+			this.$emit("update:modelValue", newValue);
 		},
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index af0c588b3..400c705d6 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -1,32 +1,50 @@
 <template>
-<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
-	<header>
-		<div class="title"><slot name="header"></slot></div>
-		<div class="buttons">
-			<slot name="func"></slot>
-			<button v-if="removable" class="_button" @click="remove()">
-				<i class="ph-trash ph-bold ph-lg"></i>
-			</button>
-			<button v-if="draggable" class="drag-handle _button">
-				<i class="ph-list ph-bold ph-lg"></i>
-			</button>
-			<button class="_button" @click="toggleContent(!showBody)">
-				<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-				<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-			</button>
+	<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
+		<header>
+			<div class="title"><slot name="header"></slot></div>
+			<div class="buttons">
+				<slot name="func"></slot>
+				<button v-if="removable" class="_button" @click="remove()">
+					<i class="ph-trash ph-bold ph-lg"></i>
+				</button>
+				<button v-if="draggable" class="drag-handle _button">
+					<i class="ph-list ph-bold ph-lg"></i>
+				</button>
+				<button class="_button" @click="toggleContent(!showBody)">
+					<template v-if="showBody"
+						><i class="ph-caret-up ph-bold ph-lg"></i
+					></template>
+					<template v-else
+						><i class="ph-caret-down ph-bold ph-lg"></i
+					></template>
+				</button>
+			</div>
+		</header>
+		<p v-show="showBody" v-if="error != null" class="error">
+			{{
+				i18n.t("_pages.script.typeError", {
+					slot: error.arg + 1,
+					expect: i18n.t(`script.types.${error.expect}`),
+					actual: i18n.t(`script.types.${error.actual}`),
+				})
+			}}
+		</p>
+		<p v-show="showBody" v-if="warn != null" class="warn">
+			{{
+				i18n.t("_pages.script.thereIsEmptySlot", {
+					slot: warn.slot + 1,
+				})
+			}}
+		</p>
+		<div v-show="showBody" class="body">
+			<slot></slot>
 		</div>
-	</header>
-	<p v-show="showBody" v-if="error != null" class="error">{{ i18n.t('_pages.script.typeError', { slot: error.arg + 1, expect: i18n.t(`script.types.${error.expect}`), actual: i18n.t(`script.types.${error.actual}`) }) }}</p>
-	<p v-show="showBody" v-if="warn != null" class="warn">{{ i18n.t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
-	<div v-show="showBody" class="body">
-		<slot></slot>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	props: {
@@ -51,7 +69,7 @@ export default defineComponent({
 			default: null,
 		},
 	},
-	emits: ['toggle', 'remove'],
+	emits: ["toggle", "remove"],
 	data() {
 		return {
 			showBody: this.expanded,
@@ -61,10 +79,10 @@ export default defineComponent({
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
-			this.$emit('toggle', show);
+			this.$emit("toggle", show);
 		},
 		remove() {
-			this.$emit('remove');
+			this.$emit("remove");
 		},
 	},
 });
@@ -147,7 +165,8 @@ export default defineComponent({
 	}
 
 	> .body {
-		::v-deep(.juejbjww), ::v-deep(.eiipwacr) {
+		::v-deep(.juejbjww),
+		::v-deep(.eiipwacr) {
 			&:not(.inline):first-child {
 				margin-top: 28px;
 			}
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index 2f437cf8b..7d88ec7e7 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -1,95 +1,189 @@
 <template>
+	<XContainer
+		:removable="removable"
+		:error="error"
+		:warn="warn"
+		:draggable="draggable"
+		@remove="() => $emit('remove')"
+	>
+		<template #header
+			><i v-if="icon" :class="icon"></i>
+			<template v-if="title"
+				>{{ title }}
+				<span v-if="typeText" class="turmquns"
+					>({{ typeText }})</span
+				></template
+			><template v-else-if="typeText">{{ typeText }}</template></template
+		>
+		<template #func>
+			<button class="_button" @click="changeType()">
+				<i class="ph-pencil ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-<XContainer :removable="removable" :error="error" :warn="warn" :draggable="draggable" @remove="() => $emit('remove')">
-	<template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span v-if="typeText" class="turmquns">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
-	<template #func>
-		<button class="_button" @click="changeType()">
-			<i class="ph-pencil ph-bold ph-lg"></i>
-		</button>
-	</template>
-
-	<section v-if="modelValue.type === null" class="pbglfege" @click="changeType()">
-		{{ i18n.ts._pages.script.emptySlot }}
-	</section>
-	<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
-		<input v-model="modelValue.value"/>
-	</section>
-	<section v-else-if="modelValue.type === 'multiLineText'" class="tbwccoaw">
-		<textarea v-model="modelValue.value"></textarea>
-	</section>
-	<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
-		<textarea v-model="modelValue.value" :placeholder="i18n.ts._pages.script.blocks._textList.info"></textarea>
-	</section>
-	<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
-		<input v-model="modelValue.value" type="number"/>
-	</section>
-	<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
-		<select v-model="modelValue.value">
-			<option v-for="v in hpml.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="i18n.ts._pages.script.argVariables">
-				<option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._pages.script.pageVariables">
-				<option v-for="v in hpml.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
-				<option v-for="v in hpml.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-		</select>
-	</section>
-	<section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw">
-		<input v-model="modelValue.value"/>
-	</section>
-	<section v-else-if="modelValue.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
-		<MkTextarea v-model="slots">
-			<template #label>{{ i18n.ts._pages.script.blocks._fn.slots }}</template>
-			<template #caption>{{ i18n.t('_pages.script.blocks._fn.slots-info') }}</template>
-		</MkTextarea>
-		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="i18n.t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
-	</section>
-	<section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
-	</section>
-	<section v-else class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="i18n.t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots"/>
-	</section>
-</XContainer>
+		<section
+			v-if="modelValue.type === null"
+			class="pbglfege"
+			@click="changeType()"
+		>
+			{{ i18n.ts._pages.script.emptySlot }}
+		</section>
+		<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
+			<input v-model="modelValue.value" />
+		</section>
+		<section
+			v-else-if="modelValue.type === 'multiLineText'"
+			class="tbwccoaw"
+		>
+			<textarea v-model="modelValue.value"></textarea>
+		</section>
+		<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
+			<textarea
+				v-model="modelValue.value"
+				:placeholder="i18n.ts._pages.script.blocks._textList.info"
+			></textarea>
+		</section>
+		<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
+			<input v-model="modelValue.value" type="number" />
+		</section>
+		<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
+			<select v-model="modelValue.value">
+				<option
+					v-for="v in hpml
+						.getVarsByType(
+							getExpectedType ? getExpectedType() : null
+						)
+						.filter((x) => x.name !== name)"
+					:value="v.name"
+				>
+					{{ v.name }}
+				</option>
+				<optgroup :label="i18n.ts._pages.script.argVariables">
+					<option v-for="v in fnSlots" :value="v.name">
+						{{ v.name }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._pages.script.pageVariables">
+					<option
+						v-for="v in hpml.getPageVarsByType(
+							getExpectedType ? getExpectedType() : null
+						)"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
+					<option
+						v-for="v in hpml.getEnvVarsByType(
+							getExpectedType ? getExpectedType() : null
+						)"
+						:value="v"
+					>
+						{{ v }}
+					</option>
+				</optgroup>
+			</select>
+		</section>
+		<section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw">
+			<input v-model="modelValue.value" />
+		</section>
+		<section
+			v-else-if="modelValue.type === 'fn'"
+			class=""
+			style="padding: 0 16px 16px 16px"
+		>
+			<MkTextarea v-model="slots">
+				<template #label>{{
+					i18n.ts._pages.script.blocks._fn.slots
+				}}</template>
+				<template #caption>{{
+					i18n.t("_pages.script.blocks._fn.slots-info")
+				}}</template>
+			</MkTextarea>
+			<XV
+				v-if="modelValue.value.expression"
+				v-model="modelValue.value.expression"
+				:title="i18n.t(`_pages.script.blocks._fn.arg1`)"
+				:get-expected-type="() => null"
+				:hpml="hpml"
+				:fn-slots="modelValue.value.slots"
+				:name="name"
+			/>
+		</section>
+		<section
+			v-else-if="modelValue.type.startsWith('fn:')"
+			class=""
+			style="padding: 16px"
+		>
+			<XV
+				v-for="(x, i) in modelValue.args"
+				:key="i"
+				v-model="modelValue.args[i]"
+				:title="
+					hpml.getVarByName(modelValue.type.split(':')[1]).value
+						.slots[i].name
+				"
+				:get-expected-type="() => null"
+				:hpml="hpml"
+				:name="name"
+			/>
+		</section>
+		<section v-else class="" style="padding: 16px">
+			<XV
+				v-for="(x, i) in modelValue.args"
+				:key="i"
+				v-model="modelValue.args[i]"
+				:title="
+					i18n.t(
+						`_pages.script.blocks._${modelValue.type}.arg${i + 1}`
+					)
+				"
+				:get-expected-type="() => _getExpectedType(i)"
+				:hpml="hpml"
+				:name="name"
+				:fn-slots="fnSlots"
+			/>
+		</section>
+	</XContainer>
 </template>
 
 <script lang="ts">
-
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from './page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import { blockDefs } from '@/scripts/hpml/index';
-import * as os from '@/os';
-import { isLiteralValue } from '@/scripts/hpml/expr';
-import { funcDefs } from '@/scripts/hpml/lib';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent, defineComponent } from "vue";
+import { v4 as uuid } from "uuid";
+import XContainer from "./page-editor.container.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import { blockDefs } from "@/scripts/hpml/index";
+import * as os from "@/os";
+import { isLiteralValue } from "@/scripts/hpml/expr";
+import { funcDefs } from "@/scripts/hpml/lib";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		XContainer, MkTextarea,
-		XV: defineAsyncComponent(() => import('./page-editor.script-block.vue')),
+		XContainer,
+		MkTextarea,
+		XV: defineAsyncComponent(
+			() => import("./page-editor.script-block.vue")
+		),
 	},
 
-	inject: ['getScriptBlockList'],
+	inject: ["getScriptBlockList"],
 
 	props: {
 		getExpectedType: {
 			required: false,
-			default: null
+			default: null,
 		},
 		modelValue: {
-			required: true
+			required: true,
 		},
 		title: {
-			required: false
+			required: false,
 		},
 		removable: {
 			required: false,
-			default: false
+			default: false,
 		},
 		hpml: {
 			required: true,
@@ -102,15 +196,15 @@ export default defineComponent({
 		},
 		draggable: {
 			required: false,
-			default: false
-		}
+			default: false,
+		},
 	},
 
 	data() {
 		return {
 			error: null,
 			warn: null,
-			slots: '',
+			slots: "",
 			i18n,
 		};
 	},
@@ -118,12 +212,14 @@ export default defineComponent({
 	computed: {
 		icon(): any {
 			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith('fn:')) return 'ph-plug ph-bold ph-lg';
-			return blockDefs.find(x => x.type === this.modelValue.type).icon;
+			if (this.modelValue.type.startsWith("fn:"))
+				return "ph-plug ph-bold ph-lg";
+			return blockDefs.find((x) => x.type === this.modelValue.type).icon;
 		},
 		typeText(): any {
 			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith('fn:')) return this.modelValue.type.split(':')[1];
+			if (this.modelValue.type.startsWith("fn:"))
+				return this.modelValue.type.split(":")[1];
 			return i18n.t(`_pages.script.blocks.${this.modelValue.type}`);
 		},
 	},
@@ -131,94 +227,125 @@ export default defineComponent({
 	watch: {
 		slots: {
 			handler() {
-				this.modelValue.value.slots = this.slots.split('\n').map(x => ({
-					name: x,
-					type: null
-				}));
+				this.modelValue.value.slots = this.slots
+					.split("\n")
+					.map((x) => ({
+						name: x,
+						type: null,
+					}));
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 
 	created() {
 		if (this.modelValue.value == null) this.modelValue.value = null;
 
-		if (this.modelValue.value && this.modelValue.value.slots) this.slots = this.modelValue.value.slots.map(x => x.name).join('\n');
+		if (this.modelValue.value && this.modelValue.value.slots)
+			this.slots = this.modelValue.value.slots
+				.map((x) => x.name)
+				.join("\n");
 
-		this.$watch(() => this.modelValue.type, (t) => {
-			this.warn = null;
+		this.$watch(
+			() => this.modelValue.type,
+			(t) => {
+				this.warn = null;
 
-			if (this.modelValue.type === 'fn') {
-				const id = uuid();
-				this.modelValue.value = {
-					slots: [],
-					expression: { id, type: null }
-				};
-				return;
-			}
+				if (this.modelValue.type === "fn") {
+					const id = uuid();
+					this.modelValue.value = {
+						slots: [],
+						expression: { id, type: null },
+					};
+					return;
+				}
 
-			if (this.modelValue.type && this.modelValue.type.startsWith('fn:')) {
-				const fnName = this.modelValue.type.split(':')[1];
-				const fn = this.hpml.getVarByName(fnName);
+				if (
+					this.modelValue.type &&
+					this.modelValue.type.startsWith("fn:")
+				) {
+					const fnName = this.modelValue.type.split(":")[1];
+					const fn = this.hpml.getVarByName(fnName);
+
+					const empties = [];
+					for (let i = 0; i < fn.value.slots.length; i++) {
+						const id = uuid();
+						empties.push({ id, type: null });
+					}
+					this.modelValue.args = empties;
+					return;
+				}
+
+				if (isLiteralValue(this.modelValue)) return;
 
 				const empties = [];
-				for (let i = 0; i < fn.value.slots.length; i++) {
+				for (
+					let i = 0;
+					i < funcDefs[this.modelValue.type].in.length;
+					i++
+				) {
 					const id = uuid();
 					empties.push({ id, type: null });
 				}
 				this.modelValue.args = empties;
-				return;
-			}
 
-			if (isLiteralValue(this.modelValue)) return;
-
-			const empties = [];
-			for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
-				const id = uuid();
-				empties.push({ id, type: null });
-			}
-			this.modelValue.args = empties;
-
-			for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
-				const inType = funcDefs[this.modelValue.type].in[i];
-				if (typeof inType !== 'number') {
-					if (inType === 'number') this.modelValue.args[i].type = 'number';
-					if (inType === 'string') this.modelValue.args[i].type = 'text';
+				for (
+					let i = 0;
+					i < funcDefs[this.modelValue.type].in.length;
+					i++
+				) {
+					const inType = funcDefs[this.modelValue.type].in[i];
+					if (typeof inType !== "number") {
+						if (inType === "number")
+							this.modelValue.args[i].type = "number";
+						if (inType === "string")
+							this.modelValue.args[i].type = "text";
+					}
 				}
 			}
-		});
+		);
 
-		this.$watch(() => this.modelValue.args, (args) => {
-			if (args == null) {
-				this.warn = null;
-				return;
+		this.$watch(
+			() => this.modelValue.args,
+			(args) => {
+				if (args == null) {
+					this.warn = null;
+					return;
+				}
+				const emptySlotIndex = args.findIndex((x) => x.type === null);
+				if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
+					this.warn = {
+						slot: emptySlotIndex,
+					};
+				} else {
+					this.warn = null;
+				}
+			},
+			{
+				deep: true,
 			}
-			const emptySlotIndex = args.findIndex(x => x.type === null);
-			if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
-				this.warn = {
-					slot: emptySlotIndex
-				};
-			} else {
-				this.warn = null;
-			}
-		}, {
-			deep: true
-		});
+		);
 
-		this.$watch(() => this.hpml.variables, () => {
-			if (this.type != null && this.modelValue) {
-				this.error = this.hpml.typeCheck(this.modelValue);
+		this.$watch(
+			() => this.hpml.variables,
+			() => {
+				if (this.type != null && this.modelValue) {
+					this.error = this.hpml.typeCheck(this.modelValue);
+				}
+			},
+			{
+				deep: true,
 			}
-		}, {
-			deep: true
-		});
+		);
 	},
 
 	methods: {
 		async changeType() {
 			const { canceled, result: type } = await os.select({
 				title: i18n.ts._pages.selectType,
-				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null)
+				groupedItems: this.getScriptBlockList(
+					this.getExpectedType ? this.getExpectedType() : null
+				),
 			});
 			if (canceled) return;
 			this.modelValue.type = type;
@@ -226,8 +353,8 @@ export default defineComponent({
 
 		_getExpectedType(slot: number) {
 			return this.hpml.getExpectedType(this.modelValue, slot);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 185b4347a..da951b720 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -1,108 +1,189 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="jqqmcavi">
-			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ph-arrow-square-out ph-bold ph-lg"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
-			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ph-clipboard-text ph-bold ph-lg"></i> {{ i18n.ts.duplicate }}</MkButton>
-			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
-		</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<div class="jqqmcavi">
+				<MkButton
+					v-if="pageId"
+					class="button"
+					inline
+					link
+					:to="`/@${author.username}/pages/${currentName}`"
+					><i class="ph-arrow-square-out ph-bold ph-lg"></i>
+					{{ i18n.ts._pages.viewPage }}</MkButton
+				>
+				<MkButton
+					v-if="!readonly"
+					inline
+					primary
+					class="button"
+					@click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</MkButton
+				>
+				<MkButton v-if="pageId" inline class="button" @click="duplicate"
+					><i class="ph-clipboard-text ph-bold ph-lg"></i>
+					{{ i18n.ts.duplicate }}</MkButton
+				>
+				<MkButton
+					v-if="pageId && !readonly"
+					inline
+					class="button"
+					danger
+					@click="del"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</MkButton
+				>
+			</div>
 
-		<div v-if="tab === 'settings'">
-			<div class="_formRoot">
-				<MkInput v-model="title" class="_formBlock">
-					<template #label>{{ i18n.ts._pages.title }}</template>
-				</MkInput>
+			<div v-if="tab === 'settings'">
+				<div class="_formRoot">
+					<MkInput v-model="title" class="_formBlock">
+						<template #label>{{ i18n.ts._pages.title }}</template>
+					</MkInput>
 
-				<MkInput v-model="summary" class="_formBlock">
-					<template #label>{{ i18n.ts._pages.summary }}</template>
-				</MkInput>
+					<MkInput v-model="summary" class="_formBlock">
+						<template #label>{{ i18n.ts._pages.summary }}</template>
+					</MkInput>
 
-				<MkInput v-model="name" class="_formBlock">
-					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<template #label>{{ i18n.ts._pages.url }}</template>
-				</MkInput>
+					<MkInput v-model="name" class="_formBlock">
+						<template #prefix
+							>{{ url }}/@{{ author.username }}/pages/</template
+						>
+						<template #label>{{ i18n.ts._pages.url }}</template>
+					</MkInput>
 
-				<MkSwitch v-model="isPublic" class="_formBlock">{{ i18n.ts.public }}</MkSwitch>
-				<MkSwitch v-model="alignCenter" class="_formBlock">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
+					<MkSwitch v-model="isPublic" class="_formBlock">{{
+						i18n.ts.public
+					}}</MkSwitch>
+					<MkSwitch v-model="alignCenter" class="_formBlock">{{
+						i18n.ts._pages.alignCenter
+					}}</MkSwitch>
 
-				<MkSelect v-model="font" class="_formBlock">
-					<template #label>{{ i18n.ts._pages.font }}</template>
-					<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
-					<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
-				</MkSelect>
+					<MkSelect v-model="font" class="_formBlock">
+						<template #label>{{ i18n.ts._pages.font }}</template>
+						<option value="serif">
+							{{ i18n.ts._pages.fontSerif }}
+						</option>
+						<option value="sans-serif">
+							{{ i18n.ts._pages.fontSansSerif }}
+						</option>
+					</MkSelect>
 
-				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
+					<MkSwitch
+						v-model="hideTitleWhenPinned"
+						class="_formBlock"
+						>{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch
+					>
 
-				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
-					<div v-else-if="eyeCatchingImage">
-						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
+					<div class="eyeCatch">
+						<MkButton
+							v-if="eyeCatchingImageId == null && !readonly"
+							@click="setEyeCatchingImage"
+							><i class="ph-plus ph-bold ph-lg"></i>
+							{{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton
+						>
+						<div v-else-if="eyeCatchingImage">
+							<img
+								:src="eyeCatchingImage.url"
+								:alt="eyeCatchingImage.name"
+								style="max-width: 100%"
+							/>
+							<MkButton
+								v-if="!readonly"
+								@click="removeEyeCatchingImage()"
+								><i class="ph-trash ph-bold ph-lg"></i>
+								{{
+									i18n.ts._pages.eyeCatchingImageRemove
+								}}</MkButton
+							>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
 
-		<div v-else-if="tab === 'contents'">
-			<div>
-				<XBlocks v-model="content" class="content" :hpml="hpml"/>
-				<MkButton v-if="!readonly" @click="add()"><i class="ph-plus ph-bold ph-lg"></i></MkButton>
+			<div v-else-if="tab === 'contents'">
+				<div>
+					<XBlocks v-model="content" class="content" :hpml="hpml" />
+					<MkButton v-if="!readonly" @click="add()"
+						><i class="ph-plus ph-bold ph-lg"></i
+					></MkButton>
+				</div>
 			</div>
-		</div>
 
-		<div v-else-if="tab === 'variables'">
-			<div class="qmuvgica">
-				<XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-					<template #item="{element}">
-						<XVariable
-							:model-value="element"
-							:removable="true"
-							:hpml="hpml"
-							:name="element.name"
-							:title="element.name"
-							:draggable="true"
-							@remove="() => removeVariable(element)"
-						/>
-					</template>
-				</XDraggable>
+			<div v-else-if="tab === 'variables'">
+				<div class="qmuvgica">
+					<XDraggable
+						v-show="variables.length > 0"
+						v-model="variables"
+						tag="div"
+						class="variables"
+						item-key="name"
+						handle=".drag-handle"
+						:group="{ name: 'variables' }"
+						animation="150"
+						swap-threshold="0.5"
+					>
+						<template #item="{ element }">
+							<XVariable
+								:model-value="element"
+								:removable="true"
+								:hpml="hpml"
+								:name="element.name"
+								:title="element.name"
+								:draggable="true"
+								@remove="() => removeVariable(element)"
+							/>
+						</template>
+					</XDraggable>
 
-				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ph-plus ph-bold ph-lg"></i></MkButton>
+					<MkButton
+						v-if="!readonly"
+						class="add"
+						@click="addVariable()"
+						><i class="ph-plus ph-bold ph-lg"></i
+					></MkButton>
+				</div>
 			</div>
-		</div>
 
-		<div v-else-if="tab === 'script'">
-			<div>
-				<MkTextarea v-model="script" class="_code"/>
+			<div v-else-if="tab === 'script'">
+				<div>
+					<MkTextarea v-model="script" class="_code" />
+				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, provide, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XVariable from './page-editor.script-block.vue';
-import XBlocks from './page-editor.blocks.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkInput from '@/components/form/input.vue';
-import { blockDefs } from '@/scripts/hpml/index';
-import { HpmlTypeChecker } from '@/scripts/hpml/type-checker';
-import { url } from '@/config';
-import { collectPageVars } from '@/scripts/collect-page-vars';
-import * as os from '@/os';
-import { selectFile } from '@/scripts/select-file';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
+import { defineAsyncComponent, computed, provide, watch } from "vue";
+import { v4 as uuid } from "uuid";
+import XVariable from "./page-editor.script-block.vue";
+import XBlocks from "./page-editor.blocks.vue";
+import MkTextarea from "@/components/form/textarea.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkSelect from "@/components/form/select.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import MkInput from "@/components/form/input.vue";
+import { blockDefs } from "@/scripts/hpml/index";
+import { HpmlTypeChecker } from "@/scripts/hpml/type-checker";
+import { url } from "@/config";
+import { collectPageVars } from "@/scripts/collect-page-vars";
+import * as os from "@/os";
+import { selectFile } from "@/scripts/select-file";
+import { mainRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { $i } from "@/account";
 
-const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+const XDraggable = defineAsyncComponent(() =>
+	import("vuedraggable").then((x) => x.default)
+);
 
 const props = defineProps<{
 	initPageId?: string;
@@ -110,35 +191,35 @@ const props = defineProps<{
 	initUser?: string;
 }>();
 
-let tab = $ref('settings');
+let tab = $ref("settings");
 let author = $ref($i);
 let readonly = $ref(false);
 let page = $ref(null);
 let pageId = $ref(null);
 let currentName = $ref(null);
-let title = $ref('');
+let title = $ref("");
 let summary = $ref(null);
 let name = $ref(Date.now().toString());
 let eyeCatchingImage = $ref(null);
 let eyeCatchingImageId = $ref(null);
-let font = $ref('sans-serif');
+let font = $ref("sans-serif");
 let content = $ref([]);
 let alignCenter = $ref(false);
 let isPublic = $ref(true);
 let hideTitleWhenPinned = $ref(false);
 let variables = $ref([]);
 let hpml = $ref(null);
-let script = $ref('');
+let script = $ref("");
 
-provide('readonly', readonly);
-provide('getScriptBlockList', getScriptBlockList);
-provide('getPageBlockList', getPageBlockList);
+provide("readonly", readonly);
+provide("getScriptBlockList", getScriptBlockList);
+provide("getPageBlockList", getPageBlockList);
 
 watch($$(eyeCatchingImageId), async () => {
 	if (eyeCatchingImageId == null) {
 		eyeCatchingImage = null;
 	} else {
-		eyeCatchingImage = await os.api('drive/files/show', {
+		eyeCatchingImage = await os.api("drive/files/show", {
 			fileId: eyeCatchingImageId,
 		});
 	}
@@ -163,18 +244,18 @@ function getSaveOptions() {
 function save() {
 	const options = getSaveOptions();
 
-	const onError = err => {
-		if (err.id === '3d81ceae-475f-4600-b2a8-2bc116157532') {
-			if (err.info.param === 'name') {
+	const onError = (err) => {
+		if (err.id === "3d81ceae-475f-4600-b2a8-2bc116157532") {
+			if (err.info.param === "name") {
 				os.alert({
-					type: 'error',
+					type: "error",
 					title: i18n.ts._pages.invalidNameTitle,
 					text: i18n.ts._pages.invalidNameText,
 				});
 			}
-		} else if (err.code === 'NAME_ALREADY_EXISTS') {
+		} else if (err.code === "NAME_ALREADY_EXISTS") {
 			os.alert({
-				type: 'error',
+				type: "error",
 				text: i18n.ts._pages.nameAlreadyExists,
 			});
 		}
@@ -182,54 +263,56 @@ function save() {
 
 	if (pageId) {
 		options.pageId = pageId;
-		os.api('pages/update', options)
-		.then(page => {
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.updated,
-			});
-		}).catch(onError);
+		os.api("pages/update", options)
+			.then((page) => {
+				currentName = name.trim();
+				os.alert({
+					type: "success",
+					text: i18n.ts._pages.updated,
+				});
+			})
+			.catch(onError);
 	} else {
-		os.api('pages/create', options)
-		.then(created => {
-			pageId = created.id;
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.created,
-			});
-			mainRouter.push(`/pages/edit/${pageId}`);
-		}).catch(onError);
+		os.api("pages/create", options)
+			.then((created) => {
+				pageId = created.id;
+				currentName = name.trim();
+				os.alert({
+					type: "success",
+					text: i18n.ts._pages.created,
+				});
+				mainRouter.push(`/pages/edit/${pageId}`);
+			})
+			.catch(onError);
 	}
 }
 
 function del() {
 	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: title.trim() }),
+		type: "warning",
+		text: i18n.t("removeAreYouSure", { x: title.trim() }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		os.api('pages/delete', {
+		os.api("pages/delete", {
 			pageId: pageId,
 		}).then(() => {
 			os.alert({
-				type: 'success',
+				type: "success",
 				text: i18n.ts._pages.deleted,
 			});
-			mainRouter.push('/pages');
+			mainRouter.push("/pages");
 		});
 	});
 }
 
 function duplicate() {
-	title = title + ' - copy';
-	name = name + '-copy';
-	os.api('pages/create', getSaveOptions()).then(created => {
+	title = title + " - copy";
+	name = name + "-copy";
+	os.api("pages/create", getSaveOptions()).then((created) => {
 		pageId = created.id;
 		currentName = name.trim();
 		os.alert({
-			type: 'success',
+			type: "success",
 			text: i18n.ts._pages.created,
 		});
 		mainRouter.push(`/pages/edit/${pageId}`);
@@ -258,7 +341,7 @@ async function addVariable() {
 
 	if (hpml.isUsedName(name)) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._pages.variableNameIsAlreadyUsed,
 		});
 		return;
@@ -269,47 +352,66 @@ async function addVariable() {
 }
 
 function removeVariable(v) {
-	variables = variables.filter(x => x.name !== v.name);
+	variables = variables.filter((x) => x.name !== v.name);
 }
 
 function getPageBlockList() {
-	return [{
-		label: i18n.ts._pages.contentBlocks,
-		items: [
-			{ value: 'section', text: i18n.ts._pages.blocks.section },
-			{ value: 'text', text: i18n.ts._pages.blocks.text },
-			{ value: 'image', text: i18n.ts._pages.blocks.image },
-			{ value: 'textarea', text: i18n.ts._pages.blocks.textarea },
-			{ value: 'note', text: i18n.ts._pages.blocks.note },
-			{ value: 'canvas', text: i18n.ts._pages.blocks.canvas },
-		],
-	}, {
-		label: i18n.ts._pages.inputBlocks,
-		items: [
-			{ value: 'button', text: i18n.ts._pages.blocks.button },
-			{ value: 'radioButton', text: i18n.ts._pages.blocks.radioButton },
-			{ value: 'textInput', text: i18n.ts._pages.blocks.textInput },
-			{ value: 'textareaInput', text: i18n.ts._pages.blocks.textareaInput },
-			{ value: 'numberInput', text: i18n.ts._pages.blocks.numberInput },
-			{ value: 'switch', text: i18n.ts._pages.blocks.switch },
-			{ value: 'counter', text: i18n.ts._pages.blocks.counter },
-		],
-	}, {
-		label: i18n.ts._pages.specialBlocks,
-		items: [
-			{ value: 'if', text: i18n.ts._pages.blocks.if },
-			{ value: 'post', text: i18n.ts._pages.blocks.post },
-		],
-	}];
+	return [
+		{
+			label: i18n.ts._pages.contentBlocks,
+			items: [
+				{ value: "section", text: i18n.ts._pages.blocks.section },
+				{ value: "text", text: i18n.ts._pages.blocks.text },
+				{ value: "image", text: i18n.ts._pages.blocks.image },
+				{ value: "textarea", text: i18n.ts._pages.blocks.textarea },
+				{ value: "note", text: i18n.ts._pages.blocks.note },
+				{ value: "canvas", text: i18n.ts._pages.blocks.canvas },
+			],
+		},
+		{
+			label: i18n.ts._pages.inputBlocks,
+			items: [
+				{ value: "button", text: i18n.ts._pages.blocks.button },
+				{
+					value: "radioButton",
+					text: i18n.ts._pages.blocks.radioButton,
+				},
+				{ value: "textInput", text: i18n.ts._pages.blocks.textInput },
+				{
+					value: "textareaInput",
+					text: i18n.ts._pages.blocks.textareaInput,
+				},
+				{
+					value: "numberInput",
+					text: i18n.ts._pages.blocks.numberInput,
+				},
+				{ value: "switch", text: i18n.ts._pages.blocks.switch },
+				{ value: "counter", text: i18n.ts._pages.blocks.counter },
+			],
+		},
+		{
+			label: i18n.ts._pages.specialBlocks,
+			items: [
+				{ value: "if", text: i18n.ts._pages.blocks.if },
+				{ value: "post", text: i18n.ts._pages.blocks.post },
+			],
+		},
+	];
 }
 
 function getScriptBlockList(type: string = null) {
 	const list = [];
 
-	const blocks = blockDefs.filter(block => type == null || block.out == null || block.out === type || typeof block.out === 'number');
+	const blocks = blockDefs.filter(
+		(block) =>
+			type == null ||
+			block.out == null ||
+			block.out === type ||
+			typeof block.out === "number"
+	);
 
 	for (const block of blocks) {
-		const category = list.find(x => x.category === block.category);
+		const category = list.find((x) => x.category === block.category);
 		if (category) {
 			category.items.push({
 				value: block.type,
@@ -319,20 +421,22 @@ function getScriptBlockList(type: string = null) {
 			list.push({
 				category: block.category,
 				label: i18n.t(`_pages.script.categories.${block.category}`),
-				items: [{
-					value: block.type,
-					text: i18n.t(`_pages.script.blocks.${block.type}`),
-				}],
+				items: [
+					{
+						value: block.type,
+						text: i18n.t(`_pages.script.blocks.${block.type}`),
+					},
+				],
 			});
 		}
 	}
 
-	const userFns = variables.filter(x => x.type === 'fn');
+	const userFns = variables.filter((x) => x.type === "fn");
 	if (userFns.length > 0) {
 		list.unshift({
-			label: i18n.t('_pages.script.categories.fn'),
-			items: userFns.map(v => ({
-				value: 'fn:' + v.name,
+			label: i18n.t("_pages.script.categories.fn"),
+			items: userFns.map((v) => ({
+				value: "fn:" + v.name,
 				text: v.name,
 			})),
 		});
@@ -342,7 +446,7 @@ function getScriptBlockList(type: string = null) {
 }
 
 function setEyeCatchingImage(img) {
-	selectFile(img.currentTarget ?? img.target, null).then(file => {
+	selectFile(img.currentTarget ?? img.target, null).then((file) => {
 		eyeCatchingImageId = file.id;
 	});
 }
@@ -354,20 +458,28 @@ function removeEyeCatchingImage() {
 async function init() {
 	hpml = new HpmlTypeChecker();
 
-	watch($$(variables), () => {
-		hpml.variables = variables;
-	}, { deep: true });
+	watch(
+		$$(variables),
+		() => {
+			hpml.variables = variables;
+		},
+		{ deep: true }
+	);
 
-	watch($$(content), () => {
-		hpml.pageVars = collectPageVars(content);
-	}, { deep: true });
+	watch(
+		$$(content),
+		() => {
+			hpml.pageVars = collectPageVars(content);
+		},
+		{ deep: true }
+	);
 
 	if (props.initPageId) {
-		page = await os.api('pages/show', {
+		page = await os.api("pages/show", {
 			pageId: props.initPageId,
 		});
 	} else if (props.initPageName && props.initUser) {
-		page = await os.api('pages/show', {
+		page = await os.api("pages/show", {
 			name: props.initPageName,
 			username: props.initUser,
 		});
@@ -391,11 +503,13 @@ async function init() {
 		eyeCatchingImageId = page.eyeCatchingImageId;
 	} else {
 		const id = uuid();
-		content = [{
-			id,
-			type: 'text',
-			text: '',
-		}];
+		content = [
+			{
+				id,
+				type: "text",
+				text: "",
+			},
+		];
 	}
 }
 
@@ -403,37 +517,43 @@ init();
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [{
-	key: 'settings',
-	title: i18n.ts._pages.pageSetting,
-	icon: 'ph-gear-six ph-bold ph-lg',
-}, {
-	key: 'contents',
-	title: i18n.ts._pages.contents,
-	icon: 'ph-sticker ph-bold ph-lg',
-}, {
-	key: 'variables',
-	title: i18n.ts._pages.variables,
-	icon: 'ph-magic-wand ph-bold ph-lg',
-}, {
-	key: 'script',
-	title: i18n.ts.script,
-	icon: 'ph-code ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "settings",
+		title: i18n.ts._pages.pageSetting,
+		icon: "ph-gear-six ph-bold ph-lg",
+	},
+	{
+		key: "contents",
+		title: i18n.ts._pages.contents,
+		icon: "ph-sticker ph-bold ph-lg",
+	},
+	{
+		key: "variables",
+		title: i18n.ts._pages.variables,
+		icon: "ph-magic-wand ph-bold ph-lg",
+	},
+	{
+		key: "script",
+		title: i18n.ts.script,
+		icon: "ph-code ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => {
-	let title = i18n.ts._pages.newPage;
-	if (props.initPageId) {
-		title = i18n.ts._pages.editPage;
-	}
-	else if (props.initPageName && props.initUser) {
-		title = i18n.ts._pages.readPage;
-	}
-	return {
-		title: title,
-		icon: 'ph-pencil ph-bold ph-lg',
-	};
-}));
+definePageMetadata(
+	computed(() => {
+		let title = i18n.ts._pages.newPage;
+		if (props.initPageId) {
+			title = i18n.ts._pages.editPage;
+		} else if (props.initPageName && props.initUser) {
+			title = i18n.ts._pages.readPage;
+		}
+		return {
+			title: title,
+			icon: "ph-pencil ph-bold ph-lg",
+		};
+	})
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 1c5c7f1f7..d5d7d5bf8 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -1,52 +1,165 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-			<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh">
-				<div class="footer">
-					<div><i class="ph-alarm ph-bold"/> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-					<div v-if="page.createdAt != page.updatedAt"><i class="ph-alarm ph-bold"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
-				</div>
-				<div class="_block main">
-					<div class="banner">
-						<div class="banner-image">
-							<div class="header">
-								<h1>{{ page.title }}</h1>
-							</div>
-							<div class="menu-actions">
-								<button v-tooltip="i18n.ts.copyUrl" @click="copyUrl" class="menu _button"><i class="ph-link-simple ph-bold ph-lg"/></button>
-								<MkA v-tooltip="i18n.ts._pages.viewSource" :to="`/@${username}/pages/${pageName}/view-source`" class="menu _button" style="transform: translateY(2px);"><i class="ph-code ph-bold ph-lg"/></MkA>
-								<template v-if="$i && $i.id === page.userId">
-									<MkA v-tooltip="i18n.ts._pages.editPage" class="menu _button" :to="`/pages/edit/${page.id}`" style="transform: translateY(2px);"><i class="ph-pencil ph-bold ph-lg"/></MkA>
-									<button v-if="$i.pinnedPageId === page.id" v-tooltip="i18n.ts.unpin" class="menu _button" @click="pin(false)"><i class="ph-push-pin-slash ph-bold ph-lg"/></button>
-									<button v-else v-tooltip="i18n.ts.pin" class="menu _button" @click="pin(true)"><i class="ph-push-pin ph-bold ph-lg"/></button>
-								</template>
-							</div>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<transition
+				:name="$store.state.animation ? 'fade' : ''"
+				mode="out-in"
+			>
+				<div
+					v-if="page"
+					:key="page.id"
+					v-size="{ max: [450] }"
+					class="xcukqgmh"
+				>
+					<div class="footer">
+						<div>
+							<i class="ph-alarm ph-bold" />
+							{{ i18n.ts.createdAt }}:
+							<MkTime :time="page.createdAt" mode="detail" />
+						</div>
+						<div v-if="page.createdAt != page.updatedAt">
+							<i class="ph-alarm ph-bold"></i>
+							{{ i18n.ts.updatedAt }}:
+							<MkTime :time="page.updatedAt" mode="detail" />
 						</div>
 					</div>
-					<div class="content">
-						<XPage :page="page"/>
-					</div>
-					<div class="actions">
-						<div class="like">
-							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ph-heart ph-fill ph-lg"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="ph-heart ph-bold"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-						</div>
-						<div class="other">
-							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ph-repeat ph-bold ph-lg ph-fw ph-lg"></i></button>
-							<button v-if="shareAvailable()" v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ph-share-network ph-bold ph-lg ph-fw ph-lg"></i></button>
-						</div>
-						<div class="user">
-							<MkAvatar :user="page.user" class="avatar"/>
-							<div class="name">
-								<MkUserName :user="page.user" style="display: block;"/>
-								<MkAcct :user="page.user"/>
+					<div class="_block main">
+						<div class="banner">
+							<div class="banner-image">
+								<div class="header">
+									<h1>{{ page.title }}</h1>
+								</div>
+								<div class="menu-actions">
+									<button
+										v-tooltip="i18n.ts.copyUrl"
+										@click="copyUrl"
+										class="menu _button"
+									>
+										<i
+											class="ph-link-simple ph-bold ph-lg"
+										/>
+									</button>
+									<MkA
+										v-tooltip="i18n.ts._pages.viewSource"
+										:to="`/@${username}/pages/${pageName}/view-source`"
+										class="menu _button"
+										style="transform: translateY(2px)"
+										><i class="ph-code ph-bold ph-lg"
+									/></MkA>
+									<template
+										v-if="$i && $i.id === page.userId"
+									>
+										<MkA
+											v-tooltip="i18n.ts._pages.editPage"
+											class="menu _button"
+											:to="`/pages/edit/${page.id}`"
+											style="transform: translateY(2px)"
+											><i class="ph-pencil ph-bold ph-lg"
+										/></MkA>
+										<button
+											v-if="$i.pinnedPageId === page.id"
+											v-tooltip="i18n.ts.unpin"
+											class="menu _button"
+											@click="pin(false)"
+										>
+											<i
+												class="ph-push-pin-slash ph-bold ph-lg"
+											/>
+										</button>
+										<button
+											v-else
+											v-tooltip="i18n.ts.pin"
+											class="menu _button"
+											@click="pin(true)"
+										>
+											<i
+												class="ph-push-pin ph-bold ph-lg"
+											/>
+										</button>
+									</template>
+								</div>
 							</div>
-							<MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
-					</div>
-					<!-- <div class="links">
+						<div class="content">
+							<XPage :page="page" />
+						</div>
+						<div class="actions">
+							<div class="like">
+								<MkButton
+									v-if="page.isLiked"
+									v-tooltip="i18n.ts._pages.unlike"
+									class="button"
+									primary
+									@click="unlike()"
+									><i class="ph-heart ph-fill ph-lg"></i
+									><span
+										v-if="page.likedCount > 0"
+										class="count"
+										>{{ page.likedCount }}</span
+									></MkButton
+								>
+								<MkButton
+									v-else
+									v-tooltip="i18n.ts._pages.like"
+									class="button"
+									@click="like()"
+									><i class="ph-heart ph-bold"></i
+									><span
+										v-if="page.likedCount > 0"
+										class="count"
+										>{{ page.likedCount }}</span
+									></MkButton
+								>
+							</div>
+							<div class="other">
+								<button
+									v-tooltip="i18n.ts.shareWithNote"
+									v-click-anime
+									class="_button"
+									@click="shareWithNote"
+								>
+									<i
+										class="ph-repeat ph-bold ph-lg ph-fw ph-lg"
+									></i>
+								</button>
+								<button
+									v-if="shareAvailable()"
+									v-tooltip="i18n.ts.share"
+									v-click-anime
+									class="_button"
+									@click="share"
+								>
+									<i
+										class="ph-share-network ph-bold ph-lg ph-fw ph-lg"
+									></i>
+								</button>
+							</div>
+							<div class="user">
+								<MkAvatar :user="page.user" class="avatar" />
+								<div class="name">
+									<MkUserName
+										:user="page.user"
+										style="display: block"
+									/>
+									<MkAcct :user="page.user" />
+								</div>
+								<MkFollowButton
+									v-if="!$i || $i.id != page.user.id"
+									:user="page.user"
+									:inline="true"
+									:transparent="false"
+									:full="true"
+									class="koudoku"
+								/>
+							</div>
+						</div>
+						<!-- <div class="links">
 						<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ i18n.ts._pages.viewSource }}</MkA>
 						<template v-if="$i && $i.id === page.userId">
 							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
@@ -54,36 +167,52 @@
 							<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
 						</template>
 					</div> -->
+					</div>
+					<MkAd :prefer="['horizontal', 'horizontal-big']" />
+					<MkContainer
+						:max-height="300"
+						:foldable="true"
+						:expanded="false"
+						class="other"
+					>
+						<template #header
+							><i class="ph-clock ph-bold ph-lg"></i>
+							{{ i18n.ts.recentPosts }}</template
+						>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="otherPostsPagination"
+						>
+							<MkPagePreview
+								v-for="page in items"
+								:key="page.id"
+								:page="page"
+								class="_gap"
+							/>
+						</MkPagination>
+					</MkContainer>
 				</div>
-				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-				<MkContainer :max-height="300" :foldable="true" :expanded="false" class="other">
-					<template #header><i class="ph-clock ph-bold ph-lg"></i> {{ i18n.ts.recentPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-					</MkPagination>
-				</MkContainer>
-			</div>
-			<MkError v-else-if="error" @retry="fetchPage()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkError v-else-if="error" @retry="fetchPage()" />
+				<MkLoading v-else />
+			</transition>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import XPage from '@/components/page/page.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { url } from '@/config';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import { i18n } from '@/i18n';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { shareAvailable } from '@/scripts/share-available';
+import { computed, watch } from "vue";
+import XPage from "@/components/page/page.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { url } from "@/config";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import { i18n } from "@/i18n";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { shareAvailable } from "@/scripts/share-available";
 
 const props = defineProps<{
 	pageName: string;
@@ -94,25 +223,27 @@ let page = $ref(null);
 let bgImg = $ref(null);
 let error = $ref(null);
 const otherPostsPagination = {
-	endpoint: 'users/pages' as const,
+	endpoint: "users/pages" as const,
 	limit: 6,
 	params: computed(() => ({
 		userId: page.user.id,
 	})),
 };
-const path = $computed(() => props.username + '/' + props.pageName);
+const path = $computed(() => props.username + "/" + props.pageName);
 
 function fetchPage() {
 	page = null;
-	os.api('pages/show', {
+	os.api("pages/show", {
 		name: props.pageName,
 		username: props.username,
-	}).then(_page => {
-		page = _page;
-		bgImg = getBgImg();
-	}).catch(err => {
-		error = err;
-	});
+	})
+		.then((_page) => {
+			page = _page;
+			bgImg = getBgImg();
+		})
+		.catch((err) => {
+			error = err;
+		});
 }
 
 function copyUrl() {
@@ -123,9 +254,8 @@ function copyUrl() {
 function getBgImg(): string {
 	if (page.eyeCatchingImage != null) {
 		return `url(${page.eyeCatchingImage.url})`;
-	}
-	else {
-		return 'linear-gradient(to bottom right, #31748f, #9ccfd8)'
+	} else {
+		return "linear-gradient(to bottom right, #31748f, #9ccfd8)";
 	}
 }
 
@@ -139,12 +269,14 @@ function share() {
 
 function shareWithNote() {
 	os.post({
-		initialText: `${page.title || page.name} ${url}/@${page.user.username}/pages/${page.name}`,
+		initialText: `${page.title || page.name} ${url}/@${
+			page.user.username
+		}/pages/${page.name}`,
 	});
 }
 
 function like() {
-	os.api('pages/like', {
+	os.api("pages/like", {
 		pageId: page.id,
 	}).then(() => {
 		page.isLiked = true;
@@ -153,7 +285,7 @@ function like() {
 }
 
 async function unlike() {
-	os.api('pages/unlike', {
+	os.api("pages/unlike", {
 		pageId: page.id,
 	}).then(() => {
 		page.isLiked = false;
@@ -162,7 +294,7 @@ async function unlike() {
 }
 
 function pin(pin) {
-	os.apiWithDialog('i/update', {
+	os.apiWithDialog("i/update", {
 		pinnedPageId: pin ? page.id : null,
 	});
 }
@@ -173,15 +305,21 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => page ? {
-	title: computed(() => page.title || page.name),
-	avatar: page.user,
-	path: `/@${page.user.username}/pages/${page.name}`,
-	share: {
-		title: page.title || page.name,
-		text: page.summary,
-	},
-} : null));
+definePageMetadata(
+	computed(() =>
+		page
+			? {
+					title: computed(() => page.title || page.name),
+					avatar: page.user,
+					path: `/@${page.user.username}/pages/${page.name}`,
+					share: {
+						title: page.title || page.name,
+						text: page.summary,
+					},
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
@@ -196,7 +334,6 @@ definePageMetadata(computed(() => page ? {
 
 .xcukqgmh {
 	> .main {
-
 		> * {
 			margin: 1rem;
 		}
@@ -211,7 +348,7 @@ definePageMetadata(computed(() => page ? {
 				height: 150px;
 				background-position: center;
 				background-size: cover;
-				background-image: v-bind('bgImg');
+				background-image: v-bind("bgImg");
 
 				> .header {
 					padding: 16px;
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 5aaf76834..938c8d229 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -1,106 +1,151 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<div class="rknalgpo">
-					<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
-						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="rknalgpo liked">
-					<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
-						<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-			<swiper-slide>
-				<div class="rknalgpo my">
-					<div class="buttoncontainer">
-						<MkButton class="new primary" @click="create()"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts._pages.newPage }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="700">
+			<swiper
+				:modules="[Virtual]"
+				:space-between="20"
+				:virtual="true"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
+				@swiper="setSwiperRef"
+				@slide-change="onSlideChange"
+			>
+				<swiper-slide>
+					<div class="rknalgpo">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="featuredPagesPagination"
+						>
+							<MkPagePreview
+								v-for="page in items"
+								:key="page.id"
+								class="ckltabjg"
+								:page="page"
+							/>
+						</MkPagination>
 					</div>
-					<MkPagination v-slot="{items}" :pagination="myPagesPagination">
-						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
-					</MkPagination>
-				</div>
-			</swiper-slide>
-		</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="rknalgpo liked">
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="likedPagesPagination"
+						>
+							<MkPagePreview
+								v-for="like in items"
+								:key="like.page.id"
+								class="ckltabjg"
+								:page="like.page"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+				<swiper-slide>
+					<div class="rknalgpo my">
+						<div class="buttoncontainer">
+							<MkButton class="new primary" @click="create()"
+								><i class="ph-plus ph-bold ph-lg"></i>
+								{{ i18n.ts._pages.newPage }}</MkButton
+							>
+						</div>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="myPagesPagination"
+						>
+							<MkPagePreview
+								v-for="page in items"
+								:key="page.id"
+								class="ckltabjg"
+								:page="page"
+							/>
+						</MkPagination>
+					</div>
+				</swiper-slide>
+			</swiper>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const router = useRouter();
 
-let tab = $ref('featured');
-const tabs = ['featured', 'liked', 'my'];
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+let tab = $ref("featured");
+const tabs = ["featured", "liked", "my"];
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const featuredPagesPagination = {
-	endpoint: 'pages/featured' as const,
+	endpoint: "pages/featured" as const,
 	limit: 10,
 };
 const likedPagesPagination = {
-	endpoint: 'i/page-likes' as const,
+	endpoint: "i/page-likes" as const,
 	limit: 10,
 };
 const myPagesPagination = {
-	endpoint: 'i/pages' as const,
+	endpoint: "i/pages" as const,
 	limit: 10,
 };
 
 function create() {
-	router.push('/pages/new');
+	router.push("/pages/new");
 }
 
-const headerActions = $computed(() => [{
-	icon: 'ph-plus ph-bold ph-lg',
-	text: i18n.ts.create,
-	handler: create,
-}]);
+const headerActions = $computed(() => [
+	{
+		icon: "ph-plus ph-bold ph-lg",
+		text: i18n.ts.create,
+		handler: create,
+	},
+]);
 
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	title: i18n.ts._pages.featured,
-	icon: 'ph-fire-simple ph-bold ph-lg',
-}, {
-	key: 'liked',
-	title: i18n.ts._pages.liked,
-	icon: 'ph-heart ph-bold ph-lg',
-}, {
-	key: 'my',
-	title: i18n.ts._pages.my,
-	icon: 'ph-crown-simple ph-bold ph-lg',
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "featured",
+		title: i18n.ts._pages.featured,
+		icon: "ph-fire-simple ph-bold ph-lg",
+	},
+	{
+		key: "liked",
+		title: i18n.ts._pages.liked,
+		icon: "ph-heart ph-bold ph-lg",
+	},
+	{
+		key: "my",
+		title: i18n.ts._pages.my,
+		icon: "ph-crown-simple ph-bold ph-lg",
+	},
+]);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.pages,
-	icon: 'ph-file-text ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.pages,
+		icon: "ph-file-text ph-bold ph-lg",
+	}))
+);
 
 let swiperRef = null;
 
@@ -124,7 +169,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .rknalgpo {
-
 	> .buttoncontainer {
 		display: grid;
 		justify-content: center;
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
index 4fda74806..41e662ff8 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -1,23 +1,25 @@
 <template>
-<div class="graojtoi">
-	<MkSample/>
-</div>
+	<div class="graojtoi">
+		<MkSample />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import MkSample from '@/components/MkSample.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import MkSample from "@/components/MkSample.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: i18n.ts.preview,
-	icon: 'ph-eye ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.ts.preview,
+		icon: "ph-eye ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index 4217e4079..bdc258489 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -1,54 +1,68 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<FormSplit>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts._registry.domain }}</template>
-				<template #value>{{ i18n.ts.system }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts._registry.scope }}</template>
-				<template #value>{{ scope.join('/') }}</template>
-			</MkKeyValue>
-		</FormSplit>
-		
-		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
+			<FormSplit>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts._registry.domain }}</template>
+					<template #value>{{ i18n.ts.system }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts._registry.scope }}</template>
+					<template #value>{{ scope.join("/") }}</template>
+				</MkKeyValue>
+			</FormSplit>
 
-		<FormSection v-if="keys">
-			<template #label>{{ i18n.ts.keys }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="key in keys" :to="`/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
-			</div>
-		</FormSection>
-	</MkSpacer>
-</MkStickyContainer>
+			<MkButton primary @click="createKey">{{
+				i18n.ts._registry.createKey
+			}}</MkButton>
+
+			<FormSection v-if="keys">
+				<template #label>{{ i18n.ts.keys }}</template>
+				<div class="_formLinks">
+					<FormLink
+						v-for="key in keys"
+						:to="`/registry/value/system/${scope.join('/')}/${
+							key[0]
+						}`"
+						class="_monospace"
+						>{{ key[0]
+						}}<template #suffix>{{
+							key[1].toUpperCase()
+						}}</template></FormLink
+					>
+				</div>
+			</FormSection>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSplit from '@/components/form/split.vue';
+import { ref, watch } from "vue";
+import JSON5 from "json5";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSplit from "@/components/form/split.vue";
 
 const props = defineProps<{
 	path: string;
 }>();
 
-const scope = $computed(() => props.path.split('/'));
+const scope = $computed(() => props.path.split("/"));
 
 let keys = $ref(null);
 
 function fetchKeys() {
-	os.api('i/registry/keys-with-type', {
+	os.api("i/registry/keys-with-type", {
 		scope: scope,
-	}).then(res => {
+	}).then((res) => {
 		keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
 	});
 }
@@ -56,23 +70,23 @@ function fetchKeys() {
 async function createKey() {
 	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
 		key: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.key,
 		},
 		value: {
-			type: 'string',
+			type: "string",
 			multiline: true,
 			label: i18n.ts.value,
 		},
 		scope: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.scope,
-			default: scope.join('/'),
+			default: scope.join("/"),
 		},
 	});
 	if (canceled) return;
-	os.apiWithDialog('i/registry/set', {
-		scope: result.scope.split('/'),
+	os.apiWithDialog("i/registry/set", {
+		scope: result.scope.split("/"),
 		key: result.key,
 		value: JSON5.parse(result.value),
 	}).then(() => {
@@ -88,9 +102,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index 2057dee29..b95061c7e 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -1,73 +1,89 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<FormInfo warn>{{ i18n.ts.editTheseSettingsMayBreakAccount }}</FormInfo>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
+			<FormInfo warn>{{
+				i18n.ts.editTheseSettingsMayBreakAccount
+			}}</FormInfo>
+
+			<template v-if="value">
+				<FormSplit>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts._registry.domain }}</template>
+						<template #value>{{ i18n.ts.system }}</template>
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts._registry.scope }}</template>
+						<template #value>{{ scope.join("/") }}</template>
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts._registry.key }}</template>
+						<template #value>{{ key }}</template>
+					</MkKeyValue>
+				</FormSplit>
+
+				<FormTextarea
+					v-model="valueForEditor"
+					tall
+					class="_formBlock _monospace"
+				>
+					<template #label>{{ i18n.ts.value }} (JSON)</template>
+				</FormTextarea>
+
+				<MkButton class="_formBlock" primary @click="save"
+					><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+					{{ i18n.ts.save }}</MkButton
+				>
 
-		<template v-if="value">
-			<FormSplit>
 				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.domain }}</template>
-					<template #value>{{ i18n.ts.system }}</template>
+					<template #key>{{ i18n.ts.updatedAt }}</template>
+					<template #value
+						><MkTime :time="value.updatedAt" mode="detail"
+					/></template>
 				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.scope }}</template>
-					<template #value>{{ scope.join('/') }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.key }}</template>
-					<template #value>{{ key }}</template>
-				</MkKeyValue>
-			</FormSplit>
-			
-			<FormTextarea v-model="valueForEditor" tall class="_formBlock _monospace">
-				<template #label>{{ i18n.ts.value }} (JSON)</template>
-			</FormTextarea>
 
-			<MkButton class="_formBlock" primary @click="save"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.updatedAt }}</template>
-				<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
-			</MkKeyValue>
-
-			<MkButton danger @click="del"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
-		</template>
-	</MkSpacer>
-</MkStickyContainer>
+				<MkButton danger @click="del"
+					><i class="ph-trash ph-bold ph-lg"></i>
+					{{ i18n.ts.delete }}</MkButton
+				>
+			</template>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormInfo from '@/components/MkInfo.vue';
+import { ref, watch } from "vue";
+import JSON5 from "json5";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormInfo from "@/components/MkInfo.vue";
 
 const props = defineProps<{
 	path: string;
 }>();
 
-const scope = $computed(() => props.path.split('/').slice(0, -1));
-const key = $computed(() => props.path.split('/').at(-1));
+const scope = $computed(() => props.path.split("/").slice(0, -1));
+const key = $computed(() => props.path.split("/").at(-1));
 
 let value = $ref(null);
 let valueForEditor = $ref(null);
 
 function fetchValue() {
-	os.api('i/registry/get-detail', {
+	os.api("i/registry/get-detail", {
 		scope,
 		key,
-	}).then(res => {
+	}).then((res) => {
 		value = res;
-		valueForEditor = JSON5.stringify(res.value, null, '\t');
+		valueForEditor = JSON5.stringify(res.value, null, "\t");
 	});
 }
 
@@ -76,17 +92,17 @@ async function save() {
 		JSON5.parse(valueForEditor);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.invalidValue,
 		});
 		return;
 	}
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.saveConfirm,
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		os.apiWithDialog('i/registry/set', {
+		os.apiWithDialog("i/registry/set", {
 			scope,
 			key,
 			value: JSON5.parse(valueForEditor),
@@ -96,11 +112,11 @@ async function save() {
 
 function del() {
 	os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteConfirm,
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		os.apiWithDialog('i/registry/remove', {
+		os.apiWithDialog("i/registry/remove", {
 			scope,
 			key,
 		});
@@ -115,9 +131,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
index dc286d5cf..7bb300c99 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -1,56 +1,67 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16">
+			<MkButton primary @click="createKey">{{
+				i18n.ts._registry.createKey
+			}}</MkButton>
 
-		<FormSection v-if="scopes">
-			<template #label>{{ i18n.ts.system }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="scope in scopes" :to="`/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
-			</div>
-		</FormSection>
-	</MkSpacer>
-</MkStickyContainer>
+			<FormSection v-if="scopes">
+				<template #label>{{ i18n.ts.system }}</template>
+				<div class="_formLinks">
+					<FormLink
+						v-for="scope in scopes"
+						:to="`/registry/keys/system/${scope.join('/')}`"
+						class="_monospace"
+						>{{ scope.join("/") }}</FormLink
+					>
+				</div>
+			</FormSection>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
+import { ref, watch } from "vue";
+import JSON5 from "json5";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
 
 let scopes = $ref(null);
 
 function fetchScopes() {
-	os.api('i/registry/scopes').then(res => {
-		scopes = res.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
+	os.api("i/registry/scopes").then((res) => {
+		scopes = res
+			.slice()
+			.sort((a, b) => a.join("/").localeCompare(b.join("/")));
 	});
 }
 
 async function createKey() {
 	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
 		key: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.key,
 		},
 		value: {
-			type: 'string',
+			type: "string",
 			multiline: true,
 			label: i18n.ts.value,
 		},
 		scope: {
-			type: 'string',
+			type: "string",
 			label: i18n.ts._registry.scope,
 		},
 	});
 	if (canceled) return;
-	os.apiWithDialog('i/registry/set', {
-		scope: result.scope.split('/'),
+	os.apiWithDialog("i/registry/set", {
+		scope: result.scope.split("/"),
 		key: result.key,
 		value: JSON5.parse(result.value),
 	}).then(() => {
@@ -66,9 +77,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index 6726671bb..3f57e8902 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -1,46 +1,68 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="token" :content-max="700" :margin-min="16" :margin-max="32">
-		<div class="_formRoot">
-			<FormInput v-model="password" type="password" class="_formBlock">
-				<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-				<template #label>{{ i18n.ts.newPassword }}</template>
-			</FormInput>
-		
-			<FormButton primary class="_formBlock" @click="save">{{ i18n.ts.save }}</FormButton>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer
+			v-if="token"
+			:content-max="700"
+			:margin-min="16"
+			:margin-max="32"
+		>
+			<div class="_formRoot">
+				<FormInput
+					v-model="password"
+					type="password"
+					class="_formBlock"
+				>
+					<template #prefix
+						><i class="ph-lock ph-bold ph-lg"></i
+					></template>
+					<template #label>{{ i18n.ts.newPassword }}</template>
+				</FormInput>
+
+				<FormButton primary class="_formBlock" @click="save">{{
+					i18n.ts.save
+				}}</FormButton>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, onMounted } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, onMounted } from "vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { mainRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	token?: string;
 }>();
 
-let password = $ref('');
+let password = $ref("");
 
 async function save() {
-	await os.apiWithDialog('reset-password', {
+	await os.apiWithDialog("reset-password", {
 		token: props.token,
 		password: password,
 	});
-	mainRouter.push('/');
+	mainRouter.push("/");
 }
 
 onMounted(() => {
 	if (props.token == null) {
-		os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed');
-		mainRouter.push('/');
+		os.popup(
+			defineAsyncComponent(
+				() => import("@/components/MkForgotPassword.vue")
+			),
+			{},
+			{},
+			"closed"
+		);
+		mainRouter.push("/");
 	}
 });
 
@@ -50,10 +72,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.resetPassword,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index 7d423e7dd..06c6a8c27 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -1,94 +1,121 @@
 <template>
-<div class="iltifgqe">
-	<div class="editor _panel _gap">
-		<PrismEditor v-model="code" class="_code code" style="height: 30vh" :highlight="highlighter" :line-numbers="false"/>
-		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ph-play ph-bold ph-lg"></i></MkButton>
-	</div>
-
-	<MkContainer :foldable="true" class="_gap">
-		<template #header>{{ i18n.ts.output }}</template>
-		<div class="bepmlvbi">
-			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+	<div class="iltifgqe">
+		<div class="editor _panel _gap">
+			<PrismEditor
+				v-model="code"
+				class="_code code"
+				style="height: 30vh"
+				:highlight="highlighter"
+				:line-numbers="false"
+			/>
+			<MkButton
+				style="position: absolute; top: 8px; right: 8px"
+				primary
+				@click="run()"
+				><i class="ph-play ph-bold ph-lg"></i
+			></MkButton>
 		</div>
-	</MkContainer>
 
-	<div class="_gap">
-		{{ i18n.ts.scratchpadDescription }}
+		<MkContainer :foldable="true" class="_gap">
+			<template #header>{{ i18n.ts.output }}</template>
+			<div class="bepmlvbi">
+				<div
+					v-for="log in logs"
+					:key="log.id"
+					class="log"
+					:class="{ print: log.print }"
+				>
+					{{ log.text }}
+				</div>
+			</div>
+		</MkContainer>
+
+		<div class="_gap">
+			{{ i18n.ts.scratchpadDescription }}
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import 'prismjs';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism-okaidia.css';
-import { PrismEditor } from 'vue-prism-editor';
-import 'vue-prism-editor/dist/prismeditor.min.css';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import MkContainer from '@/components/MkContainer.vue';
-import MkButton from '@/components/MkButton.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import "prismjs";
+import { highlight, languages } from "prismjs/components/prism-core";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/themes/prism-okaidia.css";
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css";
+import { AiScript, parse, utils } from "@syuilo/aiscript";
+import MkContainer from "@/components/MkContainer.vue";
+import MkButton from "@/components/MkButton.vue";
+import { createAiScriptEnv } from "@/scripts/aiscript/api";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const code = ref('');
+const code = ref("");
 const logs = ref<any[]>([]);
 
-const saved = localStorage.getItem('scratchpad');
+const saved = localStorage.getItem("scratchpad");
 if (saved) {
 	code.value = saved;
 }
 
 watch(code, () => {
-	localStorage.setItem('scratchpad', code.value);
+	localStorage.setItem("scratchpad", code.value);
 });
 
 async function run() {
 	logs.value = [];
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'scratchpad',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
+	const aiscript = new AiScript(
+		createAiScriptEnv({
+			storageKey: "scratchpad",
+			token: $i?.token,
+		}),
+		{
+			in: (q) => {
+				return new Promise((ok) => {
+					os.inputText({
+						title: q,
+					}).then(({ canceled, result: a }) => {
+						ok(a);
+					});
 				});
-			});
-		},
-		out: (value) => {
-			logs.value.push({
-				id: Math.random(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
-		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
+			},
+			out: (value) => {
+				logs.value.push({
 					id: Math.random(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
-	});
+					text:
+						value.type === "str"
+							? value.value
+							: utils.valToString(value),
+					print: true,
+				});
+			},
+			log: (type, params) => {
+				switch (type) {
+					case "end":
+						logs.value.push({
+							id: Math.random(),
+							text: utils.valToString(params.val, true),
+							print: false,
+						});
+						break;
+					default:
+						break;
+				}
+			},
+		}
+	);
 
 	let ast;
 	try {
 		ast = parse(code.value);
 	} catch (error) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -96,14 +123,14 @@ async function run() {
 		await aiscript.exec(ast);
 	} catch (error: any) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: error.message,
 		});
 	}
 }
 
 function highlighter(code) {
-	return highlight(code, languages.js, 'javascript');
+	return highlight(code, languages.js, "javascript");
 }
 
 const headerActions = $computed(() => []);
@@ -112,7 +139,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.scratchpad,
-	icon: 'ph-terminal-window ph-bold ph-lg',
+	icon: "ph-terminal-window ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 6213d0d78..f900caad4 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -1,37 +1,52 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="800">
-		<swiper
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="800">
+			<swiper
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"
-				:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
+				:allow-touch-move="
+					!(
+						deviceKind === 'desktop' &&
+						!defaultStore.state.swipeOnDesktop
+					)
+				"
 				@swiper="setSwiperRef"
 				@slide-change="onSlideChange"
 			>
 				<swiper-slide>
-					<XNotes ref="notes" :pagination="notesPagination"/>
+					<XNotes ref="notes" :pagination="notesPagination" />
 				</swiper-slide>
 				<swiper-slide>
-					<XUserList ref="users" class="_gap" :pagination="usersPagination"/>
+					<XUserList
+						ref="users"
+						class="_gap"
+						:pagination="usersPagination"
+					/>
 				</swiper-slide>
 			</swiper>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XNotes from '@/components/MkNotes.vue';
-import XUserList from '@/components/MkUserList.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XNotes from "@/components/MkNotes.vue";
+import XUserList from "@/components/MkUserList.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 const props = defineProps<{
 	query: string;
@@ -39,7 +54,7 @@ const props = defineProps<{
 }>();
 
 const notesPagination = {
-	endpoint: 'notes/search' as const,
+	endpoint: "notes/search" as const,
 	limit: 10,
 	params: computed(() => ({
 		query: props.query,
@@ -48,29 +63,32 @@ const notesPagination = {
 };
 
 const usersPagination = {
-	endpoint: 'users/search' as const,
+	endpoint: "users/search" as const,
 	limit: 10,
 	params: computed(() => ({
 		query: props.query,
-		origin: 'combined',
+		origin: "combined",
 	})),
 };
 
-const tabs = ['notes', 'users'];
+const tabs = ["notes", "users"];
 let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
+watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [ {
-	key: 'notes',
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-	title: i18n.ts.notes,
-}, {
-	key: 'users',
-	icon: 'ph-users ph-bold ph-lg',
-	title: i18n.ts.users,
-}]);
+const headerTabs = $computed(() => [
+	{
+		key: "notes",
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+		title: i18n.ts.notes,
+	},
+	{
+		key: "users",
+		icon: "ph-users ph-bold ph-lg",
+		title: i18n.ts.users,
+	},
+]);
 
 let swiperRef = null;
 
@@ -91,8 +109,10 @@ onMounted(() => {
 	syncSlide(tabs.indexOf(swiperRef.activeIndex));
 });
 
-definePageMetadata(computed(() => ({
-	title: i18n.t('searchWith', { q: props.query }),
-	icon: 'ph-magnifying-glass ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: i18n.t("searchWith", { q: props.query }),
+		icon: "ph-magnifying-glass ph-bold ph-lg",
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index acbd17480..4d856c86c 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -1,97 +1,167 @@
 <template>
-<div>
-	<MkButton v-if="!twoFactorData && !$i.twoFactorEnabled" @click="register">{{ i18n.ts._2fa.registerDevice }}</MkButton>
-	<template v-if="$i.twoFactorEnabled">
-		<p>{{ i18n.ts._2fa.alreadyRegistered }}</p>
-		<MkButton @click="unregister">{{ i18n.ts.unregister }}</MkButton>
-	</template>
+	<div>
+		<MkButton
+			v-if="!twoFactorData && !$i.twoFactorEnabled"
+			@click="register"
+			>{{ i18n.ts._2fa.registerDevice }}</MkButton
+		>
+		<template v-if="$i.twoFactorEnabled">
+			<p>{{ i18n.ts._2fa.alreadyRegistered }}</p>
+			<MkButton @click="unregister">{{ i18n.ts.unregister }}</MkButton>
+		</template>
 
-	<template v-if="supportsCredentials">
-		<hr class="totp-method-sep">
+		<template v-if="supportsCredentials">
+			<hr class="totp-method-sep" />
 
-		<h2 class="heading">{{ i18n.ts.securityKey }}</h2>
-		<p>{{ i18n.ts._2fa.securityKeyInfo }}</p>
-		<div class="key-list">
-			<div v-for="key in $i.securityKeysList" class="key">
-				<h3>{{ key.name }}</h3>
-				<div class="last-used">{{ i18n.ts.lastUsed }}<MkTime :time="key.lastUsed"/></div>
-				<MkButton @click="unregisterKey(key)">{{ i18n.ts.unregister }}</MkButton>
+			<h2 class="heading">{{ i18n.ts.securityKey }}</h2>
+			<p>{{ i18n.ts._2fa.securityKeyInfo }}</p>
+			<div class="key-list">
+				<div v-for="key in $i.securityKeysList" class="key">
+					<h3>{{ key.name }}</h3>
+					<div class="last-used">
+						{{ i18n.ts.lastUsed }}<MkTime :time="key.lastUsed" />
+					</div>
+					<MkButton @click="unregisterKey(key)">{{
+						i18n.ts.unregister
+					}}</MkButton>
+				</div>
 			</div>
+
+			<MkSwitch
+				v-if="$i.securityKeysList.length > 0"
+				v-model="usePasswordLessLogin"
+				@update:modelValue="updatePasswordLessLogin"
+				>{{ i18n.ts.passwordLessLogin }}</MkSwitch
+			>
+
+			<MkInfo
+				v-if="registration && registration.error"
+				style="margin-bottom: 1rem"
+				warn
+				>{{ i18n.ts.error }}: {{ registration.error }}</MkInfo
+			>
+			<MkButton
+				v-if="!registration || registration.error"
+				@click="addSecurityKey"
+				>{{ i18n.ts._2fa.registerKey }}</MkButton
+			>
+
+			<ol v-if="registration && !registration.error">
+				<li v-if="registration.stage >= 0">
+					{{ i18n.ts.tapSecurityKey }}
+					<i
+						v-if="registration.saving && registration.stage == 0"
+						class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+					></i>
+				</li>
+				<li v-if="registration.stage >= 1">
+					<MkForm
+						:disabled="
+							registration.stage != 1 || registration.saving
+						"
+					>
+						<MkInput v-model="keyName" :max="30">
+							<template #label>{{
+								i18n.ts.securityKeyName
+							}}</template>
+						</MkInput>
+						<MkButton
+							:disabled="keyName.length == 0"
+							@click="registerKey"
+							>{{ i18n.ts.registerSecurityKey }}</MkButton
+						>
+						<i
+							v-if="
+								registration.saving && registration.stage == 1
+							"
+							class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"
+						></i>
+					</MkForm>
+				</li>
+			</ol>
+		</template>
+		<div v-if="twoFactorData && !$i.twoFactorEnabled">
+			<ol style="margin: 0; padding: 0 0 0 1em">
+				<li>
+					<I18n :src="i18n.ts._2fa.step1" tag="span">
+						<template #a>
+							<a
+								href="https://authpass.app/"
+								rel="noopener"
+								target="_blank"
+								class="_link"
+								>AuthPass</a
+							>
+						</template>
+						<template #b>
+							<a
+								href="https://support.google.com/accounts/answer/1066447"
+								rel="noopener"
+								target="_blank"
+								class="_link"
+								>Google Authenticator</a
+							>
+						</template>
+					</I18n>
+				</li>
+				<li>
+					{{ i18n.ts._2fa.step2 }}<br /><img
+						:src="twoFactorData.qr"
+					/>
+					<p>
+						{{ i18n.ts._2fa.step2Url }}<br />{{ twoFactorData.url }}
+					</p>
+				</li>
+				<li>
+					{{ i18n.ts._2fa.step3 }}<br />
+					<MkInput
+						v-model="token"
+						type="text"
+						pattern="^[0-9]{6}$"
+						autocomplete="off"
+						:spellcheck="false"
+						><template #label>{{
+							i18n.ts.token
+						}}</template></MkInput
+					>
+					<MkButton primary @click="submit">{{
+						i18n.ts.done
+					}}</MkButton>
+				</li>
+			</ol>
+			<MkInfo>{{ i18n.ts._2fa.step4 }}</MkInfo>
 		</div>
-
-		<MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</MkSwitch>
-
-		<MkInfo v-if="registration && registration.error" style="margin-bottom: 1rem;" warn>{{ i18n.ts.error }}: {{ registration.error }}</MkInfo>
-		<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ i18n.ts._2fa.registerKey }}</MkButton>
-
-		<ol v-if="registration && !registration.error">
-			<li v-if="registration.stage >= 0">
-				{{ i18n.ts.tapSecurityKey }}
-				<i v-if="registration.saving && registration.stage == 0" class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-			</li>
-			<li v-if="registration.stage >= 1">
-				<MkForm :disabled="registration.stage != 1 || registration.saving">
-					<MkInput v-model="keyName" :max="30">
-						<template #label>{{ i18n.ts.securityKeyName }}</template>
-					</MkInput>
-					<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
-					<i v-if="registration.saving && registration.stage == 1" class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
-				</MkForm>
-			</li>
-		</ol>
-	</template>
-	<div v-if="twoFactorData && !$i.twoFactorEnabled">
-		<ol style="margin: 0; padding: 0 0 0 1em;">
-			<li>
-				<I18n :src="i18n.ts._2fa.step1" tag="span">
-					<template #a>
-						<a href="https://authpass.app/" rel="noopener" target="_blank" class="_link">AuthPass</a>
-					</template>
-					<template #b>
-						<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
-					</template>
-				</I18n>
-			</li>
-			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ i18n.ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
-			<li>
-				{{ i18n.ts._2fa.step3 }}<br>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></MkInput>
-				<MkButton primary @click="submit">{{ i18n.ts.done }}</MkButton>
-			</li>
-		</ol>
-		<MkInfo>{{ i18n.ts._2fa.step4 }}</MkInfo>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { hostname } from '@/config';
-import { byteify, hexify, stringify } from '@/scripts/2fa';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { ref } from "vue";
+import { hostname } from "@/config";
+import { byteify, hexify, stringify } from "@/scripts/2fa";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
 const twoFactorData = ref<any>(null);
 const supportsCredentials = ref(!!navigator.credentials);
 const usePasswordLessLogin = ref($i!.usePasswordLessLogin);
 const registration = ref<any>(null);
-const keyName = ref('');
+const keyName = ref("");
 const token = ref(null);
 
 function register() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/2fa/register', {
-			password: password
-		}).then(data => {
+		os.api("i/2fa/register", {
+			password: password,
+		}).then((data) => {
 			twoFactorData.value = data;
 		});
 	});
@@ -100,45 +170,53 @@ function register() {
 function unregister() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/2fa/unregister', {
-			password: password
-		}).then(() => {
-			usePasswordLessLogin.value = false;
-			updatePasswordLessLogin();
-		}).then(() => {
-			os.success();
-			$i!.twoFactorEnabled = false;
-		});
+		os.api("i/2fa/unregister", {
+			password: password,
+		})
+			.then(() => {
+				usePasswordLessLogin.value = false;
+				updatePasswordLessLogin();
+			})
+			.then(() => {
+				os.success();
+				$i!.twoFactorEnabled = false;
+			});
 	});
 }
 
 function submit() {
-	os.api('i/2fa/done', {
-		token: token.value
-	}).then(() => {
-		os.success();
-		$i!.twoFactorEnabled = true;
-	}).catch(err => {
-		os.alert({
-			type: 'error',
-			text: err,
+	os.api("i/2fa/done", {
+		token: token.value,
+	})
+		.then(() => {
+			os.success();
+			$i!.twoFactorEnabled = true;
+		})
+		.catch((err) => {
+			os.alert({
+				type: "error",
+				text: err,
+			});
 		});
-	});
 }
 
 function registerKey() {
 	registration.value.saving = true;
-	os.api('i/2fa/key-done', {
+	os.api("i/2fa/key-done", {
 		password: registration.value.password,
 		name: keyName.value,
 		challengeId: registration.value.challengeId,
 		// we convert each 16 bits to a string to serialise
-		clientDataJSON: stringify(registration.value.credential.response.clientDataJSON),
-		attestationObject: hexify(registration.value.credential.response.attestationObject)
-	}).then(key => {
+		clientDataJSON: stringify(
+			registration.value.credential.response.clientDataJSON
+		),
+		attestationObject: hexify(
+			registration.value.credential.response.attestationObject
+		),
+	}).then((key) => {
 		registration.value = null;
 		key!.lastUsed = new Date();
 		os.success();
@@ -148,69 +226,75 @@ function registerKey() {
 function unregisterKey(key) {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		return os.api('i/2fa/remove-key', {
-			password,
-			credentialId: key.id
-		}).then(() => {
-			usePasswordLessLogin.value = false;
-			updatePasswordLessLogin();
-		}).then(() => {
-			os.success();
-		});
+		return os
+			.api("i/2fa/remove-key", {
+				password,
+				credentialId: key.id,
+			})
+			.then(() => {
+				usePasswordLessLogin.value = false;
+				updatePasswordLessLogin();
+			})
+			.then(() => {
+				os.success();
+			});
 	});
 }
 
 function addSecurityKey() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/2fa/register-key', {
-			password
-		}).then(reg => {
-			registration.value = {
-				password,
-				challengeId: reg!.challengeId,
-				stage: 0,
-				publicKeyOptions: {
-					challenge: byteify(reg!.challenge, 'base64'),
-					rp: {
-						id: hostname,
-						name: 'Calckey'
+		os.api("i/2fa/register-key", {
+			password,
+		})
+			.then((reg) => {
+				registration.value = {
+					password,
+					challengeId: reg!.challengeId,
+					stage: 0,
+					publicKeyOptions: {
+						challenge: byteify(reg!.challenge, "base64"),
+						rp: {
+							id: hostname,
+							name: "Calckey",
+						},
+						user: {
+							id: byteify($i!.id, "ascii"),
+							name: $i!.username,
+							displayName: $i!.name,
+						},
+						pubKeyCredParams: [{ alg: -7, type: "public-key" }],
+						timeout: 60000,
+						attestation: "direct",
 					},
-					user: {
-						id: byteify($i!.id, 'ascii'),
-						name: $i!.username,
-						displayName: $i!.name,
-					},
-					pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
-					timeout: 60000,
-					attestation: 'direct'
-				},
-				saving: true
-			};
-			return navigator.credentials.create({
-				publicKey: registration.value.publicKeyOptions
+					saving: true,
+				};
+				return navigator.credentials.create({
+					publicKey: registration.value.publicKeyOptions,
+				});
+			})
+			.then((credential) => {
+				registration.value.credential = credential;
+				registration.value.saving = false;
+				registration.value.stage = 1;
+			})
+			.catch((err) => {
+				console.warn("Error while registering?", err);
+				registration.value.error = err.message;
+				registration.value.stage = -1;
 			});
-		}).then(credential => {
-			registration.value.credential = credential;
-			registration.value.saving = false;
-			registration.value.stage = 1;
-		}).catch(err => {
-			console.warn('Error while registering?', err);
-			registration.value.error = err.message;
-			registration.value.stage = -1;
-		});
 	});
 }
 
 async function updatePasswordLessLogin() {
-	await os.api('i/2fa/password-less', {
-		value: !!usePasswordLessLogin.value
+	await os.api("i/2fa/password-less", {
+		value: !!usePasswordLessLogin.value,
 	});
 }
 </script>
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index 0f8ae6725..faaee07db 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -1,148 +1,194 @@
 <template>
-<div class="_formRoot">
-	<MkKeyValue>
-		<template #key>ID</template>
-		<template #value><span class="_monospace">{{ $i.id }}</span></template>
-	</MkKeyValue>
-
-	<FormSection>
+	<div class="_formRoot">
 		<MkKeyValue>
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
+			<template #key>ID</template>
+			<template #value
+				><span class="_monospace">{{ $i.id }}</span></template
+			>
 		</MkKeyValue>
-	</FormSection>
 
-	<FormSection v-if="stats">
-		<template #label>{{ i18n.ts.statistics }}</template>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.notesCount }}</template>
-			<template #value>{{ number(stats.notesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliesCount }}</template>
-			<template #value>{{ number(stats.repliesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotesCount }}</template>
-			<template #value>{{ number(stats.renotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliedCount }}</template>
-			<template #value>{{ number(stats.repliedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotedCount }}</template>
-			<template #value>{{ number(stats.renotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotesCount }}</template>
-			<template #value>{{ number(stats.pollVotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotedCount }}</template>
-			<template #value>{{ number(stats.pollVotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.sentReactionsCount }}</template>
-			<template #value>{{ number(stats.sentReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
-			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
-			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }}</template>
-			<template #value>{{ number(stats.followingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }}</template>
-			<template #value>{{ number(stats.followersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikesCount }}</template>
-			<template #value>{{ number(stats.pageLikesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikedCount }}</template>
-			<template #value>{{ number(stats.pageLikedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveFilesCount }}</template>
-			<template #value>{{ number(stats.driveFilesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveUsage }}</template>
-			<template #value>{{ bytes(stats.driveUsage) }}</template>
-		</MkKeyValue>
-	</FormSection>
+		<FormSection>
+			<MkKeyValue>
+				<template #key>{{ i18n.ts.registeredDate }}</template>
+				<template #value
+					><MkTime :time="$i.createdAt" mode="detail"
+				/></template>
+			</MkKeyValue>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.other }}</template>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>emailVerified</template>
-			<template #value>{{ $i.emailVerified ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>twoFactorEnabled</template>
-			<template #value>{{ $i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>securityKeys</template>
-			<template #value>{{ $i.securityKeys ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>usePasswordLessLogin</template>
-			<template #value>{{ $i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isModerator</template>
-			<template #value>{{ $i.isModerator ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isAdmin</template>
-			<template #value>{{ $i.isAdmin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-	</FormSection>
-</div>
+		<FormSection v-if="stats">
+			<template #label>{{ i18n.ts.statistics }}</template>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.notesCount }}</template>
+				<template #value>{{ number(stats.notesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.repliesCount }}</template>
+				<template #value>{{ number(stats.repliesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.renotesCount }}</template>
+				<template #value>{{ number(stats.renotesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.repliedCount }}</template>
+				<template #value>{{ number(stats.repliedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.renotedCount }}</template>
+				<template #value>{{ number(stats.renotedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pollVotesCount }}</template>
+				<template #value>{{ number(stats.pollVotesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pollVotedCount }}</template>
+				<template #value>{{ number(stats.pollVotedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.sentReactionsCount }}</template>
+				<template #value>{{
+					number(stats.sentReactionsCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
+				<template #value>{{
+					number(stats.receivedReactionsCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
+				<template #value>{{
+					number(stats.noteFavoritesCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.followingCount }}</template>
+				<template #value>{{ number(stats.followingCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followingCount }} ({{
+						i18n.ts.local
+					}})</template
+				>
+				<template #value>{{
+					number(stats.localFollowingCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followingCount }} ({{
+						i18n.ts.remote
+					}})</template
+				>
+				<template #value>{{
+					number(stats.remoteFollowingCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.followersCount }}</template>
+				<template #value>{{ number(stats.followersCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followersCount }} ({{
+						i18n.ts.local
+					}})</template
+				>
+				<template #value>{{
+					number(stats.localFollowersCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key
+					>{{ i18n.ts.followersCount }} ({{
+						i18n.ts.remote
+					}})</template
+				>
+				<template #value>{{
+					number(stats.remoteFollowersCount)
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pageLikesCount }}</template>
+				<template #value>{{ number(stats.pageLikesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.pageLikedCount }}</template>
+				<template #value>{{ number(stats.pageLikedCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.driveFilesCount }}</template>
+				<template #value>{{ number(stats.driveFilesCount) }}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>{{ i18n.ts.driveUsage }}</template>
+				<template #value>{{ bytes(stats.driveUsage) }}</template>
+			</MkKeyValue>
+		</FormSection>
+
+		<FormSection>
+			<template #label>{{ i18n.ts.other }}</template>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>emailVerified</template>
+				<template #value>{{
+					$i.emailVerified ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>twoFactorEnabled</template>
+				<template #value>{{
+					$i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>securityKeys</template>
+				<template #value>{{
+					$i.securityKeys ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>usePasswordLessLogin</template>
+				<template #value>{{
+					$i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>isModerator</template>
+				<template #value>{{
+					$i.isModerator ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0">
+				<template #key>isAdmin</template>
+				<template #value>{{
+					$i.isAdmin ? i18n.ts.yes : i18n.ts.no
+				}}</template>
+			</MkKeyValue>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { onMounted, ref } from "vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import bytes from "@/filters/bytes";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const stats = ref<any>({});
 
 onMounted(() => {
-	os.api('users/stats', {
+	os.api("users/stats", {
 		userId: $i!.id,
-	}).then(response => {
+	}).then((response) => {
 		stats.value = response;
 	});
 });
@@ -153,6 +199,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accountInfo,
-	icon: 'ph-info ph-bold ph-lg',
+	icon: "ph-info ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 3f90c4b33..ec2cd2477 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -1,73 +1,105 @@
 <template>
-<div class="_formRoot">
-	<FormSuspense :p="init">
-		<FormButton primary @click="addAccount"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.addAccount }}</FormButton>
+	<div class="_formRoot">
+		<FormSuspense :p="init">
+			<FormButton primary @click="addAccount"
+				><i class="ph-plus ph-bold ph-lg"></i>
+				{{ i18n.ts.addAccount }}</FormButton
+			>
 
-		<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"/>
-			</div>
-			<div class="body">
-				<div class="name">
-					<MkUserName :user="account"/>
+			<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" />
 				</div>
-				<div class="acct">
-					<MkAcct :user="account"/>
+				<div class="body">
+					<div class="name">
+						<MkUserName :user="account" />
+					</div>
+					<div class="acct">
+						<MkAcct :user="account" />
+					</div>
 				</div>
 			</div>
-		</div>
-	</FormSuspense>
-</div>
+		</FormSuspense>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, ref } from "vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import {
+	getAccounts,
+	addAccount as addAccounts,
+	removeAccount as _removeAccount,
+	login,
+	$i,
+} from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const storedAccounts = ref<any>(null);
 const accounts = ref<any>(null);
 
 const init = async () => {
-	getAccounts().then(accounts => {
-		storedAccounts.value = accounts.filter(x => x.id !== $i!.id);
+	getAccounts()
+		.then((accounts) => {
+			storedAccounts.value = accounts.filter((x) => x.id !== $i!.id);
 
-		console.log(storedAccounts.value);
+			console.log(storedAccounts.value);
 
-		return os.api('users/show', {
-			userIds: storedAccounts.value.map(x => x.id),
+			return os.api("users/show", {
+				userIds: storedAccounts.value.map((x) => x.id),
+			});
+		})
+		.then((response) => {
+			accounts.value = response;
+			console.log(accounts.value);
 		});
-	}).then(response => {
-		accounts.value = response;
-		console.log(accounts.value);
-	});
 };
 
 function menu(account, ev) {
-	os.popupMenu([{
-		text: i18n.ts.switch,
-		icon: 'ph-swap ph-bold ph-lg',
-		action: () => switchAccount(account),
-	}, {
-		text: i18n.ts.remove,
-		icon: 'ph-trash ph-bold ph-lg',
-		danger: true,
-		action: () => removeAccount(account),
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.switch,
+				icon: "ph-swap ph-bold ph-lg",
+				action: () => switchAccount(account),
+			},
+			{
+				text: i18n.ts.remove,
+				icon: "ph-trash ph-bold ph-lg",
+				danger: true,
+				action: () => removeAccount(account),
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function addAccount(ev) {
-	os.popupMenu([{
-		text: i18n.ts.existingAccount,
-		action: () => { addExistingAccount(); },
-	}, {
-		text: i18n.ts.createAccount,
-		action: () => { createAccount(); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.existingAccount,
+				action: () => {
+					addExistingAccount();
+				},
+			},
+			{
+				text: i18n.ts.createAccount,
+				action: () => {
+					createAccount();
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function removeAccount(account) {
@@ -75,26 +107,36 @@ function removeAccount(account) {
 }
 
 function addExistingAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
-		done: res => {
-			addAccounts(res.id, res.i);
-			os.success();
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkSigninDialog.vue")),
+		{},
+		{
+			done: (res) => {
+				addAccounts(res.id, res.i);
+				os.success();
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 function createAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
-		done: res => {
-			addAccounts(res.id, res.i);
-			switchAccountWithToken(res.i);
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkSignupDialog.vue")),
+		{},
+		{
+			done: (res) => {
+				addAccounts(res.id, res.i);
+				switchAccountWithToken(res.i);
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 async function switchAccount(account: any) {
 	const fetchedAccounts: any[] = await getAccounts();
-	const token = fetchedAccounts.find(x => x.id === account.id).token;
+	const token = fetchedAccounts.find((x) => x.id === account.id).token;
 	switchAccountWithToken(token);
 }
 
@@ -108,7 +150,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accounts,
-	icon: 'ph-users ph-bold ph-lg',
+	icon: "ph-users ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index 0c3cd38f5..a694c456f 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -1,38 +1,54 @@
 <template>
-<div class="_formRoot">
-	<FormButton primary class="_formBlock" @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton>
-	<FormLink to="/settings/apps" class="_formBlock">{{ i18n.ts.manageAccessTokens }}</FormLink>
-	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink>
-</div>
+	<div class="_formRoot">
+		<FormButton primary class="_formBlock" @click="generateToken">{{
+			i18n.ts.generateAccessToken
+		}}</FormButton>
+		<FormLink to="/settings/apps" class="_formBlock">{{
+			i18n.ts.manageAccessTokens
+		}}</FormLink>
+		<FormLink
+			to="/api-console"
+			:behavior="isDesktop ? 'window' : null"
+			class="_formBlock"
+			>API console</FormLink
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, ref } from "vue";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const isDesktop = ref(window.innerWidth >= 1100);
 
 function generateToken() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
-		done: async result => {
-			const { name, permissions } = result;
-			const { token } = await os.api('miauth/gen-token', {
-				session: null,
-				name: name,
-				permission: permissions,
-			});
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkTokenGenerateWindow.vue")
+		),
+		{},
+		{
+			done: async (result) => {
+				const { name, permissions } = result;
+				const { token } = await os.api("miauth/gen-token", {
+					session: null,
+					name: name,
+					permission: permissions,
+				});
 
-			os.alert({
-				type: 'success',
-				title: i18n.ts.token,
-				text: token,
-			});
+				os.alert({
+					type: "success",
+					title: i18n.ts.token,
+					text: token,
+				});
+			},
 		},
-	}, 'closed');
+		"closed"
+	);
 }
 
 const headerActions = $computed(() => []);
@@ -40,7 +56,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'API',
-	icon: 'ph-key ph-bold ph-lg',
+	title: "API",
+	icon: "ph-key ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 608200c82..f42bb77ba 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -1,61 +1,78 @@
 <template>
-<div class="_formRoot">
-	<FormPagination ref="list" :pagination="pagination">
-		<template #empty>
-			<div class="_fullinfo">
-				<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-				<div>{{ i18n.ts.nothing }}</div>
-			</div>
-		</template>
-		<template #default="{items}">
-			<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
-				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
-				<div class="body">
-					<div class="name">{{ token.name }}</div>
-					<div class="description">{{ token.description }}</div>
-					<div class="_keyValue">
-						<div>{{ i18n.ts.installedDate }}:</div>
-						<div><MkTime :time="token.createdAt"/></div>
-					</div>
-					<div class="_keyValue">
-						<div>{{ i18n.ts.lastUsedDate }}:</div>
-						<div><MkTime :time="token.lastUsedAt"/></div>
-					</div>
-					<div class="actions">
-						<button class="_button" @click="revoke(token)"><i class="ph-trash ph-bold ph-lg"></i></button>
-					</div>
-					<details>
-						<summary>{{ i18n.ts.details }}</summary>
-						<ul>
-							<li v-for="p in token.permission" :key="p">{{ i18n.t(`_permissions.${p}`) }}</li>
-						</ul>
-					</details>
+	<div class="_formRoot">
+		<FormPagination ref="list" :pagination="pagination">
+			<template #empty>
+				<div class="_fullinfo">
+					<img
+						src="/static-assets/badges/info.png"
+						class="_ghost"
+						alt="Info"
+					/>
+					<div>{{ i18n.ts.nothing }}</div>
 				</div>
-			</div>
-		</template>
-	</FormPagination>
-</div>
+			</template>
+			<template #default="{ items }">
+				<div
+					v-for="token in items"
+					:key="token.id"
+					class="_panel bfomjevm"
+				>
+					<img
+						v-if="token.iconUrl"
+						class="icon"
+						:src="token.iconUrl"
+						alt=""
+					/>
+					<div class="body">
+						<div class="name">{{ token.name }}</div>
+						<div class="description">{{ token.description }}</div>
+						<div class="_keyValue">
+							<div>{{ i18n.ts.installedDate }}:</div>
+							<div><MkTime :time="token.createdAt" /></div>
+						</div>
+						<div class="_keyValue">
+							<div>{{ i18n.ts.lastUsedDate }}:</div>
+							<div><MkTime :time="token.lastUsedAt" /></div>
+						</div>
+						<div class="actions">
+							<button class="_button" @click="revoke(token)">
+								<i class="ph-trash ph-bold ph-lg"></i>
+							</button>
+						</div>
+						<details>
+							<summary>{{ i18n.ts.details }}</summary>
+							<ul>
+								<li v-for="p in token.permission" :key="p">
+									{{ i18n.t(`_permissions.${p}`) }}
+								</li>
+							</ul>
+						</details>
+					</div>
+				</div>
+			</template>
+		</FormPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import FormPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import FormPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const list = ref<any>(null);
 
 const pagination = {
-	endpoint: 'i/apps' as const,
+	endpoint: "i/apps" as const,
 	limit: 100,
 	params: {
-		sort: '+lastUsedAt',
+		sort: "+lastUsedAt",
 	},
 };
 
 function revoke(token) {
-	os.api('i/revoke-token', { tokenId: token.id }).then(() => {
+	os.api("i/revoke-token", { tokenId: token.id }).then(() => {
 		list.value.reload();
 	});
 }
@@ -66,7 +83,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.installedApps,
-	icon: 'ph-plug ph-bold ph-lg',
+	icon: "ph-plug ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index fe24de237..e24ff33a9 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -1,29 +1,35 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
 
-	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
-		<template #label>CSS</template>
-	</FormTextarea>
-</div>
+		<FormTextarea
+			v-model="localCustomCss"
+			manual-save
+			tall
+			class="_monospace _formBlock"
+			style="tab-size: 2"
+		>
+			<template #label>CSS</template>
+		</FormTextarea>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
+const localCustomCss = ref(localStorage.getItem("customCss") ?? "");
 
 async function apply() {
-	localStorage.setItem('customCss', localCustomCss.value);
+	localStorage.setItem("customCss", localCustomCss.value);
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -41,6 +47,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customCss,
-	icon: 'ph-code ph-bold ph-lg',
+	icon: "ph-code ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/custom-katex-macro.vue b/packages/client/src/pages/settings/custom-katex-macro.vue
index e572ab6a7..88a8e2cae 100644
--- a/packages/client/src/pages/settings/custom-katex-macro.vue
+++ b/packages/client/src/pages/settings/custom-katex-macro.vue
@@ -1,36 +1,53 @@
 <template>
-<div class="_formRoot">
-	<FormInfo class="_formBlock">{{ i18n.ts.customKaTeXMacroDescription }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo class="_formBlock">{{
+			i18n.ts.customKaTeXMacroDescription
+		}}</FormInfo>
 
-	<FormTextarea v-model="localCustomKaTeXMacro" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
-		<template #label>{{ i18n.ts.customKaTeXMacro }}</template>
-	</FormTextarea>
+		<FormTextarea
+			v-model="localCustomKaTeXMacro"
+			manual-save
+			tall
+			class="_monospace _formBlock"
+			style="tab-size: 2"
+		>
+			<template #label>{{ i18n.ts.customKaTeXMacro }}</template>
+		</FormTextarea>
 
-	<FormSwitch v-model="enableCustomKaTeXMacro" class="_formBlock">{{ i18n.ts.enableCustomKaTeXMacro }}</FormSwitch>
-</div>
+		<FormSwitch v-model="enableCustomKaTeXMacro" class="_formBlock">{{
+			i18n.ts.enableCustomKaTeXMacro
+		}}</FormSwitch>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { parseKaTeXMacros } from '@/scripts/katex-macro';
-import { defaultStore } from '@/store';
+import { ref, watch, computed } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { parseKaTeXMacros } from "@/scripts/katex-macro";
+import { defaultStore } from "@/store";
 
-const localCustomKaTeXMacro = ref(localStorage.getItem('customKaTeXMacro') ?? '');
-const enableCustomKaTeXMacro = computed(defaultStore.makeGetterSetter('enableCustomKaTeXMacro'));
+const localCustomKaTeXMacro = ref(
+	localStorage.getItem("customKaTeXMacro") ?? ""
+);
+const enableCustomKaTeXMacro = computed(
+	defaultStore.makeGetterSetter("enableCustomKaTeXMacro")
+);
 
 async function apply() {
-	localStorage.setItem('customKaTeXMacro', localCustomKaTeXMacro.value);
-	localStorage.setItem('customKaTeXMacroParsed', parseKaTeXMacros(localCustomKaTeXMacro.value));
+	localStorage.setItem("customKaTeXMacro", localCustomKaTeXMacro.value);
+	localStorage.setItem(
+		"customKaTeXMacroParsed",
+		parseKaTeXMacros(localCustomKaTeXMacro.value)
+	);
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -48,6 +65,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customKaTeXMacro,
-	icon: 'ph-radical ph-bold ph-lg',
+	icon: "ph-radical ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index aa44985dd..821c5ed07 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -1,32 +1,39 @@
 <template>
-<div class="_formRoot">
-	<FormSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</FormSwitch>
+	<div class="_formRoot">
+		<FormSwitch v-model="navWindow"
+			>{{ i18n.ts.defaultNavigationBehaviour }}:
+			{{ i18n.ts.openInWindow }}</FormSwitch
+		>
 
-	<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ i18n.ts._deck.alwaysShowMainColumn }}</FormSwitch>
+		<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{
+			i18n.ts._deck.alwaysShowMainColumn
+		}}</FormSwitch>
 
-	<FormRadios v-model="columnAlign" class="_formBlock">
-		<template #label>{{ i18n.ts._deck.columnAlign }}</template>
-		<option value="left">{{ i18n.ts.left }}</option>
-		<option value="center">{{ i18n.ts.center }}</option>
-	</FormRadios>
-</div>
+		<FormRadios v-model="columnAlign" class="_formBlock">
+			<template #label>{{ i18n.ts._deck.columnAlign }}</template>
+			<option value="left">{{ i18n.ts.left }}</option>
+			<option value="center">{{ i18n.ts.center }}</option>
+		</FormRadios>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormInput from '@/components/form/input.vue';
-import { deckStore } from '@/ui/deck/deck-store';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, watch } from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormInput from "@/components/form/input.vue";
+import { deckStore } from "@/ui/deck/deck-store";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
-const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
-const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
+const navWindow = computed(deckStore.makeGetterSetter("navWindow"));
+const alwaysShowMainColumn = computed(
+	deckStore.makeGetterSetter("alwaysShowMainColumn")
+);
+const columnAlign = computed(deckStore.makeGetterSetter("columnAlign"));
 
 const headerActions = $computed(() => []);
 
@@ -34,6 +41,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.deck,
-	icon: 'ph-layout ph-bold ph-lg',
+	icon: "ph-layout ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 044219f43..574806c08 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -1,24 +1,36 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
-	<FormInfo class="_formBlock">{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
-	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton>
-	<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton>
-</div>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{
+			i18n.ts._accountDelete.mayTakeTime
+		}}</FormInfo>
+		<FormInfo class="_formBlock">{{
+			i18n.ts._accountDelete.sendEmail
+		}}</FormInfo>
+		<FormButton
+			v-if="!$i.isDeleted"
+			danger
+			class="_formBlock"
+			@click="deleteAccount"
+			>{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton
+		>
+		<FormButton v-else disabled>{{
+			i18n.ts._accountDelete.inProgress
+		}}</FormButton>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import FormInfo from '@/components/MkInfo.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { signout } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import FormInfo from "@/components/MkInfo.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { signout } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 async function deleteAccount() {
 	{
 		const { canceled } = await os.confirm({
-			type: 'warning',
+			type: "warning",
 			text: i18n.ts.deleteAccountConfirm,
 		});
 		if (canceled) return;
@@ -26,11 +38,11 @@ async function deleteAccount() {
 
 	const { canceled, result: password } = await os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled) return;
 
-	await os.apiWithDialog('i/delete-account', {
+	await os.apiWithDialog("i/delete-account", {
 		password: password,
 	});
 
@@ -47,6 +59,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._accountDelete.accountDelete,
-	icon: 'ph-warning ph-bold ph-lg',
+	icon: "ph-warning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index a0c944dcc..42961fdbe 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -1,64 +1,92 @@
 <template>
-<div class="_formRoot">
-	<FormSection v-if="!fetching">
-		<template #label>{{ i18n.ts.usageAmount }}</template>
-		<div class="_formBlock uawsfosz">
-			<div class="meter"><div :style="meterStyle"></div></div>
-		</div>
-		<FormSplit>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.capacity }}</template>
-				<template #value>{{ bytes(capacity, 1) }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.inUse }}</template>
-				<template #value>{{ bytes(usage, 1) }}</template>
-			</MkKeyValue>
-		</FormSplit>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection v-if="!fetching">
+			<template #label>{{ i18n.ts.usageAmount }}</template>
+			<div class="_formBlock uawsfosz">
+				<div class="meter"><div :style="meterStyle"></div></div>
+			</div>
+			<FormSplit>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.capacity }}</template>
+					<template #value>{{ bytes(capacity, 1) }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.inUse }}</template>
+					<template #value>{{ bytes(usage, 1) }}</template>
+				</MkKeyValue>
+			</FormSplit>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.statistics }}</template>
-		<MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="6"/>
-	</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.statistics }}</template>
+			<MkChart
+				src="per-user-drive"
+				:args="{ user: $i }"
+				span="day"
+				:limit="7 * 5"
+				:bar="true"
+				:stacked="true"
+				:detailed="false"
+				:aspect-ratio="6"
+			/>
+		</FormSection>
 
-	<FormSection>
-		<FormButton @click="chooseUploadFolder()">
-			{{ i18n.ts.uploadFolder }}
-			<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
-			<template #suffixIcon><i class="ph-folder-notch-open ph-bold ph-lg"></i></template>
-		</FormButton>
-		<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
-			<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
-			<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
-		</FormSwitch>
-		<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:modelValue="saveProfile()">
-			<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
-		</FormSwitch>
-		<FormSwitch v-model="autoSensitive" class="_formBlock" @update:modelValue="saveProfile()">
-			<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
-			<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
-		</FormSwitch>
-	</FormSection>
-</div>
+		<FormSection>
+			<FormButton @click="chooseUploadFolder()">
+				{{ i18n.ts.uploadFolder }}
+				<template #suffix>{{
+					uploadFolder ? uploadFolder.name : "-"
+				}}</template>
+				<template #suffixIcon
+					><i class="ph-folder-notch-open ph-bold ph-lg"></i
+				></template>
+			</FormButton>
+			<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
+				<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
+				<template #caption>{{
+					i18n.ts.keepOriginalUploadingDescription
+				}}</template>
+			</FormSwitch>
+			<FormSwitch
+				v-model="alwaysMarkNsfw"
+				class="_formBlock"
+				@update:modelValue="saveProfile()"
+			>
+				<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
+			</FormSwitch>
+			<FormSwitch
+				v-model="autoSensitive"
+				class="_formBlock"
+				@update:modelValue="saveProfile()"
+			>
+				<template #label
+					>{{ i18n.ts.enableAutoSensitive
+					}}<span class="_beta">{{ i18n.ts.beta }}</span></template
+				>
+				<template #caption>{{
+					i18n.ts.enableAutoSensitiveDescription
+				}}</template>
+			</FormSwitch>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import tinycolor from 'tinycolor2';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import bytes from '@/filters/bytes';
-import { defaultStore } from '@/store';
-import MkChart from '@/components/MkChart.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
+import { computed, ref } from "vue";
+import tinycolor from "tinycolor2";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import FormSplit from "@/components/form/split.vue";
+import * as os from "@/os";
+import bytes from "@/filters/bytes";
+import { defaultStore } from "@/store";
+import MkChart from "@/components/MkChart.vue";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { $i } from "@/account";
 
 const fetching = ref(true);
 const usage = ref<any>(null);
@@ -69,37 +97,39 @@ let autoSensitive = $ref($i.autoSensitive);
 
 const meterStyle = computed(() => {
 	return {
-		width: `${usage.value / capacity.value * 100}%`,
+		width: `${(usage.value / capacity.value) * 100}%`,
 		background: tinycolor({
-			h: 180 - (usage.value / capacity.value * 180),
+			h: 180 - (usage.value / capacity.value) * 180,
 			s: 0.7,
 			l: 0.5,
 		}),
 	};
 });
 
-const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
+const keepOriginalUploading = computed(
+	defaultStore.makeGetterSetter("keepOriginalUploading")
+);
 
-os.api('drive').then(info => {
+os.api("drive").then((info) => {
 	capacity.value = info.capacity;
 	usage.value = info.usage;
 	fetching.value = false;
 });
 
 if (defaultStore.state.uploadFolder) {
-	os.api('drive/folders/show', {
+	os.api("drive/folders/show", {
 		folderId: defaultStore.state.uploadFolder,
-	}).then(response => {
+	}).then((response) => {
 		uploadFolder.value = response;
 	});
 }
 
 function chooseUploadFolder() {
-	os.selectDriveFolder(false).then(async folder => {
-		defaultStore.set('uploadFolder', folder ? folder.id : null);
+	os.selectDriveFolder(false).then(async (folder) => {
+		defaultStore.set("uploadFolder", folder ? folder.id : null);
 		os.success();
 		if (defaultStore.state.uploadFolder) {
-			uploadFolder.value = await os.api('drive/folders/show', {
+			uploadFolder.value = await os.api("drive/folders/show", {
 				folderId: defaultStore.state.uploadFolder,
 			});
 		} else {
@@ -109,7 +139,7 @@ function chooseUploadFolder() {
 }
 
 function saveProfile() {
-	os.api('i/update', {
+	os.api("i/update", {
 		alwaysMarkNsfw: !!alwaysMarkNsfw,
 		autoSensitive: !!autoSensitive,
 	});
@@ -121,16 +151,14 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.drive,
-	icon: 'ph-cloud ph-bold ph-lg',
+	icon: "ph-cloud ph-bold ph-lg",
 });
 </script>
 
 <style lang="scss" scoped>
-
 @use "sass:math";
 
 .uawsfosz {
-
 	> .meter {
 		$size: 12px;
 		background: rgba(0, 0, 0, 0.1);
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index bd8b76e6d..fef21c1f5 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -1,58 +1,79 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.emailAddress }}</template>
-		<FormInput v-model="emailAddress" type="email" manual-save>
-			<template #prefix><i class="ph-envelope-simple-open ph-bold ph-lg"></i></template>
-			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ph-check ph-bold ph-lg" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
-		</FormInput>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts.emailAddress }}</template>
+			<FormInput v-model="emailAddress" type="email" manual-save>
+				<template #prefix
+					><i class="ph-envelope-simple-open ph-bold ph-lg"></i
+				></template>
+				<template v-if="$i.email && !$i.emailVerified" #caption>{{
+					i18n.ts.verificationEmailSent
+				}}</template>
+				<template
+					v-else-if="emailAddress === $i.email && $i.emailVerified"
+					#caption
+					><i
+						class="ph-check ph-bold ph-lg"
+						style="color: var(--success)"
+					></i>
+					{{ i18n.ts.emailVerified }}</template
+				>
+			</FormInput>
+		</FormSection>
 
-	<FormSection>
-		<FormSwitch :model-value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail">
-			{{ i18n.ts.receiveAnnouncementFromInstance }}
-		</FormSwitch>
-	</FormSection>
+		<FormSection>
+			<FormSwitch
+				:model-value="$i.receiveAnnouncementEmail"
+				@update:modelValue="onChangeReceiveAnnouncementEmail"
+			>
+				{{ i18n.ts.receiveAnnouncementFromInstance }}
+			</FormSwitch>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.emailNotification }}</template>
-		<FormSwitch v-model="emailNotification_mention" class="_formBlock">
-			{{ i18n.ts._notification._types.mention }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_reply" class="_formBlock">
-			{{ i18n.ts._notification._types.reply }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_quote" class="_formBlock">
-			{{ i18n.ts._notification._types.quote }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_follow" class="_formBlock">
-			{{ i18n.ts._notification._types.follow }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_receiveFollowRequest" class="_formBlock">
-			{{ i18n.ts._notification._types.receiveFollowRequest }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_groupInvited" class="_formBlock">
-			{{ i18n.ts._notification._types.groupInvited }}
-		</FormSwitch>
-	</FormSection>
-</div>
+		<FormSection>
+			<template #label>{{ i18n.ts.emailNotification }}</template>
+			<FormSwitch v-model="emailNotification_mention" class="_formBlock">
+				{{ i18n.ts._notification._types.mention }}
+			</FormSwitch>
+			<FormSwitch v-model="emailNotification_reply" class="_formBlock">
+				{{ i18n.ts._notification._types.reply }}
+			</FormSwitch>
+			<FormSwitch v-model="emailNotification_quote" class="_formBlock">
+				{{ i18n.ts._notification._types.quote }}
+			</FormSwitch>
+			<FormSwitch v-model="emailNotification_follow" class="_formBlock">
+				{{ i18n.ts._notification._types.follow }}
+			</FormSwitch>
+			<FormSwitch
+				v-model="emailNotification_receiveFollowRequest"
+				class="_formBlock"
+			>
+				{{ i18n.ts._notification._types.receiveFollowRequest }}
+			</FormSwitch>
+			<FormSwitch
+				v-model="emailNotification_groupInvited"
+				class="_formBlock"
+			>
+				{{ i18n.ts._notification._types.groupInvited }}
+			</FormSwitch>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { onMounted, ref, watch } from "vue";
+import FormSection from "@/components/form/section.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const emailAddress = ref($i!.email);
 
 const onChangeReceiveAnnouncementEmail = (v) => {
-	os.api('i/update', {
+	os.api("i/update", {
 		receiveAnnouncementEmail: v,
 	});
 };
@@ -60,39 +81,65 @@ const onChangeReceiveAnnouncementEmail = (v) => {
 const saveEmailAddress = () => {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.apiWithDialog('i/update-email', {
+		os.apiWithDialog("i/update-email", {
 			password: password,
 			email: emailAddress.value,
 		});
 	});
 };
 
-const emailNotification_mention = ref($i!.emailNotificationTypes.includes('mention'));
-const emailNotification_reply = ref($i!.emailNotificationTypes.includes('reply'));
-const emailNotification_quote = ref($i!.emailNotificationTypes.includes('quote'));
-const emailNotification_follow = ref($i!.emailNotificationTypes.includes('follow'));
-const emailNotification_receiveFollowRequest = ref($i!.emailNotificationTypes.includes('receiveFollowRequest'));
-const emailNotification_groupInvited = ref($i!.emailNotificationTypes.includes('groupInvited'));
+const emailNotification_mention = ref(
+	$i!.emailNotificationTypes.includes("mention")
+);
+const emailNotification_reply = ref(
+	$i!.emailNotificationTypes.includes("reply")
+);
+const emailNotification_quote = ref(
+	$i!.emailNotificationTypes.includes("quote")
+);
+const emailNotification_follow = ref(
+	$i!.emailNotificationTypes.includes("follow")
+);
+const emailNotification_receiveFollowRequest = ref(
+	$i!.emailNotificationTypes.includes("receiveFollowRequest")
+);
+const emailNotification_groupInvited = ref(
+	$i!.emailNotificationTypes.includes("groupInvited")
+);
 
 const saveNotificationSettings = () => {
-	os.api('i/update', {
+	os.api("i/update", {
 		emailNotificationTypes: [
-			...[emailNotification_mention.value ? 'mention' : null],
-			...[emailNotification_reply.value ? 'reply' : null],
-			...[emailNotification_quote.value ? 'quote' : null],
-			...[emailNotification_follow.value ? 'follow' : null],
-			...[emailNotification_receiveFollowRequest.value ? 'receiveFollowRequest' : null],
-			...[emailNotification_groupInvited.value ? 'groupInvited' : null],
-		].filter(x => x != null),
+			...[emailNotification_mention.value ? "mention" : null],
+			...[emailNotification_reply.value ? "reply" : null],
+			...[emailNotification_quote.value ? "quote" : null],
+			...[emailNotification_follow.value ? "follow" : null],
+			...[
+				emailNotification_receiveFollowRequest.value
+					? "receiveFollowRequest"
+					: null,
+			],
+			...[emailNotification_groupInvited.value ? "groupInvited" : null],
+		].filter((x) => x != null),
 	});
 };
 
-watch([emailNotification_mention, emailNotification_reply, emailNotification_quote, emailNotification_follow, emailNotification_receiveFollowRequest, emailNotification_groupInvited], () => {
-	saveNotificationSettings();
-});
+watch(
+	[
+		emailNotification_mention,
+		emailNotification_reply,
+		emailNotification_quote,
+		emailNotification_follow,
+		emailNotification_receiveFollowRequest,
+		emailNotification_groupInvited,
+	],
+	() => {
+		saveNotificationSettings();
+	}
+);
 
 onMounted(() => {
 	watch(emailAddress, () => {
@@ -106,6 +153,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.email,
-	icon: 'ph-envelope-simple-open ph-bold ph-lg',
+	icon: "ph-envelope-simple-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index bef23a15e..b8cdb3fd9 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -1,132 +1,235 @@
 <template>
-<div class="_formRoot">
-	<FormSelect v-model="lang" class="_formBlock">
-		<template #label>{{ i18n.ts.uiLanguage }}</template>
-		<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
-		<template #caption>
-			<I18n :src="i18n.ts.i18nInfo" tag="span">
-				<template #link>
-					<MkLink url="https://hosted.weblate.org/engage/calckey/">Weblate</MkLink>
-				</template>
-			</I18n>
-		</template>
-	</FormSelect>
-
-	<FormRadios v-model="overridedDeviceKind" class="_formBlock">
-		<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
-		<option :value="null">{{ i18n.ts.auto }}</option>
-		<option value="smartphone"><i class="ph-device-mobile ph-bold ph-lg"/> {{ i18n.ts.smartphone }}</option>
-		<option value="tablet"><i class="ph-device-tablet ph-bold ph-lg"/> {{ i18n.ts.tablet }}</option>
-		<option value="desktop"><i class="ph-desktop ph-bold ph-lg"/> {{ i18n.ts.desktop }}</option>
-	</FormRadios>
-
-	<FormRadios v-model="showLocalPostsInTimeline" class="_formBlock">
-		<template #label>{{ i18n.ts.showLocalPosts }}</template>
-		<option value="home"><i class="ph-house ph-bold ph-lg"/> {{ i18n.ts.homeTimeline }}</option>
-		<option value="social"><i class="ph-handshake ph-bold ph-lg"/> {{ i18n.ts.socialTimeline }}</option>
-	</FormRadios>
-
-	<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.behavior }}</template>
-		<FormSwitch v-model="imageNewTab" class="_formBlock">{{ i18n.ts.openImageInNewTab }}</FormSwitch>
-		<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{ i18n.ts.enableInfiniteScroll }}</FormSwitch>
-		<FormSwitch v-model="useReactionPickerForContextMenu" class="_formBlock">{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch>
-		<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{ i18n.ts.swipeOnDesktop }}</FormSwitch>
-		<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{ i18n.ts.enterSendsMessage }}</FormSwitch>
-		<FormSwitch v-model="disablePagesScript" class="_formBlock">{{ i18n.ts.disablePagesScript }}</FormSwitch>
-
-		<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
-			<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
-			<option value="reload">{{ i18n.ts._serverDisconnectedBehavior.reload }}</option>
-			<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
-			<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
-			<option value="nothing">{{ i18n.ts._serverDisconnectedBehavior.nothing }}</option>
+	<div class="_formRoot">
+		<FormSelect v-model="lang" class="_formBlock">
+			<template #label>{{ i18n.ts.uiLanguage }}</template>
+			<option v-for="x in langs" :key="x[0]" :value="x[0]">
+				{{ x[1] }}
+			</option>
+			<template #caption>
+				<I18n :src="i18n.ts.i18nInfo" tag="span">
+					<template #link>
+						<MkLink url="https://hosted.weblate.org/engage/calckey/"
+							>Weblate</MkLink
+						>
+					</template>
+				</I18n>
+			</template>
 		</FormSelect>
-	</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.appearance }}</template>
-		<FormSwitch v-model="showAds" class="_formBlock">{{ i18n.ts.showAds }}</FormSwitch>
-		<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ i18n.ts.disableAnimatedMfm }}</FormSwitch>
-		<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ i18n.ts.reduceUiAnimation }}</FormSwitch>
-		<FormSwitch v-model="useBlurEffect" class="_formBlock">{{ i18n.ts.useBlurEffect }}</FormSwitch>
-		<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{ i18n.ts.useBlurEffectForModal }}</FormSwitch>
-		<FormSwitch v-model="showGapBetweenNotesInTimeline" class="_formBlock">{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch>
-		<FormSwitch v-model="loadRawImages" class="_formBlock">{{ i18n.ts.loadRawImages }}</FormSwitch>
-		<FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
-		<FormSwitch v-model="squareAvatars" class="_formBlock">{{ i18n.ts.squareAvatars }}</FormSwitch>
-		<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{ i18n.ts.seperateRenoteQuote }}</FormSwitch>
-		<FormSwitch v-model="useSystemFont" class="_formBlock">{{ i18n.ts.useSystemFont }}</FormSwitch>
-		<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
-			{{ i18n.ts.useOsNativeEmojis }}
-			<div><Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
-		</FormSwitch>
-		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
-		<FormSwitch v-model="showUpdates" class="_formBlock">{{ i18n.ts.showUpdates }}</FormSwitch>
-		<FormSwitch v-if="$i?.isAdmin" v-model="showAdminUpdates" class="_formBlock">{{ i18n.ts.showAdminUpdates }}</FormSwitch>
-
-		<FormRadios v-model="fontSize" class="_formBlock">
-			<template #label>{{ i18n.ts.fontSize }}</template>
-			<option :value="null"><span style="font-size: 14px;">Aa</span></option>
-			<option value="1"><span style="font-size: 15px;">Aa</span></option>
-			<option value="2"><span style="font-size: 16px;">Aa</span></option>
-			<option value="3"><span style="font-size: 17px;">Aa</span></option>
+		<FormRadios v-model="overridedDeviceKind" class="_formBlock">
+			<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
+			<option :value="null">{{ i18n.ts.auto }}</option>
+			<option value="smartphone">
+				<i class="ph-device-mobile ph-bold ph-lg" />
+				{{ i18n.ts.smartphone }}
+			</option>
+			<option value="tablet">
+				<i class="ph-device-tablet ph-bold ph-lg" />
+				{{ i18n.ts.tablet }}
+			</option>
+			<option value="desktop">
+				<i class="ph-desktop ph-bold ph-lg" /> {{ i18n.ts.desktop }}
+			</option>
 		</FormRadios>
-	</FormSection>
 
-	<FormSelect v-model="instanceTicker" class="_formBlock">
-		<template #label>{{ i18n.ts.instanceTicker }}</template>
-		<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
-		<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
-		<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
-	</FormSelect>
+		<FormRadios v-model="showLocalPostsInTimeline" class="_formBlock">
+			<template #label>{{ i18n.ts.showLocalPosts }}</template>
+			<option value="home">
+				<i class="ph-house ph-bold ph-lg" /> {{ i18n.ts.homeTimeline }}
+			</option>
+			<option value="social">
+				<i class="ph-handshake ph-bold ph-lg" />
+				{{ i18n.ts.socialTimeline }}
+			</option>
+		</FormRadios>
 
-	<FormSelect v-model="nsfw" class="_formBlock">
-		<template #label>{{ i18n.ts.nsfw }}</template>
-		<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
-		<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
-		<option value="force">{{ i18n.ts._nsfw.force }}</option>
-	</FormSelect>
+		<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
+			i18n.ts.showFixedPostForm
+		}}</FormSwitch>
 
-	<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock">
-		<template #label>{{ i18n.ts.numberOfPageCache }}</template>
-		<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
-	</FormRange>
+		<FormSection>
+			<template #label>{{ i18n.ts.behavior }}</template>
+			<FormSwitch v-model="imageNewTab" class="_formBlock">{{
+				i18n.ts.openImageInNewTab
+			}}</FormSwitch>
+			<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{
+				i18n.ts.enableInfiniteScroll
+			}}</FormSwitch>
+			<FormSwitch
+				v-model="useReactionPickerForContextMenu"
+				class="_formBlock"
+				>{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch
+			>
+			<FormSwitch v-model="swipeOnDesktop" class="_formBlock">{{
+				i18n.ts.swipeOnDesktop
+			}}</FormSwitch>
+			<FormSwitch v-model="enterSendsMessage" class="_formBlock">{{
+				i18n.ts.enterSendsMessage
+			}}</FormSwitch>
+			<FormSwitch v-model="disablePagesScript" class="_formBlock">{{
+				i18n.ts.disablePagesScript
+			}}</FormSwitch>
 
-	<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
+			<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
+				<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
+				<option value="reload">
+					{{ i18n.ts._serverDisconnectedBehavior.reload }}
+				</option>
+				<option value="dialog">
+					{{ i18n.ts._serverDisconnectedBehavior.dialog }}
+				</option>
+				<option value="quiet">
+					{{ i18n.ts._serverDisconnectedBehavior.quiet }}
+				</option>
+				<option value="nothing">
+					{{ i18n.ts._serverDisconnectedBehavior.nothing }}
+				</option>
+			</FormSelect>
+		</FormSection>
 
-	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="ph-code ph-bold ph-lg"></i></template>{{ i18n.ts.customCss }}</FormLink>
+		<FormSection>
+			<template #label>{{ i18n.ts.appearance }}</template>
+			<FormSwitch v-model="showAds" class="_formBlock">{{
+				i18n.ts.showAds
+			}}</FormSwitch>
+			<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{
+				i18n.ts.disableAnimatedMfm
+			}}</FormSwitch>
+			<FormSwitch v-model="reduceAnimation" class="_formBlock">{{
+				i18n.ts.reduceUiAnimation
+			}}</FormSwitch>
+			<FormSwitch v-model="useBlurEffect" class="_formBlock">{{
+				i18n.ts.useBlurEffect
+			}}</FormSwitch>
+			<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{
+				i18n.ts.useBlurEffectForModal
+			}}</FormSwitch>
+			<FormSwitch
+				v-model="showGapBetweenNotesInTimeline"
+				class="_formBlock"
+				>{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch
+			>
+			<FormSwitch v-model="loadRawImages" class="_formBlock">{{
+				i18n.ts.loadRawImages
+			}}</FormSwitch>
+			<FormSwitch
+				v-model="disableShowingAnimatedImages"
+				class="_formBlock"
+				>{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch
+			>
+			<FormSwitch v-model="squareAvatars" class="_formBlock">{{
+				i18n.ts.squareAvatars
+			}}</FormSwitch>
+			<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
+				i18n.ts.seperateRenoteQuote
+			}}</FormSwitch>
+			<FormSwitch v-model="useSystemFont" class="_formBlock">{{
+				i18n.ts.useSystemFont
+			}}</FormSwitch>
+			<FormSwitch v-model="useOsNativeEmojis" class="_formBlock">
+				{{ i18n.ts.useOsNativeEmojis }}
+				<div>
+					<Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪" />
+				</div>
+			</FormSwitch>
+			<FormSwitch v-model="disableDrawer" class="_formBlock">{{
+				i18n.ts.disableDrawer
+			}}</FormSwitch>
+			<FormSwitch v-model="showUpdates" class="_formBlock">{{
+				i18n.ts.showUpdates
+			}}</FormSwitch>
+			<FormSwitch
+				v-if="$i?.isAdmin"
+				v-model="showAdminUpdates"
+				class="_formBlock"
+				>{{ i18n.ts.showAdminUpdates }}</FormSwitch
+			>
 
-	<FormLink to="/settings/custom-katex-macro" class="_formBlock"><template #icon><i class="ph-radical ph-bold ph-lg"></i></template>{{ i18n.ts.customKaTeXMacro }}</FormLink>
-</div>
+			<FormRadios v-model="fontSize" class="_formBlock">
+				<template #label>{{ i18n.ts.fontSize }}</template>
+				<option :value="null">
+					<span style="font-size: 14px">Aa</span>
+				</option>
+				<option value="1">
+					<span style="font-size: 15px">Aa</span>
+				</option>
+				<option value="2">
+					<span style="font-size: 16px">Aa</span>
+				</option>
+				<option value="3">
+					<span style="font-size: 17px">Aa</span>
+				</option>
+			</FormRadios>
+		</FormSection>
+
+		<FormSelect v-model="instanceTicker" class="_formBlock">
+			<template #label>{{ i18n.ts.instanceTicker }}</template>
+			<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
+			<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
+			<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
+		</FormSelect>
+
+		<FormSelect v-model="nsfw" class="_formBlock">
+			<template #label>{{ i18n.ts.nsfw }}</template>
+			<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
+			<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
+			<option value="force">{{ i18n.ts._nsfw.force }}</option>
+		</FormSelect>
+
+		<FormRange
+			v-model="numberOfPageCache"
+			:min="1"
+			:max="10"
+			:step="1"
+			easing
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.numberOfPageCache }}</template>
+			<template #caption>{{
+				i18n.ts.numberOfPageCacheDescription
+			}}</template>
+		</FormRange>
+
+		<FormLink to="/settings/deck" class="_formBlock">{{
+			i18n.ts.deck
+		}}</FormLink>
+
+		<FormLink to="/settings/custom-css" class="_formBlock"
+			><template #icon><i class="ph-code ph-bold ph-lg"></i></template
+			>{{ i18n.ts.customCss }}</FormLink
+		>
+
+		<FormLink to="/settings/custom-katex-macro" class="_formBlock"
+			><template #icon><i class="ph-radical ph-bold ph-lg"></i></template
+			>{{ i18n.ts.customKaTeXMacro }}</FormLink
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { $i } from '@/account';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormRange from '@/components/form/range.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import MkLink from '@/components/MkLink.vue';
-import { langs } from '@/config';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref, watch } from "vue";
+import { $i } from "@/account";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormRange from "@/components/form/range.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import MkLink from "@/components/MkLink.vue";
+import { langs } from "@/config";
+import { defaultStore } from "@/store";
+import * as os from "@/os";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const lang = ref(localStorage.getItem('lang'));
-const fontSize = ref(localStorage.getItem('fontSize'));
-const useSystemFont = ref(localStorage.getItem('useSystemFont') != null);
+const lang = ref(localStorage.getItem("lang"));
+const fontSize = ref(localStorage.getItem("fontSize"));
+const useSystemFont = ref(localStorage.getItem("useSystemFont") != null);
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -134,73 +237,122 @@ async function reloadAsk() {
 	unisonReload();
 }
 
-const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
-const showLocalPostsInTimeline = computed(defaultStore.makeGetterSetter('showLocalPostsInTimeline'));
-const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
-const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
-const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
-const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
-const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
-const showAds = computed(defaultStore.makeGetterSetter('showAds'));
-const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
-const useOsNativeEmojis = computed(defaultStore.makeGetterSetter('useOsNativeEmojis'));
-const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
-const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
-const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
-const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
-const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
-const disablePagesScript = computed(defaultStore.makeGetterSetter('disablePagesScript'));
-const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
-const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
-const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
-const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
-const enterSendsMessage = computed(defaultStore.makeGetterSetter('enterSendsMessage'));
-const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
-const seperateRenoteQuote = computed(defaultStore.makeGetterSetter('seperateRenoteQuote'));
-const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
-const showUpdates = computed(defaultStore.makeGetterSetter('showUpdates'));
-const swipeOnDesktop = computed(defaultStore.makeGetterSetter('swipeOnDesktop'));
-const showAdminUpdates = computed(defaultStore.makeGetterSetter('showAdminUpdates'));
+const overridedDeviceKind = computed(
+	defaultStore.makeGetterSetter("overridedDeviceKind")
+);
+const showLocalPostsInTimeline = computed(
+	defaultStore.makeGetterSetter("showLocalPostsInTimeline")
+);
+const serverDisconnectedBehavior = computed(
+	defaultStore.makeGetterSetter("serverDisconnectedBehavior")
+);
+const reduceAnimation = computed(
+	defaultStore.makeGetterSetter(
+		"animation",
+		(v) => !v,
+		(v) => !v
+	)
+);
+const useBlurEffectForModal = computed(
+	defaultStore.makeGetterSetter("useBlurEffectForModal")
+);
+const useBlurEffect = computed(defaultStore.makeGetterSetter("useBlurEffect"));
+const showGapBetweenNotesInTimeline = computed(
+	defaultStore.makeGetterSetter("showGapBetweenNotesInTimeline")
+);
+const showAds = computed(defaultStore.makeGetterSetter("showAds"));
+const disableAnimatedMfm = computed(
+	defaultStore.makeGetterSetter(
+		"animatedMfm",
+		(v) => !v,
+		(v) => !v
+	)
+);
+const useOsNativeEmojis = computed(
+	defaultStore.makeGetterSetter("useOsNativeEmojis")
+);
+const disableDrawer = computed(defaultStore.makeGetterSetter("disableDrawer"));
+const disableShowingAnimatedImages = computed(
+	defaultStore.makeGetterSetter("disableShowingAnimatedImages")
+);
+const loadRawImages = computed(defaultStore.makeGetterSetter("loadRawImages"));
+const imageNewTab = computed(defaultStore.makeGetterSetter("imageNewTab"));
+const nsfw = computed(defaultStore.makeGetterSetter("nsfw"));
+const disablePagesScript = computed(
+	defaultStore.makeGetterSetter("disablePagesScript")
+);
+const showFixedPostForm = computed(
+	defaultStore.makeGetterSetter("showFixedPostForm")
+);
+const numberOfPageCache = computed(
+	defaultStore.makeGetterSetter("numberOfPageCache")
+);
+const instanceTicker = computed(
+	defaultStore.makeGetterSetter("instanceTicker")
+);
+const enableInfiniteScroll = computed(
+	defaultStore.makeGetterSetter("enableInfiniteScroll")
+);
+const enterSendsMessage = computed(
+	defaultStore.makeGetterSetter("enterSendsMessage")
+);
+const useReactionPickerForContextMenu = computed(
+	defaultStore.makeGetterSetter("useReactionPickerForContextMenu")
+);
+const seperateRenoteQuote = computed(
+	defaultStore.makeGetterSetter("seperateRenoteQuote")
+);
+const squareAvatars = computed(defaultStore.makeGetterSetter("squareAvatars"));
+const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates"));
+const swipeOnDesktop = computed(
+	defaultStore.makeGetterSetter("swipeOnDesktop")
+);
+const showAdminUpdates = computed(
+	defaultStore.makeGetterSetter("showAdminUpdates")
+);
 
 watch(lang, () => {
-	localStorage.setItem('lang', lang.value as string);
-	localStorage.removeItem('locale');
+	localStorage.setItem("lang", lang.value as string);
+	localStorage.removeItem("locale");
 });
 
 watch(fontSize, () => {
 	if (fontSize.value == null) {
-		localStorage.removeItem('fontSize');
+		localStorage.removeItem("fontSize");
 	} else {
-		localStorage.setItem('fontSize', fontSize.value);
+		localStorage.setItem("fontSize", fontSize.value);
 	}
 });
 
 watch(useSystemFont, () => {
 	if (useSystemFont.value) {
-		localStorage.setItem('useSystemFont', 't');
+		localStorage.setItem("useSystemFont", "t");
 	} else {
-		localStorage.removeItem('useSystemFont');
+		localStorage.removeItem("useSystemFont");
 	}
 });
 
-watch([
-	lang,
-	fontSize,
-	useSystemFont,
-	enableInfiniteScroll,
-	squareAvatars,
-	showGapBetweenNotesInTimeline,
-	instanceTicker,
-	overridedDeviceKind,
-	showLocalPostsInTimeline,
-	showAds,
-	showUpdates,
-	swipeOnDesktop,
-	seperateRenoteQuote,
-	showAdminUpdates,
-], async () => {
-	await reloadAsk();
-});
+watch(
+	[
+		lang,
+		fontSize,
+		useSystemFont,
+		enableInfiniteScroll,
+		squareAvatars,
+		showGapBetweenNotesInTimeline,
+		instanceTicker,
+		overridedDeviceKind,
+		showLocalPostsInTimeline,
+		showAds,
+		showUpdates,
+		swipeOnDesktop,
+		seperateRenoteQuote,
+		showAdminUpdates,
+	],
+	async () => {
+		await reloadAsk();
+	}
+);
 
 const headerActions = $computed(() => []);
 
@@ -208,6 +360,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 93acb131a..18fcc0400 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -1,92 +1,186 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
-		<FormFolder>
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<FormSwitch v-model="signatureCheck" class="_formBlock">
-				Mastodon import? (not Akkoma!)
-			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="importPosts($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.followingList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
-				{{ i18n.ts._exportOrImport.excludeMutingUsers }}
-			</FormSwitch>
-			<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
-				{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
-			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.blockingList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ph-download-simple ph-bold ph-lg"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ph-upload-simple ph-bold ph-lg"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ph-upload-simple ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-</div>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
+			<FormFolder>
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportNotes()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<FormSwitch v-model="signatureCheck" class="_formBlock">
+					Mastodon import? (not Akkoma!)
+				</FormSwitch>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importPosts($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{
+				i18n.ts._exportOrImport.followingList
+			}}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
+					{{ i18n.ts._exportOrImport.excludeMutingUsers }}
+				</FormSwitch>
+				<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
+					{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
+				</FormSwitch>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportFollowing()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importFollowing($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportUserLists()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importUserLists($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportMuting()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importMuting($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+		<FormSection>
+			<template #label>{{
+				i18n.ts._exportOrImport.blockingList
+			}}</template>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.export }}</template>
+				<template #icon
+					><i class="ph-download-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="exportBlocking()"
+					><i class="ph-download-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.export }}</MkButton
+				>
+			</FormFolder>
+			<FormFolder class="_formBlock">
+				<template #label>{{ i18n.ts.import }}</template>
+				<template #icon
+					><i class="ph-upload-simple ph-bold ph-lg"></i
+				></template>
+				<MkButton
+					primary
+					:class="$style.button"
+					inline
+					@click="importBlocking($event)"
+					><i class="ph-upload-simple ph-bold ph-lg"></i>
+					{{ i18n.ts.import }}</MkButton
+				>
+			</FormFolder>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { selectFile } from '@/scripts/select-file';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { selectFile } from "@/scripts/select-file";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const excludeMutingUsers = ref(false);
 const signatureCheck = ref(false);
@@ -94,72 +188,86 @@ const excludeInactiveUsers = ref(false);
 
 const onExportSuccess = () => {
 	os.alert({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.exportRequested,
 	});
 };
 
 const onImportSuccess = () => {
 	os.alert({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.importRequested,
 	});
 };
 
 const onError = (ev) => {
 	os.alert({
-		type: 'error',
+		type: "error",
 		text: ev.message,
 	});
 };
 
 const exportNotes = () => {
-	os.api('i/export-notes', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-notes", {}).then(onExportSuccess).catch(onError);
 };
 
 const importPosts = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-posts', { fileId: file.id, signatureCheck: signatureCheck.value }).then(onImportSuccess).catch(onError);
+	os.api("i/import-posts", {
+		fileId: file.id,
+		signatureCheck: signatureCheck.value,
+	})
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const exportFollowing = () => {
-	os.api('i/export-following', {
+	os.api("i/export-following", {
 		excludeMuting: excludeMutingUsers.value,
 		excludeInactive: excludeInactiveUsers.value,
 	})
-	.then(onExportSuccess).catch(onError);
+		.then(onExportSuccess)
+		.catch(onError);
 };
 
 const exportBlocking = () => {
-	os.api('i/export-blocking', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-blocking", {}).then(onExportSuccess).catch(onError);
 };
 
 const exportUserLists = () => {
-	os.api('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-user-lists", {}).then(onExportSuccess).catch(onError);
 };
 
 const exportMuting = () => {
-	os.api('i/export-mute', {}).then(onExportSuccess).catch(onError);
+	os.api("i/export-mute", {}).then(onExportSuccess).catch(onError);
 };
 
 const importFollowing = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-following', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-following", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const importUserLists = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-user-lists", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const importMuting = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-muting", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const importBlocking = async (ev) => {
 	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
+	os.api("i/import-blocking", { fileId: file.id })
+		.then(onImportSuccess)
+		.catch(onError);
 };
 
 const headerActions = $computed(() => []);
@@ -168,7 +276,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.importAndExport,
-	icon: 'ph-package ph-bold ph-lg',
+	icon: "ph-package ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index b672b7011..a3c748271 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -1,42 +1,76 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"/></template>
-	<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
-		<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
-			<div class="body">
-				<div v-if="!narrow || currentPage?.route.name == null" class="nav">
-					<div class="baaadecd">
-						<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-						<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+		/></template>
+		<MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
+			<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
+				<div class="body">
+					<div
+						v-if="!narrow || currentPage?.route.name == null"
+						class="nav"
+					>
+						<div class="baaadecd">
+							<MkInfo v-if="emailNotConfigured" warn class="info"
+								>{{ i18n.ts.emailNotConfiguredWarning }}
+								<MkA to="/settings/email" class="_link">{{
+									i18n.ts.configure
+								}}</MkA></MkInfo
+							>
+							<MkSuperMenu
+								:def="menuDef"
+								:grid="narrow"
+							></MkSuperMenu>
+						</div>
 					</div>
-				</div>
-				<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-					<div class="bkzroven">
-						<RouterView/>
+					<div
+						v-if="!(narrow && currentPage?.route.name == null)"
+						class="main"
+					>
+						<div class="bkzroven">
+							<RouterView />
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</mkstickycontainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, inject, nextTick, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue';
-import { i18n } from '@/i18n';
-import MkInfo from '@/components/MkInfo.vue';
-import MkSuperMenu from '@/components/MkSuperMenu.vue';
-import { scroll } from '@/scripts/scroll';
-import { signout , $i } from '@/account';
-import { unisonReload } from '@/scripts/unison-reload';
-import { instance } from '@/instance';
-import { useRouter } from '@/router';
-import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import * as os from '@/os';
+import {
+	computed,
+	defineAsyncComponent,
+	inject,
+	nextTick,
+	onActivated,
+	onMounted,
+	onUnmounted,
+	provide,
+	ref,
+	watch,
+} from "vue";
+import { i18n } from "@/i18n";
+import MkInfo from "@/components/MkInfo.vue";
+import MkSuperMenu from "@/components/MkSuperMenu.vue";
+import { scroll } from "@/scripts/scroll";
+import { signout, $i } from "@/account";
+import { unisonReload } from "@/scripts/unison-reload";
+import { instance } from "@/instance";
+import { useRouter } from "@/router";
+import {
+	definePageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import * as os from "@/os";
 
 const indexInfo = {
 	title: i18n.ts.settings,
-	icon: 'ph-gear-six ph-bold ph-lg',
+	icon: "ph-gear-six ph-bold ph-lg",
 	hideHeader: true,
 };
 const INFO = ref(indexInfo);
@@ -55,158 +89,191 @@ const ro = new ResizeObserver((entries, observer) => {
 	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
-const menuDef = computed(() => [{
-	title: i18n.ts.basicSettings,
-	items: [{
-		icon: 'ph-user ph-bold ph-lg',
-		text: i18n.ts.profile,
-		to: '/settings/profile',
-		active: currentPage?.route.name === 'profile',
-	}, {
-		icon: 'ph-lock-open ph-bold ph-lg',
-		text: i18n.ts.privacy,
-		to: '/settings/privacy',
-		active: currentPage?.route.name === 'privacy',
-	}, {
-		icon: 'ph-smiley ph-bold ph-lg',
-		text: i18n.ts.reaction,
-		to: '/settings/reaction',
-		active: currentPage?.route.name === 'reaction',
-	}, {
-		icon: 'ph-cloud ph-bold ph-lg',
-		text: i18n.ts.drive,
-		to: '/settings/drive',
-		active: currentPage?.route.name === 'drive',
-	}, {
-		icon: 'ph-bell ph-bold ph-lg',
-		text: i18n.ts.notifications,
-		to: '/settings/notifications',
-		active: currentPage?.route.name === 'notifications',
-	}, {
-		icon: 'ph-envelope-simple-open ph-bold ph-lg',
-		text: i18n.ts.email,
-		to: '/settings/email',
-		active: currentPage?.route.name === 'email',
-	}, {
-		icon: 'ph-share-network ph-bold ph-lg',
-		text: i18n.ts.integration,
-		to: '/settings/integration',
-		active: currentPage?.route.name === 'integration',
-	}, {
-		icon: 'ph-lock ph-bold ph-lg',
-		text: i18n.ts.security,
-		to: '/settings/security',
-		active: currentPage?.route.name === 'security',
-	}],
-}, {
-	title: i18n.ts.clientSettings,
-	items: [{
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts.general,
-		to: '/settings/general',
-		active: currentPage?.route.name === 'general',
-	}, {
-		icon: 'ph-palette ph-bold ph-lg',
-		text: i18n.ts.theme,
-		to: '/settings/theme',
-		active: currentPage?.route.name === 'theme',
-	}, {
-		icon: 'ph-list ph-bold ph-lg',
-		text: i18n.ts.navbar,
-		to: '/settings/navbar',
-		active: currentPage?.route.name === 'navbar',
-	}, {
-		icon: 'ph-traffic-signal ph-bold ph-lg',
-		text: i18n.ts.statusbar,
-		to: '/settings/statusbar',
-		active: currentPage?.route.name === 'statusbar',
-	}, {
-		icon: 'ph-speaker-high ph-bold ph-lg',
-		text: i18n.ts.sounds,
-		to: '/settings/sounds',
-		active: currentPage?.route.name === 'sounds',
-	}, {
-		icon: 'ph-plug ph-bold ph-lg',
-		text: i18n.ts.plugins,
-		to: '/settings/plugin',
-		active: currentPage?.route.name === 'plugin',
-	}],
-}, {
-	title: i18n.ts.otherSettings,
-	items: [{
-		icon: 'ph-airplane-takeoff ph-bold ph-lg',
-		text: i18n.ts.migration,
-		to: '/settings/migration',
-		active: currentPage?.route.name === 'migration',
-	}, {
-		icon: 'ph-package ph-bold ph-lg',
-		text: i18n.ts.importAndExport,
-		to: '/settings/import-export',
-		active: currentPage?.route.name === 'import-export',
-	}, {
-		icon: 'ph-speaker-none ph-bold ph-lg',
-		text: i18n.ts.instanceMute,
-		to: '/settings/instance-mute',
-		active: currentPage?.route.name === 'instance-mute',
-	}, {
-		icon: 'ph-prohibit ph-bold ph-lg',
-		text: i18n.ts.muteAndBlock,
-		to: '/settings/mute-block',
-		active: currentPage?.route.name === 'mute-block',
-	}, {
-		icon: 'ph-speaker-x ph-bold ph-lg',
-		text: i18n.ts.wordMute,
-		to: '/settings/word-mute',
-		active: currentPage?.route.name === 'word-mute',
-	}, {
-		icon: 'ph-key ph-bold ph-lg',
-		text: 'API',
-		to: '/settings/api',
-		active: currentPage?.route.name === 'api',
-	}, {
-		icon: 'ph-lightning ph-bold ph-lg',
-		text: 'Webhook',
-		to: '/settings/webhook',
-		active: currentPage?.route.name === 'webhook',
-	}, {
-		icon: 'ph-dots-three-outline ph-bold ph-lg',
-		text: i18n.ts.other,
-		to: '/settings/other',
-		active: currentPage?.route.name === 'other',
-	}],
-}, {
-	items: [{
-		icon: 'ph-floppy-disk ph-bold ph-lg',
-		text: i18n.ts.preferencesBackups,
-		to: '/settings/preferences-backups',
-		active: currentPage?.route.name === 'preferences-backups',
-	}, {
-		type: 'button',
-		icon: 'ph-trash ph-bold ph-lg',
-		text: i18n.ts.clearCache,
-		action: () => {
-			localStorage.removeItem('locale');
-			localStorage.removeItem('theme');
-			unisonReload();
-		},
-	}, {
-		type: 'button',
-		icon: 'ph-sign-in ph-bold ph-lg fa-flip-horizontal',
-		text: i18n.ts.logout,
-		action: async () => {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.ts.logoutConfirm,
-			});
-			if (canceled) return;
-			signout();
-		},
-		danger: true,
-	}],
-}]);
+const menuDef = computed(() => [
+	{
+		title: i18n.ts.basicSettings,
+		items: [
+			{
+				icon: "ph-user ph-bold ph-lg",
+				text: i18n.ts.profile,
+				to: "/settings/profile",
+				active: currentPage?.route.name === "profile",
+			},
+			{
+				icon: "ph-lock-open ph-bold ph-lg",
+				text: i18n.ts.privacy,
+				to: "/settings/privacy",
+				active: currentPage?.route.name === "privacy",
+			},
+			{
+				icon: "ph-smiley ph-bold ph-lg",
+				text: i18n.ts.reaction,
+				to: "/settings/reaction",
+				active: currentPage?.route.name === "reaction",
+			},
+			{
+				icon: "ph-cloud ph-bold ph-lg",
+				text: i18n.ts.drive,
+				to: "/settings/drive",
+				active: currentPage?.route.name === "drive",
+			},
+			{
+				icon: "ph-bell ph-bold ph-lg",
+				text: i18n.ts.notifications,
+				to: "/settings/notifications",
+				active: currentPage?.route.name === "notifications",
+			},
+			{
+				icon: "ph-envelope-simple-open ph-bold ph-lg",
+				text: i18n.ts.email,
+				to: "/settings/email",
+				active: currentPage?.route.name === "email",
+			},
+			{
+				icon: "ph-share-network ph-bold ph-lg",
+				text: i18n.ts.integration,
+				to: "/settings/integration",
+				active: currentPage?.route.name === "integration",
+			},
+			{
+				icon: "ph-lock ph-bold ph-lg",
+				text: i18n.ts.security,
+				to: "/settings/security",
+				active: currentPage?.route.name === "security",
+			},
+		],
+	},
+	{
+		title: i18n.ts.clientSettings,
+		items: [
+			{
+				icon: "ph-gear-six ph-bold ph-lg",
+				text: i18n.ts.general,
+				to: "/settings/general",
+				active: currentPage?.route.name === "general",
+			},
+			{
+				icon: "ph-palette ph-bold ph-lg",
+				text: i18n.ts.theme,
+				to: "/settings/theme",
+				active: currentPage?.route.name === "theme",
+			},
+			{
+				icon: "ph-list ph-bold ph-lg",
+				text: i18n.ts.navbar,
+				to: "/settings/navbar",
+				active: currentPage?.route.name === "navbar",
+			},
+			{
+				icon: "ph-traffic-signal ph-bold ph-lg",
+				text: i18n.ts.statusbar,
+				to: "/settings/statusbar",
+				active: currentPage?.route.name === "statusbar",
+			},
+			{
+				icon: "ph-speaker-high ph-bold ph-lg",
+				text: i18n.ts.sounds,
+				to: "/settings/sounds",
+				active: currentPage?.route.name === "sounds",
+			},
+			{
+				icon: "ph-plug ph-bold ph-lg",
+				text: i18n.ts.plugins,
+				to: "/settings/plugin",
+				active: currentPage?.route.name === "plugin",
+			},
+		],
+	},
+	{
+		title: i18n.ts.otherSettings,
+		items: [
+			{
+				icon: "ph-airplane-takeoff ph-bold ph-lg",
+				text: i18n.ts.migration,
+				to: "/settings/migration",
+				active: currentPage?.route.name === "migration",
+			},
+			{
+				icon: "ph-package ph-bold ph-lg",
+				text: i18n.ts.importAndExport,
+				to: "/settings/import-export",
+				active: currentPage?.route.name === "import-export",
+			},
+			{
+				icon: "ph-speaker-none ph-bold ph-lg",
+				text: i18n.ts.instanceMute,
+				to: "/settings/instance-mute",
+				active: currentPage?.route.name === "instance-mute",
+			},
+			{
+				icon: "ph-prohibit ph-bold ph-lg",
+				text: i18n.ts.muteAndBlock,
+				to: "/settings/mute-block",
+				active: currentPage?.route.name === "mute-block",
+			},
+			{
+				icon: "ph-speaker-x ph-bold ph-lg",
+				text: i18n.ts.wordMute,
+				to: "/settings/word-mute",
+				active: currentPage?.route.name === "word-mute",
+			},
+			{
+				icon: "ph-key ph-bold ph-lg",
+				text: "API",
+				to: "/settings/api",
+				active: currentPage?.route.name === "api",
+			},
+			{
+				icon: "ph-lightning ph-bold ph-lg",
+				text: "Webhook",
+				to: "/settings/webhook",
+				active: currentPage?.route.name === "webhook",
+			},
+			{
+				icon: "ph-dots-three-outline ph-bold ph-lg",
+				text: i18n.ts.other,
+				to: "/settings/other",
+				active: currentPage?.route.name === "other",
+			},
+		],
+	},
+	{
+		items: [
+			{
+				icon: "ph-floppy-disk ph-bold ph-lg",
+				text: i18n.ts.preferencesBackups,
+				to: "/settings/preferences-backups",
+				active: currentPage?.route.name === "preferences-backups",
+			},
+			{
+				type: "button",
+				icon: "ph-trash ph-bold ph-lg",
+				text: i18n.ts.clearCache,
+				action: () => {
+					localStorage.removeItem("locale");
+					localStorage.removeItem("theme");
+					unisonReload();
+				},
+			},
+			{
+				type: "button",
+				icon: "ph-sign-in ph-bold ph-lg fa-flip-horizontal",
+				text: i18n.ts.logout,
+				action: async () => {
+					const { canceled } = await os.confirm({
+						type: "warning",
+						text: i18n.ts.logoutConfirm,
+					});
+					if (canceled) return;
+					signout();
+				},
+				danger: true,
+			},
+		],
+	},
+]);
 
-watch($$(narrow), () => {
-});
+watch($$(narrow), () => {});
 
 onMounted(() => {
 	ro.observe(el.value);
@@ -214,7 +281,7 @@ onMounted(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/settings/profile');
+		router.replace("/settings/profile");
 	}
 });
 
@@ -222,7 +289,7 @@ onActivated(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/settings/profile');
+		router.replace("/settings/profile");
 	}
 });
 
@@ -231,12 +298,18 @@ onUnmounted(() => {
 });
 
 watch(router.currentRef, (to) => {
-	if (to.route.name === "settings" && to.child?.route.name == null && !narrow) {
-		router.replace('/settings/profile');
+	if (
+		to.route.name === "settings" &&
+		to.child?.route.name == null &&
+		!narrow
+	) {
+		router.replace("/settings/profile");
 	}
 });
 
-const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
+const emailNotConfigured = computed(
+	() => instance.enableEmail && ($i.email == null || !$i.emailVerified)
+);
 
 provideMetadataReceiver((info) => {
 	if (info == null) {
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index c4ce06d6e..4c8ce7a3d 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -1,41 +1,53 @@
 <template>
-<div class="_formRoot">
-	<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
-	<FormTextarea v-model="instanceMutes" class="_formBlock">
-		<template #label>{{ i18n.ts._instanceMute.heading }}</template>
-		<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
-	</FormTextarea>
-	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+	<div class="_formRoot">
+		<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
+		<FormTextarea v-model="instanceMutes" class="_formBlock">
+			<template #label>{{ i18n.ts._instanceMute.heading }}</template>
+			<template #caption
+				>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br />{{
+					i18n.ts._instanceMute.instanceMuteDescription2
+				}}</template
+			>
+		</FormTextarea>
+		<MkButton
+			primary
+			:disabled="!changed"
+			class="_formBlock"
+			@click="save()"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const instanceMutes = ref($i!.mutedInstances.join('\n'));
+const instanceMutes = ref($i!.mutedInstances.join("\n"));
 const changed = ref(false);
 
 async function save() {
 	let mutes = instanceMutes.value
-		.trim().split('\n')
-		.map(el => el.trim())
-		.filter(el => el);
+		.trim()
+		.split("\n")
+		.map((el) => el.trim())
+		.filter((el) => el);
 
-	await os.api('i/update', {
+	await os.api("i/update", {
 		mutedInstances: mutes,
 	});
 
 	changed.value = false;
 
 	// Refresh filtered list to signal to the user how they've been saved
-	instanceMutes.value = mutes.join('\n');
+	instanceMutes.value = mutes.join("\n");
 }
 
 watch(instanceMutes, () => {
@@ -48,6 +60,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceMute,
-	icon: 'ph-speaker-none ph-bold ph-lg',
+	icon: "ph-speaker-none ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index e85137390..4a413e378 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -1,30 +1,66 @@
 <template>
-<div class="_formRoot">
-	<FormSection v-if="instance.enableDiscordIntegration">
-		<template #label><i class="ph-discord-logo ph-bold ph-lg"></i> Discord</template>
-		<p v-if="integrations.discord">{{ i18n.ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
-		<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ i18n.ts.disconnectService }}</MkButton>
-		<MkButton v-else primary @click="connectDiscord">{{ i18n.ts.connectService }}</MkButton>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection v-if="instance.enableDiscordIntegration">
+			<template #label
+				><i class="ph-discord-logo ph-bold ph-lg"></i> Discord</template
+			>
+			<p v-if="integrations.discord">
+				{{ i18n.ts.connectedTo }}:
+				<a
+					:href="`https://discord.com/users/${integrations.discord.id}`"
+					rel="nofollow noopener"
+					target="_blank"
+					>@{{ integrations.discord.username }}#{{
+						integrations.discord.discriminator
+					}}</a
+				>
+			</p>
+			<MkButton
+				v-if="integrations.discord"
+				danger
+				@click="disconnectDiscord"
+				>{{ i18n.ts.disconnectService }}</MkButton
+			>
+			<MkButton v-else primary @click="connectDiscord">{{
+				i18n.ts.connectService
+			}}</MkButton>
+		</FormSection>
 
-	<FormSection v-if="instance.enableGithubIntegration">
-		<template #label><i class="ph-github-logo ph-bold ph-lg"></i> GitHub</template>
-		<p v-if="integrations.github">{{ i18n.ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
-		<MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ i18n.ts.disconnectService }}</MkButton>
-		<MkButton v-else primary @click="connectGithub">{{ i18n.ts.connectService }}</MkButton>
-	</FormSection>
-</div>
+		<FormSection v-if="instance.enableGithubIntegration">
+			<template #label
+				><i class="ph-github-logo ph-bold ph-lg"></i> GitHub</template
+			>
+			<p v-if="integrations.github">
+				{{ i18n.ts.connectedTo }}:
+				<a
+					:href="`https://github.com/${integrations.github.login}`"
+					rel="nofollow noopener"
+					target="_blank"
+					>@{{ integrations.github.login }}</a
+				>
+			</p>
+			<MkButton
+				v-if="integrations.github"
+				danger
+				@click="disconnectGithub"
+				>{{ i18n.ts.disconnectService }}</MkButton
+			>
+			<MkButton v-else primary @click="connectGithub">{{
+				i18n.ts.connectService
+			}}</MkButton>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { apiUrl } from '@/config';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import { $i } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onMounted, ref, watch } from "vue";
+import { apiUrl } from "@/config";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import { $i } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const twitterForm = ref<Window | null>(null);
 const discordForm = ref<Window | null>(null);
@@ -33,40 +69,42 @@ const githubForm = ref<Window | null>(null);
 const integrations = computed(() => $i!.integrations);
 
 function openWindow(service: string, type: string) {
-	return window.open(`${apiUrl}/${type}/${service}`,
+	return window.open(
+		`${apiUrl}/${type}/${service}`,
 		`${service}_${type}_window`,
-		'height=570, width=520',
+		"height=570, width=520"
 	);
 }
 
 function connectTwitter() {
-	twitterForm.value = openWindow('twitter', 'connect');
+	twitterForm.value = openWindow("twitter", "connect");
 }
 
 function disconnectTwitter() {
-	openWindow('twitter', 'disconnect');
+	openWindow("twitter", "disconnect");
 }
 
 function connectDiscord() {
-	discordForm.value = openWindow('discord', 'connect');
+	discordForm.value = openWindow("discord", "connect");
 }
 
 function disconnectDiscord() {
-	openWindow('discord', 'disconnect');
+	openWindow("discord", "disconnect");
 }
 
 function connectGithub() {
-	githubForm.value = openWindow('github', 'connect');
+	githubForm.value = openWindow("github", "connect");
 }
 
 function disconnectGithub() {
-	openWindow('github', 'disconnect');
+	openWindow("github", "disconnect");
 }
 
 onMounted(() => {
-	document.cookie = `igi=${$i!.token}; path=/;` +
-		' max-age=31536000;' +
-		(document.location.protocol.startsWith('https') ? ' secure' : '');
+	document.cookie =
+		`igi=${$i!.token}; path=/;` +
+		" max-age=31536000;" +
+		(document.location.protocol.startsWith("https") ? " secure" : "");
 
 	watch(integrations, () => {
 		if (integrations.value.twitter) {
@@ -87,6 +125,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'ph-share-network ph-bold ph-lg',
+	icon: "ph-share-network ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/migration.vue b/packages/client/src/pages/settings/migration.vue
index 49d244091..1dcc44f91 100644
--- a/packages/client/src/pages/settings/migration.vue
+++ b/packages/client/src/pages/settings/migration.vue
@@ -1,68 +1,78 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.moveTo }}</template>
-		<FormInput v-model="moveToAccount" class="_formBlock">
-			<template #prefix><i class="ph-airplane-takeoff ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts.moveToLabel }}</template>
-		</FormInput>
-		<FormButton primary danger @click="move(moveToAccount)">
-			{{ i18n.ts.moveAccount }}
-		</FormButton>
-		<div class="description">{{ i18n.ts.moveAccountDescription }}</div>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts.moveTo }}</template>
+			<FormInput v-model="moveToAccount" class="_formBlock">
+				<template #prefix
+					><i class="ph-airplane-takeoff ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts.moveToLabel }}</template>
+			</FormInput>
+			<FormButton primary danger @click="move(moveToAccount)">
+				{{ i18n.ts.moveAccount }}
+			</FormButton>
+			<div class="description">{{ i18n.ts.moveAccountDescription }}</div>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.moveFrom }}</template>
-		<FormInput v-model="accountAlias" class="_formBlock">
-			<template #prefix><i class="ph-airplane-landing ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts.moveFromLabel }}</template>
-		</FormInput>
-		<FormButton class="button" inline primary @click="save(accountAlias.toString())">
-			<i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}
-		</FormButton>
-		<div class="description">{{ i18n.ts.moveFromDescription }}</div>
-	</FormSection>
-</div>
+		<FormSection>
+			<template #label>{{ i18n.ts.moveFrom }}</template>
+			<FormInput v-model="accountAlias" class="_formBlock">
+				<template #prefix
+					><i class="ph-airplane-landing ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts.moveFromLabel }}</template>
+			</FormInput>
+			<FormButton
+				class="button"
+				inline
+				primary
+				@click="save(accountAlias.toString())"
+			>
+				<i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}
+			</FormButton>
+			<div class="description">{{ i18n.ts.moveFromDescription }}</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import FormSection from '@/components/form/section.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import FormSection from "@/components/form/section.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let moveToAccount = $ref('');
-let accountAlias = $ref('');
+let moveToAccount = $ref("");
+let accountAlias = $ref("");
 
 async function save(account): Promise<void> {
-	os.apiWithDialog('i/known-as', {
+	os.apiWithDialog("i/known-as", {
 		alsoKnownAs: account,
 	});
 }
 
 async function move(account): Promise<void> {
 	const confirm = await os.confirm({
-		type: 'warning',
-		text: i18n.t('migrationConfirm', { account: account.toString() }),
+		type: "warning",
+		text: i18n.t("migrationConfirm", { account: account.toString() }),
 	});
 	if (confirm.canceled) return;
-	os.apiWithDialog('i/move', {
+	os.apiWithDialog("i/move", {
 		moveToAccount: account,
 	});
 }
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
 
 <style lang="scss">
 .description {
-	font-size: .85em;
+	font-size: 0.85em;
 	padding: 1rem;
 }
 </style>
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index c081e6bc2..81e9ec875 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -1,52 +1,64 @@
 <template>
-<div class="_formRoot">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="mute">{{ i18n.ts.mutedUsers }}</option>
-		<option value="block">{{ i18n.ts.blockedUsers }}</option>
-	</MkTab>
-	<div v-if="tab === 'mute'">
-		<MkPagination :pagination="mutingPagination" class="muting">
-			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
-				<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
-					<MkAcct :user="mute.mutee"/>
-				</FormLink>
-			</template>
-		</MkPagination>
+	<div class="_formRoot">
+		<MkTab v-model="tab" style="margin-bottom: var(--margin)">
+			<option value="mute">{{ i18n.ts.mutedUsers }}</option>
+			<option value="block">{{ i18n.ts.blockedUsers }}</option>
+		</MkTab>
+		<div v-if="tab === 'mute'">
+			<MkPagination :pagination="mutingPagination" class="muting">
+				<template #empty
+					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
+				>
+				<template #default="{ items }">
+					<FormLink
+						v-for="mute in items"
+						:key="mute.id"
+						:to="userPage(mute.mutee)"
+					>
+						<MkAcct :user="mute.mutee" />
+					</FormLink>
+				</template>
+			</MkPagination>
+		</div>
+		<div v-if="tab === 'block'">
+			<MkPagination :pagination="blockingPagination" class="blocking">
+				<template #empty
+					><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template
+				>
+				<template #default="{ items }">
+					<FormLink
+						v-for="block in items"
+						:key="block.id"
+						:to="userPage(block.blockee)"
+					>
+						<MkAcct :user="block.blockee" />
+					</FormLink>
+				</template>
+			</MkPagination>
+		</div>
 	</div>
-	<div v-if="tab === 'block'">
-		<MkPagination :pagination="blockingPagination" class="blocking">
-			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
-				<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
-					<MkAcct :user="block.blockee"/>
-				</FormLink>
-			</template>
-		</MkPagination>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkTab from '@/components/MkTab.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormLink from '@/components/form/link.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkTab from "@/components/MkTab.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import FormLink from "@/components/form/link.vue";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let tab = $ref('mute');
+let tab = $ref("mute");
 
 const mutingPagination = {
-	endpoint: 'mute/list' as const,
+	endpoint: "mute/list" as const,
 	limit: 10,
 };
 
 const blockingPagination = {
-	endpoint: 'blocking/list' as const,
+	endpoint: "blocking/list" as const,
 	limit: 10,
 };
 
@@ -56,6 +68,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.muteAndBlock,
-	icon: 'ph-prohibit ph-bold ph-lg',
+	icon: "ph-prohibit ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index bea7609ac..10aeb9732 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -1,42 +1,59 @@
 <template>
-<div class="_formRoot">
-	<FormTextarea v-model="items" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.navbar }}</template>
-		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
-	</FormTextarea>
+	<div class="_formRoot">
+		<FormTextarea v-model="items" tall manual-save class="_formBlock">
+			<template #label>{{ i18n.ts.navbar }}</template>
+			<template #caption
+				><button class="_textButton" @click="addItem">
+					{{ i18n.ts.addItem }}
+				</button></template
+			>
+		</FormTextarea>
 
-	<FormRadios v-model="menuDisplay" class="_formBlock">
-		<template #label>{{ i18n.ts.display }}</template>
-		<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
-		<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
-		<!-- <option value="top">{{ i18n.ts._menuDisplay.top }}</option> -->
-		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
-	</FormRadios>
+		<FormRadios v-model="menuDisplay" class="_formBlock">
+			<template #label>{{ i18n.ts.display }}</template>
+			<option value="sideFull">
+				{{ i18n.ts._menuDisplay.sideFull }}
+			</option>
+			<option value="sideIcon">
+				{{ i18n.ts._menuDisplay.sideIcon }}
+			</option>
+			<!-- <option value="top">{{ i18n.ts._menuDisplay.top }}</option> -->
+			<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>-->
+			<!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+		</FormRadios>
 
-	<FormButton danger class="_formBlock" @click="reset()"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</FormButton>
-</div>
+		<FormButton danger class="_formBlock" @click="reset()"
+			><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+			{{ i18n.ts.default }}</FormButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { defaultStore } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const items = ref(defaultStore.state.menu.join('\n'));
+const items = ref(defaultStore.state.menu.join("\n"));
 
-const split = computed(() => items.value.trim().split('\n').filter(x => x.trim() !== ''));
-const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
+const split = computed(() =>
+	items.value
+		.trim()
+		.split("\n")
+		.filter((x) => x.trim() !== "")
+);
+const menuDisplay = computed(defaultStore.makeGetterSetter("menuDisplay"));
 
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: i18n.ts.reloadToApplySetting,
 	});
 	if (canceled) return;
@@ -45,27 +62,34 @@ async function reloadAsk() {
 }
 
 async function addItem() {
-	const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
+	const menu = Object.keys(navbarItemDef).filter(
+		(k) => !defaultStore.state.menu.includes(k)
+	);
 	const { canceled, result: item } = await os.select({
 		title: i18n.ts.addItem,
-		items: [...menu.map(k => ({
-			value: k, text: i18n.ts[navbarItemDef[k].title],
-		})), {
-			value: '-', text: i18n.ts.divider,
-		}],
+		items: [
+			...menu.map((k) => ({
+				value: k,
+				text: i18n.ts[navbarItemDef[k].title],
+			})),
+			{
+				value: "-",
+				text: i18n.ts.divider,
+			},
+		],
 	});
 	if (canceled) return;
-	items.value = [...split.value, item].join('\n');
+	items.value = [...split.value, item].join("\n");
 }
 
 async function save() {
-	defaultStore.set('menu', split.value);
+	defaultStore.set("menu", split.value);
 	await reloadAsk();
 }
 
 function reset() {
-	defaultStore.reset('menu');
-	items.value = defaultStore.state.menu.join('\n');
+	defaultStore.reset("menu");
+	items.value = defaultStore.state.menu.join("\n");
 }
 
 watch(items, async () => {
@@ -82,6 +106,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.navbar,
-	icon: 'ph-list-bullets ph-bold ph-lg',
+	icon: "ph-list-bullets ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 586da9e15..57a054d4a 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -1,82 +1,124 @@
 <template>
-<div class="_formRoot">
-	<FormButton class="_formBlock" @click="configure"><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template>{{ i18n.ts.notificationSetting }}</FormButton>
-	<FormSection>
-		<ForFormButtonmLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</ForFormButtonmLink>
-		<FormButton class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormButton>
-		<FormButton class="_formBlock" @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormButton>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts.pushNotification }}</template>
+	<div class="_formRoot">
+		<FormButton class="_formBlock" @click="configure"
+			><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template
+			>{{ i18n.ts.notificationSetting }}</FormButton
+		>
+		<FormSection>
+			<ForFormButtonmLink
+				class="_formBlock"
+				@click="readAllNotifications"
+				>{{ i18n.ts.markAsReadAllNotifications }}</ForFormButtonmLink
+			>
+			<FormButton class="_formBlock" @click="readAllUnreadNotes">{{
+				i18n.ts.markAsReadAllUnreadNotes
+			}}</FormButton>
+			<FormButton class="_formBlock" @click="readAllMessagingMessages">{{
+				i18n.ts.markAsReadAllTalkMessages
+			}}</FormButton>
+		</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.pushNotification }}</template>
 
-		<div class="_gaps_m">
-			<MkPushNotificationAllowButton ref="allowButton"/>
-			<MkSwitch :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:model-value="onChangeSendReadMessage">
-				<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
-				<template #caption>
-					<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
-						<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
-					</I18n>
-				</template>
-			</MkSwitch>
-		</div>
-	</FormSection>
-</div>
+			<div class="_gaps_m">
+				<MkPushNotificationAllowButton ref="allowButton" />
+				<MkSwitch
+					:disabled="!pushRegistrationInServer"
+					:model-value="sendReadMessage"
+					@update:model-value="onChangeSendReadMessage"
+				>
+					<template #label>{{
+						i18n.ts.sendPushNotificationReadMessage
+					}}</template>
+					<template #caption>
+						<I18n
+							:src="
+								i18n.ts.sendPushNotificationReadMessageCaption
+							"
+						>
+							<template #emptyPushNotificationMessage>{{
+								i18n.ts._notification
+									.emptyPushNotificationMessage
+							}}</template>
+						</I18n>
+					</template>
+				</MkSwitch>
+			</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { notificationTypes } from 'calckey-js';
-import FormButton from '@/components/MkButton.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
+import { defineAsyncComponent } from "vue";
+import { notificationTypes } from "calckey-js";
+import FormButton from "@/components/MkButton.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
 
-let allowButton = $shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
-let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
-let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
+let allowButton =
+	$shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
+let pushRegistrationInServer = $computed(
+	() => allowButton?.pushRegistrationInServer
+);
+let sendReadMessage = $computed(
+	() => pushRegistrationInServer?.sendReadMessage || false
+);
 
 async function readAllUnreadNotes() {
-	await os.api('i/read-all-unread-notes');
+	await os.api("i/read-all-unread-notes");
 }
 
 async function readAllMessagingMessages() {
-	await os.api('i/read-all-messaging-messages');
+	await os.api("i/read-all-messaging-messages");
 }
 
 async function readAllNotifications() {
-	await os.api('notifications/mark-all-as-read');
+	await os.api("notifications/mark-all-as-read");
 }
 
 function configure() {
-	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes,
-		showGlobalToggle: false,
-	}, {
-		done: async (res) => {
-			const { includingTypes: value } = res;
-			await os.apiWithDialog('i/update', {
-				mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
-			}).then(i => {
-				$i!.mutingNotificationTypes = i.mutingNotificationTypes;
-			});
+	const includingTypes = notificationTypes.filter(
+		(x) => !$i!.mutingNotificationTypes.includes(x)
+	);
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkNotificationSettingWindow.vue")
+		),
+		{
+			includingTypes,
+			showGlobalToggle: false,
 		},
-	}, 'closed');
+		{
+			done: async (res) => {
+				const { includingTypes: value } = res;
+				await os
+					.apiWithDialog("i/update", {
+						mutingNotificationTypes: notificationTypes.filter(
+							(x) => !value.includes(x)
+						),
+					})
+					.then((i) => {
+						$i!.mutingNotificationTypes = i.mutingNotificationTypes;
+					});
+			},
+		},
+		"closed"
+	);
 }
 
 function onChangeSendReadMessage(v: boolean) {
 	if (!pushRegistrationInServer) return;
 
-	os.apiWithDialog('sw/update-registration', {
+	os.apiWithDialog("sw/update-registration", {
 		endpoint: pushRegistrationInServer.endpoint,
 		sendReadMessage: v,
-	}).then(res => {
-		if (!allowButton)	return;
+	}).then((res) => {
+		if (!allowButton) return;
 		allowButton.pushRegistrationInServer = res;
 	});
 }
@@ -87,6 +129,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notifications,
-	icon: 'ph-bell ph-bold ph-lg',
+	icon: "ph-bell ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 1782024f8..6a069493f 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -1,37 +1,49 @@
 <template>
-<div class="_formRoot">
-	<FormSwitch v-model="$i.injectFeaturedNote" class="_formBlock" @update:modelValue="onChangeInjectFeaturedNote">
-		{{ i18n.ts.showFeaturedNotesInTimeline }}
-	</FormSwitch>
+	<div class="_formRoot">
+		<FormSwitch
+			v-model="$i.injectFeaturedNote"
+			class="_formBlock"
+			@update:modelValue="onChangeInjectFeaturedNote"
+		>
+			{{ i18n.ts.showFeaturedNotesInTimeline }}
+		</FormSwitch>
 
-	<!--
+		<!--
 	<FormSwitch v-model="reportError" class="_formBlock">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></FormSwitch>
 	-->
 
-	<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
+		<FormLink to="/settings/account-info" class="_formBlock">{{
+			i18n.ts.accountInfo
+		}}</FormLink>
 
-	<FormLink to="/registry" class="_formBlock"><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template>{{ i18n.ts.registry }}</FormLink>
+		<FormLink to="/registry" class="_formBlock"
+			><template #icon><i class="ph-gear-six ph-bold ph-lg"></i></template
+			>{{ i18n.ts.registry }}</FormLink
+		>
 
-	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="ph-warning ph-bold ph-lg"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
-</div>
+		<FormLink to="/settings/delete-account" class="_formBlock"
+			><template #icon><i class="ph-warning ph-bold ph-lg"></i></template
+			>{{ i18n.ts.closeAccount }}</FormLink
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { popup } from '@/os';
-import { defaultStore } from '@/store';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, defineAsyncComponent } from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import MkButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { popup } from "@/os";
+import { defaultStore } from "@/store";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const reportError = computed(defaultStore.makeGetterSetter('reportError'));
+const reportError = computed(defaultStore.makeGetterSetter("reportError"));
 
 function onChangeInjectFeaturedNote(v) {
-	os.api('i/update', {
+	os.api("i/update", {
 		injectFeaturedNote: v,
 	}).then((i) => {
 		$i!.injectFeaturedNote = i.injectFeaturedNote;
@@ -44,6 +56,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'ph-dots-three-outline ph-bold ph-lg',
+	icon: "ph-dots-three-outline ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index 25895c93f..ab678cf99 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -1,42 +1,50 @@
 <template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts._plugin.installWarn }}</FormInfo>
+	<div class="_formRoot">
+		<FormInfo warn class="_formBlock">{{
+			i18n.ts._plugin.installWarn
+		}}</FormInfo>
 
-	<FormTextarea v-model="code" tall class="_formBlock">
-		<template #label>{{ i18n.ts.code }}</template>
-	</FormTextarea>
+		<FormTextarea v-model="code" tall class="_formBlock">
+			<template #label>{{ i18n.ts.code }}</template>
+		</FormTextarea>
 
-	<div class="_formBlock">
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.install }}</FormButton>
+		<div class="_formBlock">
+			<FormButton :disabled="code == null" primary inline @click="install"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.install }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, ref } from 'vue';
-import { AiScript, parse } from '@syuilo/aiscript';
-import { serialize } from '@syuilo/aiscript/built/serializer';
-import { v4 as uuid } from 'uuid';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { defineAsyncComponent, nextTick, ref } from "vue";
+import { AiScript, parse } from "@syuilo/aiscript";
+import { serialize } from "@syuilo/aiscript/built/serializer";
+import { v4 as uuid } from "uuid";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const code = ref(null);
 
 function installPlugin({ id, meta, ast, token }) {
-	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
-		...meta,
-		id,
-		active: true,
-		configData: {},
-		token: token,
-		ast: ast,
-	}));
+	ColdDeviceStorage.set(
+		"plugins",
+		ColdDeviceStorage.get("plugins").concat({
+			...meta,
+			id,
+			active: true,
+			configData: {},
+			token: token,
+			ast: ast,
+		})
+	);
 }
 
 async function install() {
@@ -45,8 +53,8 @@ async function install() {
 		ast = parse(code.value);
 	} catch (err) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -54,8 +62,8 @@ async function install() {
 	const meta = AiScript.collectMetadata(ast);
 	if (meta == null) {
 		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
+			type: "error",
+			text: "No metadata found :(",
 		});
 		return;
 	}
@@ -63,44 +71,65 @@ async function install() {
 	const metadata = meta.get(null);
 	if (metadata == null) {
 		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
+			type: "error",
+			text: "No metadata found :(",
 		});
 		return;
 	}
 
-	const { name, version, author, description, permissions, config } = metadata;
+	const { name, version, author, description, permissions, config } =
+		metadata;
 	if (name == null || version == null || author == null) {
 		os.alert({
-			type: 'error',
-			text: 'Required property not found :(',
+			type: "error",
+			text: "Required property not found :(",
 		});
 		return;
 	}
 
-	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
-			title: i18n.ts.tokenRequested,
-			information: i18n.ts.pluginTokenRequestedDescription,
-			initialName: name,
-			initialPermissions: permissions,
-		}, {
-			done: async result => {
-				const { name, permissions } = result;
-				const { token } = await os.api('miauth/gen-token', {
-					session: null,
-					name: name,
-					permission: permissions,
-				});
-				res(token);
-			},
-		}, 'closed');
-	});
+	const token =
+		permissions == null || permissions.length === 0
+			? null
+			: await new Promise((res, rej) => {
+					os.popup(
+						defineAsyncComponent(
+							() =>
+								import("@/components/MkTokenGenerateWindow.vue")
+						),
+						{
+							title: i18n.ts.tokenRequested,
+							information:
+								i18n.ts.pluginTokenRequestedDescription,
+							initialName: name,
+							initialPermissions: permissions,
+						},
+						{
+							done: async (result) => {
+								const { name, permissions } = result;
+								const { token } = await os.api(
+									"miauth/gen-token",
+									{
+										session: null,
+										name: name,
+										permission: permissions,
+									}
+								);
+								res(token);
+							},
+						},
+						"closed"
+					);
+			  });
 
 	installPlugin({
 		id: uuid(),
 		meta: {
-			name, version, author, description, permissions, config,
+			name,
+			version,
+			author,
+			description,
+			permissions,
+			config,
 		},
 		token,
 		ast: serialize(ast),
@@ -119,6 +148,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._plugin.install,
-	icon: 'ph-download-simple ph-bold ph-lg',
+	icon: "ph-download-simple ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 7949bff03..6120c483e 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -1,53 +1,84 @@
 <template>
-<div class="_formRoot">
-	<FormLink to="/settings/plugin/install"><template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
+	<div class="_formRoot">
+		<FormLink to="/settings/plugin/install"
+			><template #icon
+				><i class="ph-download-simple ph-bold ph-lg"></i></template
+			>{{ i18n.ts._plugin.install }}</FormLink
+		>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.manage }}</template>
-		<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel" style="padding: 20px;">
-			<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
+		<FormSection>
+			<template #label>{{ i18n.ts.manage }}</template>
+			<div
+				v-for="plugin in plugins"
+				:key="plugin.id"
+				class="_formBlock _panel"
+				style="padding: 20px"
+			>
+				<span style="display: flex"
+					><b>{{ plugin.name }}</b
+					><span style="margin-left: auto"
+						>v{{ plugin.version }}</span
+					></span
+				>
 
-			<FormSwitch class="_formBlock" :model-value="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
+				<FormSwitch
+					class="_formBlock"
+					:model-value="plugin.active"
+					@update:modelValue="changeActive(plugin, $event)"
+					>{{ i18n.ts.makeActive }}</FormSwitch
+				>
 
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.author }}</template>
-				<template #value>{{ plugin.author }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ plugin.description }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.permission }}</template>
-				<template #value>{{ plugin.permission }}</template>
-			</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.author }}</template>
+					<template #value>{{ plugin.author }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.description }}</template>
+					<template #value>{{ plugin.description }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts.permission }}</template>
+					<template #value>{{ plugin.permission }}</template>
+				</MkKeyValue>
 
-			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ph-gear-six ph-bold ph-lg"></i> {{ i18n.ts.settings }}</MkButton>
-				<MkButton inline danger @click="uninstall(plugin)"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.uninstall }}</MkButton>
+				<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
+					<MkButton
+						v-if="plugin.config"
+						inline
+						@click="config(plugin)"
+						><i class="ph-gear-six ph-bold ph-lg"></i>
+						{{ i18n.ts.settings }}</MkButton
+					>
+					<MkButton inline danger @click="uninstall(plugin)"
+						><i class="ph-trash ph-bold ph-lg"></i>
+						{{ i18n.ts.uninstall }}</MkButton
+					>
+				</div>
 			</div>
-		</div>
-	</FormSection>
-</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref } from 'vue';
-import FormLink from '@/components/form/link.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { nextTick, ref } from "vue";
+import FormLink from "@/components/form/link.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const plugins = ref(ColdDeviceStorage.get('plugins'));
+const plugins = ref(ColdDeviceStorage.get("plugins"));
 
 function uninstall(plugin) {
-	ColdDeviceStorage.set('plugins', plugins.value.filter(x => x.id !== plugin.id));
+	ColdDeviceStorage.set(
+		"plugins",
+		plugins.value.filter((x) => x.id !== plugin.id)
+	);
 	os.success();
 	nextTick(() => {
 		unisonReload();
@@ -64,9 +95,9 @@ async function config(plugin) {
 	const { canceled, result } = await os.form(plugin.name, config);
 	if (canceled) return;
 
-	const coldPlugins = ColdDeviceStorage.get('plugins');
-	coldPlugins.find(p => p.id === plugin.id)!.configData = result;
-	ColdDeviceStorage.set('plugins', coldPlugins);
+	const coldPlugins = ColdDeviceStorage.get("plugins");
+	coldPlugins.find((p) => p.id === plugin.id)!.configData = result;
+	ColdDeviceStorage.set("plugins", coldPlugins);
 
 	nextTick(() => {
 		location.reload();
@@ -74,9 +105,9 @@ async function config(plugin) {
 }
 
 function changeActive(plugin, active) {
-	const coldPlugins = ColdDeviceStorage.get('plugins');
-	coldPlugins.find(p => p.id === plugin.id)!.active = active;
-	ColdDeviceStorage.set('plugins', coldPlugins);
+	const coldPlugins = ColdDeviceStorage.get("plugins");
+	coldPlugins.find((p) => p.id === plugin.id)!.active = active;
+	ColdDeviceStorage.set("plugins", coldPlugins);
 
 	nextTick(() => {
 		location.reload();
@@ -89,10 +120,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.plugins,
-	icon: 'ph-plug ph-bold ph-lg',
+	icon: "ph-plug ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index b9bc979f7..b58a42597 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -1,113 +1,145 @@
 <template>
-<div class="_formRoot">
-	<div :class="$style.buttons">
-		<MkButton inline primary @click="saveNew">{{ ts._preferencesBackups.saveNew }}</MkButton>
-		<MkButton inline @click="loadFile">{{ ts._preferencesBackups.loadFile }}</MkButton>
-	</div>
-
-	<FormSection>
-		<template #label>{{ ts._preferencesBackups.list }}</template>
-		<template v-if="profiles && Object.keys(profiles).length > 0">
-			<div
-				v-for="(profile, id) in profiles"
-				:key="id"
-				class="_formBlock _panel"
-				:class="$style.profile"
-				@click="$event => menu($event, id)"
-				@contextmenu.prevent.stop="$event => menu($event, id)"
-			>
-				<div :class="$style.profileName">{{ profile.name }}</div>
-				<div :class="$style.profileTime">{{ t('_preferencesBackups.createdAt', { date: (new Date(profile.createdAt)).toLocaleDateString(), time: (new Date(profile.createdAt)).toLocaleTimeString() }) }}</div>
-				<div v-if="profile.updatedAt" :class="$style.profileTime">{{ t('_preferencesBackups.updatedAt', { date: (new Date(profile.updatedAt)).toLocaleDateString(), time: (new Date(profile.updatedAt)).toLocaleTimeString() }) }}</div>
-			</div>
-		</template>
-		<div v-else-if="profiles">
-			<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+	<div class="_formRoot">
+		<div :class="$style.buttons">
+			<MkButton inline primary @click="saveNew">{{
+				ts._preferencesBackups.saveNew
+			}}</MkButton>
+			<MkButton inline @click="loadFile">{{
+				ts._preferencesBackups.loadFile
+			}}</MkButton>
 		</div>
-		<MkLoading v-else/>
-	</FormSection>
-</div>
+
+		<FormSection>
+			<template #label>{{ ts._preferencesBackups.list }}</template>
+			<template v-if="profiles && Object.keys(profiles).length > 0">
+				<div
+					v-for="(profile, id) in profiles"
+					:key="id"
+					class="_formBlock _panel"
+					:class="$style.profile"
+					@click="($event) => menu($event, id)"
+					@contextmenu.prevent.stop="($event) => menu($event, id)"
+				>
+					<div :class="$style.profileName">{{ profile.name }}</div>
+					<div :class="$style.profileTime">
+						{{
+							t("_preferencesBackups.createdAt", {
+								date: new Date(
+									profile.createdAt
+								).toLocaleDateString(),
+								time: new Date(
+									profile.createdAt
+								).toLocaleTimeString(),
+							})
+						}}
+					</div>
+					<div v-if="profile.updatedAt" :class="$style.profileTime">
+						{{
+							t("_preferencesBackups.updatedAt", {
+								date: new Date(
+									profile.updatedAt
+								).toLocaleDateString(),
+								time: new Date(
+									profile.updatedAt
+								).toLocaleTimeString(),
+							})
+						}}
+					</div>
+				</div>
+			</template>
+			<div v-else-if="profiles">
+				<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+			</div>
+			<MkLoading v-else />
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, useCssModule } from 'vue';
-import { v4 as uuid } from 'uuid';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { version, host } from '@/config';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onMounted, onUnmounted, useCssModule } from "vue";
+import { v4 as uuid } from "uuid";
+import FormSection from "@/components/form/section.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { stream } from "@/stream";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { version, host } from "@/config";
+import { definePageMetadata } from "@/scripts/page-metadata";
 const { t, ts } = i18n;
 
 useCssModule();
 
-const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
-	'menu',
-	'visibility',
-	'localOnly',
-	'statusbars',
-	'widgets',
-	'tl',
-	'overridedDeviceKind',
-	'showLocalPostsInTimeline',
-	'serverDisconnectedBehavior',
-	'nsfw',
-	'showAds',
-	'animation',
-	'animatedMfm',
-	'loadRawImages',
-	'imageNewTab',
-	'disableShowingAnimatedImages',
-	'disablePagesScript',
-	'enterSendsMessage',
-	'useOsNativeEmojis',
-	'disableDrawer',
-	'useBlurEffectForModal',
-	'useBlurEffect',
-	'showFixedPostForm',
-	'enableInfiniteScroll',
-	'useReactionPickerForContextMenu',
-	'showGapBetweenNotesInTimeline',
-	'instanceTicker',
-	'reactionPickerSize',
-	'reactionPickerWidth',
-	'reactionPickerHeight',
-	'reactionPickerUseDrawerForMobile',
-	'defaultSideView',
-	'menuDisplay',
-	'reportError',
-	'squareAvatars',
-	'numberOfPageCache',
-	'showUpdates',
-	'swipeOnDesktop',
-	'showAdminUpdates',
-	'enableCustomKaTeXMacro',
+const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [
+	"menu",
+	"visibility",
+	"localOnly",
+	"statusbars",
+	"widgets",
+	"tl",
+	"overridedDeviceKind",
+	"showLocalPostsInTimeline",
+	"serverDisconnectedBehavior",
+	"nsfw",
+	"showAds",
+	"animation",
+	"animatedMfm",
+	"loadRawImages",
+	"imageNewTab",
+	"disableShowingAnimatedImages",
+	"disablePagesScript",
+	"enterSendsMessage",
+	"useOsNativeEmojis",
+	"disableDrawer",
+	"useBlurEffectForModal",
+	"useBlurEffect",
+	"showFixedPostForm",
+	"enableInfiniteScroll",
+	"useReactionPickerForContextMenu",
+	"showGapBetweenNotesInTimeline",
+	"instanceTicker",
+	"reactionPickerSize",
+	"reactionPickerWidth",
+	"reactionPickerHeight",
+	"reactionPickerUseDrawerForMobile",
+	"defaultSideView",
+	"menuDisplay",
+	"reportError",
+	"squareAvatars",
+	"numberOfPageCache",
+	"showUpdates",
+	"swipeOnDesktop",
+	"showAdminUpdates",
+	"enableCustomKaTeXMacro",
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
-	'lightTheme',
-	'darkTheme',
-	'syncDeviceDarkMode',
-	'plugins',
-	'mediaVolume',
-	'sound_masterVolume',
-	'sound_note',
-	'sound_noteMy',
-	'sound_notification',
-	'sound_chat',
-	'sound_chatBg',
-	'sound_antenna',
-	'sound_channel',
+	"lightTheme",
+	"darkTheme",
+	"syncDeviceDarkMode",
+	"plugins",
+	"mediaVolume",
+	"sound_masterVolume",
+	"sound_note",
+	"sound_noteMy",
+	"sound_notification",
+	"sound_chat",
+	"sound_chatBg",
+	"sound_antenna",
+	"sound_channel",
 ];
 
-const scope = ['clientPreferencesProfiles'];
+const scope = ["clientPreferencesProfiles"];
 
-const profileProps = ['name', 'createdAt', 'updatedAt', 'misskeyVersion', 'settings'];
+const profileProps = [
+	"name",
+	"createdAt",
+	"updatedAt",
+	"misskeyVersion",
+	"settings",
+];
 
 type Profile = {
 	name: string;
@@ -119,49 +151,54 @@ type Profile = {
 		hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
 		cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
 		fontSize: string | null;
-		useSystemFont: 't' | null;
+		useSystemFont: "t" | null;
 		wallpaper: string | null;
 	};
 };
 
-const connection = $i && stream.useChannel('main');
+const connection = $i && stream.useChannel("main");
 
 let profiles = $ref<Record<string, Profile> | null>(null);
 
-os.api('i/registry/get-all', { scope })
-	.then(res => {
-		profiles = res || {};
-	});
+os.api("i/registry/get-all", { scope }).then((res) => {
+	profiles = res || {};
+});
 
 function isObject(value: unknown): value is Record<string, unknown> {
-	return value != null && typeof value === 'object' && !Array.isArray(value);
+	return value != null && typeof value === "object" && !Array.isArray(value);
 }
 
 function validate(profile: unknown): void {
-	if (!isObject(profile)) throw new Error('not an object');
+	if (!isObject(profile)) throw new Error("not an object");
 
 	// Check if unnecessary properties exist
-	if (Object.keys(profile).some(key => !profileProps.includes(key))) throw new Error('Unnecessary properties exist');
+	if (Object.keys(profile).some((key) => !profileProps.includes(key)))
+		throw new Error("Unnecessary properties exist");
+
+	if (!profile.name) throw new Error("Missing required prop: name");
+	if (!profile.misskeyVersion)
+		throw new Error("Missing required prop: misskeyVersion");
 
-	if (!profile.name) throw new Error('Missing required prop: name');
-	if (!profile.misskeyVersion) throw new Error('Missing required prop: misskeyVersion');
-	
 	// Check if createdAt and updatedAt is Date
 	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
-	if (!profile.createdAt || Number.isNaN(new Date(profile.createdAt).getTime())) throw new Error('createdAt is falsy or not Date');
+	if (
+		!profile.createdAt ||
+		Number.isNaN(new Date(profile.createdAt).getTime())
+	)
+		throw new Error("createdAt is falsy or not Date");
 	if (profile.updatedAt) {
 		if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
-			throw new Error('updatedAt is not Date');
+			throw new Error("updatedAt is not Date");
 		}
 	} else if (profile.updatedAt !== null) {
-		throw new Error('updatedAt is not null');
+		throw new Error("updatedAt is not null");
 	}
 
-	if (!profile.settings) throw new Error('Missing required prop: settings');
-	if (!isObject(profile.settings)) throw new Error('Invalid prop: settings');
+	if (!profile.settings) throw new Error("Missing required prop: settings");
+	if (!isObject(profile.settings)) throw new Error("Invalid prop: settings");
 }
 
-function getSettings(): Profile['settings'] {
+function getSettings(): Profile["settings"] {
 	const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
 	for (const key of defaultStoreSaveKeys) {
 		hot[key] = defaultStore.state[key];
@@ -175,9 +212,9 @@ function getSettings(): Profile['settings'] {
 	return {
 		hot,
 		cold,
-		fontSize: localStorage.getItem('fontSize'),
-		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
-		wallpaper: localStorage.getItem('wallpaper'),
+		fontSize: localStorage.getItem("fontSize"),
+		useSystemFont: localStorage.getItem("useSystemFont") as "t" | null,
+		wallpaper: localStorage.getItem("wallpaper"),
 	};
 }
 
@@ -189,28 +226,32 @@ async function saveNew(): Promise<void> {
 	});
 	if (canceled) return;
 
-	if (Object.values(profiles).some(x => x.name === name)) {
+	if (Object.values(profiles).some((x) => x.name === name)) {
 		return os.alert({
 			title: ts._preferencesBackups.cannotSave,
-			text: t('_preferencesBackups.nameAlreadyExists', { name }),
+			text: t("_preferencesBackups.nameAlreadyExists", { name }),
 		});
 	}
 
 	const id = uuid();
 	const profile: Profile = {
 		name,
-		createdAt: (new Date()).toISOString(),
+		createdAt: new Date().toISOString(),
 		updatedAt: null,
 		misskeyVersion: version,
 		host,
 		settings: getSettings(),
 	};
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+	await os.apiWithDialog("i/registry/set", {
+		scope,
+		key: id,
+		value: profile,
+	});
 }
 
 function loadFile(): void {
-	const input = document.createElement('input');
-	input.type = 'file';
+	const input = document.createElement("input");
+	input.type = "file";
 	input.multiple = false;
 	input.onchange = async () => {
 		if (!profiles) return;
@@ -218,9 +259,9 @@ function loadFile(): void {
 
 		const file = input.files[0];
 
-		if (file.type !== 'application/json') {
+		if (file.type !== "application/json") {
 			return os.alert({
-				type: 'error',
+				type: "error",
 				title: ts._preferencesBackups.cannotLoad,
 				text: ts._preferencesBackups.invalidFile,
 			});
@@ -232,14 +273,18 @@ function loadFile(): void {
 			validate(profile);
 		} catch (err) {
 			return os.alert({
-				type: 'error',
+				type: "error",
 				title: ts._preferencesBackups.cannotLoad,
 				text: err?.message,
 			});
 		}
 
 		const id = uuid();
-		await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+		await os.apiWithDialog("i/registry/set", {
+			scope,
+			key: id,
+			value: profile,
+		});
 
 		// 一応廃棄
 		(window as any).__misskey_input_ref__ = null;
@@ -258,9 +303,9 @@ async function applyProfile(id: string): Promise<void> {
 	const profile = profiles[id];
 
 	const { canceled: cancel1 } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		title: ts._preferencesBackups.apply,
-		text: t('_preferencesBackups.applyConfirm', { name: profile.name }),
+		text: t("_preferencesBackups.applyConfirm", { name: profile.name }),
 	});
 	if (cancel1) return;
 
@@ -274,7 +319,7 @@ async function applyProfile(id: string): Promise<void> {
 			defaultStore.set(key, settings.hot[key]);
 		}
 	}
-	
+
 	// coldDeviceStorage
 	for (const key of coldDeviceStorageSaveKeys) {
 		if (settings.cold[key] !== undefined) {
@@ -284,27 +329,27 @@ async function applyProfile(id: string): Promise<void> {
 
 	// fontSize
 	if (settings.fontSize) {
-		localStorage.setItem('fontSize', settings.fontSize);
+		localStorage.setItem("fontSize", settings.fontSize);
 	} else {
-		localStorage.removeItem('fontSize');
+		localStorage.removeItem("fontSize");
 	}
 
 	// useSystemFont
 	if (settings.useSystemFont) {
-		localStorage.setItem('useSystemFont', settings.useSystemFont);
+		localStorage.setItem("useSystemFont", settings.useSystemFont);
 	} else {
-		localStorage.removeItem('useSystemFont');
+		localStorage.removeItem("useSystemFont");
 	}
 
 	// wallpaper
 	if (settings.wallpaper != null) {
-		localStorage.setItem('wallpaper', settings.wallpaper);
+		localStorage.setItem("wallpaper", settings.wallpaper);
 	} else {
-		localStorage.removeItem('wallpaper');
+		localStorage.removeItem("wallpaper");
 	}
 
 	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
+		type: "info",
 		text: ts.reloadToApplySetting,
 	});
 	if (cancel2) return;
@@ -316,13 +361,13 @@ async function deleteProfile(id: string): Promise<void> {
 	if (!profiles) return;
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		title: ts.delete,
-		text: t('deleteAreYouSure', { x: profiles[id].name }),
+		text: t("deleteAreYouSure", { x: profiles[id].name }),
 	});
 	if (canceled) return;
 
-	await os.apiWithDialog('i/registry/remove', { scope, key: id });
+	await os.apiWithDialog("i/registry/remove", { scope, key: id });
 	delete profiles[id];
 }
 
@@ -332,21 +377,25 @@ async function save(id: string): Promise<void> {
 	const { name, createdAt } = profiles[id];
 
 	const { canceled } = await os.confirm({
-		type: 'info',
+		type: "info",
 		title: ts._preferencesBackups.save,
-		text: t('_preferencesBackups.saveConfirm', { name }),
+		text: t("_preferencesBackups.saveConfirm", { name }),
 	});
 	if (canceled) return;
 
 	const profile: Profile = {
 		name,
 		createdAt,
-		updatedAt: (new Date()).toISOString(),
+		updatedAt: new Date().toISOString(),
 		misskeyVersion: version,
 		host,
 		settings: getSettings(),
 	};
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+	await os.apiWithDialog("i/registry/set", {
+		scope,
+		key: id,
+		value: profile,
+	});
 }
 
 async function rename(id: string): Promise<void> {
@@ -357,74 +406,106 @@ async function rename(id: string): Promise<void> {
 	});
 	if (cancel1 || profiles[id].name === name) return;
 
-	if (Object.values(profiles).some(x => x.name === name)) {
+	if (Object.values(profiles).some((x) => x.name === name)) {
 		return os.alert({
 			title: ts._preferencesBackups.cannotSave,
-			text: t('_preferencesBackups.nameAlreadyExists', { name }),
+			text: t("_preferencesBackups.nameAlreadyExists", { name }),
 		});
 	}
 
 	const registry = Object.assign({}, { ...profiles[id] });
 
 	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
+		type: "info",
 		title: ts._preferencesBackups.rename,
-		text: t('_preferencesBackups.renameConfirm', { old: registry.name, new: name }),
+		text: t("_preferencesBackups.renameConfirm", {
+			old: registry.name,
+			new: name,
+		}),
 	});
 	if (cancel2) return;
 
 	registry.name = name;
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: registry });
+	await os.apiWithDialog("i/registry/set", {
+		scope,
+		key: id,
+		value: registry,
+	});
 }
 
 function menu(ev: MouseEvent, profileId: string) {
 	if (!profiles) return;
 
-	return os.popupMenu([{
-		text: ts._preferencesBackups.apply,
-		icon: 'ph-caret-circle-down ph-bold ph-lg',
-		action: () => applyProfile(profileId),
-	}, {
-		type: 'a',
-		text: ts.download,
-		icon: 'ph-download-simple ph-bold ph-lg',
-		href: URL.createObjectURL(new Blob([JSON.stringify(profiles[profileId], null, 2)], { type: 'application/json' })),
-		download: `${profiles[profileId].name}.json`,
-	}, null, {
-		text: ts.rename,
-		icon: 'ph-cursor-text ph-bold ph-lg',
-		action: () => rename(profileId),
-	}, {
-		text: ts._preferencesBackups.save,
-		icon: 'ph-floppy-disk ph-bold ph-lg',
-		action: () => save(profileId),
-	}, null, {
-		text: ts._preferencesBackups.delete,
-		icon: 'ph-trash ph-bold ph-lg',
-		action: () => deleteProfile(profileId),
-		danger: true,
-	}], ev.currentTarget ?? ev.target);
+	return os.popupMenu(
+		[
+			{
+				text: ts._preferencesBackups.apply,
+				icon: "ph-caret-circle-down ph-bold ph-lg",
+				action: () => applyProfile(profileId),
+			},
+			{
+				type: "a",
+				text: ts.download,
+				icon: "ph-download-simple ph-bold ph-lg",
+				href: URL.createObjectURL(
+					new Blob([JSON.stringify(profiles[profileId], null, 2)], {
+						type: "application/json",
+					})
+				),
+				download: `${profiles[profileId].name}.json`,
+			},
+			null,
+			{
+				text: ts.rename,
+				icon: "ph-cursor-text ph-bold ph-lg",
+				action: () => rename(profileId),
+			},
+			{
+				text: ts._preferencesBackups.save,
+				icon: "ph-floppy-disk ph-bold ph-lg",
+				action: () => save(profileId),
+			},
+			null,
+			{
+				text: ts._preferencesBackups.delete,
+				icon: "ph-trash ph-bold ph-lg",
+				action: () => deleteProfile(profileId),
+				danger: true,
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 onMounted(() => {
 	// streamingのuser storage updateイベントを監視して更新
-	connection?.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
-		if (!recievedScope || recievedScope.length !== scope.length || recievedScope[0] !== scope[0]) return;
-		if (!profiles) return;
+	connection?.on(
+		"registryUpdated",
+		({ scope: recievedScope, key, value }) => {
+			if (
+				!recievedScope ||
+				recievedScope.length !== scope.length ||
+				recievedScope[0] !== scope[0]
+			)
+				return;
+			if (!profiles) return;
 
-		profiles[key] = value;
-	});
+			profiles[key] = value;
+		}
+	);
 });
 
 onUnmounted(() => {
-	connection?.off('registryUpdated');
+	connection?.off("registryUpdated");
 });
 
-definePageMetadata(computed(() => ({
-	title: ts.preferencesBackups,
-	icon: 'ph-floppy-disk ph-bold ph-lg',
-	bg: 'var(--bg)',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: ts.preferencesBackups,
+		icon: "ph-floppy-disk ph-bold ph-lg",
+		bg: "var(--bg)",
+	}))
+);
 </script>
 
 <style lang="scss" module>
@@ -443,8 +524,8 @@ definePageMetadata(computed(() => ({
 	}
 
 	&Time {
-		font-size: .85em;
-		opacity: .7;
+		font-size: 0.85em;
+		opacity: 0.7;
 	}
 }
 </style>
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 0a8de0b38..c3ab41a64 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -1,68 +1,142 @@
 <template>
-<div class="_formRoot">
-	<FormSwitch v-model="isLocked" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
-	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
+	<div class="_formRoot">
+		<FormSwitch
+			v-model="isLocked"
+			class="_formBlock"
+			@update:modelValue="save()"
+			>{{ i18n.ts.makeFollowManuallyApprove
+			}}<template #caption>{{
+				i18n.ts.lockedAccountInfo
+			}}</template></FormSwitch
+		>
+		<FormSwitch
+			v-if="isLocked"
+			v-model="autoAcceptFollowed"
+			class="_formBlock"
+			@update:modelValue="save()"
+			>{{ i18n.ts.autoAcceptFollowed }}</FormSwitch
+		>
 
-	<FormSwitch v-model="publicReactions" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.makeReactionsPublic }}
-		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
-	</FormSwitch>
+		<FormSwitch
+			v-model="publicReactions"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.makeReactionsPublic }}
+			<template #caption>{{
+				i18n.ts.makeReactionsPublicDescription
+			}}</template>
+		</FormSwitch>
 
-	<FormSelect v-model="ffVisibility" class="_formBlock" @update:modelValue="save()">
-		<template #label>{{ i18n.ts.ffVisibility }}</template>
-		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
-		<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
-		<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
-		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
-	</FormSelect>
+		<FormSelect
+			v-model="ffVisibility"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			<template #label>{{ i18n.ts.ffVisibility }}</template>
+			<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
+			<option value="followers">
+				{{ i18n.ts._ffVisibility.followers }}
+			</option>
+			<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
+			<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
+		</FormSelect>
 
-	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.hideOnlineStatus }}
-		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
-	</FormSwitch>
-	<FormSwitch v-model="noCrawle" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.noCrawle }}
-		<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
-	</FormSwitch>
-	<FormSwitch v-model="isExplorable" class="_formBlock" @update:modelValue="save()">
-		{{ i18n.ts.makeExplorable }}
-		<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
-	</FormSwitch>
+		<FormSwitch
+			v-model="hideOnlineStatus"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.hideOnlineStatus }}
+			<template #caption>{{
+				i18n.ts.hideOnlineStatusDescription
+			}}</template>
+		</FormSwitch>
+		<FormSwitch
+			v-model="noCrawle"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.noCrawle }}
+			<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
+		</FormSwitch>
+		<FormSwitch
+			v-model="isExplorable"
+			class="_formBlock"
+			@update:modelValue="save()"
+		>
+			{{ i18n.ts.makeExplorable }}
+			<template #caption>{{
+				i18n.ts.makeExplorableDescription
+			}}</template>
+		</FormSwitch>
 
-	<FormSection>
-		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
-		<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
-			<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
-			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
-			<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
-			<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
-			<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
+		<FormSection>
+			<FormSwitch
+				v-model="rememberNoteVisibility"
+				class="_formBlock"
+				@update:modelValue="save()"
+				>{{ i18n.ts.rememberNoteVisibility }}</FormSwitch
+			>
+			<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
+				<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
+				<template v-if="defaultNoteVisibility === 'public'" #suffix>{{
+					i18n.ts._visibility.public
+				}}</template>
+				<template
+					v-else-if="defaultNoteVisibility === 'home'"
+					#suffix
+					>{{ i18n.ts._visibility.home }}</template
+				>
+				<template
+					v-else-if="defaultNoteVisibility === 'followers'"
+					#suffix
+					>{{ i18n.ts._visibility.followers }}</template
+				>
+				<template
+					v-else-if="defaultNoteVisibility === 'specified'"
+					#suffix
+					>{{ i18n.ts._visibility.specified }}</template
+				>
 
-			<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
-				<option value="public">{{ i18n.ts._visibility.public }}</option>
-				<option value="home">{{ i18n.ts._visibility.home }}</option>
-				<option value="followers">{{ i18n.ts._visibility.followers }}</option>
-				<option value="specified">{{ i18n.ts._visibility.specified }}</option>
-			</FormSelect>
-			<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ i18n.ts._visibility.localOnly }}</FormSwitch>
-		</FormFolder>
-	</FormSection>
+				<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
+					<option value="public">
+						{{ i18n.ts._visibility.public }}
+					</option>
+					<option value="home">{{ i18n.ts._visibility.home }}</option>
+					<option value="followers">
+						{{ i18n.ts._visibility.followers }}
+					</option>
+					<option value="specified">
+						{{ i18n.ts._visibility.specified }}
+					</option>
+				</FormSelect>
+				<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{
+					i18n.ts._visibility.localOnly
+				}}</FormSwitch>
+			</FormFolder>
+		</FormSection>
 
-	<FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.keepCw }}</FormSwitch>
-</div>
+		<FormSwitch
+			v-model="keepCw"
+			class="_formBlock"
+			@update:modelValue="save()"
+			>{{ i18n.ts.keepCw }}</FormSwitch
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSection from "@/components/form/section.vue";
+import FormFolder from "@/components/form/folder.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let isLocked = $ref($i.isLocked);
 let autoAcceptFollowed = $ref($i.autoAcceptFollowed);
@@ -72,13 +146,19 @@ let hideOnlineStatus = $ref($i.hideOnlineStatus);
 let publicReactions = $ref($i.publicReactions);
 let ffVisibility = $ref($i.ffVisibility);
 
-let defaultNoteVisibility = $computed(defaultStore.makeGetterSetter('defaultNoteVisibility'));
-let defaultNoteLocalOnly = $computed(defaultStore.makeGetterSetter('defaultNoteLocalOnly'));
-let rememberNoteVisibility = $computed(defaultStore.makeGetterSetter('rememberNoteVisibility'));
-let keepCw = $computed(defaultStore.makeGetterSetter('keepCw'));
+let defaultNoteVisibility = $computed(
+	defaultStore.makeGetterSetter("defaultNoteVisibility")
+);
+let defaultNoteLocalOnly = $computed(
+	defaultStore.makeGetterSetter("defaultNoteLocalOnly")
+);
+let rememberNoteVisibility = $computed(
+	defaultStore.makeGetterSetter("rememberNoteVisibility")
+);
+let keepCw = $computed(defaultStore.makeGetterSetter("keepCw"));
 
 function save() {
-	os.api('i/update', {
+	os.api("i/update", {
 		isLocked: !!isLocked,
 		autoAcceptFollowed: !!autoAcceptFollowed,
 		noCrawle: !!noCrawle,
@@ -95,6 +175,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.privacy,
-	icon: 'ph-lock-open ph-bold ph-lg',
+	icon: "ph-lock-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 4e51a339b..83062144c 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -1,89 +1,185 @@
 <template>
-<div class="_formRoot">
-	<div v-if="saveButton == true">
-		<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
-	</div>
-	<br/>
-	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
-		<div class="avatar">
-			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
-			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+	<div class="_formRoot">
+		<div v-if="saveButton == true">
+			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
 		</div>
-		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
-	</div>
-
-	<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts._profile.name }}</template>
-	</FormInput>
-
-	<FormTextarea v-model="profile.description" :max="500" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts._profile.description }}</template>
-		<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
-	</FormTextarea>
-
-	<FormInput v-model="profile.location" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.location }}</template>
-		<template #prefix><i class="ph-map-pin ph-bold ph-lg"></i></template>
-		<template #caption>{{ i18n.ts._profile.locationDescription }}</template>
-	</FormInput>
-
-	<FormInput v-model="profile.birthday" type="date" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.birthday }}</template>
-		<template #prefix><i class="ph-cake ph-bold ph-lg"></i></template>
-	</FormInput>
-
-	<FormSelect v-model="profile.lang" class="_formBlock">
-		<template #label>{{ i18n.ts.language }}</template>
-		<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
-	</FormSelect>
-
-	<FormSlot class="_formBlock">
-		<FormFolder>
-			<template #icon><i class="ph-table ph-bold ph-lg"></i></template>
-			<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
-
-			<div class="_formRoot">
-				<FormSplit v-for="(record, i) in fields" :min-width="250" class="_formBlock">
-					<FormInput v-model="record.name" small>
-						<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
-					</FormInput>
-					<FormInput v-model="record.value" small>
-						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
-					</FormInput>
-				</FormSplit>
-				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ph-plus ph-bold ph-lg"></i> {{ i18n.ts.add }}</MkButton>
-				<MkButton inline primary @click="saveFields"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
+		<br />
+		<div
+			class="llvierxe"
+			:style="{
+				backgroundImage: $i.bannerUrl ? `url(${$i.bannerUrl})` : null,
+			}"
+		>
+			<div class="avatar">
+				<MkAvatar
+					class="avatar"
+					:user="$i"
+					:disable-link="true"
+					@click="changeAvatar"
+				/>
+				<MkButton
+					primary
+					rounded
+					class="avatarEdit"
+					@click="changeAvatar"
+					>{{ i18n.ts._profile.changeAvatar }}</MkButton
+				>
 			</div>
-		</FormFolder>
-		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
-	</FormSlot>
+			<MkButton
+				primary
+				rounded
+				class="bannerEdit"
+				@click="changeBanner"
+				>{{ i18n.ts._profile.changeBanner }}</MkButton
+			>
+		</div>
 
-	<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
-	<FormSwitch v-if="profile.isCat" v-model="profile.speakAsCat" class="_formBlock">{{ i18n.ts.flagSpeakAsCat }}<template #caption>{{ i18n.ts.flagSpeakAsCatDescription }}</template></FormSwitch>
-	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
-	<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
-	<div v-if="saveButton == true">
-		<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
+		<FormInput
+			v-model="profile.name"
+			:max="30"
+			manual-save
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts._profile.name }}</template>
+		</FormInput>
+
+		<FormTextarea
+			v-model="profile.description"
+			:max="500"
+			tall
+			manual-save
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts._profile.description }}</template>
+			<template #caption>{{
+				i18n.ts._profile.youCanIncludeHashtags
+			}}</template>
+		</FormTextarea>
+
+		<FormInput v-model="profile.location" manual-save class="_formBlock">
+			<template #label>{{ i18n.ts.location }}</template>
+			<template #prefix
+				><i class="ph-map-pin ph-bold ph-lg"></i
+			></template>
+			<template #caption>{{
+				i18n.ts._profile.locationDescription
+			}}</template>
+		</FormInput>
+
+		<FormInput
+			v-model="profile.birthday"
+			type="date"
+			manual-save
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.birthday }}</template>
+			<template #prefix><i class="ph-cake ph-bold ph-lg"></i></template>
+		</FormInput>
+
+		<FormSelect v-model="profile.lang" class="_formBlock">
+			<template #label>{{ i18n.ts.language }}</template>
+			<option v-for="x in Object.keys(langmap)" :key="x" :value="x">
+				{{ langmap[x].nativeName }}
+			</option>
+		</FormSelect>
+
+		<FormSlot class="_formBlock">
+			<FormFolder>
+				<template #icon
+					><i class="ph-table ph-bold ph-lg"></i
+				></template>
+				<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
+
+				<div class="_formRoot">
+					<FormSplit
+						v-for="(record, i) in fields"
+						:min-width="250"
+						class="_formBlock"
+					>
+						<FormInput v-model="record.name" small>
+							<template #label
+								>{{ i18n.ts._profile.metadataLabel }} #{{
+									i + 1
+								}}</template
+							>
+						</FormInput>
+						<FormInput v-model="record.value" small>
+							<template #label
+								>{{ i18n.ts._profile.metadataContent }} #{{
+									i + 1
+								}}</template
+							>
+						</FormInput>
+					</FormSplit>
+					<MkButton
+						:disabled="fields.length >= 16"
+						inline
+						style="margin-right: 8px"
+						@click="addField"
+						><i class="ph-plus ph-bold ph-lg"></i>
+						{{ i18n.ts.add }}</MkButton
+					>
+					<MkButton inline primary @click="saveFields"
+						><i class="ph-check ph-bold ph-lg"></i>
+						{{ i18n.ts.save }}</MkButton
+					>
+				</div>
+			</FormFolder>
+			<template #caption>{{
+				i18n.ts._profile.metadataDescription
+			}}</template>
+		</FormSlot>
+
+		<FormSwitch v-model="profile.isCat" class="_formBlock"
+			>{{ i18n.ts.flagAsCat
+			}}<template #caption>{{
+				i18n.ts.flagAsCatDescription
+			}}</template></FormSwitch
+		>
+		<FormSwitch
+			v-if="profile.isCat"
+			v-model="profile.speakAsCat"
+			class="_formBlock"
+			>{{ i18n.ts.flagSpeakAsCat
+			}}<template #caption>{{
+				i18n.ts.flagSpeakAsCatDescription
+			}}</template></FormSwitch
+		>
+		<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock"
+			>{{ i18n.ts.flagShowTimelineReplies
+			}}<template #caption
+				>{{ i18n.ts.flagShowTimelineRepliesDescription }}
+				{{ i18n.ts.reflectMayTakeTime }}</template
+			></FormSwitch
+		>
+		<FormSwitch v-model="profile.isBot" class="_formBlock"
+			>{{ i18n.ts.flagAsBot
+			}}<template #caption>{{
+				i18n.ts.flagAsBotDescription
+			}}</template></FormSwitch
+		>
+		<div v-if="saveButton == true">
+			<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormSlot from '@/components/form/slot.vue';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { langmap } from '@/scripts/langmap';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { reactive, watch } from "vue";
+import MkButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormSlot from "@/components/form/slot.vue";
+import { selectFile } from "@/scripts/select-file";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { langmap } from "@/scripts/langmap";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const profile = reactive({
 	name: $i?.name,
@@ -97,24 +193,33 @@ const profile = reactive({
 	showTimelineReplies: $i?.showTimelineReplies,
 });
 
-const props = withDefaults(defineProps<{
-	saveButton?: boolean,
-}>(), {});
+const props = withDefaults(
+	defineProps<{
+		saveButton?: boolean;
+	}>(),
+	{}
+);
 
 let saveButton = $ref(props.saveButton ?? false);
 
-watch(() => profile, () => {
-	save();
-}, {
-	deep: true,
-});
+watch(
+	() => profile,
+	() => {
+		save();
+	},
+	{
+		deep: true,
+	}
+);
 
-const fields = reactive($i.fields.map(field => ({ name: field.name, value: field.value })));
+const fields = reactive(
+	$i.fields.map((field) => ({ name: field.name, value: field.value }))
+);
 
 function addField() {
 	fields.push({
-		name: '',
-		value: '',
+		name: "",
+		value: "",
 	});
 }
 
@@ -123,13 +228,15 @@ while (fields.length < 4) {
 }
 
 function saveFields() {
-	os.apiWithDialog('i/update', {
-		fields: fields.filter(field => field.name !== '' && field.value !== ''),
+	os.apiWithDialog("i/update", {
+		fields: fields.filter(
+			(field) => field.name !== "" && field.value !== ""
+		),
 	});
 }
 
 function save() {
-	os.apiWithDialog('i/update', {
+	os.apiWithDialog("i/update", {
 		name: profile.name || null,
 		description: profile.description || null,
 		location: profile.location || null,
@@ -143,49 +250,53 @@ function save() {
 }
 
 function changeAvatar(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
-		let originalOrCropped = file;
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(
+		async (file) => {
+			let originalOrCropped = file;
 
-		const { canceled } = await os.yesno({
-			type: 'question',
-			text: i18n.t('cropImageAsk'),
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
-				aspectRatio: 1,
+			const { canceled } = await os.yesno({
+				type: "question",
+				text: i18n.t("cropImageAsk"),
 			});
-		}
 
-		const i = await os.apiWithDialog('i/update', {
-			avatarId: originalOrCropped.id,
-		});
-		$i.avatarId = i.avatarId;
-		$i.avatarUrl = i.avatarUrl;
-	});
+			if (!canceled) {
+				originalOrCropped = await os.cropImage(file, {
+					aspectRatio: 1,
+				});
+			}
+
+			const i = await os.apiWithDialog("i/update", {
+				avatarId: originalOrCropped.id,
+			});
+			$i.avatarId = i.avatarId;
+			$i.avatarUrl = i.avatarUrl;
+		}
+	);
 }
 
 function changeBanner(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
-		let originalOrCropped = file;
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(
+		async (file) => {
+			let originalOrCropped = file;
 
-		const { canceled } = await os.yesno({
-			type: 'question',
-			text: i18n.t('cropImageAsk'),
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
-				aspectRatio: 2,
+			const { canceled } = await os.yesno({
+				type: "question",
+				text: i18n.t("cropImageAsk"),
 			});
-		}
 
-		const i = await os.apiWithDialog('i/update', {
-			bannerId: originalOrCropped.id,
-		});
-		$i.bannerId = i.bannerId;
-		$i.bannerUrl = i.bannerUrl;
-	});
+			if (!canceled) {
+				originalOrCropped = await os.cropImage(file, {
+					aspectRatio: 2,
+				});
+			}
+
+			const i = await os.apiWithDialog("i/update", {
+				bannerId: originalOrCropped.id,
+			});
+			$i.bannerId = i.bannerId;
+			$i.bannerUrl = i.bannerUrl;
+		}
+	);
 }
 
 const headerActions = $computed(() => []);
@@ -194,7 +305,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.profile,
-	icon: 'ph-user ph-bold ph-lg',
+	icon: "ph-user ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index ace283fc4..22c6f289b 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -1,103 +1,149 @@
 <template>
-<div class="_formRoot">
-	<FromSlot class="_formBlock">
-		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
-		<div v-panel style="border-radius: 6px;">
-			<XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
-				<template #item="{element}">
-					<button class="_button item" @click="remove(element, $event)">
-						<MkEmoji :emoji="element" :normal="true"/>
-					</button>
-				</template>
-				<template #footer>
-					<button class="_button add" @click="chooseEmoji"><i class="ph-plus ph-bold ph-lg"></i></button>
-				</template>
-			</XDraggable>
-		</div>
-		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
-	</FromSlot>
+	<div class="_formRoot">
+		<FromSlot class="_formBlock">
+			<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
+			<div v-panel style="border-radius: 6px">
+				<XDraggable
+					v-model="reactions"
+					class="zoaiodol"
+					:item-key="(item) => item"
+					animation="150"
+					delay="100"
+					delay-on-touch-only="true"
+				>
+					<template #item="{ element }">
+						<button
+							class="_button item"
+							@click="remove(element, $event)"
+						>
+							<MkEmoji :emoji="element" :normal="true" />
+						</button>
+					</template>
+					<template #footer>
+						<button class="_button add" @click="chooseEmoji">
+							<i class="ph-plus ph-bold ph-lg"></i>
+						</button>
+					</template>
+				</XDraggable>
+			</div>
+			<template #caption
+				>{{ i18n.ts.reactionSettingDescription2 }}
+				<button class="_textButton" @click="preview">
+					{{ i18n.ts.preview }}
+				</button></template
+			>
+		</FromSlot>
 
-	<FormRadios v-model="reactionPickerSize" class="_formBlock">
-		<template #label>{{ i18n.ts.size }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-	</FormRadios>
-	<FormRadios v-model="reactionPickerWidth" class="_formBlock">
-		<template #label>{{ i18n.ts.numberOfColumn }}</template>
-		<option :value="1">5</option>
-		<option :value="2">6</option>
-		<option :value="3">7</option>
-		<option :value="4">8</option>
-		<option :value="5">9</option>
-	</FormRadios>
-	<FormRadios v-model="reactionPickerHeight" class="_formBlock">
-		<template #label>{{ i18n.ts.height }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-		<option :value="4">{{ i18n.ts.large }}+</option>
-	</FormRadios>
+		<FormRadios v-model="reactionPickerSize" class="_formBlock">
+			<template #label>{{ i18n.ts.size }}</template>
+			<option :value="1">{{ i18n.ts.small }}</option>
+			<option :value="2">{{ i18n.ts.medium }}</option>
+			<option :value="3">{{ i18n.ts.large }}</option>
+		</FormRadios>
+		<FormRadios v-model="reactionPickerWidth" class="_formBlock">
+			<template #label>{{ i18n.ts.numberOfColumn }}</template>
+			<option :value="1">5</option>
+			<option :value="2">6</option>
+			<option :value="3">7</option>
+			<option :value="4">8</option>
+			<option :value="5">9</option>
+		</FormRadios>
+		<FormRadios v-model="reactionPickerHeight" class="_formBlock">
+			<template #label>{{ i18n.ts.height }}</template>
+			<option :value="1">{{ i18n.ts.small }}</option>
+			<option :value="2">{{ i18n.ts.medium }}</option>
+			<option :value="3">{{ i18n.ts.large }}</option>
+			<option :value="4">{{ i18n.ts.large }}+</option>
+		</FormRadios>
 
-	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
-		{{ i18n.ts.useDrawerReactionPickerForMobile }}
-		<template #caption>{{ i18n.ts.needReloadToApply }}</template>
-	</FormSwitch>
+		<FormSwitch
+			v-model="reactionPickerUseDrawerForMobile"
+			class="_formBlock"
+		>
+			{{ i18n.ts.useDrawerReactionPickerForMobile }}
+			<template #caption>{{ i18n.ts.needReloadToApply }}</template>
+		</FormSwitch>
 
-	<FormSection>
-		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-			<FormButton inline @click="preview"><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.preview }}</FormButton>
-			<FormButton inline danger @click="setDefault"><i class="ph-arrow-counter-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</FormButton>
-		</div>
-	</FormSection>
-</div>
+		<FormSection>
+			<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
+				<FormButton inline @click="preview"
+					><i class="ph-eye ph-bold ph-lg"></i>
+					{{ i18n.ts.preview }}</FormButton
+				>
+				<FormButton inline danger @click="setDefault"
+					><i class="ph-arrow-counter-clockwise ph-bold ph-lg"></i>
+					{{ i18n.ts.default }}</FormButton
+				>
+			</div>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, watch } from 'vue';
-import XDraggable from 'vuedraggable';
-import FormInput from '@/components/form/input.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FromSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deepClone } from '@/scripts/clone';
+import { defineAsyncComponent, watch } from "vue";
+import XDraggable from "vuedraggable";
+import FormInput from "@/components/form/input.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FromSlot from "@/components/form/slot.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deepClone } from "@/scripts/clone";
 
 let reactions = $ref(deepClone(defaultStore.state.reactions));
 
-const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
-const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
-const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
-const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
+const reactionPickerSize = $computed(
+	defaultStore.makeGetterSetter("reactionPickerSize")
+);
+const reactionPickerWidth = $computed(
+	defaultStore.makeGetterSetter("reactionPickerWidth")
+);
+const reactionPickerHeight = $computed(
+	defaultStore.makeGetterSetter("reactionPickerHeight")
+);
+const reactionPickerUseDrawerForMobile = $computed(
+	defaultStore.makeGetterSetter("reactionPickerUseDrawerForMobile")
+);
 
 function save() {
-	defaultStore.set('reactions', reactions);
+	defaultStore.set("reactions", reactions);
 }
 
 function remove(reaction, ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.remove,
-		action: () => {
-			reactions = reactions.filter(x => x !== reaction);
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.remove,
+				action: () => {
+					reactions = reactions.filter((x) => x !== reaction);
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function preview(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-		asReactionPicker: true,
-		src: ev.currentTarget ?? ev.target,
-	}, {}, 'closed');
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkEmojiPickerDialog.vue")
+		),
+		{
+			asReactionPicker: true,
+			src: ev.currentTarget ?? ev.target,
+		},
+		{},
+		"closed"
+	);
 }
 
 async function setDefault() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.resetAreYouSure,
 	});
 	if (canceled) return;
@@ -108,18 +154,22 @@ async function setDefault() {
 function chooseEmoji(ev: MouseEvent) {
 	os.pickEmoji(ev.currentTarget ?? ev.target, {
 		showPinned: false,
-	}).then(emoji => {
+	}).then((emoji) => {
 		if (!reactions.includes(emoji)) {
 			reactions.push(emoji);
 		}
 	});
 }
 
-watch($$(reactions), () => {
-	save();
-}, {
-	deep: true,
-});
+watch(
+	$$(reactions),
+	() => {
+		save();
+	},
+	{
+		deep: true,
+	}
+);
 
 const headerActions = $computed(() => []);
 
@@ -127,9 +177,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.reaction,
-	icon: 'ph-smiley ph-bold ph-lg',
+	icon: "ph-smiley ph-bold ph-lg",
 	action: {
-		icon: 'ph-eye ph-bold ph-lg',
+		icon: "ph-eye ph-bold ph-lg",
 		handler: preview,
 	},
 });
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 86632234f..be4f275f1 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -1,85 +1,105 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.password }}</template>
-		<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<template #label>{{ i18n.ts.password }}</template>
+			<FormButton primary @click="change()">{{
+				i18n.ts.changePassword
+			}}</FormButton>
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
-		<X2fa/>
-	</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
+			<X2fa />
+		</FormSection>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.signinHistory }}</template>
-		<MkPagination :pagination="pagination" disable-auto-load>
-			<template #default="{items}">
-				<div>
-					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
-						<header>
-							<i v-if="item.success" class="ph-check ph-bold ph-lg icon succ"></i>
-							<i v-else class="ph-circle-wavy-warning ph-bold ph-lg icon fail"></i>
-							<code class="ip _monospace">{{ item.ip }}</code>
-							<MkTime :time="item.createdAt" class="time"/>
-						</header>
+		<FormSection>
+			<template #label>{{ i18n.ts.signinHistory }}</template>
+			<MkPagination :pagination="pagination" disable-auto-load>
+				<template #default="{ items }">
+					<div>
+						<div
+							v-for="item in items"
+							:key="item.id"
+							v-panel
+							class="timnmucd"
+						>
+							<header>
+								<i
+									v-if="item.success"
+									class="ph-check ph-bold ph-lg icon succ"
+								></i>
+								<i
+									v-else
+									class="ph-circle-wavy-warning ph-bold ph-lg icon fail"
+								></i>
+								<code class="ip _monospace">{{ item.ip }}</code>
+								<MkTime :time="item.createdAt" class="time" />
+							</header>
+						</div>
 					</div>
-				</div>
-			</template>
-		</MkPagination>
-	</FormSection>
+				</template>
+			</MkPagination>
+		</FormSection>
 
-	<FormSection>
-		<FormSlot>
-			<FormButton danger @click="regenerateToken"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
-			<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
-		</FormSlot>
-	</FormSection>
-</div>
+		<FormSection>
+			<FormSlot>
+				<FormButton danger @click="regenerateToken"
+					><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+					{{ i18n.ts.regenerateLoginToken }}</FormButton
+				>
+				<template #caption>{{
+					i18n.ts.regenerateLoginTokenDescription
+				}}</template>
+			</FormSlot>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import X2fa from './2fa.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import X2fa from "./2fa.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSlot from "@/components/form/slot.vue";
+import FormButton from "@/components/MkButton.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'i/signin-history' as const,
+	endpoint: "i/signin-history" as const,
 	limit: 5,
 };
 
 async function change(): Promise<void> {
-	const { canceled: canceled1, result: currentPassword } = await os.inputText({
-		title: i18n.ts.currentPassword,
-		type: 'password',
-	});
+	const { canceled: canceled1, result: currentPassword } = await os.inputText(
+		{
+			title: i18n.ts.currentPassword,
+			type: "password",
+		}
+	);
 	if (canceled1) return;
 
 	const { canceled: canceled2, result: newPassword } = await os.inputText({
 		title: i18n.ts.newPassword,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled2) return;
 
 	const { canceled: canceled3, result: newPassword2 } = await os.inputText({
 		title: i18n.ts.newPasswordRetype,
-		type: 'password',
+		type: "password",
 	});
 	if (canceled3) return;
 
 	if (newPassword !== newPassword2) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts.retypedNotMatch,
 		});
 		return;
 	}
 
-	os.apiWithDialog('i/change-password', {
+	os.apiWithDialog("i/change-password", {
 		currentPassword,
 		newPassword,
 	});
@@ -88,10 +108,10 @@ async function change(): Promise<void> {
 function regenerateToken(): void {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password',
+		type: "password",
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
-		os.api('i/regenerate_token', {
+		os.api("i/regenerate_token", {
 			password: password,
 		});
 	});
@@ -103,7 +123,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'ph-lock ph-bold ph-lg',
+	icon: "ph-lock ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index afacf770b..81596a40b 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -1,62 +1,84 @@
 <template>
-<div class="_formRoot">
-	<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
-		<template #label>{{ i18n.ts.masterVolume }}</template>
-	</FormRange>
+	<div class="_formRoot">
+		<FormRange
+			v-model="masterVolume"
+			:min="0"
+			:max="1"
+			:step="0.05"
+			:text-converter="(v) => `${Math.floor(v * 100)}%`"
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.masterVolume }}</template>
+		</FormRange>
 
-	<FormSection>
-		<template #label>{{ i18n.ts.sounds }}</template>
-		<FormButton v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;" @click="edit(type)">
-			{{ i18n.t('_sfx.' + type) }}
-			<template #suffix>{{ sounds[type].type || i18n.ts.none }}</template>
-			<template #suffixIcon><i class="ph-caret-down ph-bold ph-lg"></i></template>
-		</FormButton>
-	</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.sounds }}</template>
+			<FormButton
+				v-for="type in Object.keys(sounds)"
+				:key="type"
+				style="margin-bottom: 8px"
+				@click="edit(type)"
+			>
+				{{ i18n.t("_sfx." + type) }}
+				<template #suffix>{{
+					sounds[type].type || i18n.ts.none
+				}}</template>
+				<template #suffixIcon
+					><i class="ph-caret-down ph-bold ph-lg"></i
+				></template>
+			</FormButton>
+		</FormSection>
 
-	<FormButton danger class="_formBlock" @click="reset()"><i class="ph-arrow-clockwise ph-bold ph-lg"></i> {{ i18n.ts.default }}</FormButton>
-</div>
+		<FormButton danger class="_formBlock" @click="reset()"
+			><i class="ph-arrow-clockwise ph-bold ph-lg"></i>
+			{{ i18n.ts.default }}</FormButton
+		>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import FormRange from '@/components/form/range.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { playFile } from '@/scripts/sound';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref } from "vue";
+import FormRange from "@/components/form/range.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormSection from "@/components/form/section.vue";
+import * as os from "@/os";
+import { ColdDeviceStorage } from "@/store";
+import { playFile } from "@/scripts/sound";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const masterVolume = computed({
 	get: () => {
-		return ColdDeviceStorage.get('sound_masterVolume');
+		return ColdDeviceStorage.get("sound_masterVolume");
 	},
 	set: (value) => {
-		ColdDeviceStorage.set('sound_masterVolume', value);
+		ColdDeviceStorage.set("sound_masterVolume", value);
 	},
 });
 
-const volumeIcon = computed(() => masterVolume.value === 0 ? 'ph-speaker-none ph-bold ph-lg' : 'ph-speaker-high ph-bold ph-lg');
+const volumeIcon = computed(() =>
+	masterVolume.value === 0
+		? "ph-speaker-none ph-bold ph-lg"
+		: "ph-speaker-high ph-bold ph-lg"
+);
 
 const sounds = ref({
-	note: ColdDeviceStorage.get('sound_note'),
-	noteMy: ColdDeviceStorage.get('sound_noteMy'),
-	notification: ColdDeviceStorage.get('sound_notification'),
-	chat: ColdDeviceStorage.get('sound_chat'),
-	chatBg: ColdDeviceStorage.get('sound_chatBg'),
-	antenna: ColdDeviceStorage.get('sound_antenna'),
-	channel: ColdDeviceStorage.get('sound_channel'),
+	note: ColdDeviceStorage.get("sound_note"),
+	noteMy: ColdDeviceStorage.get("sound_noteMy"),
+	notification: ColdDeviceStorage.get("sound_notification"),
+	chat: ColdDeviceStorage.get("sound_chat"),
+	chatBg: ColdDeviceStorage.get("sound_chatBg"),
+	antenna: ColdDeviceStorage.get("sound_antenna"),
+	channel: ColdDeviceStorage.get("sound_channel"),
 });
 
-const soundsTypes = await os.api('get-sounds')
-
+const soundsTypes = await os.api("get-sounds");
 
 async function edit(type) {
-	const { canceled, result } = await os.form(i18n.t('_sfx.' + type), {
+	const { canceled, result } = await os.form(i18n.t("_sfx." + type), {
 		type: {
-			type: 'enum',
-			enum: soundsTypes.map(x => ({
+			type: "enum",
+			enum: soundsTypes.map((x) => ({
 				value: x,
 				label: x == null ? i18n.ts.none : x,
 			})),
@@ -64,7 +86,7 @@ async function edit(type) {
 			default: sounds.value[type].type,
 		},
 		volume: {
-			type: 'range',
+			type: "range",
 			min: 0,
 			max: 1,
 			step: 0.05,
@@ -73,7 +95,7 @@ async function edit(type) {
 			default: sounds.value[type].volume,
 		},
 		listen: {
-			type: 'button',
+			type: "button",
 			content: i18n.ts.listen,
 			action: (_, values) => {
 				playFile(values.type, values.volume);
@@ -87,14 +109,14 @@ async function edit(type) {
 		volume: result.volume,
 	};
 
-	ColdDeviceStorage.set('sound_' + type, v);
+	ColdDeviceStorage.set("sound_" + type, v);
 	sounds.value[type] = v;
 }
 
 function reset() {
 	for (const sound of Object.keys(sounds.value)) {
-		const v = ColdDeviceStorage.default['sound_' + sound];
-		ColdDeviceStorage.set('sound_' + sound, v);
+		const v = ColdDeviceStorage.default["sound_" + sound];
+		ColdDeviceStorage.set("sound_" + sound, v);
 		sounds.value[sound] = v;
 	}
 }
@@ -105,6 +127,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.sounds,
-	icon: 'ph-speaker-high ph-bold ph-lg',
+	icon: "ph-speaker-high ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/statusbar.statusbar.vue b/packages/client/src/pages/settings/statusbar.statusbar.vue
index 608222386..b64f16717 100644
--- a/packages/client/src/pages/settings/statusbar.statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.statusbar.vue
@@ -1,140 +1,211 @@
 <template>
-<div class="_formRoot">
-	<FormSelect v-model="statusbar.type" placeholder="Please select" class="_formBlock">
-		<template #label>{{ i18n.ts.type }}</template>
-		<option value="rss">RSS</option>
-		<option value="federation">Federation</option>
-		<option value="userList">User list timeline</option>
-	</FormSelect>
-
-	<MkInput v-model="statusbar.name" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.label }}</template>
-	</MkInput>
-
-	<MkSwitch v-model="statusbar.black" class="_formBlock">
-		<template #label>Black</template>
-	</MkSwitch>
-
-	<FormRadios v-model="statusbar.size" class="_formBlock">
-		<template #label>{{ i18n.ts.size }}</template>
-		<option value="verySmall">{{ i18n.ts.small }}+</option>
-		<option value="small">{{ i18n.ts.small }}</option>
-		<option value="medium">{{ i18n.ts.medium }}</option>
-		<option value="large">{{ i18n.ts.large }}</option>
-		<option value="veryLarge">{{ i18n.ts.large }}+</option>
-	</FormRadios>
-
-	<template v-if="statusbar.type === 'rss'">
-		<MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
-			<template #label>URL</template>
-		</MkInput>
-		<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
-			<template #label>{{ i18n.ts.shuffle }}</template>
-		</MkSwitch>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-	</template>
-	<template v-else-if="statusbar.type === 'federation'">
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-		<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
-			<template #label>{{ i18n.ts.colored }}</template>
-		</MkSwitch>
-	</template>
-	<template v-else-if="statusbar.type === 'userList' && userLists != null">
-		<FormSelect v-model="statusbar.props.userListId" class="_formBlock">
-			<template #label>{{ i18n.ts.userList }}</template>
-			<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
+	<div class="_formRoot">
+		<FormSelect
+			v-model="statusbar.type"
+			placeholder="Please select"
+			class="_formBlock"
+		>
+			<template #label>{{ i18n.ts.type }}</template>
+			<option value="rss">RSS</option>
+			<option value="federation">Federation</option>
+			<option value="userList">User list timeline</option>
 		</FormSelect>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-	</template>
 
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
+		<MkInput v-model="statusbar.name" manual-save class="_formBlock">
+			<template #label>{{ i18n.ts.label }}</template>
+		</MkInput>
+
+		<MkSwitch v-model="statusbar.black" class="_formBlock">
+			<template #label>Black</template>
+		</MkSwitch>
+
+		<FormRadios v-model="statusbar.size" class="_formBlock">
+			<template #label>{{ i18n.ts.size }}</template>
+			<option value="verySmall">{{ i18n.ts.small }}+</option>
+			<option value="small">{{ i18n.ts.small }}</option>
+			<option value="medium">{{ i18n.ts.medium }}</option>
+			<option value="large">{{ i18n.ts.large }}</option>
+			<option value="veryLarge">{{ i18n.ts.large }}+</option>
+		</FormRadios>
+
+		<template v-if="statusbar.type === 'rss'">
+			<MkInput
+				v-model="statusbar.props.url"
+				manual-save
+				class="_formBlock"
+				type="url"
+			>
+				<template #label>URL</template>
+			</MkInput>
+			<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
+				<template #label>{{ i18n.ts.shuffle }}</template>
+			</MkSwitch>
+			<MkInput
+				v-model="statusbar.props.refreshIntervalSec"
+				manual-save
+				class="_formBlock"
+				type="number"
+			>
+				<template #label>{{ i18n.ts.refreshInterval }}</template>
+			</MkInput>
+			<FormRange
+				v-model="statusbar.props.marqueeDuration"
+				:min="5"
+				:max="150"
+				:step="1"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.speed }}</template>
+				<template #caption
+					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
+				>
+			</FormRange>
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.reverse }}</template>
+			</MkSwitch>
+		</template>
+		<template v-else-if="statusbar.type === 'federation'">
+			<MkInput
+				v-model="statusbar.props.refreshIntervalSec"
+				manual-save
+				class="_formBlock"
+				type="number"
+			>
+				<template #label>{{ i18n.ts.refreshInterval }}</template>
+			</MkInput>
+			<FormRange
+				v-model="statusbar.props.marqueeDuration"
+				:min="5"
+				:max="150"
+				:step="1"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.speed }}</template>
+				<template #caption
+					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
+				>
+			</FormRange>
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.reverse }}</template>
+			</MkSwitch>
+			<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
+				<template #label>{{ i18n.ts.colored }}</template>
+			</MkSwitch>
+		</template>
+		<template
+			v-else-if="statusbar.type === 'userList' && userLists != null"
+		>
+			<FormSelect v-model="statusbar.props.userListId" class="_formBlock">
+				<template #label>{{ i18n.ts.userList }}</template>
+				<option v-for="list in userLists" :value="list.id">
+					{{ list.name }}
+				</option>
+			</FormSelect>
+			<MkInput
+				v-model="statusbar.props.refreshIntervalSec"
+				manual-save
+				class="_formBlock"
+				type="number"
+			>
+				<template #label>{{ i18n.ts.refreshInterval }}</template>
+			</MkInput>
+			<FormRange
+				v-model="statusbar.props.marqueeDuration"
+				:min="5"
+				:max="150"
+				:step="1"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.speed }}</template>
+				<template #caption
+					>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template
+				>
+			</FormRange>
+			<MkSwitch
+				v-model="statusbar.props.marqueeReverse"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.reverse }}</template>
+			</MkSwitch>
+		</template>
+
+		<div style="display: flex; gap: var(--margin); flex-wrap: wrap">
+			<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue';
-import FormSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormRange from '@/components/form/range.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { deepClone } from '@/scripts/clone';
+import { computed, reactive, ref, watch } from "vue";
+import FormSelect from "@/components/form/select.vue";
+import MkInput from "@/components/form/input.vue";
+import MkSwitch from "@/components/form/switch.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormRange from "@/components/form/range.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { deepClone } from "@/scripts/clone";
 
 const props = defineProps<{
 	_id: string;
 	userLists: any[] | null;
 }>();
 
-const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
+const statusbar = reactive(
+	deepClone(defaultStore.state.statusbars.find((x) => x.id === props._id))
+);
 
-watch(() => statusbar.type, () => {
-	if (statusbar.type === 'rss') {
-		statusbar.name = 'NEWS';
-		statusbar.props.url = 'http://feeds.afpbb.com/rss/afpbb/afpbbnews';
-		statusbar.props.shuffle = true;
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
-	} else if (statusbar.type === 'federation') {
-		statusbar.name = 'FEDERATION';
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
-		statusbar.props.colored = false;
-	} else if (statusbar.type === 'userList') {
-		statusbar.name = 'LIST TL';
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
+watch(
+	() => statusbar.type,
+	() => {
+		if (statusbar.type === "rss") {
+			statusbar.name = "NEWS";
+			statusbar.props.url = "http://feeds.afpbb.com/rss/afpbb/afpbbnews";
+			statusbar.props.shuffle = true;
+			statusbar.props.refreshIntervalSec = 120;
+			statusbar.props.display = "marquee";
+			statusbar.props.marqueeDuration = 100;
+			statusbar.props.marqueeReverse = false;
+		} else if (statusbar.type === "federation") {
+			statusbar.name = "FEDERATION";
+			statusbar.props.refreshIntervalSec = 120;
+			statusbar.props.display = "marquee";
+			statusbar.props.marqueeDuration = 100;
+			statusbar.props.marqueeReverse = false;
+			statusbar.props.colored = false;
+		} else if (statusbar.type === "userList") {
+			statusbar.name = "LIST TL";
+			statusbar.props.refreshIntervalSec = 120;
+			statusbar.props.display = "marquee";
+			statusbar.props.marqueeDuration = 100;
+			statusbar.props.marqueeReverse = false;
+		}
 	}
-});
+);
 
 watch(statusbar, save);
 
 async function save() {
-	const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
+	const i = defaultStore.state.statusbars.findIndex(
+		(x) => x.id === props._id
+	);
 	const statusbars = deepClone(defaultStore.state.statusbars);
 	statusbars[i] = deepClone(statusbar);
-	defaultStore.set('statusbars', statusbars);
+	defaultStore.set("statusbars", statusbars);
 }
 
 function del() {
-	defaultStore.set('statusbars', defaultStore.state.statusbars.filter(x => x.id !== props._id));
+	defaultStore.set(
+		"statusbars",
+		defaultStore.state.statusbars.filter((x) => x.id !== props._id)
+	);
 }
 </script>
diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/statusbar.vue
index dd12576ac..96a80e8c6 100644
--- a/packages/client/src/pages/settings/statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.vue
@@ -1,43 +1,43 @@
 <template>
-<div class="_formRoot">
-	<FormFolder v-for="x in statusbars" :key="x.id" class="_formBlock">
-		<template #label>{{ x.type ?? i18n.ts.notSet }}</template>
-		<template #suffix>{{ x.name }}</template>
-		<XStatusbar :_id="x.id" :user-lists="userLists"/>
-	</FormFolder>
-	<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
-</div>
+	<div class="_formRoot">
+		<FormFolder v-for="x in statusbars" :key="x.id" class="_formBlock">
+			<template #label>{{ x.type ?? i18n.ts.notSet }}</template>
+			<template #suffix>{{ x.name }}</template>
+			<XStatusbar :_id="x.id" :user-lists="userLists" />
+		</FormFolder>
+		<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XStatusbar from './statusbar.statusbar.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onMounted, ref, watch } from "vue";
+import { v4 as uuid } from "uuid";
+import XStatusbar from "./statusbar.statusbar.vue";
+import FormRadios from "@/components/form/radios.vue";
+import FormFolder from "@/components/form/folder.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { unisonReload } from "@/scripts/unison-reload";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const statusbars = defaultStore.reactiveState.statusbars;
 
 let userLists = $ref();
 
 onMounted(() => {
-	os.api('users/lists/list').then(res => {
+	os.api("users/lists/list").then((res) => {
 		userLists = res;
 	});
 });
 
 async function add() {
-	defaultStore.push('statusbars', {
+	defaultStore.push("statusbars", {
 		id: uuid(),
 		type: null,
 		black: false,
-		size: 'medium',
+		size: "medium",
 		props: {},
 	});
 }
@@ -48,7 +48,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.statusbar,
-	icon: 'ph-list-bullets ph-bold ph-lg',
-	bg: 'var(--bg)',
+	icon: "ph-list-bullets ph-bold ph-lg",
+	bg: "var(--bg)",
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 03dcd24c1..0428de0f7 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -1,26 +1,42 @@
 <template>
-<div class="_formRoot">
-	<FormTextarea v-model="installThemeCode" class="_formBlock">
-		<template #label>{{ i18n.ts._theme.code }}</template>
-	</FormTextarea>
+	<div class="_formRoot">
+		<FormTextarea v-model="installThemeCode" class="_formBlock">
+			<template #label>{{ i18n.ts._theme.code }}</template>
+		</FormTextarea>
 
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.install }}</FormButton>
+		<div
+			class="_formBlock"
+			style="display: flex; gap: var(--margin); flex-wrap: wrap"
+		>
+			<FormButton
+				:disabled="installThemeCode == null"
+				inline
+				@click="() => preview(installThemeCode)"
+				><i class="ph-eye ph-bold ph-lg"></i>
+				{{ i18n.ts.preview }}</FormButton
+			>
+			<FormButton
+				:disabled="installThemeCode == null"
+				primary
+				inline
+				@click="() => install(installThemeCode)"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.install }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import JSON5 from 'json5';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import { applyTheme, validateTheme } from '@/scripts/theme';
-import * as os from '@/os';
-import { addTheme, getThemes } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import JSON5 from "json5";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormButton from "@/components/MkButton.vue";
+import { applyTheme, validateTheme } from "@/scripts/theme";
+import * as os from "@/os";
+import { addTheme, getThemes } from "@/theme-store";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let installThemeCode = $ref(null);
 
@@ -31,21 +47,21 @@ function parseThemeCode(code: string) {
 		theme = JSON5.parse(code);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._theme.invalid,
 		});
 		return false;
 	}
 	if (!validateTheme(theme)) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._theme.invalid,
 		});
 		return false;
 	}
-	if (getThemes().some(t => t.id === theme.id)) {
+	if (getThemes().some((t) => t.id === theme.id)) {
 		os.alert({
-			type: 'info',
+			type: "info",
 			text: i18n.ts._theme.alreadyInstalled,
 		});
 		return false;
@@ -64,8 +80,8 @@ async function install(code: string): Promise<void> {
 	if (!theme) return;
 	await addTheme(theme);
 	os.alert({
-		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name }),
+		type: "success",
+		text: i18n.t("_theme.installed", { name: theme.name }),
 	});
 }
 
@@ -75,6 +91,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.install,
-	icon: 'ph-download-simple ph-bold ph-lg',
+	icon: "ph-download-simple ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index b0742b279..a1b675ea5 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -1,58 +1,90 @@
 <template>
-<div class="_formRoot">
-	<FormSelect v-model="selectedThemeId" class="_formBlock">
-		<template #label>{{ i18n.ts.theme }}</template>
-		<optgroup :label="i18n.ts._theme.installedThemes">
-			<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="i18n.ts._theme.builtinThemes">
-			<option v-for="x in builtinThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-	<template v-if="selectedTheme">
-		<FormInput readonly :model-value="selectedTheme.author" class="_formBlock">
-			<template #label>{{ i18n.ts.author }}</template>
-		</FormInput>
-		<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc" class="_formBlock">
-			<template #label>{{ i18n.ts._theme.description }}</template>
-		</FormTextarea>
-		<FormTextarea readonly tall :model-value="selectedThemeCode" class="_formBlock">
-			<template #label>{{ i18n.ts._theme.code }}</template>
-			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
-		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ph-trash ph-bold ph-lg"></i> {{ i18n.ts.uninstall }}</FormButton>
-	</template>
-</div>
+	<div class="_formRoot">
+		<FormSelect v-model="selectedThemeId" class="_formBlock">
+			<template #label>{{ i18n.ts.theme }}</template>
+			<optgroup :label="i18n.ts._theme.installedThemes">
+				<option v-for="x in installedThemes" :key="x.id" :value="x.id">
+					{{ x.name }}
+				</option>
+			</optgroup>
+			<optgroup :label="i18n.ts._theme.builtinThemes">
+				<option v-for="x in builtinThemes" :key="x.id" :value="x.id">
+					{{ x.name }}
+				</option>
+			</optgroup>
+		</FormSelect>
+		<template v-if="selectedTheme">
+			<FormInput
+				readonly
+				:model-value="selectedTheme.author"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.author }}</template>
+			</FormInput>
+			<FormTextarea
+				v-if="selectedTheme.desc"
+				readonly
+				:model-value="selectedTheme.desc"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts._theme.description }}</template>
+			</FormTextarea>
+			<FormTextarea
+				readonly
+				tall
+				:model-value="selectedThemeCode"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts._theme.code }}</template>
+				<template #caption
+					><button class="_textButton" @click="copyThemeCode()">
+						{{ i18n.ts.copy }}
+					</button></template
+				>
+			</FormTextarea>
+			<FormButton
+				v-if="!builtinThemes.some((t) => t.id == selectedTheme.id)"
+				class="_formBlock"
+				danger
+				@click="uninstall()"
+				><i class="ph-trash ph-bold ph-lg"></i>
+				{{ i18n.ts.uninstall }}</FormButton
+			>
+		</template>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
-import JSON5 from 'json5';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import * as os from '@/os';
-import { getThemes, removeTheme } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, ref } from "vue";
+import JSON5 from "json5";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormInput from "@/components/form/input.vue";
+import FormButton from "@/components/MkButton.vue";
+import { Theme, getBuiltinThemesRef } from "@/scripts/theme";
+import copyToClipboard from "@/scripts/copy-to-clipboard";
+import * as os from "@/os";
+import { getThemes, removeTheme } from "@/theme-store";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
 const selectedThemeId = ref(null);
 
-const themes = computed(() => [ ...installedThemes.value, ...builtinThemes.value ]);
+const themes = computed(() => [
+	...installedThemes.value,
+	...builtinThemes.value,
+]);
 
 const selectedTheme = computed(() => {
 	if (selectedThemeId.value == null) return null;
-	return themes.value.find(x => x.id === selectedThemeId.value);
+	return themes.value.find((x) => x.id === selectedThemeId.value);
 });
 
 const selectedThemeCode = computed(() => {
 	if (selectedTheme.value == null) return null;
-	return JSON5.stringify(selectedTheme.value, null, '\t');
+	return JSON5.stringify(selectedTheme.value, null, "\t");
 });
 
 function copyThemeCode() {
@@ -62,7 +94,9 @@ function copyThemeCode() {
 
 function uninstall() {
 	removeTheme(selectedTheme.value as Theme);
-	installedThemes.value = installedThemes.value.filter(t => t.id !== selectedThemeId.value);
+	installedThemes.value = installedThemes.value.filter(
+		(t) => t.id !== selectedThemeId.value
+	);
 	selectedThemeId.value = null;
 	os.success();
 }
@@ -73,6 +107,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.manage,
-	icon: 'ph-folder-notch-open ph-bold ph-lg',
+	icon: "ph-folder-notch-open ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 15c65bd10..67e940fa1 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -1,139 +1,250 @@
 <template>
-<div class="_formRoot rsljpzjq">
-	<div v-adaptive-border class="rfqxtzch _panel _formBlock">
-		<div class="toggle">
-			<div class="toggleWrapper">
-				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
-				<label for="dn" class="toggle">
-					<span class="before">{{ i18n.ts.light }}</span>
-					<span class="after">{{ i18n.ts.dark }}</span>
-					<span class="toggle__handler">
-						<span class="crater crater--1"></span>
-						<span class="crater crater--2"></span>
-						<span class="crater crater--3"></span>
-					</span>
-					<span class="star star--1"></span>
-					<span class="star star--2"></span>
-					<span class="star star--3"></span>
-					<span class="star star--4"></span>
-					<span class="star star--5"></span>
-					<span class="star star--6"></span>
-				</label>
+	<div class="_formRoot rsljpzjq">
+		<div v-adaptive-border class="rfqxtzch _panel _formBlock">
+			<div class="toggle">
+				<div class="toggleWrapper">
+					<input
+						id="dn"
+						v-model="darkMode"
+						type="checkbox"
+						class="dn"
+					/>
+					<label for="dn" class="toggle">
+						<span class="before">{{ i18n.ts.light }}</span>
+						<span class="after">{{ i18n.ts.dark }}</span>
+						<span class="toggle__handler">
+							<span class="crater crater--1"></span>
+							<span class="crater crater--2"></span>
+							<span class="crater crater--3"></span>
+						</span>
+						<span class="star star--1"></span>
+						<span class="star star--2"></span>
+						<span class="star star--3"></span>
+						<span class="star star--4"></span>
+						<span class="star star--5"></span>
+						<span class="star star--6"></span>
+					</label>
+				</div>
+			</div>
+			<div class="sync">
+				<FormSwitch v-model="syncDeviceDarkMode">{{
+					i18n.ts.syncDeviceDarkMode
+				}}</FormSwitch>
 			</div>
 		</div>
-		<div class="sync">
-			<FormSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</FormSwitch>
+
+		<div class="selects _formBlock">
+			<FormSelect v-model="lightThemeId" large class="select">
+				<template #label>{{ i18n.ts.themeForLightMode }}</template>
+				<template #prefix
+					><i class="ph-sun ph-bold ph-lg"></i
+				></template>
+				<option
+					v-if="instanceLightTheme"
+					:key="'instance:' + instanceLightTheme.id"
+					:value="instanceLightTheme.id"
+				>
+					{{ instanceLightTheme.name }}
+				</option>
+				<optgroup
+					v-if="installedLightThemes.length > 0"
+					:label="i18n.ts._theme.installedThemes"
+				>
+					<option
+						v-for="x in installedLightThemes"
+						:key="'installed:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._theme.builtinThemes">
+					<option
+						v-for="x in builtinLightThemes"
+						:key="'builtin:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+			</FormSelect>
+			<FormSelect v-model="darkThemeId" large class="select">
+				<template #label>{{ i18n.ts.themeForDarkMode }}</template>
+				<template #prefix
+					><i class="ph-moon ph-bold ph-lg"></i
+				></template>
+				<option
+					v-if="instanceDarkTheme"
+					:key="'instance:' + instanceDarkTheme.id"
+					:value="instanceDarkTheme.id"
+				>
+					{{ instanceDarkTheme.name }}
+				</option>
+				<optgroup
+					v-if="installedDarkThemes.length > 0"
+					:label="i18n.ts._theme.installedThemes"
+				>
+					<option
+						v-for="x in installedDarkThemes"
+						:key="'installed:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+				<optgroup :label="i18n.ts._theme.builtinThemes">
+					<option
+						v-for="x in builtinDarkThemes"
+						:key="'builtin:' + x.id"
+						:value="x.id"
+					>
+						{{ x.name }}
+					</option>
+				</optgroup>
+			</FormSelect>
 		</div>
+
+		<FormSection>
+			<div class="_formLinksGrid">
+				<FormLink to="/settings/theme/manage"
+					><template #icon
+						><i
+							class="ph-folder-notch-open ph-bold ph-lg"
+						></i></template
+					>{{ i18n.ts._theme.manage
+					}}<template #suffix>{{ themesCount }}</template></FormLink
+				>
+				<FormLink to="https://assets.misskey.io/theme/list" external
+					><template #icon
+						><i class="ph-planet ph-bold ph-lg"></i></template
+					>{{ i18n.ts._theme.explore }}</FormLink
+				>
+				<FormLink to="/settings/theme/install"
+					><template #icon
+						><i
+							class="ph-download-simple ph-bold ph-lg"
+						></i></template
+					>{{ i18n.ts._theme.install }}</FormLink
+				>
+				<FormLink to="/theme-editor"
+					><template #icon
+						><i
+							class="ph-paint-brush-broad ph-bold ph-lg"
+						></i></template
+					>{{ i18n.ts._theme.make }}</FormLink
+				>
+			</div>
+		</FormSection>
+
+		<FormButton
+			v-if="wallpaper == null"
+			class="_formBlock"
+			@click="setWallpaper"
+			>{{ i18n.ts.setWallpaper }}</FormButton
+		>
+		<FormButton v-else class="_formBlock" @click="wallpaper = null">{{
+			i18n.ts.removeWallpaper
+		}}</FormButton>
 	</div>
-
-	<div class="selects _formBlock">
-		<FormSelect v-model="lightThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForLightMode }}</template>
-			<template #prefix><i class="ph-sun ph-bold ph-lg"></i></template>
-			<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
-			<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</FormSelect>
-		<FormSelect v-model="darkThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForDarkMode }}</template>
-			<template #prefix><i class="ph-moon ph-bold ph-lg"></i></template>
-			<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
-			<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</FormSelect>
-	</div>
-
-	<FormSection>
-		<div class="_formLinksGrid">
-			<FormLink to="/settings/theme/manage"><template #icon><i class="ph-folder-notch-open ph-bold ph-lg"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ph-planet ph-bold ph-lg"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
-			<FormLink to="/settings/theme/install"><template #icon><i class="ph-download-simple ph-bold ph-lg"></i></template>{{ i18n.ts._theme.install }}</FormLink>
-			<FormLink to="/theme-editor"><template #icon><i class="ph-paint-brush-broad ph-bold ph-lg"></i></template>{{ i18n.ts._theme.make }}</FormLink>
-		</div>
-	</FormSection>
-
-	<FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
-	<FormButton v-else class="_formBlock" @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, ref, watch } from 'vue';
-import JSON5 from 'json5';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import { getBuiltinThemesRef } from '@/scripts/theme';
-import { selectFile } from '@/scripts/select-file';
-import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { ColdDeviceStorage , defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { uniqueBy } from '@/scripts/array';
-import { fetchThemes, getThemes } from '@/theme-store';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed, onActivated, ref, watch } from "vue";
+import JSON5 from "json5";
+import FormSwitch from "@/components/form/switch.vue";
+import FormSelect from "@/components/form/select.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import FormButton from "@/components/MkButton.vue";
+import { getBuiltinThemesRef } from "@/scripts/theme";
+import { selectFile } from "@/scripts/select-file";
+import { isDeviceDarkmode } from "@/scripts/is-device-darkmode";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import { uniqueBy } from "@/scripts/array";
+import { fetchThemes, getThemes } from "@/theme-store";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
 
-const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
-const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
-const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
-const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
-const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
-const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
-const themes = computed(() => uniqueBy([ instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value ].filter(x => x != null), theme => theme.id));
+const instanceDarkTheme = computed(() =>
+	instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null
+);
+const installedDarkThemes = computed(() =>
+	installedThemes.value.filter((t) => t.base === "dark" || t.kind === "dark")
+);
+const builtinDarkThemes = computed(() =>
+	builtinThemes.value.filter((t) => t.base === "dark" || t.kind === "dark")
+);
+const instanceLightTheme = computed(() =>
+	instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null
+);
+const installedLightThemes = computed(() =>
+	installedThemes.value.filter(
+		(t) => t.base === "light" || t.kind === "light"
+	)
+);
+const builtinLightThemes = computed(() =>
+	builtinThemes.value.filter((t) => t.base === "light" || t.kind === "light")
+);
+const themes = computed(() =>
+	uniqueBy(
+		[
+			instanceDarkTheme.value,
+			instanceLightTheme.value,
+			...builtinThemes.value,
+			...installedThemes.value,
+		].filter((x) => x != null),
+		(theme) => theme.id
+	)
+);
 
-const darkTheme = ColdDeviceStorage.ref('darkTheme');
+const darkTheme = ColdDeviceStorage.ref("darkTheme");
 const darkThemeId = computed({
 	get() {
 		return darkTheme.value.id;
 	},
 	set(id) {
-		const t = themes.value.find(x => x.id === id);
-		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
-			ColdDeviceStorage.set('darkTheme', t);
+		const t = themes.value.find((x) => x.id === id);
+		if (t) {
+			// テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+			ColdDeviceStorage.set("darkTheme", t);
 		}
 	},
 });
-const lightTheme = ColdDeviceStorage.ref('lightTheme');
+const lightTheme = ColdDeviceStorage.ref("lightTheme");
 const lightThemeId = computed({
 	get() {
 		return lightTheme.value.id;
 	},
 	set(id) {
-		const t = themes.value.find(x => x.id === id);
-		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
-			ColdDeviceStorage.set('lightTheme', t);
+		const t = themes.value.find((x) => x.id === id);
+		if (t) {
+			// テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+			ColdDeviceStorage.set("lightTheme", t);
 		}
 	},
 });
-const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
-const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
-const wallpaper = ref(localStorage.getItem('wallpaper'));
+const darkMode = computed(defaultStore.makeGetterSetter("darkMode"));
+const syncDeviceDarkMode = computed(
+	ColdDeviceStorage.makeGetterSetter("syncDeviceDarkMode")
+);
+const wallpaper = ref(localStorage.getItem("wallpaper"));
 const themesCount = installedThemes.value.length;
 
 watch(syncDeviceDarkMode, () => {
 	if (syncDeviceDarkMode.value) {
-		defaultStore.set('darkMode', isDeviceDarkmode());
+		defaultStore.set("darkMode", isDeviceDarkmode());
 	}
 });
 
 watch(wallpaper, () => {
 	if (wallpaper.value == null) {
-		localStorage.removeItem('wallpaper');
+		localStorage.removeItem("wallpaper");
 	} else {
-		localStorage.setItem('wallpaper', wallpaper.value);
+		localStorage.setItem("wallpaper", wallpaper.value);
 	}
 	location.reload();
 });
@@ -149,7 +260,7 @@ fetchThemes().then(() => {
 });
 
 function setWallpaper(event) {
-	selectFile(event.currentTarget ?? event.target, null).then(file => {
+	selectFile(event.currentTarget ?? event.target, null).then((file) => {
 		wallpaper.value = file.url;
 	});
 }
@@ -160,7 +271,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.theme,
-	icon: 'ph-palette ph-bold ph-lg',
+	icon: "ph-palette ph-bold ph-lg",
 });
 </script>
 
@@ -176,7 +287,8 @@ definePageMetadata({
 		&.disabled {
 			opacity: 0.7;
 
-			&, * {
+			&,
+			* {
 				cursor: not-allowed !important;
 			}
 		}
@@ -200,11 +312,13 @@ definePageMetadata({
 			position: relative;
 			width: 90px;
 			height: 50px;
-			background-color: #83D8FF;
+			background-color: #83d8ff;
 			border-radius: 90px - 6;
-			transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+			transition: background-color 200ms
+				cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 
-			> .before, > .after {
+			> .before,
+			> .after {
 				position: absolute;
 				top: 15px;
 				transition: color 1s ease;
@@ -229,15 +343,15 @@ definePageMetadata({
 			left: 3px;
 			width: 50px - 6;
 			height: 50px - 6;
-			background-color: #FFCF96;
+			background-color: #ffcf96;
 			border-radius: 50px;
-			box-shadow: 0 2px 6px rgba(0,0,0,.3);
+			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 			transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-			transform:  rotate(-45deg);
+			transform: rotate(-45deg);
 
 			.crater {
 				position: absolute;
-				background-color: #E8CDA5;
+				background-color: #e8cda5;
 				opacity: 0;
 				transition: opacity 200ms ease-in-out !important;
 				border-radius: 100%;
@@ -309,7 +423,7 @@ definePageMetadata({
 			z-index: 0;
 			width: 2px;
 			height: 2px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		.star--5 {
@@ -318,7 +432,7 @@ definePageMetadata({
 			z-index: 0;
 			width: 3px;
 			height: 3px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		.star--6 {
@@ -327,12 +441,12 @@ definePageMetadata({
 			z-index: 0;
 			width: 2px;
 			height: 2px;
-			transform: translate3d(3px,0,0);
+			transform: translate3d(3px, 0, 0);
 		}
 
 		input:checked {
 			+ .toggle {
-				background-color: #749DD6;
+				background-color: #749dd6;
 
 				> .before {
 					color: var(--fg);
@@ -343,10 +457,12 @@ definePageMetadata({
 				}
 
 				.toggle__handler {
-					background-color: #FFE5B5;
+					background-color: #ffe5b5;
 					transform: translate3d(40px, 0, 0) rotate(0);
 
-					.crater { opacity: 1; }
+					.crater {
+						opacity: 1;
+					}
 				}
 
 				.star--1 {
@@ -370,19 +486,22 @@ definePageMetadata({
 				.star--5,
 				.star--6 {
 					opacity: 1;
-					transform: translate3d(0,0,0);
+					transform: translate3d(0, 0, 0);
 				}
 
 				.star--4 {
-					transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+					transition: all 300ms 200ms
+						cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 				}
 
 				.star--5 {
-					transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+					transition: all 300ms 300ms
+						cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 				}
 
 				.star--6 {
-					transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+					transition: all 300ms 400ms
+						cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
 				}
 			}
 		}
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index 7c4cc3460..7d7a2759c 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -1,53 +1,73 @@
 <template>
-<div class="_formRoot">
-	<FormInput v-model="name" class="_formBlock">
-		<template #label>Name</template>
-	</FormInput>
+	<div class="_formRoot">
+		<FormInput v-model="name" class="_formBlock">
+			<template #label>Name</template>
+		</FormInput>
 
-	<FormInput v-model="url" type="url" class="_formBlock">
-		<template #label>URL</template>
-	</FormInput>
+		<FormInput v-model="url" type="url" class="_formBlock">
+			<template #label>URL</template>
+		</FormInput>
 
-	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-		<template #label>Secret</template>
-	</FormInput>
+		<FormInput v-model="secret" class="_formBlock">
+			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+			<template #label>Secret</template>
+		</FormInput>
 
-	<FormSection>
-		<template #label>Events</template>
+		<FormSection>
+			<template #label>Events</template>
 
-		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
-		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
-		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
-		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
-		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
-		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
-		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
-	</FormSection>
+			<FormSwitch v-model="event_follow" class="_formBlock"
+				>Follow</FormSwitch
+			>
+			<FormSwitch v-model="event_followed" class="_formBlock"
+				>Followed</FormSwitch
+			>
+			<FormSwitch v-model="event_note" class="_formBlock"
+				>Note</FormSwitch
+			>
+			<FormSwitch v-model="event_reply" class="_formBlock"
+				>Reply</FormSwitch
+			>
+			<FormSwitch v-model="event_renote" class="_formBlock"
+				>Renote</FormSwitch
+			>
+			<FormSwitch v-model="event_reaction" class="_formBlock"
+				>Reaction</FormSwitch
+			>
+			<FormSwitch v-model="event_mention" class="_formBlock"
+				>Mention</FormSwitch
+			>
+		</FormSection>
 
-	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
+		<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
 
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="save"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</FormButton>
+		<div
+			class="_formBlock"
+			style="display: flex; gap: var(--margin); flex-wrap: wrap"
+		>
+			<FormButton primary inline @click="save"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.save }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormInput from "@/components/form/input.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	webhookId: string;
 }>();
 
-const webhook = await os.api('i/webhooks/show', {
+const webhook = await os.api("i/webhooks/show", {
 	webhookId: props.webhookId,
 });
 
@@ -56,25 +76,25 @@ let url = $ref(webhook.url);
 let secret = $ref(webhook.secret);
 let active = $ref(webhook.active);
 
-let event_follow = $ref(webhook.on.includes('follow'));
-let event_followed = $ref(webhook.on.includes('followed'));
-let event_note = $ref(webhook.on.includes('note'));
-let event_reply = $ref(webhook.on.includes('reply'));
-let event_renote = $ref(webhook.on.includes('renote'));
-let event_reaction = $ref(webhook.on.includes('reaction'));
-let event_mention = $ref(webhook.on.includes('mention'));
+let event_follow = $ref(webhook.on.includes("follow"));
+let event_followed = $ref(webhook.on.includes("followed"));
+let event_note = $ref(webhook.on.includes("note"));
+let event_reply = $ref(webhook.on.includes("reply"));
+let event_renote = $ref(webhook.on.includes("renote"));
+let event_reaction = $ref(webhook.on.includes("reaction"));
+let event_mention = $ref(webhook.on.includes("mention"));
 
 async function save(): Promise<void> {
 	const events = [];
-	if (event_follow) events.push('follow');
-	if (event_followed) events.push('followed');
-	if (event_note) events.push('note');
-	if (event_reply) events.push('reply');
-	if (event_renote) events.push('renote');
-	if (event_reaction) events.push('reaction');
-	if (event_mention) events.push('mention');
+	if (event_follow) events.push("follow");
+	if (event_followed) events.push("followed");
+	if (event_note) events.push("note");
+	if (event_reply) events.push("reply");
+	if (event_renote) events.push("renote");
+	if (event_reaction) events.push("reaction");
+	if (event_mention) events.push("mention");
 
-	os.apiWithDialog('i/webhooks/update', {
+	os.apiWithDialog("i/webhooks/update", {
 		name,
 		url,
 		secret,
@@ -88,7 +108,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'Edit webhook',
-	icon: 'ph-lightning ph-bold ph-lg',
+	title: "Edit webhook",
+	icon: "ph-lightning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index ab16ccecd..ea45312d5 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -1,49 +1,69 @@
 <template>
-<div class="_formRoot">
-	<FormInput v-model="name" class="_formBlock">
-		<template #label>Name</template>
-	</FormInput>
+	<div class="_formRoot">
+		<FormInput v-model="name" class="_formBlock">
+			<template #label>Name</template>
+		</FormInput>
 
-	<FormInput v-model="url" type="url" class="_formBlock">
-		<template #label>URL</template>
-	</FormInput>
+		<FormInput v-model="url" type="url" class="_formBlock">
+			<template #label>URL</template>
+		</FormInput>
 
-	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-		<template #label>Secret</template>
-	</FormInput>
+		<FormInput v-model="secret" class="_formBlock">
+			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
+			<template #label>Secret</template>
+		</FormInput>
 
-	<FormSection>
-		<template #label>Events</template>
+		<FormSection>
+			<template #label>Events</template>
 
-		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
-		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
-		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
-		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
-		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
-		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
-		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
-	</FormSection>
+			<FormSwitch v-model="event_follow" class="_formBlock"
+				>Follow</FormSwitch
+			>
+			<FormSwitch v-model="event_followed" class="_formBlock"
+				>Followed</FormSwitch
+			>
+			<FormSwitch v-model="event_note" class="_formBlock"
+				>Note</FormSwitch
+			>
+			<FormSwitch v-model="event_reply" class="_formBlock"
+				>Reply</FormSwitch
+			>
+			<FormSwitch v-model="event_renote" class="_formBlock"
+				>Renote</FormSwitch
+			>
+			<FormSwitch v-model="event_reaction" class="_formBlock"
+				>Reaction</FormSwitch
+			>
+			<FormSwitch v-model="event_mention" class="_formBlock"
+				>Mention</FormSwitch
+			>
+		</FormSection>
 
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="create"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.create }}</FormButton>
+		<div
+			class="_formBlock"
+			style="display: flex; gap: var(--margin); flex-wrap: wrap"
+		>
+			<FormButton primary inline @click="create"
+				><i class="ph-check ph-bold ph-lg"></i>
+				{{ i18n.ts.create }}</FormButton
+			>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import FormInput from "@/components/form/input.vue";
+import FormSection from "@/components/form/section.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormButton from "@/components/MkButton.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-let name = $ref('');
-let url = $ref('');
-let secret = $ref('');
+let name = $ref("");
+let url = $ref("");
+let secret = $ref("");
 
 let event_follow = $ref(true);
 let event_followed = $ref(true);
@@ -55,15 +75,15 @@ let event_mention = $ref(true);
 
 async function create(): Promise<void> {
 	const events = [];
-	if (event_follow) events.push('follow');
-	if (event_followed) events.push('followed');
-	if (event_note) events.push('note');
-	if (event_reply) events.push('reply');
-	if (event_renote) events.push('renote');
-	if (event_reaction) events.push('reaction');
-	if (event_mention) events.push('mention');
+	if (event_follow) events.push("follow");
+	if (event_followed) events.push("followed");
+	if (event_note) events.push("note");
+	if (event_reply) events.push("reply");
+	if (event_renote) events.push("renote");
+	if (event_reaction) events.push("reaction");
+	if (event_mention) events.push("mention");
 
-	os.apiWithDialog('i/webhooks/create', {
+	os.apiWithDialog("i/webhooks/create", {
 		name,
 		url,
 		secret,
@@ -76,7 +96,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'Create new webhook',
-	icon: 'ph-lightning ph-bold ph-lg',
+	title: "Create new webhook",
+	icon: "ph-lightning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index bf5f8ca4a..14309a120 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -1,44 +1,68 @@
 <template>
-<div class="_formRoot">
-	<FormSection>
-		<FormLink :to="`/settings/webhook/new`">
-			Create webhook
-		</FormLink>
-	</FormSection>
+	<div class="_formRoot">
+		<FormSection>
+			<FormLink :to="`/settings/webhook/new`"> Create webhook </FormLink>
+		</FormSection>
 
-	<FormSection>
-		<MkPagination :pagination="pagination">
-			<template #default="{items}">
-				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
-					<template #icon>
-						<i v-if="webhook.active === false" class="ph-pause-circle ph-bold ph-lg"></i>
-						<i v-else-if="webhook.latestStatus === null" class="ph-circle ph-fill"></i>
-						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ph-check ph-bold ph-lg" :style="{ color: 'var(--success)' }"></i>
-						<i v-else class="ph-warning ph-bold ph-lg" :style="{ color: 'var(--error)' }"></i>
-					</template>
-					{{ webhook.name || webhook.url }}
-					<template #suffix>
-						<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
-					</template>
-				</FormLink>
-			</template>
-		</MkPagination>
-	</FormSection>
-</div>
+		<FormSection>
+			<MkPagination :pagination="pagination">
+				<template #default="{ items }">
+					<FormLink
+						v-for="webhook in items"
+						:key="webhook.id"
+						:to="`/settings/webhook/edit/${webhook.id}`"
+						class="_formBlock"
+					>
+						<template #icon>
+							<i
+								v-if="webhook.active === false"
+								class="ph-pause-circle ph-bold ph-lg"
+							></i>
+							<i
+								v-else-if="webhook.latestStatus === null"
+								class="ph-circle ph-fill"
+							></i>
+							<i
+								v-else-if="
+									[200, 201, 204].includes(
+										webhook.latestStatus
+									)
+								"
+								class="ph-check ph-bold ph-lg"
+								:style="{ color: 'var(--success)' }"
+							></i>
+							<i
+								v-else
+								class="ph-warning ph-bold ph-lg"
+								:style="{ color: 'var(--error)' }"
+							></i>
+						</template>
+						{{ webhook.name || webhook.url }}
+						<template #suffix>
+							<MkTime
+								v-if="webhook.latestSentAt"
+								:time="webhook.latestSentAt"
+							></MkTime>
+						</template>
+					</FormLink>
+				</template>
+			</MkPagination>
+		</FormSection>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import {} from "vue";
+import MkPagination from "@/components/MkPagination.vue";
+import FormSection from "@/components/form/section.vue";
+import FormLink from "@/components/form/link.vue";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const pagination = {
-	endpoint: 'i/webhooks/list' as const,
+	endpoint: "i/webhooks/list" as const,
 	limit: 10,
 };
 
@@ -47,7 +71,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
-	title: 'Webhook',
-	icon: 'ph-lightning ph-bold ph-lg',
+	title: "Webhook",
+	icon: "ph-lightning ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index 744ab0395..9c69358bf 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -1,62 +1,86 @@
 <template>
-<div class="_formRoot">
-	<MkTab v-model="tab" class="_formBlock">
-		<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
-		<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
-	</MkTab>
-	<div class="_formBlock">
-		<div v-show="tab === 'soft'">
-			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.softDescription }}</MkInfo>
-			<FormTextarea v-model="softMutedWords" class="_formBlock">
-				<span>{{ i18n.ts._wordMute.muteWords }}</span>
-				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
-			</FormTextarea>
-		</div>
-		<div v-show="tab === 'hard'">
-			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
-			<FormTextarea v-model="hardMutedWords" class="_formBlock">
-				<span>{{ i18n.ts._wordMute.muteWords }}</span>
-				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
-			</FormTextarea>
-			<MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock">
-				<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
-				<template #value>{{ number(hardWordMutedNotesCount) }}</template>
-			</MkKeyValue>
+	<div class="_formRoot">
+		<MkTab v-model="tab" class="_formBlock">
+			<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
+			<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
+		</MkTab>
+		<div class="_formBlock">
+			<div v-show="tab === 'soft'">
+				<MkInfo class="_formBlock">{{
+					i18n.ts._wordMute.softDescription
+				}}</MkInfo>
+				<FormTextarea v-model="softMutedWords" class="_formBlock">
+					<span>{{ i18n.ts._wordMute.muteWords }}</span>
+					<template #caption
+						>{{ i18n.ts._wordMute.muteWordsDescription }}<br />{{
+							i18n.ts._wordMute.muteWordsDescription2
+						}}</template
+					>
+				</FormTextarea>
+			</div>
+			<div v-show="tab === 'hard'">
+				<MkInfo class="_formBlock"
+					>{{ i18n.ts._wordMute.hardDescription }}
+					{{ i18n.ts.reflectMayTakeTime }}</MkInfo
+				>
+				<FormTextarea v-model="hardMutedWords" class="_formBlock">
+					<span>{{ i18n.ts._wordMute.muteWords }}</span>
+					<template #caption
+						>{{ i18n.ts._wordMute.muteWordsDescription }}<br />{{
+							i18n.ts._wordMute.muteWordsDescription2
+						}}</template
+					>
+				</FormTextarea>
+				<MkKeyValue
+					v-if="hardWordMutedNotesCount != null"
+					class="_formBlock"
+				>
+					<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
+					<template #value>{{
+						number(hardWordMutedNotesCount)
+					}}</template>
+				</MkKeyValue>
+			</div>
 		</div>
+		<MkButton primary inline :disabled="!changed" @click="save()"
+			><i class="ph-floppy-disk-back ph-bold ph-lg"></i>
+			{{ i18n.ts.save }}</MkButton
+		>
 	</div>
-	<MkButton primary inline :disabled="!changed" @click="save()"><i class="ph-floppy-disk-back ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { defaultStore } from '@/store';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { ref, watch } from "vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkTab from "@/components/MkTab.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { defaultStore } from "@/store";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
-const render = (mutedWords) => mutedWords.map(x => {
-	if (Array.isArray(x)) {
-		return x.join(' ');
-	} else {
-		return x;
-	}
-}).join('\n');
+const render = (mutedWords) =>
+	mutedWords
+		.map((x) => {
+			if (Array.isArray(x)) {
+				return x.join(" ");
+			} else {
+				return x;
+			}
+		})
+		.join("\n");
 
-const tab = ref('soft');
+const tab = ref("soft");
 const softMutedWords = ref(render(defaultStore.state.mutedWords));
 const hardMutedWords = ref(render($i!.mutedWords));
 const hardWordMutedNotesCount = ref(null);
 const changed = ref(false);
 
-os.api('i/get-word-muted-notes-count', {}).then(response => {
+os.api("i/get-word-muted-notes-count", {}).then((response) => {
 	hardWordMutedNotesCount.value = response?.count;
 });
 
@@ -71,7 +95,11 @@ watch(hardMutedWords, () => {
 async function save() {
 	const parseMutes = (mutes, tab) => {
 		// split into lines, remove empty lines and unnecessary whitespace
-		let lines = mutes.trim().split('\n').map(line => line.trim()).filter(line => line !== '');
+		let lines = mutes
+			.trim()
+			.split("\n")
+			.map((line) => line.trim())
+			.filter((line) => line !== "");
 
 		// check each line if it is a RegExp or not
 		for (let i = 0; i < lines.length; i++) {
@@ -85,15 +113,21 @@ async function save() {
 				} catch (err: any) {
 					// invalid syntax: do not save, do not reset changed flag
 					os.alert({
-						type: 'error',
+						type: "error",
 						title: i18n.ts.regexpError,
-						text: i18n.t('regexpErrorDescription', { tab, line: i + 1 }) + '\n' + err.toString(),
+						text:
+							i18n.t("regexpErrorDescription", {
+								tab,
+								line: i + 1,
+							}) +
+							"\n" +
+							err.toString(),
 					});
 					// re-throw error so these invalid settings are not saved
 					throw err;
 				}
 			} else {
-				lines[i] = line.split(' ');
+				lines[i] = line.split(" ");
 			}
 		}
 
@@ -109,8 +143,8 @@ async function save() {
 		return;
 	}
 
-	defaultStore.set('mutedWords', softMutes);
-	await os.api('i/update', {
+	defaultStore.set("mutedWords", softMutes);
+	await os.api("i/update", {
 		mutedWords: hardMutes,
 	});
 
@@ -123,6 +157,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.wordMute,
-	icon: 'ph-speaker-x ph-bold ph-lg',
+	icon: "ph-speaker-x ph-bold ph-lg",
 });
 </script>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index c073c2690..5b4231ff8 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -1,144 +1,175 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XPostForm
-			v-if="state === 'writing'"
-			fixed
-			:instant="true"
-			:initial-text="initialText"
-			:initial-visibility="visibility"
-			:initial-files="files"
-			:initial-local-only="localOnly"
-			:reply="reply"
-			:renote="renote"
-			:initial-visible-users="visibleUsers"
-			class="_panel"
-			@posted="state = 'posted'"
-		/>
-		<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
+			<XPostForm
+				v-if="state === 'writing'"
+				fixed
+				:instant="true"
+				:initial-text="initialText"
+				:initial-visibility="visibility"
+				:initial-files="files"
+				:initial-local-only="localOnly"
+				:reply="reply"
+				:renote="renote"
+				:initial-visible-users="visibleUsers"
+				class="_panel"
+				@posted="state = 'posted'"
+			/>
+			<MkButton
+				v-else-if="state === 'posted'"
+				primary
+				class="close"
+				@click="close()"
+				>{{ i18n.ts.close }}</MkButton
+			>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 // SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
 
-import { } from 'vue';
-import { noteVisibilities } from 'calckey-js';
-import * as Acct from 'calckey-js/built/acct';
-import * as Misskey from 'calckey-js';
-import MkButton from '@/components/MkButton.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { noteVisibilities } from "calckey-js";
+import * as Acct from "calckey-js/built/acct";
+import * as Misskey from "calckey-js";
+import MkButton from "@/components/MkButton.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const urlParams = new URLSearchParams(window.location.search);
-const localOnlyQuery = urlParams.get('localOnly');
-const visibilityQuery = urlParams.get('visibility');
+const localOnlyQuery = urlParams.get("localOnly");
+const visibilityQuery = urlParams.get("visibility");
 
-let state = $ref('fetching' as 'fetching' | 'writing' | 'posted');
-let title = $ref(urlParams.get('title'));
-const text = urlParams.get('text');
-const url = urlParams.get('url');
+let state = $ref("fetching" as "fetching" | "writing" | "posted");
+let title = $ref(urlParams.get("title"));
+const text = urlParams.get("text");
+const url = urlParams.get("url");
 let initialText = $ref(null as string | null);
 let reply = $ref(null as Misskey.entities.Note | null);
 let renote = $ref(null as Misskey.entities.Note | null);
-let visibility = $ref(noteVisibilities.includes(visibilityQuery) ? visibilityQuery : null);
-let localOnly = $ref(localOnlyQuery === '0' ? false : localOnlyQuery === '1' ? true : null);
+let visibility = $ref(
+	noteVisibilities.includes(visibilityQuery) ? visibilityQuery : null
+);
+let localOnly = $ref(
+	localOnlyQuery === "0" ? false : localOnlyQuery === "1" ? true : null
+);
 let files = $ref([] as Misskey.entities.DriveFile[]);
 let visibleUsers = $ref([] as Misskey.entities.User[]);
 
 async function init() {
-	let noteText = '';
+	let noteText = "";
 	if (title) noteText += `[ ${title} ]\n`;
 	// Googleニュース対策
-	if (text?.startsWith(`${title}.\n`)) noteText += text.replace(`${title}.\n`, '');
+	if (text?.startsWith(`${title}.\n`))
+		noteText += text.replace(`${title}.\n`, "");
 	else if (text && title !== text) noteText += `${text}\n`;
 	if (url) noteText += `${url}`;
 	initialText = noteText.trim();
 
-	if (visibility === 'specified') {
-		const visibleUserIds = urlParams.get('visibleUserIds');
-		const visibleAccts = urlParams.get('visibleAccts');
+	if (visibility === "specified") {
+		const visibleUserIds = urlParams.get("visibleUserIds");
+		const visibleAccts = urlParams.get("visibleAccts");
 		await Promise.all(
 			[
-				...(visibleUserIds ? visibleUserIds.split(',').map(userId => ({ userId })) : []),
-				...(visibleAccts ? visibleAccts.split(',').map(Acct.parse) : []),
+				...(visibleUserIds
+					? visibleUserIds.split(",").map((userId) => ({ userId }))
+					: []),
+				...(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)}`);
-				}),
-			),
+				// 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)}`
+							);
+						}
+					)
+				)
 		);
 	}
 
 	try {
 		//#region Reply
-		const replyId = urlParams.get('replyId');
-		const replyUri = urlParams.get('replyUri');
+		const replyId = urlParams.get("replyId");
+		const replyUri = urlParams.get("replyUri");
 		if (replyId) {
-			reply = await os.api('notes/show', {
+			reply = await os.api("notes/show", {
 				noteId: replyId,
 			});
 		} else if (replyUri) {
-			const obj = await os.api('ap/show', {
+			const obj = await os.api("ap/show", {
 				uri: replyUri,
 			});
-			if (obj.type === 'Note') {
+			if (obj.type === "Note") {
 				reply = obj.object;
 			}
 		}
 		//#endregion
 
 		//#region Renote
-		const renoteId = urlParams.get('renoteId');
-		const renoteUri = urlParams.get('renoteUri');
+		const renoteId = urlParams.get("renoteId");
+		const renoteUri = urlParams.get("renoteUri");
 		if (renoteId) {
-			renote = await os.api('notes/show', {
+			renote = await os.api("notes/show", {
 				noteId: renoteId,
 			});
 		} else if (renoteUri) {
-			const obj = await os.api('ap/show', {
+			const obj = await os.api("ap/show", {
 				uri: renoteUri,
 			});
-			if (obj.type === 'Note') {
+			if (obj.type === "Note") {
 				renote = obj.object;
 			}
 		}
 		//#endregion
 
 		//#region Drive files
-		const fileIds = urlParams.get('fileIds');
+		const fileIds = urlParams.get("fileIds");
 		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}`);
-					}),
-				),
+				fileIds.split(",").map((fileId) =>
+					os.api("drive/files/show", { fileId }).then(
+						(file) => {
+							files.push(file);
+						},
+						() => {
+							console.error(`Failed to fetch a file ${fileId}`);
+						}
+					)
+				)
 			);
 		}
 		//#endregion
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			title: err.message,
 			text: err.name,
 		});
 	}
 
-	state = 'writing';
+	state = "writing";
 }
 
 init();
@@ -148,7 +179,7 @@ function close(): void {
 
 	// 閉じなければ100ms後タイムラインに
 	window.setTimeout(() => {
-		mainRouter.push('/');
+		mainRouter.push("/");
 	}, 100);
 }
 
@@ -158,7 +189,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.share,
-	icon: 'ph-share-network ph-bold ph-lg',
+	icon: "ph-share-network ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index 7c11d4c81..db06799ba 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -1,15 +1,15 @@
 <template>
-<div>
-	{{ i18n.ts.processing }}
-</div>
+	<div>
+		{{ i18n.ts.processing }}
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { onMounted } from "vue";
+import * as os from "@/os";
+import { login } from "@/account";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	code: string;
@@ -17,13 +17,13 @@ const props = defineProps<{
 
 onMounted(async () => {
 	await os.alert({
-		type: 'info',
-		text: i18n.t('clickToFinishEmailVerification', { ok: i18n.ts.gotIt }),
+		type: "info",
+		text: i18n.t("clickToFinishEmailVerification", { ok: i18n.ts.gotIt }),
 	});
-	const res = await os.apiWithDialog('signup-pending', {
+	const res = await os.apiWithDialog("signup-pending", {
 		code: props.code,
 	});
-	login(res.i, '/');
+	login(res.i, "/");
 });
 
 const headerActions = $computed(() => []);
@@ -32,10 +32,8 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.signup,
-	icon: 'ph-user ph-bold ph-lg',
+	icon: "ph-user ph-bold ph-lg",
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 7570deb41..390b6a0ba 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -1,23 +1,25 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XNotes class="_content" :pagination="pagination"/>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800">
+			<XNotes class="_content" :pagination="pagination" />
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import XNotes from "@/components/MkNotes.vue";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	tag: string;
 }>();
 
 const pagination = {
-	endpoint: 'notes/search-by-tag' as const,
+	endpoint: "notes/search-by-tag" as const,
 	limit: 10,
 	params: computed(() => ({
 		tag: props.tag,
@@ -28,8 +30,10 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: props.tag,
-	icon: 'ph-hash ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: props.tag,
+		icon: "ph-hash ph-bold ph-lg",
+	}))
+);
 </script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 7643da986..28a50f925 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -1,126 +1,245 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
-		<div class="cwepdizn _formRoot">
-			<FormFolder :default-open="true" class="_formBlock">
-				<template #label>{{ i18n.ts.backgroundColor }}</template>
-				<div class="cwepdizn-colors">
-					<div class="row">
-						<button v-for="color in bgColors.filter(x => x.kind === 'light')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
-							<div class="preview" :style="{ background: color.forPreview }"></div>
-						</button>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+			<div class="cwepdizn _formRoot">
+				<FormFolder :default-open="true" class="_formBlock">
+					<template #label>{{ i18n.ts.backgroundColor }}</template>
+					<div class="cwepdizn-colors">
+						<div class="row">
+							<button
+								v-for="color in bgColors.filter(
+									(x) => x.kind === 'light'
+								)"
+								:key="color.color"
+								class="color _button"
+								:class="{
+									active: theme.props.bg === color.color,
+								}"
+								@click="setBgColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{ background: color.forPreview }"
+								></div>
+							</button>
+						</div>
+						<div class="row">
+							<button
+								v-for="color in bgColors.filter(
+									(x) => x.kind === 'dark'
+								)"
+								:key="color.color"
+								class="color _button"
+								:class="{
+									active: theme.props.bg === color.color,
+								}"
+								@click="setBgColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{ background: color.forPreview }"
+								></div>
+							</button>
+						</div>
 					</div>
-					<div class="row">
-						<button v-for="color in bgColors.filter(x => x.kind === 'dark')" :key="color.color" class="color _button" :class="{ active: theme.props.bg === color.color }" @click="setBgColor(color)">
-							<div class="preview" :style="{ background: color.forPreview }"></div>
-						</button>
+				</FormFolder>
+
+				<FormFolder :default-open="true" class="_formBlock">
+					<template #label>{{ i18n.ts.accentColor }}</template>
+					<div class="cwepdizn-colors">
+						<div class="row">
+							<button
+								v-for="color in accentColors"
+								:key="color"
+								class="color rounded _button"
+								:class="{
+									active: theme.props.accent === color,
+								}"
+								@click="setAccentColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{ background: color }"
+								></div>
+							</button>
+						</div>
 					</div>
-				</div>
-			</FormFolder>
+				</FormFolder>
 
-			<FormFolder :default-open="true" class="_formBlock">
-				<template #label>{{ i18n.ts.accentColor }}</template>
-				<div class="cwepdizn-colors">
-					<div class="row">
-						<button v-for="color in accentColors" :key="color" class="color rounded _button" :class="{ active: theme.props.accent === color }" @click="setAccentColor(color)">
-							<div class="preview" :style="{ background: color }"></div>
-						</button>
+				<FormFolder :default-open="true" class="_formBlock">
+					<template #label>{{ i18n.ts.textColor }}</template>
+					<div class="cwepdizn-colors">
+						<div class="row">
+							<button
+								v-for="color in fgColors"
+								:key="color"
+								class="color char _button"
+								:class="{
+									active:
+										theme.props.fg === color.forLight ||
+										theme.props.fg === color.forDark,
+								}"
+								@click="setFgColor(color)"
+							>
+								<div
+									class="preview"
+									:style="{
+										color: color.forPreview
+											? color.forPreview
+											: theme.base === 'light'
+											? '#5f5f5f'
+											: '#dadada',
+									}"
+								>
+									A
+								</div>
+							</button>
+						</div>
 					</div>
-				</div>
-			</FormFolder>
+				</FormFolder>
 
-			<FormFolder :default-open="true" class="_formBlock">
-				<template #label>{{ i18n.ts.textColor }}</template>
-				<div class="cwepdizn-colors">
-					<div class="row">
-						<button v-for="color in fgColors" :key="color" class="color char _button" :class="{ active: (theme.props.fg === color.forLight) || (theme.props.fg === color.forDark) }" @click="setFgColor(color)">
-							<div class="preview" :style="{ color: color.forPreview ? color.forPreview : theme.base === 'light' ? '#5f5f5f' : '#dadada' }">A</div>
-						</button>
+				<FormFolder :default-open="false" class="_formBlock">
+					<template #icon
+						><i class="ph-code ph-bold ph-lg"></i
+					></template>
+					<template #label>{{ i18n.ts.editCode }}</template>
+
+					<div class="_formRoot">
+						<FormTextarea
+							v-model="themeCode"
+							tall
+							class="_formBlock"
+						>
+							<template #label>{{
+								i18n.ts._theme.code
+							}}</template>
+						</FormTextarea>
+						<FormButton
+							primary
+							class="_formBlock"
+							@click="applyThemeCode"
+							>{{ i18n.ts.apply }}</FormButton
+						>
 					</div>
-				</div>
-			</FormFolder>
+				</FormFolder>
 
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #icon><i class="ph-code ph-bold ph-lg"></i></template>
-				<template #label>{{ i18n.ts.editCode }}</template>
+				<FormFolder :default-open="false" class="_formBlock">
+					<template #label>{{ i18n.ts.addDescription }}</template>
 
-				<div class="_formRoot">
-					<FormTextarea v-model="themeCode" tall class="_formBlock">
-						<template #label>{{ i18n.ts._theme.code }}</template>
-					</FormTextarea>
-					<FormButton primary class="_formBlock" @click="applyThemeCode">{{ i18n.ts.apply }}</FormButton>
-				</div>
-			</FormFolder>
-
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #label>{{ i18n.ts.addDescription }}</template>
-
-				<div class="_formRoot">
-					<FormTextarea v-model="description">
-						<template #label>{{ i18n.ts._theme.description }}</template>
-					</FormTextarea>
-				</div>
-			</FormFolder>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+					<div class="_formRoot">
+						<FormTextarea v-model="description">
+							<template #label>{{
+								i18n.ts._theme.description
+							}}</template>
+						</FormTextarea>
+					</div>
+				</FormFolder>
+			</div>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import { toUnicode } from 'punycode/';
-import tinycolor from 'tinycolor2';
-import { v4 as uuid } from 'uuid';
-import JSON5 from 'json5';
+import { watch } from "vue";
+import { toUnicode } from "punycode/";
+import tinycolor from "tinycolor2";
+import { v4 as uuid } from "uuid";
+import JSON5 from "json5";
 
-import FormButton from '@/components/MkButton.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormFolder from '@/components/form/folder.vue';
+import FormButton from "@/components/MkButton.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormFolder from "@/components/form/folder.vue";
 
-import { $i } from '@/account';
-import { Theme, applyTheme } from '@/scripts/theme';
-import lightTheme from '@/themes/_light.json5';
-import darkTheme from '@/themes/_dark.json5';
-import { host } from '@/config';
-import * as os from '@/os';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { addTheme } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { useLeaveGuard } from '@/scripts/use-leave-guard';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from "@/account";
+import { Theme, applyTheme } from "@/scripts/theme";
+import lightTheme from "@/themes/_light.json5";
+import darkTheme from "@/themes/_dark.json5";
+import { host } from "@/config";
+import * as os from "@/os";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { addTheme } from "@/theme-store";
+import { i18n } from "@/i18n";
+import { useLeaveGuard } from "@/scripts/use-leave-guard";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 const bgColors = [
-	{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
-	{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
-	{ color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
-	{ color: '#f0e9ee', kind: 'light', forPreview: '#f1d1e8' },
-	{ color: '#dce2e0', kind: 'light', forPreview: '#a4dccc' },
-	{ color: '#e2e0dc', kind: 'light', forPreview: '#d8c7a5' },
-	{ color: '#d5dbe0', kind: 'light', forPreview: '#b0cae0' },
-	{ color: '#dad5d5', kind: 'light', forPreview: '#d6afaf' },
-	{ color: '#2b2b2b', kind: 'dark', forPreview: '#444444' },
-	{ color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
-	{ color: '#303629', kind: 'dark', forPreview: '#506d2f' },
-	{ color: '#293436', kind: 'dark', forPreview: '#258192' },
-	{ color: '#2e2936', kind: 'dark', forPreview: '#504069' },
-	{ color: '#252722', kind: 'dark', forPreview: '#3c462f' },
-	{ color: '#212525', kind: 'dark', forPreview: '#303e3e' },
-	{ color: '#191919', kind: 'dark', forPreview: '#272727' },
+	{ color: "#f5f5f5", kind: "light", forPreview: "#f5f5f5" },
+	{ color: "#f0eee9", kind: "light", forPreview: "#f3e2b9" },
+	{ color: "#e9eff0", kind: "light", forPreview: "#bfe3e8" },
+	{ color: "#f0e9ee", kind: "light", forPreview: "#f1d1e8" },
+	{ color: "#dce2e0", kind: "light", forPreview: "#a4dccc" },
+	{ color: "#e2e0dc", kind: "light", forPreview: "#d8c7a5" },
+	{ color: "#d5dbe0", kind: "light", forPreview: "#b0cae0" },
+	{ color: "#dad5d5", kind: "light", forPreview: "#d6afaf" },
+	{ color: "#2b2b2b", kind: "dark", forPreview: "#444444" },
+	{ color: "#362e29", kind: "dark", forPreview: "#735c4d" },
+	{ color: "#303629", kind: "dark", forPreview: "#506d2f" },
+	{ color: "#293436", kind: "dark", forPreview: "#258192" },
+	{ color: "#2e2936", kind: "dark", forPreview: "#504069" },
+	{ color: "#252722", kind: "dark", forPreview: "#3c462f" },
+	{ color: "#212525", kind: "dark", forPreview: "#303e3e" },
+	{ color: "#191919", kind: "dark", forPreview: "#272727" },
 ] as const;
-const accentColors = ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'];
+const accentColors = [
+	"#e36749",
+	"#f29924",
+	"#98c934",
+	"#34c9a9",
+	"#34a1c9",
+	"#606df7",
+	"#8d34c9",
+	"#e84d83",
+];
 const fgColors = [
-	{ color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
-	{ color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
-	{ color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
-	{ color: 'green', forLight: '#586d5b', forDark: '#d1e4d4', forPreview: '#4cbd5c' },
-	{ color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
-	{ color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
-	{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
+	{
+		color: "none",
+		forLight: "#5f5f5f",
+		forDark: "#dadada",
+		forPreview: null,
+	},
+	{
+		color: "red",
+		forLight: "#7f6666",
+		forDark: "#e4d1d1",
+		forPreview: "#ca4343",
+	},
+	{
+		color: "yellow",
+		forLight: "#736955",
+		forDark: "#e0d5c0",
+		forPreview: "#d49923",
+	},
+	{
+		color: "green",
+		forLight: "#586d5b",
+		forDark: "#d1e4d4",
+		forPreview: "#4cbd5c",
+	},
+	{
+		color: "cyan",
+		forLight: "#5d7475",
+		forDark: "#d1e3e4",
+		forPreview: "#2abdc3",
+	},
+	{
+		color: "blue",
+		forLight: "#676880",
+		forDark: "#d1d2e4",
+		forPreview: "#7275d8",
+	},
+	{
+		color: "pink",
+		forLight: "#84667d",
+		forDark: "#e4d1e0",
+		forPreview: "#b12390",
+	},
 ];
 
 let theme = $ref<Partial<Theme>>({
-	base: 'light',
+	base: "light",
 	props: lightTheme.props,
 });
 let description = $ref<string | null>(null);
@@ -130,15 +249,15 @@ let changed = $ref(false);
 useLeaveGuard($$(changed));
 
 function showPreview() {
-	os.pageWindow('/preview');
+	os.pageWindow("/preview");
 }
 
-function setBgColor(color: typeof bgColors[number]) {
+function setBgColor(color: (typeof bgColors)[number]) {
 	if (theme.base !== color.kind) {
-		const base = color.kind === 'dark' ? darkTheme : lightTheme;
+		const base = color.kind === "dark" ? darkTheme : lightTheme;
 		for (const prop of Object.keys(base.props)) {
-			if (prop === 'accent') continue;
-			if (prop === 'fg') continue;
+			if (prop === "accent") continue;
+			if (prop === "fg") continue;
 			theme.props[prop] = base.props[prop];
 		}
 	}
@@ -146,7 +265,12 @@ function setBgColor(color: typeof bgColors[number]) {
 	theme.props.bg = color.color;
 
 	if (theme.props.fg) {
-		const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
+		const matchedFgColor = fgColors.find((x) =>
+			[
+				tinycolor(x.forLight).toRgbString(),
+				tinycolor(x.forDark).toRgbString(),
+			].includes(tinycolor(theme.props.fg).toRgbString())
+		);
 		if (matchedFgColor) setFgColor(matchedFgColor);
 	}
 }
@@ -156,11 +280,11 @@ function setAccentColor(color) {
 }
 
 function setFgColor(color) {
-	theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
+	theme.props.fg = theme.base === "light" ? color.forLight : color.forDark;
 }
 
 function apply() {
-	themeCode = JSON5.stringify(theme, null, '\t');
+	themeCode = JSON5.stringify(theme, null, "\t");
 	applyTheme(theme, false);
 	changed = true;
 }
@@ -172,7 +296,7 @@ function applyThemeCode() {
 		parsed = JSON5.parse(themeCode);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: i18n.ts._theme.invalid,
 		});
 		return;
@@ -195,36 +319,39 @@ async function saveAs() {
 	await addTheme(theme);
 	applyTheme(theme);
 	if (defaultStore.state.darkMode) {
-		ColdDeviceStorage.set('darkTheme', theme);
+		ColdDeviceStorage.set("darkTheme", theme);
 	} else {
-		ColdDeviceStorage.set('lightTheme', theme);
+		ColdDeviceStorage.set("lightTheme", theme);
 	}
 	changed = false;
 	os.alert({
-		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name }),
+		type: "success",
+		text: i18n.t("_theme.installed", { name: theme.name }),
 	});
 }
 
 watch($$(theme), apply, { deep: true });
 
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ph-eye ph-bold ph-lg',
-	text: i18n.ts.preview,
-	handler: showPreview,
-}, {
-	asFullButton: true,
-	icon: 'ph-check ph-bold ph-lg',
-	text: i18n.ts.saveAs,
-	handler: saveAs,
-}]);
+const headerActions = $computed(() => [
+	{
+		asFullButton: true,
+		icon: "ph-eye ph-bold ph-lg",
+		text: i18n.ts.preview,
+		handler: showPreview,
+	},
+	{
+		asFullButton: true,
+		icon: "ph-check ph-bold ph-lg",
+		text: i18n.ts.saveAs,
+		handler: saveAs,
+	},
+]);
 
 const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.themeEditor,
-	icon: 'ph-palette ph-bold ph-lg',
+	icon: "ph-palette ph-bold ph-lg",
 });
 </script>
 
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 9c326ad05..e3f8a0083 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,27 +1,27 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkPageHeader
-			v-model:tab="src"
-			:actions="headerActions"
-			:tabs="headerTabs"
-			:display-my-avatar="true"
-		/>
-	</template>
-	<MkSpacer :content-max="800">
-		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-			<XPostForm
-				v-if="$store.reactiveState.showFixedPostForm.value"
-				class="post-form _block"
-				fixed
+	<MkStickyContainer>
+		<template #header>
+			<MkPageHeader
+				v-model:tab="src"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-my-avatar="true"
 			/>
+		</template>
+		<MkSpacer :content-max="800">
+			<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
+				<XPostForm
+					v-if="$store.reactiveState.showFixedPostForm.value"
+					class="post-form _block"
+					fixed
+				/>
 
-			<div v-if="queue > 0" class="new">
-				<button class="_buttonPrimary" @click="top()">
-					{{ i18n.ts.newNoteRecived }}
-				</button>
-			</div>
-			<!-- <div v-if="!isMobile" class="tl _block">
+				<div v-if="queue > 0" class="new">
+					<button class="_buttonPrimary" @click="top()">
+						{{ i18n.ts.newNoteRecived }}
+					</button>
+				</div>
+				<!-- <div v-if="!isMobile" class="tl _block">
 				<XTimeline
 					ref="tl"
 					:key="src"
@@ -31,56 +31,61 @@
 					@queue="queueUpdated"
 				/>
 			</div> *v-else on next div* -->
-			<div class="tl _block">
-				<swiper
-					:modules="[Virtual]"
-					:space-between="20"
-					:virtual="true"
-					:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-					@swiper="setSwiperRef"
-					@slide-change="onSlideChange"
-				>
-					<swiper-slide
-						v-for="index in timelines"
-						:key="index"
-						:virtual-index="index"
+				<div class="tl _block">
+					<swiper
+						:modules="[Virtual]"
+						:space-between="20"
+						:virtual="true"
+						:allow-touch-move="
+							!(
+								deviceKind === 'desktop' &&
+								!defaultStore.state.swipeOnDesktop
+							)
+						"
+						@swiper="setSwiperRef"
+						@slide-change="onSlideChange"
 					>
-						<XTimeline
-							ref="tl"
-							:key="src"
-							class="tl"
-							:src="src"
-							:sound="true"
-							@queue="queueUpdated"
-						/>
-					</swiper-slide>
-				</swiper>
+						<swiper-slide
+							v-for="index in timelines"
+							:key="index"
+							:virtual-index="index"
+						>
+							<XTimeline
+								ref="tl"
+								:key="src"
+								class="tl"
+								:src="src"
+								:sound="true"
+								@queue="queueUpdated"
+							/>
+						</swiper-slide>
+					</swiper>
+				</div>
 			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, ref, onMounted } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import XTutorial from '@/components/MkTutorialDialog.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
+import { computed, watch, ref, onMounted } from "vue";
+import { Virtual } from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import XTutorial from "@/components/MkTutorialDialog.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import XPostForm from "@/components/MkPostForm.vue";
+import { scroll } from "@/scripts/scroll";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import { $i } from "@/account";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
+import "swiper/scss";
+import "swiper/scss/virtual";
 
 if (defaultStore.reactiveState.tutorial.value !== -1) {
-	os.popup(XTutorial, {}, {}, 'closed');
+	os.popup(XTutorial, {}, {}, "closed");
 }
 
 const isLocalTimelineAvailable =
@@ -96,38 +101,44 @@ const keymap = {
 
 let timelines = [];
 
-if (isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home') {
-	timelines.push('social');
+if (
+	isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
+) {
+	timelines.push("social");
 } else {
-	timelines.push('home');
+	timelines.push("home");
 }
 
 if (isLocalTimelineAvailable) {
-	timelines.push('local');
+	timelines.push("local");
 }
 
-if (isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home') {
-	timelines.push('home');
+if (
+	isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
+) {
+	timelines.push("home");
 } else if (isLocalTimelineAvailable) {
-	timelines.push('social');
+	timelines.push("social");
 }
 
 if (isRecommendedTimelineAvailable) {
-	timelines.push('recommended');
+	timelines.push("recommended");
 }
 if (isGlobalTimelineAvailable) {
-	timelines.push('global');
+	timelines.push("global");
 }
 
 const MOBILE_THRESHOLD = 500;
 
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isMobile = ref(
-	deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD,
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
 );
-window.addEventListener('resize', () => {
+window.addEventListener("resize", () => {
 	isMobile.value =
-		(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
 const tlComponent = $ref<InstanceType<typeof XTimeline>>();
@@ -153,43 +164,51 @@ function top(): void {
 }
 
 async function chooseList(ev: MouseEvent): Promise<void> {
-	const lists = await os.api('users/lists/list');
-	const items = [{
-		type: 'link' as const,
-		text: i18n.ts.manageLists,
-		icon: 'ph-faders-horizontal ph-bold ph-lg',
-		to: '/my/lists',
-	}].concat(lists.map((list) => ({
-		type: 'link' as const,
-		text: list.name,
-		icon: '',
-		to: `/timeline/list/${list.id}`,
-	})));
+	const lists = await os.api("users/lists/list");
+	const items = [
+		{
+			type: "link" as const,
+			text: i18n.ts.manageLists,
+			icon: "ph-faders-horizontal ph-bold ph-lg",
+			to: "/my/lists",
+		},
+	].concat(
+		lists.map((list) => ({
+			type: "link" as const,
+			text: list.name,
+			icon: "",
+			to: `/timeline/list/${list.id}`,
+		}))
+	);
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
 async function chooseAntenna(ev: MouseEvent): Promise<void> {
-	const antennas = await os.api('antennas/list');
-	const items = [{
-		type: 'link' as const,
-		indicate: false,
-		text: i18n.ts.manageAntennas,
-		icon: 'ph-faders-horizontal ph-bold ph-lg',
-		to: '/my/antennas',
-	}].concat(antennas.map((antenna) => ({
-		type: 'link' as const,
-		text: antenna.name,
-		icon: '',
-		indicate: antenna.hasUnreadNote,
-		to: `/timeline/antenna/${antenna.id}`,
-	})));
+	const antennas = await os.api("antennas/list");
+	const items = [
+		{
+			type: "link" as const,
+			indicate: false,
+			text: i18n.ts.manageAntennas,
+			icon: "ph-faders-horizontal ph-bold ph-lg",
+			to: "/my/antennas",
+		},
+	].concat(
+		antennas.map((antenna) => ({
+			type: "link" as const,
+			text: antenna.name,
+			icon: "",
+			indicate: antenna.hasUnreadNote,
+			to: `/timeline/antenna/${antenna.id}`,
+		}))
+	);
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
 function saveSrc(
-	newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global',
+	newSrc: "home" | "local" | "recommended" | "social" | "global"
 ): void {
-	defaultStore.set('tl', {
+	defaultStore.set("tl", {
 		...defaultStore.state.tl,
 		src: newSrc,
 	});
@@ -210,14 +229,14 @@ function focus(): void {
 
 const headerActions = $computed(() => [
 	{
-		icon: 'ph-list-bullets ph-bold ph-lg',
+		icon: "ph-list-bullets ph-bold ph-lg",
 		title: i18n.ts.lists,
 		text: i18n.ts.lists,
 		iconOnly: true,
 		handler: chooseList,
 	},
 	{
-		icon: 'ph-flying-saucer ph-bold ph-lg',
+		icon: "ph-flying-saucer ph-bold ph-lg",
 		title: i18n.ts.antennas,
 		text: i18n.ts.antennas,
 		iconOnly: true,
@@ -233,70 +252,73 @@ const headerActions = $computed(() => [
 // Swap home timeline with social's functionality
 
 const headerTabs = $computed(() => [
-	...(isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home'
+	...(isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
 		? [
-			{
-				key: 'social',
-				title: i18n.ts._timelines.home,
-				icon: 'ph-house ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "social",
+					title: i18n.ts._timelines.home,
+					icon: "ph-house ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: [
-			{
-				key: 'home',
-				title: i18n.ts._timelines.home,
-				icon: 'ph-house ph-bold ph-lg',
-				iconOnly: true,
-			}
-		]),
+				{
+					key: "home",
+					title: i18n.ts._timelines.home,
+					icon: "ph-house ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]),
 	...(isLocalTimelineAvailable
 		? [
-			{
-				key: 'local',
-				title: i18n.ts._timelines.local,
-				icon: 'ph-users ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "local",
+					title: i18n.ts._timelines.local,
+					icon: "ph-users ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
-	...(isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home'
+	...(isLocalTimelineAvailable &&
+	defaultStore.state.showLocalPostsInTimeline === "home"
 		? [
-			{
-				key: 'home',
-				title: i18n.ts._timelines.social,
-				icon: 'ph-handshake ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
-		: isLocalTimelineAvailable ? [
- 			{
-				key: 'social',
-				title: i18n.ts._timelines.social,
-				icon: 'ph-handshake ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "home",
+					title: i18n.ts._timelines.social,
+					icon: "ph-handshake ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
+		: isLocalTimelineAvailable
+		? [
+				{
+					key: "social",
+					title: i18n.ts._timelines.social,
+					icon: "ph-handshake ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
 	...(isRecommendedTimelineAvailable
 		? [
-			{
-				key: 'recommended',
-				title: i18n.ts._timelines.recommended,
-				icon: 'ph-thumbs-up ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "recommended",
+					title: i18n.ts._timelines.recommended,
+					icon: "ph-thumbs-up ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
 	...(isGlobalTimelineAvailable
 		? [
-			{
-				key: 'global',
-				title: i18n.ts._timelines.global,
-				icon: 'ph-planet ph-bold ph-lg',
-				iconOnly: true,
-			},
-		]
+				{
+					key: "global",
+					title: i18n.ts._timelines.global,
+					icon: "ph-planet ph-bold ph-lg",
+					iconOnly: true,
+				},
+		  ]
 		: []),
 ]);
 
@@ -304,20 +326,22 @@ definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.timeline,
 		icon:
-			src === 'local'
-				? 'ph-users ph-bold ph-lg'
-				: src === 'social' && defaultStore.state.showLocalPostsInTimeline === 'home'
-					? 'ph-house ph-bold ph-lg'
-					: src === 'social'
-						? 'ph-handshake ph-bold ph-lg'
-						: src === 'recommended'
-							? 'ph-thumbs-up ph-bold ph-lg'
-							: src === 'global'
-								? 'ph-planet ph-bold ph-lg'
-								: src === 'home' && defaultStore.state.showLocalPostsInTimeline === 'home'
-									? 'ph-handshake ph-bold ph-lg'
-									: 'ph-house ph-bold ph-lg',
-	})),
+			src === "local"
+				? "ph-users ph-bold ph-lg"
+				: src === "social" &&
+				  defaultStore.state.showLocalPostsInTimeline === "home"
+				? "ph-house ph-bold ph-lg"
+				: src === "social"
+				? "ph-handshake ph-bold ph-lg"
+				: src === "recommended"
+				? "ph-thumbs-up ph-bold ph-lg"
+				: src === "global"
+				? "ph-planet ph-bold ph-lg"
+				: src === "home" &&
+				  defaultStore.state.showLocalPostsInTimeline === "home"
+				? "ph-handshake ph-bold ph-lg"
+				: "ph-house ph-bold ph-lg",
+	}))
 );
 
 let swiperRef: any = null;
@@ -336,9 +360,10 @@ function syncSlide(index) {
 }
 
 onMounted(() => {
-	syncSlide(timelines.indexOf(defaultStore.state.tl?.src || swiperRef.activeIndex));
+	syncSlide(
+		timelines.indexOf(defaultStore.state.tl?.src || swiperRef.activeIndex)
+	);
 });
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index f2fcd6665..12321c2ba 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -1,190 +1,369 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div v-if="tab === 'overview'" class="_formRoot">
-				<div class="_formBlock aeakzknw">
-					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
-					<div class="body">
-						<span class="name"><MkUserName class="name" :user="user"/></span>
-						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
-						<span class="state">
-							<span v-if="suspended" class="suspended">Suspended</span>
-							<span v-if="silenced" class="silenced">Silenced</span>
-							<span v-if="moderator" class="moderator">Moderator</span>
-						</span>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			<FormSuspense :p="init">
+				<div v-if="tab === 'overview'" class="_formRoot">
+					<div class="_formBlock aeakzknw">
+						<MkAvatar
+							class="avatar"
+							:user="user"
+							:show-indicator="true"
+						/>
+						<div class="body">
+							<span class="name"
+								><MkUserName class="name" :user="user"
+							/></span>
+							<span class="sub"
+								><span class="acct _monospace"
+									>@{{ acct(user) }}</span
+								></span
+							>
+							<span class="state">
+								<span v-if="suspended" class="suspended"
+									>Suspended</span
+								>
+								<span v-if="silenced" class="silenced"
+									>Silenced</span
+								>
+								<span v-if="moderator" class="moderator"
+									>Moderator</span
+								>
+							</span>
+						</div>
 					</div>
-				</div>
 
-				<MkInfo v-if="user.username.includes('.')" class="_formBlock">{{ i18n.ts.isSystemAccount }}</MkInfo>
+					<MkInfo
+						v-if="user.username.includes('.')"
+						class="_formBlock"
+						>{{ i18n.ts.isSystemAccount }}</MkInfo
+					>
 
-				<div v-if="user.url" class="_formLinksGrid _formBlock">
-					<FormLink :to="userPage(user)">Profile</FormLink>
-					<FormLink :to="user.url" :external="true">Profile (remote)</FormLink>
-				</div>
-				<FormLink v-else class="_formBlock" :to="userPage(user)">Profile</FormLink>
+					<div v-if="user.url" class="_formLinksGrid _formBlock">
+						<FormLink :to="userPage(user)">Profile</FormLink>
+						<FormLink :to="user.url" :external="true"
+							>Profile (remote)</FormLink
+						>
+					</div>
+					<FormLink v-else class="_formBlock" :to="userPage(user)"
+						>Profile</FormLink
+					>
 
-				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
+					<FormLink
+						v-if="user.host"
+						class="_formBlock"
+						:to="`/instance-info/${user.host}`"
+						>{{ i18n.ts.instanceInfo }}</FormLink
+					>
 
-				<div class="_formBlock">
-					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
-						<template #key>ID</template>
-						<template #value><span class="_monospace">{{ user.id }}</span></template>
-					</MkKeyValue>
-					<!-- 要る？
+					<div class="_formBlock">
+						<MkKeyValue
+							:copy="user.id"
+							oneline
+							style="margin: 1em 0"
+						>
+							<template #key>ID</template>
+							<template #value
+								><span class="_monospace">{{
+									user.id
+								}}</span></template
+							>
+						</MkKeyValue>
+						<!-- 要る？
 					<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline style="margin: 1em 0;">
 						<template #key>IP (recent)</template>
 						<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
 					</MkKeyValue>
 					-->
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.createdAt }}</template>
-						<template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template>
-					</MkKeyValue>
-					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.lastActiveDate }}</template>
-						<template #value><span class="_monospace"><MkTime :time="info.lastActiveDate" :mode="'detail'"/></span></template>
-					</MkKeyValue>
-					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.email }}</template>
-						<template #value><span class="_monospace">{{ info.email }}</span></template>
-					</MkKeyValue>
-				</div>
-
-				<FormSection>
-					<template #label>ActivityPub</template>
-
-					<div class="_formBlock">
-						<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.instanceInfo }}</template>
-							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="ph-caret-right ph-bold ph-lg"></i></MkA></template>
+						<MkKeyValue oneline style="margin: 1em 0">
+							<template #key>{{ i18n.ts.createdAt }}</template>
+							<template #value
+								><span class="_monospace"
+									><MkTime
+										:time="user.createdAt"
+										:mode="'detail'" /></span
+							></template>
 						</MkKeyValue>
-						<MkKeyValue v-else oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.instanceInfo }}</template>
-							<template #value>(Local user)</template>
+						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
+							<template #key>{{
+								i18n.ts.lastActiveDate
+							}}</template>
+							<template #value
+								><span class="_monospace"
+									><MkTime
+										:time="info.lastActiveDate"
+										:mode="'detail'" /></span
+							></template>
 						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.updatedAt }}</template>
-							<template #value><MkTime v-if="user.lastFetchedAt" mode="detail" :time="user.lastFetchedAt"/><span v-else>N/A</span></template>
-						</MkKeyValue>
-						<MkKeyValue v-if="ap" oneline style="margin: 1em 0;">
-							<template #key>Type</template>
-							<template #value><span class="_monospace">{{ ap.type }}</span></template>
+						<MkKeyValue v-if="info" oneline style="margin: 1em 0">
+							<template #key>{{ i18n.ts.email }}</template>
+							<template #value
+								><span class="_monospace">{{
+									info.email
+								}}</span></template
+							>
 						</MkKeyValue>
 					</div>
 
-					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="ph-arrows-clockwise ph-bold ph-lg"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
+					<FormSection>
+						<template #label>ActivityPub</template>
 
-					<FormFolder class="_formBlock">
-						<template #label>Raw</template>
-
-						<MkObjectView v-if="ap" tall :value="ap">
-						</MkObjectView>
-					</FormFolder>
-				</FormSection>
-			</div>
-			<div v-else-if="tab === 'moderation'" class="_formRoot">
-				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ i18n.ts.moderator }}</FormSwitch>
-				<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</FormSwitch>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
-				{{ i18n.ts.reflectMayTakeTime }}
-				<div class="_formBlock">
-					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ph-key ph-bold ph-lg"></i> {{ i18n.ts.resetPassword }}</FormButton>
-					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton>
-				</div>
-				<FormTextarea v-model="moderationNote" manual-save class="_formBlock">
-					<template #label>Moderation note</template>
-				</FormTextarea>
-				<FormFolder class="_formBlock">
-					<template #label>IP</template>
-					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-					<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
-					<template v-if="iAmAdmin && ips">
-						<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
-							<span class="date">{{ record.createdAt }}</span>
-							<span class="ip">{{ record.ip }}</span>
+						<div class="_formBlock">
+							<MkKeyValue
+								v-if="user.host"
+								oneline
+								style="margin: 1em 0"
+							>
+								<template #key>{{
+									i18n.ts.instanceInfo
+								}}</template>
+								<template #value
+									><MkA
+										:to="`/instance-info/${user.host}`"
+										class="_link"
+										>{{ user.host }}
+										<i
+											class="ph-caret-right ph-bold ph-lg"
+										></i></MkA
+								></template>
+							</MkKeyValue>
+							<MkKeyValue v-else oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.instanceInfo
+								}}</template>
+								<template #value>(Local user)</template>
+							</MkKeyValue>
+							<MkKeyValue oneline style="margin: 1em 0">
+								<template #key>{{
+									i18n.ts.updatedAt
+								}}</template>
+								<template #value
+									><MkTime
+										v-if="user.lastFetchedAt"
+										mode="detail"
+										:time="user.lastFetchedAt"
+									/><span v-else>N/A</span></template
+								>
+							</MkKeyValue>
+							<MkKeyValue v-if="ap" oneline style="margin: 1em 0">
+								<template #key>Type</template>
+								<template #value
+									><span class="_monospace">{{
+										ap.type
+									}}</span></template
+								>
+							</MkKeyValue>
 						</div>
-					</template>
-				</FormFolder>
-				<FormFolder class="_formBlock">
-					<template #label>{{ i18n.ts.files }}</template>
 
-					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
-				</FormFolder>
-				<FormSection>
-					<template #label>Drive Capacity Override</template>
+						<FormButton
+							v-if="user.host != null"
+							class="_formBlock"
+							@click="updateRemoteUser"
+							><i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+							{{ i18n.ts.updateRemoteUser }}</FormButton
+						>
 
-					<FormInput v-if="user.host == null" v-model="driveCapacityOverrideMb" inline :manual-save="true" type="number" :placeholder="i18n.t('defaultValueIs', { value: instance.driveCapacityPerLocalUserMb })" @update:model-value="applyDriveCapacityOverride">
-						<template #label>{{ i18n.ts.driveCapOverrideLabel }}</template>
-						<template #suffix>MB</template>
-						<template #caption>
-							{{ i18n.ts.driveCapOverrideCaption }}
-						</template>
-					</FormInput>
-				</FormSection>
-			</div>
-			<div v-else-if="tab === 'chart'" class="_formRoot">
-				<div class="cmhjzshm">
-					<div class="selects">
-						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-							<option value="per-user-notes">{{ i18n.ts.notes }}</option>
-						</MkSelect>
+						<FormFolder class="_formBlock">
+							<template #label>Raw</template>
+
+							<MkObjectView v-if="ap" tall :value="ap">
+							</MkObjectView>
+						</FormFolder>
+					</FormSection>
+				</div>
+				<div v-else-if="tab === 'moderation'" class="_formRoot">
+					<FormSwitch
+						v-if="
+							user.host == null &&
+							$i.isAdmin &&
+							(moderator || !user.isAdmin)
+						"
+						v-model="moderator"
+						class="_formBlock"
+						@update:modelValue="toggleModerator"
+						>{{ i18n.ts.moderator }}</FormSwitch
+					>
+					<FormSwitch
+						v-model="silenced"
+						class="_formBlock"
+						@update:modelValue="toggleSilence"
+						>{{ i18n.ts.silence }}</FormSwitch
+					>
+					<FormSwitch
+						v-model="suspended"
+						class="_formBlock"
+						@update:modelValue="toggleSuspend"
+						>{{ i18n.ts.suspend }}</FormSwitch
+					>
+					{{ i18n.ts.reflectMayTakeTime }}
+					<div class="_formBlock">
+						<FormButton
+							v-if="user.host == null && iAmModerator"
+							inline
+							style="margin-right: 8px"
+							@click="resetPassword"
+							><i class="ph-key ph-bold ph-lg"></i>
+							{{ i18n.ts.resetPassword }}</FormButton
+						>
+						<FormButton
+							v-if="$i.isAdmin"
+							inline
+							danger
+							@click="deleteAccount"
+							>{{ i18n.ts.deleteAccount }}</FormButton
+						>
 					</div>
-					<div class="charts">
-						<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
-						<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
+					<FormTextarea
+						v-model="moderationNote"
+						manual-save
+						class="_formBlock"
+					>
+						<template #label>Moderation note</template>
+					</FormTextarea>
+					<FormFolder class="_formBlock">
+						<template #label>IP</template>
+						<MkInfo v-if="!iAmAdmin" warn>{{
+							i18n.ts.requireAdminForView
+						}}</MkInfo>
+						<MkInfo v-else
+							>The date is the IP address was first
+							acknowledged.</MkInfo
+						>
+						<template v-if="iAmAdmin && ips">
+							<div
+								v-for="record in ips"
+								:key="record.ip"
+								class="_monospace"
+								:class="$style.ip"
+								style="margin: 1em 0"
+							>
+								<span class="date">{{ record.createdAt }}</span>
+								<span class="ip">{{ record.ip }}</span>
+							</div>
+						</template>
+					</FormFolder>
+					<FormFolder class="_formBlock">
+						<template #label>{{ i18n.ts.files }}</template>
+
+						<MkFileListForAdmin
+							:pagination="filesPagination"
+							view-mode="grid"
+						/>
+					</FormFolder>
+					<FormSection>
+						<template #label>Drive Capacity Override</template>
+
+						<FormInput
+							v-if="user.host == null"
+							v-model="driveCapacityOverrideMb"
+							inline
+							:manual-save="true"
+							type="number"
+							:placeholder="
+								i18n.t('defaultValueIs', {
+									value: instance.driveCapacityPerLocalUserMb,
+								})
+							"
+							@update:model-value="applyDriveCapacityOverride"
+						>
+							<template #label>{{
+								i18n.ts.driveCapOverrideLabel
+							}}</template>
+							<template #suffix>MB</template>
+							<template #caption>
+								{{ i18n.ts.driveCapOverrideCaption }}
+							</template>
+						</FormInput>
+					</FormSection>
+				</div>
+				<div v-else-if="tab === 'chart'" class="_formRoot">
+					<div class="cmhjzshm">
+						<div class="selects">
+							<MkSelect
+								v-model="chartSrc"
+								style="margin: 0 10px 0 0; flex: 1"
+							>
+								<option value="per-user-notes">
+									{{ i18n.ts.notes }}
+								</option>
+							</MkSelect>
+						</div>
+						<div class="charts">
+							<div class="label">
+								{{ i18n.t("recentNHours", { n: 90 }) }}
+							</div>
+							<MkChart
+								class="chart"
+								:src="chartSrc"
+								span="hour"
+								:limit="90"
+								:args="{ user, withoutAll: true }"
+								:detailed="true"
+							></MkChart>
+							<div class="label">
+								{{ i18n.t("recentNDays", { n: 90 }) }}
+							</div>
+							<MkChart
+								class="chart"
+								:src="chartSrc"
+								span="day"
+								:limit="90"
+								:args="{ user, withoutAll: true }"
+								:detailed="true"
+							></MkChart>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div v-else-if="tab === 'raw'" class="_formRoot">
-				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
-				</MkObjectView>
+				<div v-else-if="tab === 'raw'" class="_formRoot">
+					<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
+					</MkObjectView>
 
-				<MkObjectView tall :value="user">
-				</MkObjectView>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
+					<MkObjectView tall :value="user"> </MkObjectView>
+				</div>
+			</FormSuspense>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MkChart from '@/components/MkChart.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormFolder from '@/components/form/folder.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkSelect from '@/components/form/select.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { url } from '@/config';
-import { userPage, acct } from '@/filters/user';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { iAmAdmin, iAmModerator } from '@/account';
-import { instance } from '@/instance';
+import { computed, watch } from "vue";
+import * as misskey from "calckey-js";
+import MkChart from "@/components/MkChart.vue";
+import MkObjectView from "@/components/MkObjectView.vue";
+import FormTextarea from "@/components/form/textarea.vue";
+import FormSwitch from "@/components/form/switch.vue";
+import FormLink from "@/components/form/link.vue";
+import FormSection from "@/components/form/section.vue";
+import FormButton from "@/components/MkButton.vue";
+import FormInput from "@/components/form/input.vue";
+import FormSplit from "@/components/form/split.vue";
+import FormFolder from "@/components/form/folder.vue";
+import MkKeyValue from "@/components/MkKeyValue.vue";
+import MkSelect from "@/components/form/select.vue";
+import FormSuspense from "@/components/form/suspense.vue";
+import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import * as os from "@/os";
+import number from "@/filters/number";
+import bytes from "@/filters/bytes";
+import { url } from "@/config";
+import { userPage, acct } from "@/filters/user";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import { iAmAdmin, iAmModerator } from "@/account";
+import { instance } from "@/instance";
 
 const props = defineProps<{
 	userId: string;
 }>();
 
-let tab = $ref('overview');
-let chartSrc = $ref('per-user-notes');
+let tab = $ref("overview");
+let chartSrc = $ref("per-user-notes");
 let user = $ref<null | misskey.entities.UserDetailed>();
 let init = $ref<ReturnType<typeof createFetcher>>();
 let info = $ref();
@@ -194,9 +373,9 @@ let moderator = $ref(false);
 let silenced = $ref(false);
 let suspended = $ref(false);
 let driveCapacityOverrideMb: number | null = $ref(0);
-let moderationNote = $ref('');
+let moderationNote = $ref("");
 const filesPagination = {
-	endpoint: 'admin/drive/files' as const,
+	endpoint: "admin/drive/files" as const,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.userId,
@@ -205,33 +384,46 @@ const filesPagination = {
 
 function createFetcher() {
 	if (iAmModerator) {
-		return () => Promise.all([os.api('users/show', {
-			userId: props.userId,
-		}), os.api('admin/show-user', {
-			userId: props.userId,
-		}), iAmAdmin ? os.api('admin/get-user-ips', {
-			userId: props.userId,
-		}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
-			user = _user;
-			info = _info;
-			ips = _ips;
-			moderator = info.isModerator;
-			silenced = info.isSilenced;
-			suspended = info.isSuspended;
-			driveCapacityOverrideMb = user.driveCapacityOverrideMb;
-			moderationNote = info.moderationNote;
+		return () =>
+			Promise.all([
+				os.api("users/show", {
+					userId: props.userId,
+				}),
+				os.api("admin/show-user", {
+					userId: props.userId,
+				}),
+				iAmAdmin
+					? os.api("admin/get-user-ips", {
+							userId: props.userId,
+					  })
+					: Promise.resolve(null),
+			]).then(([_user, _info, _ips]) => {
+				user = _user;
+				info = _info;
+				ips = _ips;
+				moderator = info.isModerator;
+				silenced = info.isSilenced;
+				suspended = info.isSuspended;
+				driveCapacityOverrideMb = user.driveCapacityOverrideMb;
+				moderationNote = info.moderationNote;
 
-			watch($$(moderationNote), async () => {
-				await os.api('admin/update-user-note', { userId: user.id, text: moderationNote });
-				await refreshUser();
+				watch($$(moderationNote), async () => {
+					await os.api("admin/update-user-note", {
+						userId: user.id,
+						text: moderationNote,
+					});
+					await refreshUser();
+				});
 			});
-		});
 	} else {
-		return () => os.api('users/show', {
-			userId: props.userId,
-		}).then((res) => {
-			user = res;
-		});
+		return () =>
+			os
+				.api("users/show", {
+					userId: props.userId,
+				})
+				.then((res) => {
+					user = res;
+				});
 	}
 }
 
@@ -240,65 +432,73 @@ function refreshUser() {
 }
 
 async function updateRemoteUser() {
-	await os.apiWithDialog('federation/update-remote-user', { userId: user.id });
+	await os.apiWithDialog("federation/update-remote-user", {
+		userId: user.id,
+	});
 	refreshUser();
 }
 
 async function resetPassword() {
-	const { password } = await os.api('admin/reset-password', {
+	const { password } = await os.api("admin/reset-password", {
 		userId: user.id,
 	});
 
 	os.alert({
-		type: 'success',
-		text: i18n.t('newPasswordIs', { password }),
+		type: "success",
+		text: i18n.t("newPasswordIs", { password }),
 	});
 }
 
 async function toggleSilence(v) {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: v ? i18n.ts.silenceConfirm : i18n.ts.unsilenceConfirm,
 	});
 	if (confirm.canceled) {
 		silenced = !v;
 	} else {
-		await os.api(v ? 'admin/silence-user' : 'admin/unsilence-user', { userId: user.id });
+		await os.api(v ? "admin/silence-user" : "admin/unsilence-user", {
+			userId: user.id,
+		});
 		await refreshUser();
 	}
 }
 
 async function toggleSuspend(v) {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: v ? i18n.ts.suspendConfirm : i18n.ts.unsuspendConfirm,
 	});
 	if (confirm.canceled) {
 		suspended = !v;
 	} else {
-		await os.api(v ? 'admin/suspend-user' : 'admin/unsuspend-user', { userId: user.id });
+		await os.api(v ? "admin/suspend-user" : "admin/unsuspend-user", {
+			userId: user.id,
+		});
 		await refreshUser();
 	}
 }
 
 async function toggleModerator(v) {
-	await os.api(v ? 'admin/moderators/add' : 'admin/moderators/remove', { userId: user.id });
+	await os.api(v ? "admin/moderators/add" : "admin/moderators/remove", {
+		userId: user.id,
+	});
 	await refreshUser();
 }
 
 async function deleteAllFiles() {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteAllFilesConfirm,
 	});
 	if (confirm.canceled) return;
 	const process = async () => {
-		await os.api('admin/delete-all-files-of-a-user', { userId: user.id });
+		await os.api("admin/delete-all-files-of-a-user", { userId: user.id });
 		os.success();
 	};
-	await process().catch(err => {
+	await process().catch((err) => {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err.toString(),
 		});
 	});
@@ -311,11 +511,14 @@ async function applyDriveCapacityOverride() {
 		driveCapOrMb = null;
 	}
 	try {
-		await os.apiWithDialog('admin/drive-capacity-override', { userId: user.id, overrideMb: driveCapOrMb });
+		await os.apiWithDialog("admin/drive-capacity-override", {
+			userId: user.id,
+			overrideMb: driveCapOrMb,
+		});
 		await refreshUser();
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err.toString(),
 		});
 	}
@@ -323,66 +526,81 @@ async function applyDriveCapacityOverride() {
 
 async function deleteAccount() {
 	const confirm = await os.confirm({
-		type: 'warning',
+		type: "warning",
 		text: i18n.ts.deleteAccountConfirm,
 	});
 	if (confirm.canceled) return;
 
 	const typed = await os.inputText({
-		text: i18n.t('typeToConfirm', { x: user?.username }),
+		text: i18n.t("typeToConfirm", { x: user?.username }),
 	});
 	if (typed.canceled) return;
 
 	if (typed.result === user?.username) {
-		await os.apiWithDialog('admin/delete-account', {
+		await os.apiWithDialog("admin/delete-account", {
 			userId: user.id,
 		});
 	} else {
 		os.alert({
-			type: 'error',
-			text: 'input not match',
+			type: "error",
+			text: "input not match",
 		});
 	}
 }
 
-watch(() => props.userId, () => {
-	init = createFetcher();
-}, {
-	immediate: true,
-});
+watch(
+	() => props.userId,
+	() => {
+		init = createFetcher();
+	},
+	{
+		immediate: true,
+	}
+);
 
 watch($$(user), () => {
-	os.api('ap/get', {
+	os.api("ap/get", {
 		uri: user.uri ?? `${url}/users/${user.id}`,
-	}).then(res => {
+	}).then((res) => {
 		ap = res;
 	});
 });
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ph-info ph-bold ph-lg',
-}, iAmModerator ? {
-	key: 'moderation',
-	title: i18n.ts.moderation,
-	icon: 'ph-shield ph-bold ph-lg',
-} : null, {
-	key: 'chart',
-	title: i18n.ts.charts,
-	icon: 'ph-chart-bar ph-bold ph-lg',
-}, {
-	key: 'raw',
-	title: 'Raw',
-	icon: 'ph-code ph-bold ph-lg',
-}].filter(x => x != null));
+const headerTabs = $computed(() =>
+	[
+		{
+			key: "overview",
+			title: i18n.ts.overview,
+			icon: "ph-info ph-bold ph-lg",
+		},
+		iAmModerator
+			? {
+					key: "moderation",
+					title: i18n.ts.moderation,
+					icon: "ph-shield ph-bold ph-lg",
+			  }
+			: null,
+		{
+			key: "chart",
+			title: i18n.ts.charts,
+			icon: "ph-chart-bar ph-bold ph-lg",
+		},
+		{
+			key: "raw",
+			title: "Raw",
+			icon: "ph-code ph-bold ph-lg",
+		},
+	].filter((x) => x != null)
+);
 
-definePageMetadata(computed(() => ({
-	title: user ? acct(user) : i18n.ts.userInfo,
-	icon: 'ph-info ph-bold ph-lg',
-})));
+definePageMetadata(
+	computed(() => ({
+		title: user ? acct(user) : i18n.ts.userInfo,
+		icon: "ph-info ph-bold ph-lg",
+	}))
+);
 </script>
 
 <style lang="scss" scoped>
@@ -429,7 +647,9 @@ definePageMetadata(computed(() => ({
 				display: none;
 			}
 
-			> .suspended, > .silenced, > .moderator {
+			> .suspended,
+			> .silenced,
+			> .moderator {
 				display: inline-block;
 				border: solid 1px;
 				border-radius: 6px;
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 42c8960b4..2fd82500e 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -1,30 +1,37 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="listId"
-				class="tl"
-				src="list"
-				:list="listId"
-				:sound="true"
-				@queue="queueUpdated"
-			/>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
+			<div v-if="queue > 0" class="new">
+				<button class="_buttonPrimary" @click="top()">
+					{{ i18n.ts.newNoteRecived }}
+				</button>
+			</div>
+			<div class="tl _block">
+				<XTimeline
+					ref="tlEl"
+					:key="listId"
+					class="tl"
+					src="list"
+					:list="listId"
+					:sound="true"
+					@queue="queueUpdated"
+				/>
+			</div>
 		</div>
-	</div>
-</MkStickyContainer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, inject } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { computed, watch, inject } from "vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import { scroll } from "@/scripts/scroll";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const router = useRouter();
 
@@ -37,11 +44,15 @@ let queue = $ref(0);
 let tlEl = $ref<InstanceType<typeof XTimeline>>();
 let rootEl = $ref<HTMLElement>();
 
-watch(() => props.listId, async () => {
-	list = await os.api('users/lists/show', {
-		listId: props.listId,
-	});
-}, { immediate: true });
+watch(
+	() => props.listId,
+	async () => {
+		list = await os.api("users/lists/show", {
+			listId: props.listId,
+		});
+	},
+	{ immediate: true }
+);
 
 function queueUpdated(q) {
 	queue = q;
@@ -64,22 +75,35 @@ async function timetravel() {
 	tlEl.timetravel(date);
 }
 
-const headerActions = $computed(() => list ? [{
-	icon: 'ph-calendar-blank ph-bold ph-lg',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}, {
-	icon: 'ph-gear-six ph-bold ph-lg',
-	text: i18n.ts.settings,
-	handler: settings,
-}] : []);
+const headerActions = $computed(() =>
+	list
+		? [
+				{
+					icon: "ph-calendar-blank ph-bold ph-lg",
+					text: i18n.ts.jumpToSpecifiedDate,
+					handler: timetravel,
+				},
+				{
+					icon: "ph-gear-six ph-bold ph-lg",
+					text: i18n.ts.settings,
+					handler: settings,
+				},
+		  ]
+		: []
+);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => list ? {
-	title: list.name,
-	icon: 'ph-list-bullets ph-bold ph-lg',
-} : null));
+definePageMetadata(
+	computed(() =>
+		list
+			? {
+					title: list.name,
+					icon: "ph-list-bullets ph-bold ph-lg",
+			  }
+			: null
+	)
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 7c8925962..5eb57484b 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,27 +1,39 @@
 <template>
-<MkSpacer :content-max="800">
-	<div class="pages-user-clips">
-		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
-			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-				<b>{{ item.name }}</b>
-				<div v-if="item.description" class="description">{{ item.description }}</div>
-			</MkA>
-		</MkPagination>
-	</div>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<div class="pages-user-clips">
+			<MkPagination
+				v-slot="{ items }"
+				ref="list"
+				:pagination="pagination"
+				class="list"
+			>
+				<MkA
+					v-for="item in items"
+					:key="item.id"
+					:to="`/clips/${item.id}`"
+					class="item _panel _gap"
+				>
+					<b>{{ item.name }}</b>
+					<div v-if="item.description" class="description">
+						{{ item.description }}
+					</div>
+				</MkA>
+			</MkPagination>
+		</div>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
 const pagination = {
-	endpoint: 'users/clips' as const,
+	endpoint: "users/clips" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index d543e2bb4..b4715d8c9 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -1,26 +1,40 @@
 <template>
-<div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
-		<div class="users">
-			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
-		</div>
-	</MkPagination>
-</div>
+	<div>
+		<MkPagination
+			v-slot="{ items }"
+			ref="list"
+			:pagination="
+				type === 'following' ? followingPagination : followersPagination
+			"
+			class="mk-following-or-followers"
+		>
+			<div class="users">
+				<MkUserInfo
+					v-for="user in items.map((x) =>
+						type === 'following' ? x.followee : x.follower
+					)"
+					:key="user.id"
+					class="user"
+					:user="user"
+				/>
+			</div>
+		</MkPagination>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkUserInfo from '@/components/MkUserInfo.vue';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkUserInfo from "@/components/MkUserInfo.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
-	type: 'following' | 'followers';
+	type: "following" | "followers";
 }>();
 
 const followingPagination = {
-	endpoint: 'users/following' as const,
+	endpoint: "users/following" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
@@ -28,7 +42,7 @@ const followingPagination = {
 };
 
 const followersPagination = {
-	endpoint: 'users/followers' as const,
+	endpoint: "users/followers" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index 5fbf38985..b22922719 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -1,31 +1,42 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000">
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XFollowList :user="user" type="followers"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000">
+			<transition name="fade" mode="out-in">
+				<div v-if="user">
+					<XFollowList :user="user" type="followers" />
+				</div>
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
+			</transition>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import * as misskey from 'calckey-js';
-import XFollowList from './follow-list.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import {
+	defineAsyncComponent,
+	computed,
+	inject,
+	onMounted,
+	onUnmounted,
+	watch,
+} from "vue";
+import * as Acct from "calckey-js/built/acct";
+import * as misskey from "calckey-js";
+import XFollowList from "./follow-list.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	acct: string;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		acct: string;
+	}>(),
+	{}
+);
 
 let user = $ref<null | misskey.entities.UserDetailed>(null);
 let error = $ref(null);
@@ -33,11 +44,13 @@ let error = $ref(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
+	os.api("users/show", Acct.parse(props.acct))
+		.then((u) => {
+			user = u;
+		})
+		.catch((err) => {
+			error = err;
+		});
 }
 
 watch(() => props.acct, fetchUser, {
@@ -48,14 +61,21 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => user ? {
-	icon: 'ph-user ph-bold ph-lg',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: i18n.ts.followers,
-	userName: user,
-	avatar: user,
-} : null));
+definePageMetadata(
+	computed(() =>
+		user
+			? {
+					icon: "ph-user ph-bold ph-lg",
+					title: user.name
+						? `${user.name} (@${user.username})`
+						: `@${user.username}`,
+					subtitle: i18n.ts.followers,
+					userName: user,
+					avatar: user,
+			  }
+			: null
+	)
+);
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index c970668f4..be994f835 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -1,31 +1,42 @@
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000">
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XFollowList :user="user" type="following"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+		/></template>
+		<MkSpacer :content-max="1000">
+			<transition name="fade" mode="out-in">
+				<div v-if="user">
+					<XFollowList :user="user" type="following" />
+				</div>
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
+			</transition>
+		</MkSpacer>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'calckey-js/built/acct';
-import * as misskey from 'calckey-js';
-import XFollowList from './follow-list.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import {
+	defineAsyncComponent,
+	computed,
+	inject,
+	onMounted,
+	onUnmounted,
+	watch,
+} from "vue";
+import * as Acct from "calckey-js/built/acct";
+import * as misskey from "calckey-js";
+import XFollowList from "./follow-list.vue";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	acct: string;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		acct: string;
+	}>(),
+	{}
+);
 
 let user = $ref<null | misskey.entities.UserDetailed>(null);
 let error = $ref(null);
@@ -33,11 +44,13 @@ let error = $ref(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
+	os.api("users/show", Acct.parse(props.acct))
+		.then((u) => {
+			user = u;
+		})
+		.catch((err) => {
+			error = err;
+		});
 }
 
 watch(() => props.acct, fetchUser, {
@@ -48,14 +61,21 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => user ? {
-	icon: 'ph-user ph-bold ph-lg',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: i18n.ts.following,
-	userName: user,
-	avatar: user,
-} : null));
+definePageMetadata(
+	computed(() =>
+		user
+			? {
+					icon: "ph-user ph-bold ph-lg",
+					title: user.name
+						? `${user.name} (@${user.username})`
+						: `@${user.username}`,
+					subtitle: i18n.ts.following,
+					userName: user,
+					avatar: user,
+			  }
+			: null
+	)
+);
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index f8ad1340f..47a4ab74c 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,26 +1,33 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkPagination v-slot="{items}" :pagination="pagination">
-		<div class="jrnovfpt">
-			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-		</div>
-	</MkPagination>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" :pagination="pagination">
+			<div class="jrnovfpt">
+				<MkGalleryPostPreview
+					v-for="post in items"
+					:key="post.id"
+					:post="post"
+					class="post"
+				/>
+			</div>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-}>(), {
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+	}>(),
+	{}
+);
 
 const pagination = {
-	endpoint: 'users/gallery/posts' as const,
+	endpoint: "users/gallery/posts" as const,
 	limit: 6,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index a42bb0736..3fa01d9c0 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -1,149 +1,338 @@
 <template>
-<MkSpacer :content-max="narrow ? 800 : 1100">
-	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
-		<div class="main">
-			<!-- TODO -->
-			<!-- <div class="punished" v-if="user.isSuspended"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
-			<!-- <div class="punished" v-if="user.isSilenced"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
+	<MkSpacer :content-max="narrow ? 800 : 1100">
+		<div
+			ref="rootEl"
+			v-size="{ max: [500] }"
+			class="ftskorzw"
+			:class="{ wide: !narrow }"
+		>
+			<div class="main">
+				<!-- TODO -->
+				<!-- <div class="punished" v-if="user.isSuspended"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
+				<!-- <div class="punished" v-if="user.isSilenced"><i class="ph-warning ph-bold ph-lg" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
 
-			<div class="profile">
-				<MkMoved v-if="user.movedToUri" :host="user.movedToUri.host" :acct="user.movedToUri.username"/>
-				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
+				<div class="profile">
+					<MkMoved
+						v-if="user.movedToUri"
+						:host="user.movedToUri.host"
+						:acct="user.movedToUri.username"
+					/>
+					<MkRemoteCaution
+						v-if="user.host != null"
+						:href="user.url"
+						class="warn"
+					/>
 
-				<div :key="user.id" class="_block main">
-					<div class="banner-container" :style="style">
-						<div ref="bannerEl" class="banner" :style="style"></div>
-						<div class="fade"></div>
+					<div :key="user.id" class="_block main">
+						<div class="banner-container" :style="style">
+							<div
+								ref="bannerEl"
+								class="banner"
+								:style="style"
+							></div>
+							<div class="fade"></div>
+							<div class="title">
+								<div class="nameCollumn">
+									<MkUserName
+										class="name"
+										:user="user"
+										:nowrap="true"
+									/>
+									<span
+										v-if="
+											$i &&
+											$i.id != user.id &&
+											user.isFollowed
+										"
+										class="followed"
+										>{{ i18n.ts.followsYou }}</span
+									>
+								</div>
+								<div class="bottom">
+									<span class="username"
+										><MkAcct :user="user" :detail="true"
+									/></span>
+									<span
+										v-if="user.isAdmin"
+										:title="i18n.ts.isAdmin"
+										style="color: var(--badge)"
+										><i
+											class="ph-bookmark-simple ph-fill ph-lg"
+										></i
+									></span>
+									<span
+										v-if="!user.isAdmin && user.isModerator"
+										:title="i18n.ts.isModerator"
+										style="color: var(--badge)"
+										><i
+											class="ph-bookmark-simple ph-bold"
+										></i
+									></span>
+									<span
+										v-if="user.isLocked"
+										:title="i18n.ts.isLocked"
+										><i class="ph-lock ph-bold ph-lg"></i
+									></span>
+									<span
+										v-if="user.isBot"
+										:title="i18n.ts.isBot"
+										><i class="ph-robot ph-bold ph-lg"></i
+									></span>
+								</div>
+							</div>
+						</div>
+						<MkAvatar
+							class="avatar"
+							:user="user"
+							:disable-preview="true"
+							:show-indicator="true"
+						/>
 						<div class="title">
 							<div class="nameCollumn">
-								<MkUserName class="name" :user="user" :nowrap="true"/>
-								<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
+								<MkUserName
+									class="name"
+									:user="user"
+									:nowrap="true"
+								/>
+								<span
+									v-if="
+										$i &&
+										$i.id != user.id &&
+										user.isFollowed
+									"
+									class="followed"
+									>{{ i18n.ts.followsYou }}</span
+								>
 							</div>
 							<div class="bottom">
-								<span class="username"><MkAcct :user="user" :detail="true"/></span>
-								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple ph-fill ph-lg"></i></span>
-								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ph-bookmark-simple ph-bold"></i></span>
-								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ph-lock ph-bold ph-lg"></i></span>
-								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ph-robot ph-bold ph-lg"></i></span>
+								<span class="username"
+									><MkAcct :user="user" :detail="true"
+								/></span>
+								<span
+									v-if="user.isAdmin"
+									:title="i18n.ts.isAdmin"
+									style="color: var(--badge)"
+									><i
+										class="ph-bookmark-simple ph-fill ph-lg"
+									></i
+								></span>
+								<span
+									v-if="!user.isAdmin && user.isModerator"
+									:title="i18n.ts.isModerator"
+									style="color: var(--badge)"
+									><i class="ph-bookmark-simple ph-bold"></i
+								></span>
+								<span
+									v-if="user.isLocked"
+									:title="i18n.ts.isLocked"
+									><i class="ph-lock ph-bold ph-lg"></i
+								></span>
+								<span v-if="user.isBot" :title="i18n.ts.isBot"
+									><i class="ph-robot ph-bold ph-lg"></i
+								></span>
 							</div>
 						</div>
-					</div>
-					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-					<div class="title">
-						<div class="nameCollumn">
-							<MkUserName class="name" :user="user" :nowrap="true"/>
-							<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
+						<div class="follow-container">
+							<div class="actions">
+								<MkFollowButton
+									v-if="$i != null && $i.id != user.id"
+									:user="user"
+									@refresh="emit('refresh')"
+									:inline="true"
+									:transparent="false"
+									:full="!narrow"
+									class="koudoku"
+								/>
+								<button class="menu _button" @click="menu">
+									<i
+										class="ph-dots-three-outline ph-bold ph-lg"
+									></i>
+								</button>
+								<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
+							</div>
 						</div>
-						<div class="bottom">
-							<span class="username"><MkAcct :user="user" :detail="true"/></span>
-							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ph-bookmark-simple ph-fill ph-lg"></i></span>
-							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ph-bookmark-simple ph-bold"></i></span>
-							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ph-lock ph-bold ph-lg"></i></span>
-							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ph-robot ph-bold ph-lg"></i></span>
+						<div class="description">
+							<Mfm
+								v-if="user.description"
+								:text="user.description"
+								:is-note="false"
+								:author="user"
+								:i="$i"
+								:custom-emojis="user.emojis"
+							/>
+							<p v-else class="empty">
+								{{ i18n.ts.noAccountDescription }}
+							</p>
 						</div>
-					</div>
-					<div class="follow-container">
-						<div class="actions">
-							<MkFollowButton v-if="$i != null && $i.id != user.id" :user="user" @refresh="emit('refresh')" :inline="true" :transparent="false" :full="!narrow" class="koudoku"/>
-							<button class="menu _button" @click="menu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
-							<!-- <MkFollowButton v-else-if="$i == null" :user="user" :remote="true" :inline="true" :transparent="false" :full="true" class="koudoku"/> -->
+						<div class="fields system">
+							<dl v-if="user.location" class="field">
+								<dt class="name">
+									<i
+										class="ph-map-pin ph-bold ph-lg ph-fw ph-lg"
+									></i>
+									{{ i18n.ts.location }}
+								</dt>
+								<dd class="value">
+									{{ user.location }}{{ timeForThem }}
+								</dd>
+							</dl>
+							<dl v-if="user.birthday" class="field">
+								<dt class="name">
+									<i
+										class="ph-cake ph-bold ph-lg ph-fw ph-lg"
+									></i>
+									{{ i18n.ts.birthday }}
+								</dt>
+								<dd class="value">
+									{{
+										user.birthday
+											.replace("-", "/")
+											.replace("-", "/")
+									}}
+									({{ i18n.t("yearsOld", { age }) }})
+								</dd>
+							</dl>
+							<dl class="field">
+								<dt class="name">
+									<i
+										class="ph-calendar-blank ph-bold ph-lg ph-fw ph-lg"
+									></i>
+									{{ i18n.ts.registeredDate }}
+								</dt>
+								<dd class="value">
+									{{
+										new Date(
+											user.createdAt
+										).toLocaleString()
+									}}
+									(<MkTime :time="user.createdAt" />)
+								</dd>
+							</dl>
+						</div>
+						<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"
+									/>
+								</dt>
+								<dd class="value">
+									<Mfm
+										:text="field.value"
+										:author="user"
+										:i="$i"
+										:custom-emojis="user.emojis"
+										:colored="false"
+									/>
+								</dd>
+							</dl>
+						</div>
+						<div class="status">
+							<MkA
+								v-click-anime
+								:to="userPage(user)"
+								:class="{ active: page === 'index' }"
+							>
+								<b>{{ number(user.notesCount) }}</b>
+								<span>{{ i18n.ts.notes }}</span>
+							</MkA>
+							<MkA
+								v-click-anime
+								:to="userPage(user, 'following')"
+								:class="{ active: page === 'following' }"
+							>
+								<b>{{ number(user.followingCount) }}</b>
+								<span>{{ i18n.ts.following }}</span>
+							</MkA>
+							<MkA
+								v-click-anime
+								:to="userPage(user, 'followers')"
+								:class="{ active: page === 'followers' }"
+							>
+								<b>{{ number(user.followersCount) }}</b>
+								<span>{{ i18n.ts.followers }}</span>
+							</MkA>
 						</div>
-					</div>
-					<div class="description">
-						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-						<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
-					</div>
-					<div class="fields system">
-						<dl v-if="user.location" class="field">
-							<dt class="name"><i class="ph-map-pin ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.location }}</dt>
-							<dd class="value">{{ user.location }}{{ timeForThem }}</dd>
-						</dl>
-						<dl v-if="user.birthday" class="field">
-							<dt class="name"><i class="ph-cake ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.birthday }}</dt>
-							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ i18n.t('yearsOld', { age }) }})</dd>
-						</dl>
-						<dl class="field">
-							<dt class="name"><i class="ph-calendar-blank ph-bold ph-lg ph-fw ph-lg"></i> {{ i18n.ts.registeredDate }}</dt>
-							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-						</dl>
-					</div>
-					<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"/>
-							</dt>
-							<dd class="value">
-								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
-							</dd>
-						</dl>
-					</div>
-					<div class="status">
-						<MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
-							<b>{{ number(user.notesCount) }}</b>
-							<span>{{ i18n.ts.notes }}</span>
-						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
-							<b>{{ number(user.followingCount) }}</b>
-							<span>{{ i18n.ts.following }}</span>
-						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
-							<b>{{ number(user.followersCount) }}</b>
-							<span>{{ i18n.ts.followers }}</span>
-						</MkA>
 					</div>
 				</div>
-			</div>
 
-			<div class="contents">
-				<div v-if="user.pinnedNotes.length > 0" class="_gap">
-					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
+				<div class="contents">
+					<div v-if="user.pinnedNotes.length > 0" class="_gap">
+						<XNote
+							v-for="note in user.pinnedNotes"
+							:key="note.id"
+							class="note _block"
+							:note="note"
+							:pinned="true"
+						/>
+					</div>
+					<MkInfo
+						v-else-if="$i && $i.id === user.id"
+						style="margin: 12px 0"
+						>{{ i18n.ts.userPagePinTip }}</MkInfo
+					>
+					<template v-if="narrow">
+						<XPhotos :key="user.id" :user="user" />
+						<XActivity
+							:key="user.id"
+							:user="user"
+							style="margin-top: var(--margin)"
+						/>
+					</template>
+				</div>
+				<div>
+					<XUserTimeline :user="user" />
 				</div>
-				<MkInfo v-else-if="$i && $i.id === user.id" style="margin: 12px 0;">{{ i18n.ts.userPagePinTip }}</MkInfo>
-				<template v-if="narrow">
-					<XPhotos :key="user.id" :user="user"/>
-					<XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>
-				</template>
 			</div>
-			<div>
-				<XUserTimeline :user="user"/>
+			<div v-if="!narrow" class="sub">
+				<XPhotos :key="user.id" :user="user" />
+				<XActivity
+					:key="user.id"
+					:user="user"
+					style="margin-top: var(--margin)"
+				/>
 			</div>
 		</div>
-		<div v-if="!narrow" class="sub">
-			<XPhotos :key="user.id" :user="user"/>
-			<XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>
-		</div>
-	</div>
-</MkSpacer>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
-import calcAge from 's-age';
-import cityTimezones from 'city-timezones';
-import XUserTimeline from './index.timeline.vue';
-import type * as misskey from 'calckey-js';
-import XNote from '@/components/MkNote.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkMoved from '@/components/MkMoved.vue';
-import { getScrollPosition } from '@/scripts/scroll';
-import { getUserMenu } from '@/scripts/get-user-menu';
-import number from '@/filters/number';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { defineAsyncComponent, onMounted, onUnmounted } from "vue";
+import calcAge from "s-age";
+import cityTimezones from "city-timezones";
+import XUserTimeline from "./index.timeline.vue";
+import type * as misskey from "calckey-js";
+import XNote from "@/components/MkNote.vue";
+import MkFollowButton from "@/components/MkFollowButton.vue";
+import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import MkMoved from "@/components/MkMoved.vue";
+import { getScrollPosition } from "@/scripts/scroll";
+import { getUserMenu } from "@/scripts/get-user-menu";
+import number from "@/filters/number";
+import { userPage } from "@/filters/user";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
-const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
-const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
+const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
+const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
 
-const emit = defineEmits(['refresh']);
-const props = withDefaults(defineProps<{
-	user: misskey.entities.UserDetailed;
-}>(), {
-});
+const emit = defineEmits(["refresh"]);
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.UserDetailed;
+	}>(),
+	{}
+);
 
 const router = useRouter();
 
@@ -155,7 +344,7 @@ let bannerEl = $ref<null | HTMLElement>(null);
 const style = $computed(() => {
 	if (props.user.bannerUrl == null) return {};
 	return {
-		backgroundImage: `url(${ props.user.bannerUrl })`,
+		backgroundImage: `url(${props.user.bannerUrl})`,
 	};
 });
 
@@ -164,15 +353,25 @@ const age = $computed(() => {
 });
 
 const timeForThem = $computed(() => {
-	const tzInfo = cityTimezones.lookupViaCity(props.user.location!.replace(/\s.*/,''));
+	const tzInfo = cityTimezones.lookupViaCity(
+		props.user.location!.replace(/\s.*/, "")
+	);
 	if (tzInfo.length == 0) return "";
 	const tz = tzInfo[0].timezone;
-	const theirTime = new Date().toLocaleString("en-US", { timeZone: tz, hour12: false });
-	return ` (${theirTime.split(",")[1].trim().split(":")[0]}:${theirTime.split(" ")[1].slice(-5,-3)})`;
-})
+	const theirTime = new Date().toLocaleString("en-US", {
+		timeZone: tz,
+		hour12: false,
+	});
+	return ` (${theirTime.split(",")[1].trim().split(":")[0]}:${theirTime
+		.split(" ")[1]
+		.slice(-5, -3)})`;
+});
 
 function menu(ev) {
-	os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		getUserMenu(props.user, router),
+		ev.currentTarget ?? ev.target
+	);
 }
 
 function parallaxLoop() {
@@ -207,16 +406,13 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .ftskorzw {
-
 	> .main {
-
 		> .punished {
 			font-size: 0.8em;
 			padding: 16px;
 		}
 
 		> .profile {
-
 			> .main {
 				position: relative;
 				overflow: hidden;
@@ -244,7 +440,7 @@ onUnmounted(() => {
 							background-size: cover;
 							background-position: center;
 							pointer-events: none;
-							opacity: .1;
+							opacity: 0.1;
 							filter: var(--blur, blur(10px));
 						}
 					}
@@ -255,7 +451,10 @@ onUnmounted(() => {
 						left: 0;
 						width: 100%;
 						height: 78px;
-						background: linear-gradient(transparent, rgba(#000, 0.7));
+						background: linear-gradient(
+							transparent,
+							rgba(#000, 0.7)
+						);
 					}
 
 					> .followed {
@@ -304,24 +503,23 @@ onUnmounted(() => {
 						> .nameCollumn {
 							display: block;
 							> .name {
-							margin: 0;
-							line-height: 32px;
-							font-weight: bold;
-							font-size: 1.8em;
-							text-shadow: 0 0 8px var(--shadow);
-						}
-
-						> .followed {
-							position: relative;
-							top: -4px;
-							left: 4px;
-							padding: 4px 8px;
-							color: #fff;
-							background: rgba(0, 0, 0, 0.6);
-							font-size: 0.7em;
-							border-radius: 24px;
-						}
+								margin: 0;
+								line-height: 32px;
+								font-weight: bold;
+								font-size: 1.8em;
+								text-shadow: 0 0 8px var(--shadow);
+							}
 
+							> .followed {
+								position: relative;
+								top: -4px;
+								left: 4px;
+								padding: 4px 8px;
+								color: #fff;
+								background: rgba(0, 0, 0, 0.6);
+								font-size: 0.7em;
+								border-radius: 24px;
+							}
 						}
 
 						> .bottom {
@@ -353,7 +551,10 @@ onUnmounted(() => {
 						left: 0;
 						width: 100%;
 						height: 78px;
-						background: linear-gradient(transparent, rgba(#000, 0.7));
+						background: linear-gradient(
+							transparent,
+							rgba(#000, 0.7)
+						);
 					}
 
 					> .actions {
@@ -418,8 +619,8 @@ onUnmounted(() => {
 					border-bottom: solid 0.5px var(--divider);
 
 					> .nameCollumn {
-							display: block;
-							> .name {
+						display: block;
+						> .name {
 							margin: 0;
 							align-content: center;
 							line-height: 32px;
@@ -438,19 +639,18 @@ onUnmounted(() => {
 							font-size: 0.7em;
 							border-radius: 24px;
 						}
+					}
 
-						}
-
-						> .followedWindow {
-							position: relative;
-							top: -25px;
-							left: 80px;
-							padding: 4px 8px;
-							color: #fff;
-							background: rgba(0, 0, 0, 0.6);
-							font-size: 0.7em;
-							border-radius: 24px;
-						}
+					> .followedWindow {
+						position: relative;
+						top: -25px;
+						left: 80px;
+						padding: 4px 8px;
+						color: #fff;
+						background: rgba(0, 0, 0, 0.6);
+						font-size: 0.7em;
+						border-radius: 24px;
+					}
 
 					> .bottom {
 						> * {
@@ -600,7 +800,7 @@ onUnmounted(() => {
 				}
 
 				> .description {
-          top: -55px;
+					top: -55px;
 					position: relative;
 				}
 
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index b51ab60ad..1e57ece13 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,43 +1,63 @@
 <template>
-<MkContainer>
-	<template #header><i class="ph-chart-bar ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.activity }}</template>
-	<template #func>
-		<button class="_button" @click="showMenu">
-			<i class="ph-dots-three-outline ph-bold ph-lg"></i>
-		</button>
-	</template>
+	<MkContainer>
+		<template #header
+			><i
+				class="ph-chart-bar ph-bold ph-lg"
+				style="margin-right: 0.5em"
+			></i
+			>{{ i18n.ts.activity }}</template
+		>
+		<template #func>
+			<button class="_button" @click="showMenu">
+				<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+			</button>
+		</template>
 
-	<div style="padding: 8px;">
-		<MkChart :src="chartSrc" :args="{ user, withoutAll: true }" span="day" :limit="limit" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="5"/>
-	</div>
-</MkContainer>
+		<div style="padding: 8px">
+			<MkChart
+				:src="chartSrc"
+				:args="{ user, withoutAll: true }"
+				span="day"
+				:limit="limit"
+				:bar="true"
+				:stacked="true"
+				:detailed="false"
+				:aspect-ratio="5"
+			/>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'calckey-js';
-import MkContainer from '@/components/MkContainer.vue';
-import MkChart from '@/components/MkChart.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as misskey from "calckey-js";
+import MkContainer from "@/components/MkContainer.vue";
+import MkChart from "@/components/MkChart.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	limit?: number;
-}>(), {
-	limit: 50,
-});
+const props = withDefaults(
+	defineProps<{
+		user: misskey.entities.User;
+		limit?: number;
+	}>(),
+	{
+		limit: 50,
+	}
+);
 
-let chartSrc = $ref('per-user-notes');
+let chartSrc = $ref("per-user-notes");
 
 function showMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.notes,
-		active: true,
-		action: () => {
-			chartSrc = 'per-user-notes';
-		},
-	},/*, {
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.notes,
+				active: true,
+				action: () => {
+					chartSrc = "per-user-notes";
+				},
+			} /*, {
 		text: i18n.ts.following,
 		action: () => {
 			chartSrc = 'per-user-following';
@@ -47,6 +67,9 @@ function showMenu(ev: MouseEvent) {
 		action: () => {
 			chartSrc = 'per-user-followers';
 		}
-	}*/], ev.currentTarget ?? ev.target);
+	}*/,
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 </script>
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 5418d1f9d..5b1753560 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,43 +1,54 @@
 <template>
-<MkContainer id="photos-container" :max-height="300" :foldable="true">
-	<template #header><i class="ph-image ph-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.images }}</template>
-	<div class="ujigsodd">
-		<MkLoading v-if="fetching"/>
-		<div v-if="!fetching && images.length > 0" class="stream">
-			<MkA
-				v-for="image in images"
-				:key="image.note.id + image.file.id"
-				class="img"
-				:to="notePage(image.note)"
-			>
-				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
-			</MkA>
+	<MkContainer id="photos-container" :max-height="300" :foldable="true">
+		<template #header
+			><i class="ph-image ph-bold ph-lg" style="margin-right: 0.5em"></i
+			>{{ i18n.ts.images }}</template
+		>
+		<div class="ujigsodd">
+			<MkLoading v-if="fetching" />
+			<div v-if="!fetching && images.length > 0" class="stream">
+				<MkA
+					v-for="image in images"
+					:key="image.note.id + image.file.id"
+					class="img"
+					:to="notePage(image.note)"
+				>
+					<ImgWithBlurhash
+						:hash="image.file.blurhash"
+						:src="thumbnail(image.file)"
+						:title="image.file.name"
+					/>
+				</MkA>
+			</div>
+			<p v-if="!fetching && images.length == 0" class="empty">
+				{{ i18n.ts.nothing }}
+			</p>
 		</div>
-		<p v-if="!fetching && images.length == 0" class="empty">{{ i18n.ts.nothing }}</p>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as misskey from 'calckey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { notePage } from '@/filters/note';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import * as misskey from "calckey-js";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import { notePage } from "@/filters/note";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
 }>();
 
 let fetching = $ref(true);
-let images = $ref<{
-	note: misskey.entities.Note;
-	file: misskey.entities.DriveFile;
-}[]>([]);
+let images = $ref<
+	{
+		note: misskey.entities.Note;
+		file: misskey.entities.DriveFile;
+	}[]
+>([]);
 
 function thumbnail(image: misskey.entities.DriveFile): string {
 	return defaultStore.state.disableShowingAnimatedImages
@@ -47,19 +58,19 @@ function thumbnail(image: misskey.entities.DriveFile): string {
 
 onMounted(() => {
 	const image = [
-		'image/jpeg',
-		'image/png',
-		'image/gif',
-		'image/apng',
-		'image/vnd.mozilla.apng',
-		'image/avif',
+		"image/jpeg",
+		"image/png",
+		"image/gif",
+		"image/apng",
+		"image/vnd.mozilla.apng",
+		"image/avif",
 	];
-	os.api('users/notes', {
+	os.api("users/notes", {
 		userId: props.user.id,
 		fileType: image,
-		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
+		excludeNsfw: defaultStore.state.nsfw !== "ignore",
 		limit: 10,
-	}).then(notes => {
+	}).then((notes) => {
 		for (const note of notes) {
 			for (const file of note.files) {
 				images.push({
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index 095b5cf31..1792b6357 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,23 +1,23 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkTab v-model="include" :class="$style.tab">
-			<option :value="null">{{ i18n.ts.notes }}</option>
-			<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
-			<option value="files">{{ i18n.ts.withFiles }}</option>
-		</MkTab>
-	</template>
-	<XNotes :no-gap="true" :pagination="pagination"/>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header>
+			<MkTab v-model="include" :class="$style.tab">
+				<option :value="null">{{ i18n.ts.notes }}</option>
+				<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
+				<option value="files">{{ i18n.ts.withFiles }}</option>
+			</MkTab>
+		</template>
+		<XNotes :no-gap="true" :pagination="pagination" />
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
-import * as misskey from 'calckey-js';
-import XNotes from '@/components/MkNotes.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { ref, computed } from "vue";
+import * as misskey from "calckey-js";
+import XNotes from "@/components/MkNotes.vue";
+import MkTab from "@/components/MkTab.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
@@ -26,12 +26,12 @@ const props = defineProps<{
 const include = ref<string | null>(null);
 
 const pagination = {
-	endpoint: 'users/notes' as const,
+	endpoint: "users/notes" as const,
 	limit: 10,
 	params: computed(() => ({
 		userId: props.user.id,
-		includeReplies: include.value === 'replies',
-		withFiles: include.value === 'files',
+		includeReplies: include.value === "replies",
+		withFiles: include.value === "files",
 	})),
 };
 </script>
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 32369c63d..2452f1de4 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -1,48 +1,52 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkPageHeader
-			v-model:tab="tab"
-			:actions="headerActions"
-			:tabs="headerTabs"
-			:display-back-button="true"
-		/>
-	</template>
-	<div>
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XHome v-if="tab === 'home'" :user="user" @refresh="fetchUser()"/>
-				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
-				<XClips v-else-if="tab === 'clips'" :user="user"/>
-				<XPages v-else-if="tab === 'pages'" :user="user"/>
-				<XGallery v-else-if="tab === 'gallery'" :user="user"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</div>
-</MkStickyContainer>
+	<MkStickyContainer>
+		<template #header>
+			<MkPageHeader
+				v-model:tab="tab"
+				:actions="headerActions"
+				:tabs="headerTabs"
+				:display-back-button="true"
+			/>
+		</template>
+		<div>
+			<transition name="fade" mode="out-in">
+				<div v-if="user">
+					<XHome
+						v-if="tab === 'home'"
+						:user="user"
+						@refresh="fetchUser()"
+					/>
+					<XReactions v-else-if="tab === 'reactions'" :user="user" />
+					<XClips v-else-if="tab === 'clips'" :user="user" />
+					<XPages v-else-if="tab === 'pages'" :user="user" />
+					<XGallery v-else-if="tab === 'gallery'" :user="user" />
+				</div>
+				<MkError v-else-if="error" @retry="fetchUser()" />
+				<MkLoading v-else />
+			</transition>
+		</div>
+	</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch } from 'vue';
-import calcAge from 's-age';
-import * as Acct from 'calckey-js/built/acct';
-import type * as misskey from 'calckey-js';
-import { getScrollPosition } from '@/scripts/scroll';
-import number from '@/filters/number';
-import { userPage, acct as getAcct } from '@/filters/user';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
+import { defineAsyncComponent, computed, watch } from "vue";
+import calcAge from "s-age";
+import * as Acct from "calckey-js/built/acct";
+import type * as misskey from "calckey-js";
+import { getScrollPosition } from "@/scripts/scroll";
+import number from "@/filters/number";
+import { userPage, acct as getAcct } from "@/filters/user";
+import * as os from "@/os";
+import { useRouter } from "@/router";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
-const XHome = defineAsyncComponent(() => import('./home.vue'));
-const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
-const XClips = defineAsyncComponent(() => import('./clips.vue'));
-const XPages = defineAsyncComponent(() => import('./pages.vue'));
-const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
+const XHome = defineAsyncComponent(() => import("./home.vue"));
+const XReactions = defineAsyncComponent(() => import("./reactions.vue"));
+const XClips = defineAsyncComponent(() => import("./clips.vue"));
+const XPages = defineAsyncComponent(() => import("./pages.vue"));
+const XGallery = defineAsyncComponent(() => import("./gallery.vue"));
 
 const props = withDefaults(
 	defineProps<{
@@ -50,8 +54,8 @@ const props = withDefaults(
 		page?: string;
 	}>(),
 	{
-		page: 'home',
-	},
+		page: "home",
+	}
 );
 
 const router = useRouter();
@@ -63,7 +67,7 @@ let error = $ref(null);
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user = null;
-	os.api('users/show', Acct.parse(props.acct))
+	os.api("users/show", Acct.parse(props.acct))
 		.then((u) => {
 			user = u;
 		})
@@ -81,52 +85,61 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() =>
 	user
 		? [
-			{
-				key: 'home',
-				title: i18n.ts.overview,
-				icon: 'ph-user ph-bold ph-lg',
-			},
-			...(($i && $i.id === user.id) || user.publicReactions
-				? [{
-					key: 'reactions',
-					title: i18n.ts.reaction,
-					icon: 'ph-smiley ph-bold ph-lg',
-				}] : []),
-			...(user.instance == null ? [{
-				key: 'clips',
-				title: i18n.ts.clips,
-				icon: 'ph-paperclip ph-bold ph-lg',
-			}, {
-				key: 'pages',
-				title: i18n.ts.pages,
-				icon: 'ph-file-text ph-bold ph-lg',
-			}, {
-				key: 'gallery',
-				title: i18n.ts.gallery,
-				icon: 'ph-image-square ph-bold ph-lg',
-			}] : []),
-		]
-		: null,
+				{
+					key: "home",
+					title: i18n.ts.overview,
+					icon: "ph-user ph-bold ph-lg",
+				},
+				...(($i && $i.id === user.id) || user.publicReactions
+					? [
+							{
+								key: "reactions",
+								title: i18n.ts.reaction,
+								icon: "ph-smiley ph-bold ph-lg",
+							},
+					  ]
+					: []),
+				...(user.instance == null
+					? [
+							{
+								key: "clips",
+								title: i18n.ts.clips,
+								icon: "ph-paperclip ph-bold ph-lg",
+							},
+							{
+								key: "pages",
+								title: i18n.ts.pages,
+								icon: "ph-file-text ph-bold ph-lg",
+							},
+							{
+								key: "gallery",
+								title: i18n.ts.gallery,
+								icon: "ph-image-square ph-bold ph-lg",
+							},
+					  ]
+					: []),
+		  ]
+		: null
 );
 
 definePageMetadata(
 	computed(() =>
 		user
 			? {
-				icon: 'ph-user ph-bold ph-lg',
-				title: user.name
-					? `${user.name} (@${user.username})`
-					: `@${user.username}`,
-				subtitle: `@${getAcct(user)}`,
-				userName: user,
-				avatar: user,
-				path: `/@${user.username}`,
-				share: {
-					title: user.name,
-				},
-			}
-			: null,
-	),
+					icon: "ph-user ph-bold ph-lg",
+					title: user.name
+						? `${user.name} (@${user.username})`
+						: `@${user.username}`,
+					subtitle: `@${getAcct(user)}`,
+					userName: user,
+					avatar: user,
+					path: `/@${user.username}`,
+					share: {
+						title: user.name,
+					},
+			  }
+			: null
+	)
 );
 </script>
 
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index 89aa63f1b..ff9777adc 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,23 +1,28 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-	</MkPagination>
-</MkSpacer>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
+			<MkPagePreview
+				v-for="page in items"
+				:key="page.id"
+				:page="page"
+				class="_gap"
+			/>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkPagePreview from "@/components/MkPagePreview.vue";
+import MkPagination from "@/components/MkPagination.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
 const pagination = {
-	endpoint: 'users/pages' as const,
+	endpoint: "users/pages" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
@@ -25,6 +30,4 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 1a6568a9d..4ae147244 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,31 +1,41 @@
 <template>
-<MkSpacer :content-max="800">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<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"/>
-				<MkTime :time="item.createdAt" class="createdAt"/>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{ items }" ref="list" :pagination="pagination">
+			<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"
+					/>
+					<MkTime :time="item.createdAt" class="createdAt" />
+				</div>
+				<MkNote :key="item.id" :note="item.note" />
 			</div>
-			<MkNote :key="item.id" :note="item.note"/>
-		</div>
-	</MkPagination>
-</MkSpacer>
+		</MkPagination>
+	</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'calckey-js';
-import MkPagination from '@/components/MkPagination.vue';
-import MkNote from '@/components/MkNote.vue';
-import MkReactionIcon from '@/components/MkReactionIcon.vue';
+import { computed } from "vue";
+import * as misskey from "calckey-js";
+import MkPagination from "@/components/MkPagination.vue";
+import MkNote from "@/components/MkNote.vue";
+import MkReactionIcon from "@/components/MkReactionIcon.vue";
 
 const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
 const pagination = {
-	endpoint: 'users/reactions' as const,
+	endpoint: "users/reactions" as const,
 	limit: 20,
 	params: computed(() => ({
 		userId: props.user.id,
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index cdbdeb8fb..f40e2a82b 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -1,68 +1,115 @@
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<XTimeline class="tl"/>
-		<div class="shape1"></div>
-		<div class="shape2"></div>
-		<img src="/client-assets/misskey.svg" class="misskey"/>
-		<div class="emojis">
-			<MkEmoji :normal="true" :no-style="true" emoji="⭐"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="❤️"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🤔"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😮"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="💢"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😥"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😇"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🥴"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-		</div>
-		<div class="main">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
-			<div class="fg">
-				<h1>
-					<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
-					<span v-else class="text">{{ instanceName }}</span>
-				</h1>
-				<div class="about">
-					<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
-				</div>
-				<div class="action">
-					<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
-					<MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
-					<MkButton inline rounded style="margin-left: 12px; margin-top: 12px;" onclick="window.location.href='/explore'">Explore</MkButton>
+	<div v-if="meta" class="rsqzvsbo">
+		<div class="top">
+			<MkFeaturedPhotos class="bg" />
+			<XTimeline class="tl" />
+			<div class="shape1"></div>
+			<div class="shape2"></div>
+			<img src="/client-assets/misskey.svg" class="misskey" />
+			<div class="emojis">
+				<MkEmoji :normal="true" :no-style="true" emoji="⭐" />
+				<MkEmoji :normal="true" :no-style="true" emoji="❤️" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😆" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🤔" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😮" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
+				<MkEmoji :normal="true" :no-style="true" emoji="💢" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😥" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😇" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🥴" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
+			</div>
+			<div class="main">
+				<img
+					:src="
+						$instance.iconUrl ||
+						$instance.faviconUrl ||
+						'/favicon.ico'
+					"
+					alt=""
+					class="icon"
+				/>
+				<button class="_button _acrylic menu" @click="showMenu">
+					<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+				</button>
+				<div class="fg">
+					<h1>
+						<img
+							class="logo"
+							v-if="meta.logoImageUrl"
+							:src="meta.logoImageUrl"
+						/>
+						<span v-else class="text">{{ instanceName }}</span>
+					</h1>
+					<div class="about">
+						<div
+							class="desc"
+							v-html="meta.description || i18n.ts.headlineMisskey"
+						></div>
+					</div>
+					<div class="action">
+						<MkButton
+							inline
+							rounded
+							gradate
+							data-cy-signup
+							style="margin-right: 12px"
+							@click="signup()"
+							>{{ i18n.ts.signup }}</MkButton
+						>
+						<MkButton
+							inline
+							rounded
+							data-cy-signin
+							@click="signin()"
+							>{{ i18n.ts.login }}</MkButton
+						>
+						<MkButton
+							inline
+							rounded
+							style="margin-left: 12px; margin-top: 12px"
+							onclick="window.location.href='/explore'"
+							>Explore</MkButton
+						>
+					</div>
 				</div>
 			</div>
-		</div>
-		<div v-if="instances" class="federation">
-			<MarqueeText :duration="40">
-				<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" @click="signup()">
-					<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
-					<span class="name _monospace">{{ instance.host }}</span>
-				</MkA>
-			</MarqueeText>
+			<div v-if="instances" class="federation">
+				<MarqueeText :duration="40">
+					<MkA
+						v-for="instance in instances"
+						:key="instance.id"
+						:class="$style.federationInstance"
+						@click="signup()"
+					>
+						<img
+							v-if="instance.iconUrl"
+							class="icon"
+							:src="instance.iconUrl"
+							alt=""
+						/>
+						<span class="name _monospace">{{ instance.host }}</span>
+					</MkA>
+				</MarqueeText>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { toUnicode } from 'punycode/';
-import XTimeline from './welcome.timeline.vue';
-import MarqueeText from '@/components/MkMarquee.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 { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import { toUnicode } from "punycode/";
+import XTimeline from "./welcome.timeline.vue";
+import MarqueeText from "@/components/MkMarquee.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 { host, instanceName } from "@/config";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 let meta = $ref();
 let stats = $ref();
@@ -70,58 +117,74 @@ let tags = $ref();
 let onlineUsersCount = $ref();
 let instances = $ref();
 
-os.api('meta', { detail: true }).then(_meta => {
+os.api("meta", { detail: true }).then((_meta) => {
 	meta = _meta;
 });
 
-os.api('stats').then(_stats => {
+os.api("stats").then((_stats) => {
 	stats = _stats;
 });
 
-os.api('get-online-users-count').then(res => {
+os.api("get-online-users-count").then((res) => {
 	onlineUsersCount = res.count;
 });
 
-os.api('hashtags/list', {
-	sort: '+mentionedLocalUsers',
+os.api("hashtags/list", {
+	sort: "+mentionedLocalUsers",
 	limit: 8,
-}).then(_tags => {
+}).then((_tags) => {
 	tags = _tags;
 });
 
-os.api('federation/instances', {
-	sort: '+pubSub',
+os.api("federation/instances", {
+	sort: "+pubSub",
 	limit: 20,
-}).then(_instances => {
+}).then((_instances) => {
 	instances = _instances;
 });
 
 function signin() {
-	os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSigninDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 function signup() {
-	os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSignupDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 function showMenu(ev) {
-	os.popupMenu([{
-		text: i18n.ts.instanceInfo,
-		icon: 'ph-info ph-bold ph-lg',
-		action: () => {
-			os.pageWindow('/about');
-		},
-	}, {
-		text: i18n.ts.aboutMisskey,
-		icon: 'ph-info ph-bold ph-lg',
-		action: () => {
-			os.pageWindow('/about-calckey');
-		},
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.instanceInfo,
+				icon: "ph-info ph-bold ph-lg",
+				action: () => {
+					os.pageWindow("/about");
+				},
+			},
+			{
+				text: i18n.ts.aboutMisskey,
+				icon: "ph-info ph-bold ph-lg",
+				action: () => {
+					os.pageWindow("/about-calckey");
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 </script>
 
@@ -151,8 +214,20 @@ function showMenu(ev) {
 			width: 500px;
 			height: calc(100% - 128px);
 			overflow: hidden;
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			-webkit-mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
+			mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
 
 			@media (max-width: 1200px) {
 				display: none;
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 9dc9e14fc..82651aeda 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -1,52 +1,85 @@
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<XTimeline class="tl"/>
-		<div class="shape"></div>
-		<div class="main">
-			<h1>
-				<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
-			</h1>
-			<div class="about">
-				<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
-			</div>
-			<div class="action">
-				<MkButton class="signup" inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
-				<MkButton class="signin" inline @click="signin()">{{ i18n.ts.login }}</MkButton>
-			</div>
-			<div v-if="onlineUsersCount && stats" class="status">
-				<div>
-					<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
-						<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
-					</I18n>
-					<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
-						<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+	<div v-if="meta" class="rsqzvsbo">
+		<div class="top">
+			<MkFeaturedPhotos class="bg" />
+			<XTimeline class="tl" />
+			<div class="shape"></div>
+			<div class="main">
+				<h1>
+					<img
+						v-if="meta.logoImageUrl"
+						class="logo"
+						:src="meta.logoImageUrl"
+					/><span v-else class="text">{{ instanceName }}</span>
+				</h1>
+				<div class="about">
+					<div
+						class="desc"
+						v-html="meta.description || i18n.ts.headlineMisskey"
+					></div>
+				</div>
+				<div class="action">
+					<MkButton class="signup" inline gradate @click="signup()">{{
+						i18n.ts.signup
+					}}</MkButton>
+					<MkButton class="signin" inline @click="signin()">{{
+						i18n.ts.login
+					}}</MkButton>
+				</div>
+				<div v-if="onlineUsersCount && stats" class="status">
+					<div>
+						<I18n
+							:src="i18n.ts.nUsers"
+							text-tag="span"
+							class="users"
+						>
+							<template #n
+								><b>{{
+									number(stats.originalUsersCount)
+								}}</b></template
+							>
+						</I18n>
+						<I18n
+							:src="i18n.ts.nNotes"
+							text-tag="span"
+							class="notes"
+						>
+							<template #n
+								><b>{{
+									number(stats.originalNotesCount)
+								}}</b></template
+							>
+						</I18n>
+					</div>
+					<I18n
+						:src="i18n.ts.onlineUsersCount"
+						text-tag="span"
+						class="online"
+					>
+						<template #n
+							><b>{{ onlineUsersCount }}</b></template
+						>
 					</I18n>
 				</div>
-				<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
-					<template #n><b>{{ onlineUsersCount }}</b></template>
-				</I18n>
 			</div>
+			<img src="/client-assets/misskey.svg" class="misskey" />
 		</div>
-		<img src="/client-assets/misskey.svg" class="misskey"/>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-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';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import { toUnicode } from "punycode/";
+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";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -69,63 +102,84 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 
-		os.api('stats').then(stats => {
+		os.api("stats").then((stats) => {
 			this.stats = stats;
 		});
 
-		os.api('get-online-users-count').then(res => {
+		os.api("get-online-users-count").then((res) => {
 			this.onlineUsersCount = res.count;
 		});
 
-		os.api('hashtags/list', {
-			sort: '+mentionedLocalUsers',
-			limit: 8
-		}).then(tags => {
+		os.api("hashtags/list", {
+			sort: "+mentionedLocalUsers",
+			limit: 8,
+		}).then((tags) => {
 			this.tags = tags;
 		});
 	},
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		showMenu(ev) {
-			os.popupMenu([{
-				text: i18n.t('aboutX', { x: instanceName }),
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about');
-				}
-			}, {
-				text: i18n.ts.aboutMisskey,
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about-calckey');
-				}
-			}, null, {
-				text: i18n.ts.help,
-				icon: 'ph-question ph-bold ph-lg',
-				action: () => {
-					window.open(`https://misskey-hub.net/help.md`, '_blank');
-				}
-			}], ev.currentTarget ?? ev.target);
+			os.popupMenu(
+				[
+					{
+						text: i18n.t("aboutX", { x: instanceName }),
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about");
+						},
+					},
+					{
+						text: i18n.ts.aboutMisskey,
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about-calckey");
+						},
+					},
+					null,
+					{
+						text: i18n.ts.help,
+						icon: "ph-question ph-bold ph-lg",
+						action: () => {
+							window.open(
+								`https://misskey-hub.net/help.md`,
+								"_blank"
+							);
+						},
+					},
+				],
+				ev.currentTarget ?? ev.target
+			);
 		},
 
-		number
-	}
+		number,
+	},
 });
 </script>
 
@@ -152,8 +206,20 @@ export default defineComponent({
 			width: 500px;
 			height: calc(100% - 128px);
 			overflow: hidden;
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			-webkit-mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
+			mask-image: linear-gradient(
+				0deg,
+				rgba(0, 0, 0, 0) 0%,
+				rgba(0, 0, 0, 1) 128px,
+				rgba(0, 0, 0, 1) calc(100% - 128px),
+				rgba(0, 0, 0, 0) 100%
+			);
 		}
 
 		> .shape {
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 635bd9e55..69c1d5142 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -1,72 +1,111 @@
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<div class="fade"></div>
-		<div class="emojis">
-			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-		</div>
-		<div class="main">
-			<img src="/client-assets/misskey.svg" class="misskey"/>
-			<div class="form _panel">
-				<div class="bg">
-					<div class="fade"></div>
-				</div>
-				<div class="fg">
-					<h1>
-						<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
-					</h1>
-					<div class="about">
-						<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
+	<div v-if="meta" class="rsqzvsbo">
+		<div class="top">
+			<MkFeaturedPhotos class="bg" />
+			<div class="fade"></div>
+			<div class="emojis">
+				<MkEmoji :normal="true" :no-style="true" emoji="👍" />
+				<MkEmoji :normal="true" :no-style="true" emoji="❤" />
+				<MkEmoji :normal="true" :no-style="true" emoji="😆" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
+				<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
+			</div>
+			<div class="main">
+				<img src="/client-assets/misskey.svg" class="misskey" />
+				<div class="form _panel">
+					<div class="bg">
+						<div class="fade"></div>
 					</div>
-					<div class="action">
-						<MkButton inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
-						<MkButton inline @click="signin()">{{ i18n.ts.login }}</MkButton>
-					</div>
-					<div v-if="onlineUsersCount && stats" class="status">
-						<div>
-							<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
-								<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
-							</I18n>
-							<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
-								<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+					<div class="fg">
+						<h1>
+							<img
+								v-if="meta.logoImageUrl"
+								class="logo"
+								:src="meta.logoImageUrl"
+							/><span v-else class="text">{{
+								instanceName
+							}}</span>
+						</h1>
+						<div class="about">
+							<div
+								class="desc"
+								v-html="
+									meta.description || i18n.ts.headlineMisskey
+								"
+							></div>
+						</div>
+						<div class="action">
+							<MkButton inline gradate @click="signup()">{{
+								i18n.ts.signup
+							}}</MkButton>
+							<MkButton inline @click="signin()">{{
+								i18n.ts.login
+							}}</MkButton>
+						</div>
+						<div v-if="onlineUsersCount && stats" class="status">
+							<div>
+								<I18n
+									:src="i18n.ts.nUsers"
+									text-tag="span"
+									class="users"
+								>
+									<template #n
+										><b>{{
+											number(stats.originalUsersCount)
+										}}</b></template
+									>
+								</I18n>
+								<I18n
+									:src="i18n.ts.nNotes"
+									text-tag="span"
+									class="notes"
+								>
+									<template #n
+										><b>{{
+											number(stats.originalNotesCount)
+										}}</b></template
+									>
+								</I18n>
+							</div>
+							<I18n
+								:src="i18n.ts.onlineUsersCount"
+								text-tag="span"
+								class="online"
+							>
+								<template #n
+									><b>{{ onlineUsersCount }}</b></template
+								>
 							</I18n>
 						</div>
-						<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
-							<template #n><b>{{ onlineUsersCount }}</b></template>
-						</I18n>
+						<button class="_button _acrylic menu" @click="showMenu">
+							<i class="ph-dots-three-outline ph-bold ph-lg"></i>
+						</button>
 					</div>
-					<button class="_button _acrylic menu" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
 				</div>
+				<nav class="nav">
+					<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
+					<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
+					<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
+					<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
+				</nav>
 			</div>
-			<nav class="nav">
-				<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
-				<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
-				<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
-				<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
-			</nav>
 		</div>
 	</div>
-</div>
 </template>
 
 <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 { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
+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 { host, instanceName } from "@/config";
+import * as os from "@/os";
+import number from "@/filters/number";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -89,53 +128,69 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 
-		os.api('stats').then(stats => {
+		os.api("stats").then((stats) => {
 			this.stats = stats;
 		});
 
-		os.api('get-online-users-count').then(res => {
+		os.api("get-online-users-count").then((res) => {
 			this.onlineUsersCount = res.count;
 		});
 
-		os.api('hashtags/list', {
-			sort: '+mentionedLocalUsers',
+		os.api("hashtags/list", {
+			sort: "+mentionedLocalUsers",
 			limit: 8,
-		}).then(tags => {
+		}).then((tags) => {
 			this.tags = tags;
 		});
 	},
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		showMenu(ev) {
-			os.popupMenu([{
-				text: i18n.t('aboutX', { x: instanceName }),
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about');
-				},
-			}, {
-				text: i18n.ts.aboutMisskey,
-				icon: 'ph-info ph-bold ph-lg',
-				action: () => {
-					os.pageWindow('/about-calckey');
-				},
-			}], ev.currentTarget ?? ev.target);
+			os.popupMenu(
+				[
+					{
+						text: i18n.t("aboutX", { x: instanceName }),
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about");
+						},
+					},
+					{
+						text: i18n.ts.aboutMisskey,
+						icon: "ph-info ph-bold ph-lg",
+						action: () => {
+							os.pageWindow("/about-calckey");
+						},
+					},
+				],
+				ev.currentTarget ?? ev.target
+			);
 		},
 		number,
 	},
@@ -216,7 +271,11 @@ export default defineComponent({
 						left: 0;
 						width: 100%;
 						height: 128px;
-						background: linear-gradient(0deg, var(--panel), var(--X15));
+						background: linear-gradient(
+							0deg,
+							var(--panel),
+							var(--X15)
+						);
 					}
 				}
 
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index bc89a0860..97008e204 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -1,63 +1,85 @@
 <template>
-<form class="mk-setup" @submit.prevent="submit()">
-	<h1>Welcome to Calckey!</h1>
-	<div class="_formRoot">
-		<p>{{ i18n.ts.intro }}</p>
-		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock">
-			<template #label>{{ i18n.ts.username }}</template>
-			<template #prefix>@</template>
-			<template #suffix>@{{ host }}</template>
-		</MkInput>
-		<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
-			<template #label>{{ i18n.ts.password }}</template>
-			<template #prefix><i class="ph-lock ph-bold ph-lg"></i></template>
-		</MkInput>
-		<div class="bottom _formBlock">
-			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
-				{{ submitting ? i18n.ts.processing : i18n.ts.done }}<MkEllipsis v-if="submitting"/>
-			</MkButton>
+	<form class="mk-setup" @submit.prevent="submit()">
+		<h1>Welcome to Calckey!</h1>
+		<div class="_formRoot">
+			<p>{{ i18n.ts.intro }}</p>
+			<MkInput
+				v-model="username"
+				pattern="^[a-zA-Z0-9_]{1,20}$"
+				:spellcheck="false"
+				required
+				data-cy-admin-username
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.username }}</template>
+				<template #prefix>@</template>
+				<template #suffix>@{{ host }}</template>
+			</MkInput>
+			<MkInput
+				v-model="password"
+				type="password"
+				data-cy-admin-password
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts.password }}</template>
+				<template #prefix
+					><i class="ph-lock ph-bold ph-lg"></i
+				></template>
+			</MkInput>
+			<div class="bottom _formBlock">
+				<MkButton
+					gradate
+					type="submit"
+					:disabled="submitting"
+					data-cy-admin-ok
+				>
+					{{ submitting ? i18n.ts.processing : i18n.ts.done
+					}}<MkEllipsis v-if="submitting" />
+				</MkButton>
+			</div>
 		</div>
-	</div>
-</form>
+	</form>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import { host } from '@/config';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import MkButton from "@/components/MkButton.vue";
+import MkInput from "@/components/form/input.vue";
+import { host } from "@/config";
+import * as os from "@/os";
+import { login } from "@/account";
+import { i18n } from "@/i18n";
 
-let username = $ref('');
-let password = $ref('');
+let username = $ref("");
+let password = $ref("");
 let submitting = $ref(false);
 
 function submit() {
 	if (submitting) return;
 	submitting = true;
-	os.api('admin/accounts/create', {
+	os.api("admin/accounts/create", {
 		username: username,
 		password: password,
-	}).then(res => {
-		os.api('admin/accounts/hosted').then(res => {
-			if (res != null && res === true) {
-				os.alert({
-					type: 'success',
-					title: 'Thank you!',
-					text: 'Your hosting provider has set your settings for you. Enjoy your new instance!',
-				});
-			}
+	})
+		.then((res) => {
+			os.api("admin/accounts/hosted").then((res) => {
+				if (res != null && res === true) {
+					os.alert({
+						type: "success",
+						title: "Thank you!",
+						text: "Your hosting provider has set your settings for you. Enjoy your new instance!",
+					});
+				}
+			});
+			return login(res?.token);
+		})
+		.catch(() => {
+			submitting = false;
+			os.alert({
+				type: "error",
+				text: i18n.ts.somethingHappened,
+			});
 		});
-		return login(res?.token);
-	}).catch(() => {
-		submitting = false;
-		os.alert({
-			type: 'error',
-			text: i18n.ts.somethingHappened,
-		});
-	});
 }
 </script>
 
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index 220a8edde..f90976bf2 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -1,38 +1,53 @@
 <template>
-<div class="civpbkhh">
-	<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">
-					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i></MkA>
-					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-					<!-- <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"/>
-				</div>
-				<div v-if="note.poll">
-					<XPoll :note="note" :readOnly="true"/>
+	<div class="civpbkhh">
+		<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">
+						<MkA
+							v-if="note.replyId"
+							class="reply"
+							:to="`/notes/${note.replyId}`"
+							><i class="ph-arrow-bend-up-left ph-bold ph-lg"></i
+						></MkA>
+						<Mfm
+							v-if="note.text"
+							:text="note.text"
+							:author="note.user"
+							:i="$i"
+							:custom-emojis="note.emojis"
+						/>
+						<!-- <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" />
+					</div>
+					<div v-if="note.poll">
+						<XPoll :note="note" :readOnly="true" />
+					</div>
 				</div>
+				<XReactionsViewer ref="reactionsViewer" :note="note" />
 			</div>
-			<XReactionsViewer ref="reactionsViewer" :note="note"/>
 		</div>
 	</div>
-</div>
 </template>
 
 <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 * as os from '@/os';
+import { defineComponent } from "vue";
+import XReactionsViewer from "@/components/MkReactionsViewer.vue";
+import XMediaList from "@/components/MkMediaList.vue";
+import XPoll from "@/components/MkPoll.vue";
+import * as os from "@/os";
 
 export default defineComponent({
 	components: {
 		XReactionsViewer,
 		XMediaList,
-		XPoll
+		XPoll,
 	},
 
 	data() {
@@ -43,7 +58,7 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('notes/featured').then(notes => {
+		os.api("notes/featured").then((notes) => {
 			this.notes = notes;
 		});
 	},
@@ -52,7 +67,7 @@ export default defineComponent({
 		if (this.$refs.scroll.clientHeight > window.innerHeight) {
 			this.isScrolling = true;
 		}
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/welcome.vue b/packages/client/src/pages/welcome.vue
index a1c3fc2ab..564c6d13a 100644
--- a/packages/client/src/pages/welcome.vue
+++ b/packages/client/src/pages/welcome.vue
@@ -1,21 +1,21 @@
 <template>
-<div v-if="meta">
-	<XSetup v-if="meta.requireSetup"/>
-	<XEntrance v-else/>
-</div>
+	<div v-if="meta">
+		<XSetup v-if="meta.requireSetup" />
+		<XEntrance v-else />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import XSetup from './welcome.setup.vue';
-import XEntrance from './welcome.entrance.a.vue';
-import { instanceName } from '@/config';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
+import { computed } from "vue";
+import XSetup from "./welcome.setup.vue";
+import XEntrance from "./welcome.entrance.a.vue";
+import { instanceName } from "@/config";
+import * as os from "@/os";
+import { definePageMetadata } from "@/scripts/page-metadata";
 
 let meta = $ref(null);
 
-os.api('meta', { detail: true }).then(res => {
+os.api("meta", { detail: true }).then((res) => {
 	meta = res;
 });
 
@@ -23,8 +23,10 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
 
-definePageMetadata(computed(() => ({
-	title: instanceName,
-	icon: null,
-})));
+definePageMetadata(
+	computed(() => ({
+		title: instanceName,
+		icon: null,
+	}))
+);
 </script>
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 38ad0591b..c47b0f85e 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -1,57 +1,66 @@
 <template>
-<component
-	:is="popup.component"
-	v-for="popup in popups"
-	:key="popup.id"
-	v-bind="popup.props"
-	v-on="popup.events"
-/>
+	<component
+		:is="popup.component"
+		v-for="popup in popups"
+		:key="popup.id"
+		v-bind="popup.props"
+		v-on="popup.events"
+	/>
 
-<XUpload v-if="uploads.length > 0"/>
+	<XUpload v-if="uploads.length > 0" />
 
-<XStreamIndicator/>
+	<XStreamIndicator />
 
-<!-- <div v-if="pendingApiRequestsCount > 0" id="wait"></div> -->
+	<!-- <div v-if="pendingApiRequestsCount > 0" id="wait"></div> -->
 
-<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
+	<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { swInject } from './sw-inject';
-import { popup, popups, pendingApiRequestsCount } from '@/os';
-import { uploads } from '@/scripts/upload';
-import * as sound from '@/scripts/sound';
-import { $i } from '@/account';
-import { stream } from '@/stream';
+import { defineAsyncComponent } from "vue";
+import { swInject } from "./sw-inject";
+import { popup, popups, pendingApiRequestsCount } from "@/os";
+import { uploads } from "@/scripts/upload";
+import * as sound from "@/scripts/sound";
+import { $i } from "@/account";
+import { stream } from "@/stream";
 
-const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
-const XUpload = defineAsyncComponent(() => import('./upload.vue'));
+const XStreamIndicator = defineAsyncComponent(
+	() => import("./stream-indicator.vue")
+);
+const XUpload = defineAsyncComponent(() => import("./upload.vue"));
 
 const dev = _DEV_;
 
-const onNotification = notification => {
+const onNotification = (notification) => {
 	if ($i.mutingNotificationTypes.includes(notification.type)) return;
 
-	if (document.visibilityState === 'visible') {
-		stream.send('readNotification', {
+	if (document.visibilityState === "visible") {
+		stream.send("readNotification", {
 			id: notification.id,
 		});
 
-		popup(defineAsyncComponent(() => import('@/components/MkNotificationToast.vue')), {
-			notification,
-		}, {}, 'closed');
+		popup(
+			defineAsyncComponent(
+				() => import("@/components/MkNotificationToast.vue")
+			),
+			{
+				notification,
+			},
+			{},
+			"closed"
+		);
 	}
 
-	sound.play('notification');
+	sound.play("notification");
 };
 
 if ($i) {
-	const connection = stream.useChannel('main', null, 'UI');
-	connection.on('notification', onNotification);
+	const connection = stream.useChannel("main", null, "UI");
+	connection.on("notification", onNotification);
 
 	//#region Listen message from SW
-	if ('serviceWorker' in navigator) {
+	if ("serviceWorker" in navigator) {
 		swInject();
 	}
 }
@@ -59,9 +68,15 @@ if ($i) {
 
 <style lang="scss">
 @keyframes dev-ticker-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
-	100% { opacity: 1; }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 @keyframes progress-spinner {
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 71bf05b66..43c91d147 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -1,57 +1,138 @@
 <template>
-<div class="kmwsukvl">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :user="$i" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="icon"/><!-- <MkAcct class="text" :user="$i"/> -->
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="icon ph-fw ph-lg" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-				<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-			</button>
-			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button help" @click="openHelpMenu">
-				<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
-			</button>
+	<div class="kmwsukvl">
+		<div class="body">
+			<div class="top">
+				<div
+					class="banner"
+					:user="$i"
+					:style="{ backgroundImage: `url(${$i.bannerUrl})` }"
+				></div>
+				<button
+					v-click-anime
+					v-tooltip.noDelay.right="
+						`${i18n.ts.account}: @${$i.username}`
+					"
+					class="item _button account"
+					@click="openAccountMenu"
+				>
+					<MkAvatar
+						:user="$i"
+						class="icon"
+					/><!-- <MkAcct class="text" :user="$i"/> -->
+				</button>
+			</div>
+			<div class="middle">
+				<MkA
+					v-click-anime
+					class="item index"
+					active-class="active"
+					to="/"
+					exact
+				>
+					<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="
+							navbarItemDef[item] &&
+							navbarItemDef[item].show !== false
+						"
+						v-click-anime
+						class="item _button"
+						:class="[item, { active: navbarItemDef[item].active }]"
+						active-class="active"
+						:to="navbarItemDef[item].to"
+						v-on="
+							navbarItemDef[item].action
+								? { click: navbarItemDef[item].action }
+								: {}
+						"
+					>
+						<i
+							class="icon ph-fw ph-lg"
+							:class="navbarItemDef[item].icon"
+						></i
+						><span class="text">{{
+							i18n.ts[navbarItemDef[item].title]
+						}}</span>
+						<span
+							v-if="navbarItemDef[item].indicated"
+							class="indicator"
+							><i class="icon ph-circle ph-fill"></i
+						></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA
+					v-if="$i.isAdmin || $i.isModerator"
+					v-click-anime
+					class="item"
+					active-class="active"
+					to="/admin"
+				>
+					<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.controlPanel }}</span>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i
+						class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
+					></i
+					><span class="text">{{ i18n.ts.more }}</span>
+					<span v-if="otherMenuItemIndicated" class="indicator"
+						><i class="icon ph-circle ph-fill"></i
+					></span>
+				</button>
+				<MkA
+					v-click-anime
+					class="item"
+					active-class="active"
+					to="/settings"
+				>
+					<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.settings }}</span>
+				</MkA>
+			</div>
+			<div class="bottom">
+				<button
+					class="item _button post"
+					data-cy-open-post-form
+					@click="os.post"
+				>
+					<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.note }}</span>
+				</button>
+				<button
+					v-tooltip.noDelay.right="i18n.ts.help"
+					class="item _button help"
+					@click="openHelpMenu"
+				>
+					<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+				</button>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu as openAccountMenu_ } from '@/account';
-import { openHelpMenu_ } from '@/scripts/helpMenu'
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import {
+	computed,
+	defineAsyncComponent,
+	defineComponent,
+	ref,
+	toRef,
+	watch,
+} from "vue";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { openAccountMenu as openAccountMenu_ } from "@/account";
+import { openHelpMenu_ } from "@/scripts/helpMenu";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
-const menu = toRef(defaultStore.state, 'menu');
+const menu = toRef(defaultStore.state, "menu");
 const otherMenuItemIndicated = computed(() => {
 	for (const def in navbarItemDef) {
 		if (menu.value.includes(def)) continue;
@@ -61,9 +142,12 @@ const otherMenuItemIndicated = computed(() => {
 });
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
+	openAccountMenu_(
+		{
+			withExtraOperation: true,
+		},
+		ev
+	);
 }
 
 function openHelpMenu(ev: MouseEvent) {
@@ -71,8 +155,12 @@ function openHelpMenu(ev: MouseEvent) {
 }
 
 function more() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
-	}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
+		{},
+		{},
+		"closed"
+	);
 }
 </script>
 
@@ -99,8 +187,16 @@ function more() {
 				height: 100%;
 				background-size: cover;
 				background-position: center center;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+				-webkit-mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 15%,
+					rgba(0, 0, 0, 0.75) 100%
+				);
+				mask-image: linear-gradient(
+					0deg,
+					rgba(0, 0, 0, 0) 15%,
+					rgba(0, 0, 0, 0.75) 100%
+				);
 			}
 
 			> .account {
@@ -147,10 +243,15 @@ function more() {
 					right: 0;
 					bottom: 0;
 					border-radius: 999px;
-					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					background: linear-gradient(
+						90deg,
+						var(--buttonGradateA),
+						var(--buttonGradateB)
+					);
 				}
 
-				&:hover, &.active {
+				&:hover,
+				&.active {
 					&:before {
 						background: var(--accentLighten);
 					}
@@ -169,19 +270,19 @@ function more() {
 			}
 
 			> .help {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
-					margin-top: 1rem;
-					color: var(--navFg);
+				position: relative;
+				display: block;
+				text-align: center;
+				width: 100%;
+				margin-top: 1rem;
+				color: var(--navFg);
 
-					> .icon {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
+				> .icon {
+					display: inline-block;
+					width: 38px;
+					aspect-ratio: 1;
 				}
+			}
 
 			> .instance {
 				position: relative;
@@ -256,7 +357,8 @@ function more() {
 					color: var(--navActive);
 				}
 
-				&:hover, &.active {
+				&:hover,
+				&.active {
 					&:before {
 						content: "";
 						display: block;
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 589868699..023b4d493 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -1,75 +1,156 @@
 <template>
-<div class="mvcprjjd" :class="{ iconOnly }">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :user="$i" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="icon"/><!-- <MkAcct class="text" :user="$i"/> -->
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon ph-house ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component
-					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
-					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
+	<div class="mvcprjjd" :class="{ iconOnly }">
+		<div class="body">
+			<div class="top">
+				<div
+					class="banner"
+					:user="$i"
+					:style="{ backgroundImage: `url(${$i.bannerUrl})` }"
+				></div>
+				<button
 					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts[navbarItemDef[item].title]"
-					class="item _button"
-					:class="[item, { active: navbarItemDef[item].active }]"
-					active-class="active"
-					:to="navbarItemDef[item].to"
-					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+					v-tooltip.noDelay.right="
+						`${i18n.ts.account}: @${$i.username}`
+					"
+					class="item _button account"
+					@click="openAccountMenu"
 				>
-					<i class="icon ph-fw ph-lg" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item _button" active-class="active" to="/admin">
-				<span v-if="thereIsUnresolvedAbuseReport || noMaintainerInformation || noBotProtection || noEmailServer || updateAvailable" class="indicator"></span><i class="icon ph-door ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
-			</button>
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item _button" active-class="active" to="/settings">
-				<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button help" @click="openHelpMenu">
-				<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
-			</button>
-			<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+					<MkAvatar
+						:user="$i"
+						class="icon"
+					/><!-- <MkAcct class="text" :user="$i"/> -->
+				</button>
+			</div>
+			<div class="middle">
+				<MkA
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts.timeline"
+					class="item index"
+					active-class="active"
+					to="/"
+					exact
+				>
+					<i class="icon ph-house ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.timeline }}</span>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="
+							navbarItemDef[item] &&
+							navbarItemDef[item].show !== false
+						"
+						v-click-anime
+						v-tooltip.noDelay.right="
+							i18n.ts[navbarItemDef[item].title]
+						"
+						class="item _button"
+						:class="[item, { active: navbarItemDef[item].active }]"
+						active-class="active"
+						:to="navbarItemDef[item].to"
+						v-on="
+							navbarItemDef[item].action
+								? { click: navbarItemDef[item].action }
+								: {}
+						"
+					>
+						<i
+							class="icon ph-fw ph-lg"
+							:class="navbarItemDef[item].icon"
+						></i
+						><span class="text">{{
+							i18n.ts[navbarItemDef[item].title]
+						}}</span>
+						<span
+							v-if="navbarItemDef[item].indicated"
+							class="indicator"
+							><i class="icon ph-circle ph-fill"></i
+						></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA
+					v-if="$i.isAdmin || $i.isModerator"
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts.controlPanel"
+					class="item _button"
+					active-class="active"
+					to="/admin"
+				>
+					<span
+						v-if="
+							thereIsUnresolvedAbuseReport ||
+							noMaintainerInformation ||
+							noBotProtection ||
+							noEmailServer ||
+							updateAvailable
+						"
+						class="indicator"
+					></span
+					><i class="icon ph-door ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.controlPanel }}</span>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i
+						class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
+					></i
+					><span class="text">{{ i18n.ts.more }}</span>
+					<span v-if="otherMenuItemIndicated" class="indicator"
+						><i class="icon ph-circle ph-fill"></i
+					></span>
+				</button>
+				<MkA
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts.settings"
+					class="item _button"
+					active-class="active"
+					to="/settings"
+				>
+					<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.settings }}</span>
+				</MkA>
+			</div>
+			<div class="bottom">
+				<button
+					v-tooltip.noDelay.right="i18n.ts.note"
+					class="item _button post"
+					data-cy-open-post-form
+					@click="os.post"
+				>
+					<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i
+					><span class="text">{{ i18n.ts.note }}</span>
+				</button>
+				<button
+					v-tooltip.noDelay.right="i18n.ts.help"
+					class="item _button help"
+					@click="openHelpMenu"
+				>
+					<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+				</button>
+				<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
 				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button> -->
-			<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
+				<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
 			</button> -->
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { openHelpMenu_ } from '@/scripts/helpMenu'
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { version } from '@/config';
+import { computed, defineAsyncComponent, ref, watch } from "vue";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
+import { openHelpMenu_ } from "@/scripts/helpMenu";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { instance } from "@/instance";
+import { version } from "@/config";
 
-const isEmpty = (x: string | null) => x == null || x === '';
+const isEmpty = (x: string | null) => x == null || x === "";
 
 const iconOnly = ref(false);
 
@@ -83,36 +164,42 @@ const otherMenuItemIndicated = computed(() => {
 });
 
 const calcViewState = () => {
-	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+	iconOnly.value =
+		window.innerWidth <= 1279 ||
+		defaultStore.state.menuDisplay === "sideIcon";
 };
 
 calcViewState();
 
-window.addEventListener('resize', calcViewState);
+window.addEventListener("resize", calcViewState);
 
 watch(defaultStore.reactiveState.menuDisplay, () => {
 	calcViewState();
 });
 
-let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
-let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha;
+let noMaintainerInformation =
+	isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+let noBotProtection =
+	!instance.disableRegistration &&
+	!instance.enableHcaptcha &&
+	!instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
 let updateAvailable = $ref(false);
 
 if ($i?.isAdmin) {
-	os.api('admin/abuse-user-reports', {
-		state: 'unresolved',
+	os.api("admin/abuse-user-reports", {
+		state: "unresolved",
 		limit: 1,
-	}).then(reports => {
+	}).then((reports) => {
 		if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
 	});
 }
 
 if (defaultStore.state.showAdminUpdates) {
-	os.api('latest-version').then(res => {
-		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ''));
-		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ''));
+	os.api("latest-version").then((res) => {
+		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
+		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
 		if (cleanRes > cleanVersion) {
 			updateAvailable = true;
 		}
@@ -120,9 +207,12 @@ if (defaultStore.state.showAdminUpdates) {
 }
 
 function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
+	openAccountMenu_(
+		{
+			withExtraOperation: true,
+		},
+		ev
+	);
 }
 
 function openHelpMenu(ev: MouseEvent) {
@@ -130,10 +220,14 @@ function openHelpMenu(ev: MouseEvent) {
 }
 
 function more(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-		src: ev.currentTarget ?? ev.target,
-	}, {
-	}, 'closed');
+	os.popup(
+		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),
+		{
+			src: ev.currentTarget ?? ev.target,
+		},
+		{},
+		"closed"
+	);
 }
 </script>
 
@@ -184,8 +278,16 @@ function more(ev: MouseEvent) {
 					height: 100%;
 					background-size: cover;
 					background-position: center center;
-					-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-					mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+					-webkit-mask-image: linear-gradient(
+						0deg,
+						rgba(0, 0, 0, 0) 15%,
+						rgba(0, 0, 0, 0.75) 100%
+					);
+					mask-image: linear-gradient(
+						0deg,
+						rgba(0, 0, 0, 0) 15%,
+						rgba(0, 0, 0, 0.75) 100%
+					);
 				}
 
 				> .account {
@@ -232,21 +334,27 @@ function more(ev: MouseEvent) {
 						right: 0;
 						bottom: 0;
 						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+						background: linear-gradient(
+							90deg,
+							var(--buttonGradateA),
+							var(--buttonGradateB)
+						);
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						&:before {
 							background: var(--accentLighten);
 							transition: all 0.4s ease;
 						}
 					}
 
-					> .icon, > .text {
+					> .icon,
+					> .text {
 						position: relative;
 						left: 3rem;
 						color: var(--fgOnAccent);
-						transform: translateY(0em)
+						transform: translateY(0em);
 					}
 
 					> .text {
@@ -337,7 +445,8 @@ function more(ev: MouseEvent) {
 						color: var(--navActive);
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						color: var(--accent);
 						transition: all 0.4s ease;
 
@@ -419,10 +528,15 @@ function more(ev: MouseEvent) {
 						width: 52px;
 						aspect-ratio: 1/1;
 						border-radius: 100%;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+						background: linear-gradient(
+							90deg,
+							var(--buttonGradateA),
+							var(--buttonGradateB)
+						);
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						&:before {
 							background: var(--accentLighten);
 							transition: all 0.4s ease;
@@ -432,7 +546,7 @@ function more(ev: MouseEvent) {
 					> .icon {
 						position: relative;
 						color: var(--fgOnAccent);
-						transform: translate(0.15em, 0em)
+						transform: translate(0.15em, 0em);
 					}
 
 					> .text {
@@ -506,7 +620,8 @@ function more(ev: MouseEvent) {
 						animation: blink 1s infinite;
 					}
 
-					&:hover, &.active {
+					&:hover,
+					&.active {
 						text-decoration: none;
 						color: var(--accent);
 						transition: all 0.4s ease;
@@ -526,7 +641,8 @@ function more(ev: MouseEvent) {
 							background: var(--accentedBg);
 						}
 
-						> .icon, > .text {
+						> .icon,
+						> .text {
 							opacity: 1;
 						}
 					}
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index 2896cc09c..2bb06bc38 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -1,36 +1,55 @@
 <template>
-<span v-if="!fetching" class="nmidsaqw">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
-					<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
-					<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
-						{{ instance.host }}
-					</MkA>
-					<span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
+	<span v-if="!fetching" class="nmidsaqw">
+		<template v-if="display === 'marquee'">
+			<transition name="change" mode="default">
+				<MarqueeText
+					:key="key"
+					:duration="marqueeDuration"
+					:reverse="marqueeReverse"
+				>
+					<span
+						v-for="instance in instances"
+						:key="instance.id"
+						class="item"
+						:class="{ colored }"
+						:style="{
+							background: colored ? instance.themeColor : null,
+						}"
+					>
+						<img
+							class="icon"
+							:src="getInstanceIcon(instance)"
+							alt=""
+						/>
+						<MkA
+							:to="`/instance-info/${instance.host}`"
+							class="host _monospace"
+						>
+							{{ instance.host }}
+						</MkA>
+						<span class="divider"></span>
+					</span>
+				</MarqueeText>
+			</transition>
+		</template>
+		<template v-else-if="display === 'oneByOne'">
+			<!-- TODO -->
+		</template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import * as misskey from "calckey-js";
+import MarqueeText from "@/components/MkMarquee.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { getNoteSummary } from "@/scripts/get-note-summary";
+import { notePage } from "@/filters/note";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
 const props = defineProps<{
-	display?: 'marquee' | 'oneByOne';
+	display?: "marquee" | "oneByOne";
 	colored?: boolean;
 	marqueeDuration?: number;
 	marqueeReverse?: boolean;
@@ -43,10 +62,10 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
+	os.api("federation/instances", {
+		sort: "+lastCommunicatedAt",
 		limit: 30,
-	}).then(res => {
+	}).then((res) => {
 		instances.value = res;
 		fetching.value = false;
 		key++;
@@ -59,22 +78,27 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 });
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
index e75e13bb4..606f3f1bd 100644
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ b/packages/client/src/ui/_common_/statusbar-rss.vue
@@ -1,31 +1,42 @@
 <template>
-<span v-if="!fetching" class="xbhtxfms">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="item in items" class="item">
-					<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
+	<span v-if="!fetching" class="xbhtxfms">
+		<template v-if="display === 'marquee'">
+			<transition name="change" mode="default">
+				<MarqueeText
+					:key="key"
+					:duration="marqueeDuration"
+					:reverse="marqueeReverse"
+				>
+					<span v-for="item in items" class="item">
+						<a
+							class="link"
+							:href="item.link"
+							rel="nofollow noopener"
+							target="_blank"
+							:title="item.title"
+							>{{ item.title }}</a
+						><span class="divider"></span>
+					</span>
+				</MarqueeText>
+			</transition>
+		</template>
+		<template v-else-if="display === 'oneByOne'">
+			<!-- TODO -->
+		</template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { shuffle } from '@/scripts/shuffle';
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import MarqueeText from "@/components/MkMarquee.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { shuffle } from "@/scripts/shuffle";
 
 const props = defineProps<{
 	url?: string;
 	shuffle?: boolean;
-	display?: 'marquee' | 'oneByOne';
+	display?: "marquee" | "oneByOne";
 	marqueeDuration?: number;
 	marqueeReverse?: boolean;
 	oneByOneInterval?: number;
@@ -37,8 +48,8 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
-		res.json().then(feed => {
+	fetch(`/api/fetch-rss?url=${props.url}`, {}).then((res) => {
+		res.json().then((feed) => {
 			if (props.shuffle) {
 				shuffle(feed.items);
 			}
@@ -56,17 +67,18 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 094ab421c..f32b7f809 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -1,36 +1,50 @@
 <template>
-<span v-if="!fetching" class="osdsvwzy">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<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"/>
-					</MkA>
-					<span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
+	<span v-if="!fetching" class="osdsvwzy">
+		<template v-if="display === 'marquee'">
+			<transition name="change" mode="default">
+				<MarqueeText
+					:key="key"
+					:duration="marqueeDuration"
+					:reverse="marqueeReverse"
+				>
+					<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"
+							/>
+						</MkA>
+						<span class="divider"></span>
+					</span>
+				</MarqueeText>
+			</transition>
+		</template>
+		<template v-else-if="display === 'oneByOne'">
+			<!-- TODO -->
+		</template>
+	</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as misskey from 'calckey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import * as misskey from "calckey-js";
+import MarqueeText from "@/components/MkMarquee.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { getNoteSummary } from "@/scripts/get-note-summary";
+import { notePage } from "@/filters/note";
 
 const props = defineProps<{
 	userListId?: string;
-	display?: 'marquee' | 'oneByOne';
+	display?: "marquee" | "oneByOne";
 	marqueeDuration?: number;
 	marqueeReverse?: boolean;
 	oneByOneInterval?: number;
@@ -43,9 +57,9 @@ let key = $ref(0);
 
 const tick = () => {
 	if (props.userListId == null) return;
-	os.api('notes/user-list-timeline', {
+	os.api("notes/user-list-timeline", {
 		listId: props.userListId,
-	}).then(res => {
+	}).then((res) => {
 		notes.value = res;
 		fetching.value = false;
 		key++;
@@ -61,17 +75,18 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index 114ca5be8..bef61317e 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -1,29 +1,64 @@
 <template>
-<div class="dlrsnxqu">
-	<div
-		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
-			verySmall: x.size === 'verySmall',
-			small: x.size === 'small',
-			medium: x.size === 'medium',
-			large: x.size === 'large',
-			veryLarge: x.size === 'veryLarge',
-		}]"
-	>
-		<span class="name">{{ x.name }}</span>
-		<XRss v-if="x.type === 'rss'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
-		<XFederation v-else-if="x.type === 'federation'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
-		<XUserList v-else-if="x.type === 'userList'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :user-list-id="x.props.userListId"/>
+	<div class="dlrsnxqu">
+		<div
+			v-for="x in defaultStore.reactiveState.statusbars.value"
+			:key="x.id"
+			class="item"
+			:class="[
+				{ black: x.black },
+				{
+					verySmall: x.size === 'verySmall',
+					small: x.size === 'small',
+					medium: x.size === 'medium',
+					large: x.size === 'large',
+					veryLarge: x.size === 'veryLarge',
+				},
+			]"
+		>
+			<span class="name">{{ x.name }}</span>
+			<XRss
+				v-if="x.type === 'rss'"
+				class="body"
+				:refresh-interval-sec="x.props.refreshIntervalSec"
+				:marquee-duration="x.props.marqueeDuration"
+				:marquee-reverse="x.props.marqueeReverse"
+				:display="x.props.display"
+				:url="x.props.url"
+				:shuffle="x.props.shuffle"
+			/>
+			<XFederation
+				v-else-if="x.type === 'federation'"
+				class="body"
+				:refresh-interval-sec="x.props.refreshIntervalSec"
+				:marquee-duration="x.props.marqueeDuration"
+				:marquee-reverse="x.props.marqueeReverse"
+				:display="x.props.display"
+				:colored="x.props.colored"
+			/>
+			<XUserList
+				v-else-if="x.type === 'userList'"
+				class="body"
+				:refresh-interval-sec="x.props.refreshIntervalSec"
+				:marquee-duration="x.props.marqueeDuration"
+				:marquee-reverse="x.props.marqueeReverse"
+				:display="x.props.display"
+				:user-list-id="x.props.userListId"
+			/>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-const XRss = defineAsyncComponent(() => import('./statusbar-rss.vue'));
-const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vue'));
-const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
+import { computed, defineAsyncComponent, ref, toRef, watch } from "vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+const XRss = defineAsyncComponent(() => import("./statusbar-rss.vue"));
+const XFederation = defineAsyncComponent(
+	() => import("./statusbar-federation.vue")
+);
+const XUserList = defineAsyncComponent(
+	() => import("./statusbar-user-list.vue")
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index a855de8ab..a3d06295c 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -1,17 +1,26 @@
 <template>
-<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
-	<div>{{ i18n.ts.disconnectedFromServer }}</div>
-	<div class="command">
-		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
-		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
+	<div
+		v-if="
+			hasDisconnected &&
+			$store.state.serverDisconnectedBehavior === 'quiet'
+		"
+		class="nsbbhtug"
+		@click="resetDisconnected"
+	>
+		<div>{{ i18n.ts.disconnectedFromServer }}</div>
+		<div class="command">
+			<button class="_textButton" @click="reload">
+				{{ i18n.ts.reload }}
+			</button>
+			<button class="_textButton">{{ i18n.ts.doNothing }}</button>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from 'vue';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { onUnmounted } from "vue";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
 let hasDisconnected = $ref(false);
 
@@ -27,10 +36,10 @@ function reload() {
 	location.reload();
 }
 
-stream.on('_disconnected_', onDisconnected);
+stream.on("_disconnected_", onDisconnected);
 
 onUnmounted(() => {
-	stream.off('_disconnected_', onDisconnected);
+	stream.off("_disconnected_", onDisconnected);
 });
 </script>
 
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 6c7787f99..272b81ba1 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -1,29 +1,67 @@
 <template>
-<div class="mk-uploader _acrylic" :style="{ zIndex }">
-	<ol v-if="uploads.length > 0">
-		<li v-for="ctx in uploads" :key="ctx.id">
-			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
-			<div class="top">
-				<p class="name"><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>{{ ctx.name }}</p>
-				<p class="status">
-					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-					<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
-				</p>
-			</div>
-			<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
-		</li>
-	</ol>
-</div>
+	<div class="mk-uploader _acrylic" :style="{ zIndex }">
+		<ol v-if="uploads.length > 0">
+			<li v-for="ctx in uploads" :key="ctx.id">
+				<div
+					class="img"
+					:style="{ backgroundImage: `url(${ctx.img})` }"
+				></div>
+				<div class="top">
+					<p class="name">
+						<i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i
+						>{{ ctx.name }}
+					</p>
+					<p class="status">
+						<span
+							v-if="ctx.progressValue === undefined"
+							class="initing"
+							>{{ i18n.ts.waiting }}<MkEllipsis
+						/></span>
+						<span v-if="ctx.progressValue !== undefined" class="kb"
+							>{{
+								String(
+									Math.floor(ctx.progressValue / 1024)
+								).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
+							}}<i>KB</i> /
+							{{
+								String(
+									Math.floor(ctx.progressMax / 1024)
+								).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
+							}}<i>KB</i></span
+						>
+						<span
+							v-if="ctx.progressValue !== undefined"
+							class="percentage"
+							>{{
+								Math.floor(
+									(ctx.progressValue / ctx.progressMax) * 100
+								)
+							}}</span
+						>
+					</p>
+				</div>
+				<progress
+					:value="ctx.progressValue || 0"
+					:max="ctx.progressMax || 0"
+					:class="{
+						initing: ctx.progressValue === undefined,
+						waiting:
+							ctx.progressValue !== undefined &&
+							ctx.progressValue === ctx.progressMax,
+					}"
+				></progress>
+			</li>
+		</ol>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os';
-import { uploads } from '@/scripts/upload';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import * as os from "@/os";
+import { uploads } from "@/scripts/upload";
+import { i18n } from "@/i18n";
 
-const zIndex = os.claimZIndex('high');
+const zIndex = os.claimZIndex("high");
 </script>
 
 <style lang="scss" scoped>
@@ -38,92 +76,92 @@ const zIndex = os.claimZIndex('high');
 	border-radius: 8px;
 }
 .mk-uploader:empty {
-  display: none;
+	display: none;
 }
 .mk-uploader > ol {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+	display: block;
+	margin: 0;
+	padding: 0;
+	list-style: none;
 }
 .mk-uploader > ol > li {
-  display: grid;
-  margin: 8px 0 0 0;
-  padding: 0;
-  height: 36px;
-  width: 100%;
-  border-top: solid 8px transparent;
-  grid-template-columns: 36px calc(100% - 44px);
-  grid-template-rows: 1fr 8px;
-  column-gap: 8px;
-  box-sizing: content-box;
+	display: grid;
+	margin: 8px 0 0 0;
+	padding: 0;
+	height: 36px;
+	width: 100%;
+	border-top: solid 8px transparent;
+	grid-template-columns: 36px calc(100% - 44px);
+	grid-template-rows: 1fr 8px;
+	column-gap: 8px;
+	box-sizing: content-box;
 }
 .mk-uploader > ol > li:first-child {
-  margin: 0;
-  box-shadow: none;
-  border-top: none;
+	margin: 0;
+	box-shadow: none;
+	border-top: none;
 }
 .mk-uploader > ol > li > .img {
-  display: block;
-  background-size: cover;
-  background-position: center center;
-  grid-column: 1/2;
-  grid-row: 1/3;
+	display: block;
+	background-size: cover;
+	background-position: center center;
+	grid-column: 1/2;
+	grid-row: 1/3;
 }
 .mk-uploader > ol > li > .top {
-  display: flex;
-  grid-column: 2/3;
-  grid-row: 1/2;
+	display: flex;
+	grid-column: 2/3;
+	grid-row: 1/2;
 }
 .mk-uploader > ol > li > .top > .name {
-  display: block;
-  padding: 0 8px 0 0;
-  margin: 0;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-shrink: 1;
+	display: block;
+	padding: 0 8px 0 0;
+	margin: 0;
+	font-size: 0.8em;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	flex-shrink: 1;
 }
 .mk-uploader > ol > li > .top > .name > i {
-  margin-right: 4px;
+	margin-right: 4px;
 }
 .mk-uploader > ol > li > .top > .status {
-  display: block;
-  margin: 0 0 0 auto;
-  padding: 0;
-  font-size: 0.8em;
-  flex-shrink: 0;
+	display: block;
+	margin: 0 0 0 auto;
+	padding: 0;
+	font-size: 0.8em;
+	flex-shrink: 0;
 }
 .mk-uploader > ol > li > .top > .status > .initing {
 }
 .mk-uploader > ol > li > .top > .status > .kb {
 }
 .mk-uploader > ol > li > .top > .status > .percentage {
-  display: inline-block;
-  width: 48px;
-  text-align: right;
+	display: inline-block;
+	width: 48px;
+	text-align: right;
 }
 .mk-uploader > ol > li > .top > .status > .percentage:after {
-  content: '%';
+	content: "%";
 }
 .mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
+	display: block;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	overflow: hidden;
+	grid-column: 2/3;
+	grid-row: 2/3;
+	z-index: 2;
 	width: 100%;
 	height: 8px;
 }
 .mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--accent);
+	background: var(--accent);
 }
 .mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--accentAlpha01);
+	//background: var(--accentAlpha01);
 	background: transparent;
 }
 </style>
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 38579678d..5c3e6b702 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -1,52 +1,109 @@
 <template>
-<div class="azykntjl">
-	<div class="body">
-		<div class="left">
-			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="ph-fw ph-lg" :class="navbarItemDef[item].icon"></i>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i>
-				<span v-if="otherNavItemIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</button>
-		</div>
-		<div class="right">
-			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i>
-			</MkA>
-			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
-			</button>
-			<div class="post" @click="post">
-				<MkButton class="button" gradate full rounded>
-					<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
-				</MkButton>
+	<div class="azykntjl">
+		<div class="body">
+			<div class="left">
+				<MkA
+					v-click-anime
+					v-tooltip="i18n.ts.timeline"
+					class="item index"
+					active-class="active"
+					to="/"
+					exact
+				>
+					<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i>
+				</MkA>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component
+						:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+						v-else-if="
+							navbarItemDef[item] &&
+							navbarItemDef[item].show !== false
+						"
+						v-click-anime
+						v-tooltip="$ts[navbarItemDef[item].title]"
+						class="item _button"
+						:class="item"
+						active-class="active"
+						:to="navbarItemDef[item].to"
+						v-on="
+							navbarItemDef[item].action
+								? { click: navbarItemDef[item].action }
+								: {}
+						"
+					>
+						<i
+							class="ph-fw ph-lg"
+							:class="navbarItemDef[item].icon"
+						></i>
+						<span
+							v-if="navbarItemDef[item].indicated"
+							class="indicator"
+							><i class="ph-circle ph-fill"></i
+						></span>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<MkA
+					v-if="$i.isAdmin || $i.isModerator"
+					v-click-anime
+					v-tooltip="i18n.ts.controlPanel"
+					class="item"
+					active-class="active"
+					to="/admin"
+					:behavior="settingsWindowed ? 'modalWindow' : null"
+				>
+					<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i>
+				</MkA>
+				<button v-click-anime class="item _button" @click="more">
+					<i
+						class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
+					></i>
+					<span v-if="otherNavItemIndicated" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</button>
+			</div>
+			<div class="right">
+				<MkA
+					v-click-anime
+					v-tooltip="i18n.ts.settings"
+					class="item"
+					active-class="active"
+					to="/settings"
+					:behavior="settingsWindowed ? 'modalWindow' : null"
+				>
+					<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i>
+				</MkA>
+				<button
+					v-click-anime
+					class="item _button account"
+					@click="openAccountMenu"
+				>
+					<MkAvatar :user="$i" class="avatar" /><MkAcct
+						class="acct"
+						:user="$i"
+					/>
+				</button>
+				<div class="post" @click="post">
+					<MkButton class="button" gradate full rounded>
+						<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
+					</MkButton>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent, defineComponent } from "vue";
+import { host } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { openAccountMenu } from "@/account";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -79,19 +136,19 @@ export default defineComponent({
 	},
 
 	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
+		"$store.reactiveState.menuDisplay.value"() {
 			this.calcViewState();
 		},
 	},
 
 	created() {
-		window.addEventListener('resize', this.calcViewState);
+		window.addEventListener("resize", this.calcViewState);
 		this.calcViewState();
 	},
 
 	methods: {
 		calcViewState() {
-			this.settingsWindowed = (window.innerWidth > 1400);
+			this.settingsWindowed = window.innerWidth > 1400;
 		},
 
 		post() {
@@ -103,17 +160,26 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-				anchor: { x: 'center', y: 'bottom' },
-			}, {
-			}, 'closed');
+			os.popup(
+				defineAsyncComponent(
+					() => import("@/components/MkLaunchPad.vue")
+				),
+				{
+					src: ev.currentTarget ?? ev.target,
+					anchor: { x: "center", y: "bottom" },
+				},
+				{},
+				"closed"
+			);
 		},
 
 		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
+			openAccountMenu(
+				{
+					withExtraOperation: true,
+				},
+				ev
+			);
 		},
 	},
 });
@@ -139,7 +205,6 @@ export default defineComponent({
 
 		> .right,
 		> .left {
-
 			> .item {
 				position: relative;
 				font-size: 0.9em;
@@ -190,7 +255,7 @@ export default defineComponent({
 
 			> .post {
 				display: inline-block;
-			
+
 				> .button {
 					width: 40px;
 					height: 40px;
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 62a4a4b1b..b70a3c984 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -1,56 +1,114 @@
 <template>
-<div class="npcljfve" :class="{ iconOnly }">
-	<button v-click-anime class="item _button account" @click="openAccountMenu">
-		<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>
-			<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
-		</MkButton>
-	</div>
-	<div class="divider"></div>
-	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
-	</MkA>
-	<template v-for="item in menu">
-		<div v-if="item === '-'" class="divider"></div>
-		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-			<i class="ph-fw ph-lg" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
-			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-		</component>
-	</template>
-	<div class="divider"></div>
-	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-	</MkA>
-	<button v-click-anime class="item _button" @click="more">
-		<i class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
-		<span v-if="otherNavItemIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-	</button>
-	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
-	</MkA>
-	<div class="divider"></div>
-	<div class="about">
-		<MkA v-click-anime class="link" @click="openInstanceMenu">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+	<div class="npcljfve" :class="{ iconOnly }">
+		<button
+			v-click-anime
+			class="item _button account"
+			@click="openAccountMenu"
+		>
+			<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>
+				<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i
+				><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
+			</MkButton>
+		</div>
+		<div class="divider"></div>
+		<MkA
+			v-click-anime
+			class="item index"
+			active-class="active"
+			to="/"
+			exact
+		>
+			<i class="ph-house ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.timeline }}</span>
 		</MkA>
+		<template v-for="item in menu">
+			<div v-if="item === '-'" class="divider"></div>
+			<component
+				:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+				v-else-if="
+					navbarItemDef[item] && navbarItemDef[item].show !== false
+				"
+				v-click-anime
+				class="item _button"
+				:class="item"
+				active-class="active"
+				:to="navbarItemDef[item].to"
+				v-on="
+					navbarItemDef[item].action
+						? { click: navbarItemDef[item].action }
+						: {}
+				"
+			>
+				<i class="ph-fw ph-lg" :class="navbarItemDef[item].icon"></i
+				><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+				<span v-if="navbarItemDef[item].indicated" class="indicator"
+					><i class="ph-circle ph-fill"></i
+				></span>
+			</component>
+		</template>
+		<div class="divider"></div>
+		<MkA
+			v-if="$i.isAdmin || $i.isModerator"
+			v-click-anime
+			class="item"
+			active-class="active"
+			to="/admin"
+			:behavior="settingsWindowed ? 'modalWindow' : null"
+		>
+			<i class="ph-door ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.controlPanel }}</span>
+		</MkA>
+		<button v-click-anime class="item _button" @click="more">
+			<i class="ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.more }}</span>
+			<span v-if="otherNavItemIndicated" class="indicator"
+				><i class="ph-circle ph-fill"></i
+			></span>
+		</button>
+		<MkA
+			v-click-anime
+			class="item"
+			active-class="active"
+			to="/settings"
+			:behavior="settingsWindowed ? 'modalWindow' : null"
+		>
+			<i class="ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i
+			><span class="text">{{ i18n.ts.settings }}</span>
+		</MkA>
+		<div class="divider"></div>
+		<div class="about">
+			<MkA v-click-anime class="link" @click="openInstanceMenu">
+				<img
+					:src="
+						$instance.iconUrl ||
+						$instance.faviconUrl ||
+						'/favicon.ico'
+					"
+					class="_ghost"
+				/>
+			</MkA>
+		</div>
+		<!--<MisskeyLogo class="misskey"/>-->
 	</div>
-	<!--<MisskeyLogo class="misskey"/>-->
-</div>
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
+import { defineAsyncComponent, defineComponent } from "vue";
+import { host } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { openAccountMenu } from "@/account";
+import MkButton from "@/components/MkButton.vue";
+import { StickySidebar } from "@/scripts/sticky-sidebar";
 //import MisskeyLogo from '@assets/client/misskey.svg';
-import { i18n } from '@/i18n';
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -85,33 +143,39 @@ export default defineComponent({
 	},
 
 	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
+		"$store.reactiveState.menuDisplay.value"() {
 			this.calcViewState();
 		},
 
 		iconOnly() {
 			this.$nextTick(() => {
-				this.$emit('change-view-mode');
+				this.$emit("change-view-mode");
 			});
 		},
 	},
 
 	created() {
-		window.addEventListener('resize', this.calcViewState);
+		window.addEventListener("resize", this.calcViewState);
 		this.calcViewState();
 	},
 
 	mounted() {
 		const sticky = new StickySidebar(this.$el.parentElement, 16);
-		window.addEventListener('scroll', () => {
-			sticky.calc(window.scrollY);
-		}, { passive: true });
+		window.addEventListener(
+			"scroll",
+			() => {
+				sticky.calc(window.scrollY);
+			},
+			{ passive: true }
+		);
 	},
 
 	methods: {
 		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
-			this.settingsWindowed = (window.innerWidth > 1400);
+			this.iconOnly =
+				window.innerWidth <= 1400 ||
+				this.$store.state.menuDisplay === "sideIcon";
+			this.settingsWindowed = window.innerWidth > 1400;
 		},
 
 		post() {
@@ -123,61 +187,90 @@ export default defineComponent({
 		},
 
 		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-			}, {}, 'closed');
+			os.popup(
+				defineAsyncComponent(
+					() => import("@/components/MkLaunchPad.vue")
+				),
+				{
+					src: ev.currentTarget ?? ev.target,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
+			openAccountMenu(
+				{
+					withExtraOperation: true,
+				},
+				ev
+			);
 		},
 	},
 });
 
 function openInstanceMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: instance.name ?? host,
-		type: 'label',
-	}, {
-		type: 'link',
-		text: i18n.ts.instanceInfo,
-		icon: 'ph-info ph-bold ph-lg',
-		to: '/about',
-	}, null, {
-		type: 'parent',
-		text: i18n.ts.help,
-		icon: 'ph-question ph-bold ph-lg',
-		children: [{
-			type: 'link',
-			to: '/mfm-cheat-sheet',
-			text: i18n.ts._mfm.cheatSheet,
-			icon: 'ph-code ph-bold ph-lg',
-		}, {
-			type: 'link',
-			to: '/scratchpad',
-			text: i18n.ts.scratchpad,
-			icon: 'ph-terminal-window ph-bold ph-lg',
-		}, {
-			type: 'link',
-			to: '/api-console',
-			text: 'API Console',
-			icon: 'ph-terminal-window ph-bold ph-lg',
-		}, null, {
-			text: i18n.ts.document,
-			icon: 'ph-question ph-bold ph-lg',
-			action: () => {
-				window.open('https://misskey-hub.net/help.html', '_blank');
+	os.popupMenu(
+		[
+			{
+				text: instance.name ?? host,
+				type: "label",
 			},
-		}],
-	}, {
-		type: 'link',
-		text: i18n.ts.aboutMisskey,
-		to: '/about-calckey',
-	}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
+			{
+				type: "link",
+				text: i18n.ts.instanceInfo,
+				icon: "ph-info ph-bold ph-lg",
+				to: "/about",
+			},
+			null,
+			{
+				type: "parent",
+				text: i18n.ts.help,
+				icon: "ph-question ph-bold ph-lg",
+				children: [
+					{
+						type: "link",
+						to: "/mfm-cheat-sheet",
+						text: i18n.ts._mfm.cheatSheet,
+						icon: "ph-code ph-bold ph-lg",
+					},
+					{
+						type: "link",
+						to: "/scratchpad",
+						text: i18n.ts.scratchpad,
+						icon: "ph-terminal-window ph-bold ph-lg",
+					},
+					{
+						type: "link",
+						to: "/api-console",
+						text: "API Console",
+						icon: "ph-terminal-window ph-bold ph-lg",
+					},
+					null,
+					{
+						text: i18n.ts.document,
+						icon: "ph-question ph-bold ph-lg",
+						action: () => {
+							window.open(
+								"https://misskey-hub.net/help.html",
+								"_blank"
+							);
+						},
+					},
+				],
+			},
+			{
+				type: "link",
+				text: i18n.ts.aboutMisskey,
+				to: "/about-calckey",
+			},
+		],
+		ev.currentTarget ?? ev.target,
+		{
+			align: "left",
+		}
+	);
 }
 </script>
 
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 4992ae3c4..a721ffd0b 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -1,58 +1,78 @@
 <template>
-<div class="gbhvwtnk" :class="{ wallpaper }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
-	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
+	<div
+		class="gbhvwtnk"
+		:class="{ wallpaper }"
+		:style="`--globalHeaderHeight:${globalHeaderHeight}px`"
+	>
+		<XHeaderMenu
+			v-if="showMenuOnTop"
+			v-get-size="(w, h) => (globalHeaderHeight = h)"
+		/>
 
-	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
-		<div v-if="!showMenuOnTop" class="sidebar">
-			<XSidebar/>
-		</div>
-		<div v-else ref="widgetsLeft" class="widgets left">
-			<XWidgets :place="'left'" @mounted="attachSticky(widgetsLeft)"/>
-		</div>
-
-		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div class="content">
-				<RouterView/>
-			</div>
-		</main>
-
-		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
-			<XWidgets :place="null" @mounted="attachSticky(widgetsRight)"/>
-		</div>
-	</div>
-
-	<transition :name="$store.state.animation ? 'tray-back' : ''">
 		<div
-			v-if="widgetsShowing"
-			class="tray-back _modalBg"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
+			class="columns"
+			:class="{ fullView, withGlobalHeader: showMenuOnTop }"
+		>
+			<div v-if="!showMenuOnTop" class="sidebar">
+				<XSidebar />
+			</div>
+			<div v-else ref="widgetsLeft" class="widgets left">
+				<XWidgets
+					:place="'left'"
+					@mounted="attachSticky(widgetsLeft)"
+				/>
+			</div>
 
-	<transition :name="$store.state.animation ? 'tray' : ''">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
-	</transition>
+			<main
+				class="main"
+				:style="{ background: pageMetadata?.value?.bg }"
+				@contextmenu.stop="onContextmenu"
+			>
+				<div class="content">
+					<RouterView />
+				</div>
+			</main>
 
-	<XCommon/>
-</div>
+			<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
+				<XWidgets :place="null" @mounted="attachSticky(widgetsRight)" />
+			</div>
+		</div>
+
+		<transition :name="$store.state.animation ? 'tray-back' : ''">
+			<div
+				v-if="widgetsShowing"
+				class="tray-back _modalBg"
+				@click="widgetsShowing = false"
+				@touchstart.passive="widgetsShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'tray' : ''">
+			<XWidgets v-if="widgetsShowing" class="tray" />
+		</transition>
+
+		<XCommon />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, markRaw, ref, onMounted, provide } from 'vue';
-import XSidebar from './classic.sidebar.vue';
-import XCommon from './_common_/common.vue';
-import type { ComputedRef } from 'vue';
-import type { PageMetadata } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-const XHeaderMenu = defineAsyncComponent(() => import('./classic.header.vue'));
-const XWidgets = defineAsyncComponent(() => import('./classic.widgets.vue'));
+import { defineAsyncComponent, markRaw, ref, onMounted, provide } from "vue";
+import XSidebar from "./classic.sidebar.vue";
+import XCommon from "./_common_/common.vue";
+import type { ComputedRef } from "vue";
+import type { PageMetadata } from "@/scripts/page-metadata";
+import { instanceName } from "@/config";
+import { StickySidebar } from "@/scripts/sticky-sidebar";
+import * as os from "@/os";
+import { mainRouter } from "@/router";
+import {
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+const XHeaderMenu = defineAsyncComponent(() => import("./classic.header.vue"));
+const XWidgets = defineAsyncComponent(() => import("./classic.widgets.vue"));
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -62,86 +82,123 @@ let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let widgetsShowing = $ref(false);
 let fullView = $ref(false);
 let globalHeaderHeight = $ref(0);
-const wallpaper = localStorage.getItem('wallpaper') != null;
-const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
+const wallpaper = localStorage.getItem("wallpaper") != null;
+const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === "top");
 let live2d = $ref<HTMLIFrameElement>();
 let widgetsLeft = $ref();
 let widgetsRight = $ref();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
 		document.title = `${pageMetadata.value.title} | ${instanceName}`;
 	}
 });
-provide('shouldHeaderThin', showMenuOnTop);
-provide('shouldSpacerMin', true);
+provide("shouldHeaderThin", showMenuOnTop);
+provide("shouldSpacerMin", true);
 
 function attachSticky(el) {
-	const sticky = new StickySidebar(el, defaultStore.state.menuDisplay === 'top' ? 0 : 16, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-	window.addEventListener('scroll', () => {
-		sticky.calc(window.scrollY);
-	}, { passive: true });
+	const sticky = new StickySidebar(
+		el,
+		defaultStore.state.menuDisplay === "top" ? 0 : 16,
+		defaultStore.state.menuDisplay === "top" ? 60 : 0
+	); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+	window.addEventListener(
+		"scroll",
+		() => {
+			sticky.calc(window.scrollY);
+		},
+		{ passive: true }
+	);
 }
 
 function top() {
-	window.scroll({ top: 0, behavior: 'smooth' });
+	window.scroll({ top: 0, behavior: "smooth" });
 }
 
 function onContextmenu(ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
-	if (window.getSelection().toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			ev.target.tagName
+		) ||
+		ev.target.attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection().toString() !== "") return;
 	const path = mainRouter.getCurrentPath();
-	os.contextMenu([{
-		type: 'label',
-		text: path,
-	}, {
-		icon: fullView ? 'ph-arrows-in-simple ph-bold ph-lg' : 'ph-arrows-out-simple ph-bold ph-lg',
-		text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView,
-		action: () => {
-			fullView = !fullView;
-		},
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: path,
+			},
+			{
+				icon: fullView
+					? "ph-arrows-in-simple ph-bold ph-lg"
+					: "ph-arrows-out-simple ph-bold ph-lg",
+				text: fullView ? i18n.ts.quitFullView : i18n.ts.fullView,
+				action: () => {
+					fullView = !fullView;
+				},
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				},
+			},
+		],
+		ev
+	);
 }
 
 if (window.innerWidth < 1024) {
-	localStorage.setItem('ui', 'default');
+	localStorage.setItem("ui", "default");
 	location.reload();
 }
 
-document.documentElement.style.overflowY = 'scroll';
+document.documentElement.style.overflowY = "scroll";
 
 if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: null, data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: null, data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: null, data: {},
-	}]);
+	defaultStore.set("widgets", [
+		{
+			name: "calendar",
+			id: "a",
+			place: null,
+			data: {},
+		},
+		{
+			name: "notifications",
+			id: "b",
+			place: null,
+			data: {},
+		},
+		{
+			name: "trends",
+			id: "c",
+			place: null,
+			data: {},
+		},
+	]);
 }
 
 onMounted(() => {
-	window.addEventListener('resize', () => {
-		isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
-	}, { passive: true });
+	window.addEventListener(
+		"resize",
+		() => {
+			isDesktop = window.innerWidth >= DESKTOP_THRESHOLD;
+		},
+		{ passive: true }
+	);
 });
 </script>
 
@@ -150,7 +207,8 @@ onMounted(() => {
 .tray-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .tray-enter-from,
 .tray-leave-active {
@@ -189,7 +247,7 @@ onMounted(() => {
 
 		&.fullView {
 			margin: 0;
-		
+
 			> .sidebar {
 				display: none;
 			}
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index 0f0854a05..2c7f16ece 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -1,29 +1,56 @@
 <template>
 	<div class="ddiqwdnk">
-		<MkAd class="a" :prefer="['widget']"/>
-		<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-		<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
-		<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
+		<MkAd class="a" :prefer="['widget']" />
+		<XWidgets
+			class="widgets"
+			:edit="editMode"
+			:widgets="
+				$store.reactiveState.widgets.value.filter(
+					(w) => w.place === place
+				)
+			"
+			@add-widget="addWidget"
+			@remove-widget="removeWidget"
+			@update-widget="updateWidget"
+			@update-widgets="updateWidgets"
+			@exit="editMode = false"
+		/>
+		<button
+			v-if="editMode"
+			class="_textButton edit"
+			style="font-size: 0.9em"
+			@click="editMode = false"
+		>
+			<i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}
+		</button>
+		<button
+			v-else
+			class="_textButton edit"
+			style="font-size: 0.9em"
+			@click="editMode = true"
+		>
+			<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
+		</button>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import XWidgets from "@/components/MkWidgets.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		XWidgets
+		XWidgets,
 	},
 
 	props: {
 		place: {
 			type: String,
-		}
+		},
 	},
 
-	emits: ['mounted'],
+	emits: ["mounted"],
 
 	data() {
 		return {
@@ -33,35 +60,50 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('mounted', this.$el);
+		this.$emit("mounted", this.$el);
 	},
 
 	methods: {
 		addWidget(widget) {
-			this.$store.set('widgets', [{
-				...widget,
-				place: this.place,
-			}, ...this.$store.state.widgets]);
+			this.$store.set("widgets", [
+				{
+					...widget,
+					place: this.place,
+				},
+				...this.$store.state.widgets,
+			]);
 		},
 
 		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id !== widget.id));
+			this.$store.set(
+				"widgets",
+				this.$store.state.widgets.filter((w) => w.id !== widget.id)
+			);
 		},
 
 		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
-				...w,
-				data,
-			} : w));
+			this.$store.set(
+				"widgets",
+				this.$store.state.widgets.map((w) =>
+					w.id === id
+						? {
+								...w,
+								data,
+						  }
+						: w
+				)
+			);
 		},
 
 		updateWidgets(widgets) {
-			this.$store.set('widgets', [
-				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets
+			this.$store.set("widgets", [
+				...this.$store.state.widgets.filter(
+					(w) => w.place !== this.place
+				),
+				...widgets,
 			]);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 137496c8e..debf5d0e4 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -1,97 +1,188 @@
 <template>
-<div
-	class="mk-deck" :class="[{ isMobile }]"
->
-	<XSidebar v-if="!isMobile"/>
+	<div class="mk-deck" :class="[{ isMobile }]">
+		<XSidebar v-if="!isMobile" />
 
-	<div class="main">
-		<XStatusBars class="statusbars"/>
-		<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
-			<template v-for="ids in layout">
-				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-				<section
-					v-if="ids.length > 1"
-					class="folder column"
-					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
-				>
-					<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
-				</section>
-				<DeckColumnCore
-					v-else
-					:ref="ids[0]"
-					:key="ids[0]"
-					class="column"
-					:column="columns.find(c => c.id === ids[0])"
-					:is-stacked="false"
-					:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
-					@parent-focus="moveFocus(ids[0], $event)"
-				/>
-			</template>
-			<div v-if="layout.length === 0" class="intro _panel">
-				<div>{{ i18n.ts._deck.introduction }}</div>
-				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
-				<div>{{ i18n.ts._deck.introduction2 }}</div>
-			</div>
-			<div class="sideMenu">
-				<div class="top">
-					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="ph-caret-down ph-bold ph-lg"></i></button>
-					<button v-if="deckStore.state.profile !== 'default'" v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="ph-trash ph-bold ph-lg"></i></button>
+		<div class="main">
+			<XStatusBars class="statusbars" />
+			<div
+				ref="columnsEl"
+				class="columns"
+				:class="deckStore.reactiveState.columnAlign.value"
+				@contextmenu.self.prevent="onContextmenu"
+			>
+				<template v-for="ids in layout">
+					<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+					<section
+						v-if="ids.length > 1"
+						class="folder column"
+						:style="
+							columns
+								.filter((c) => ids.includes(c.id))
+								.some((c) => c.flexible)
+								? { flex: 1, minWidth: '350px' }
+								: {
+										width:
+											Math.max(
+												...columns
+													.filter((c) =>
+														ids.includes(c.id)
+													)
+													.map((c) => c.width)
+											) + 'px',
+								  }
+						"
+					>
+						<DeckColumnCore
+							v-for="id in ids"
+							:ref="id"
+							:key="id"
+							:column="columns.find((c) => c.id === id)"
+							:is-stacked="true"
+							@parent-focus="moveFocus(id, $event)"
+						/>
+					</section>
+					<DeckColumnCore
+						v-else
+						:ref="ids[0]"
+						:key="ids[0]"
+						class="column"
+						:column="columns.find((c) => c.id === ids[0])"
+						:is-stacked="false"
+						:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
+						@parent-focus="moveFocus(ids[0], $event)"
+					/>
+				</template>
+				<div v-if="layout.length === 0" class="intro _panel">
+					<div>{{ i18n.ts._deck.introduction }}</div>
+					<MkButton primary class="add" @click="addColumn">{{
+						i18n.ts._deck.addColumn
+					}}</MkButton>
+					<div>{{ i18n.ts._deck.introduction2 }}</div>
 				</div>
-				<div class="middle">
-					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button new" @click="addColumn"><i class="ph-plus ph-bold ph-lg"></i></button>
-				</div>
-				<div class="bottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ph-gear-six ph-bold ph-lg"></i></button>
+				<div class="sideMenu">
+					<div class="top">
+						<button
+							v-tooltip.noDelay.left="
+								`${i18n.ts._deck.profile}: ${deckStore.state.profile}`
+							"
+							class="_button button"
+							@click="changeProfile"
+						>
+							<i class="ph-caret-down ph-bold ph-lg"></i>
+						</button>
+						<button
+							v-if="deckStore.state.profile !== 'default'"
+							v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile"
+							class="_button button"
+							@click="deleteProfile"
+						>
+							<i class="ph-trash ph-bold ph-lg"></i>
+						</button>
+					</div>
+					<div class="middle">
+						<button
+							v-tooltip.noDelay.left="i18n.ts._deck.addColumn"
+							class="_button button new"
+							@click="addColumn"
+						>
+							<i class="ph-plus ph-bold ph-lg"></i>
+						</button>
+					</div>
+					<div class="bottom">
+						<button
+							v-tooltip.noDelay.left="i18n.ts.settings"
+							class="_button button settings"
+							@click="showSettings"
+						>
+							<i class="ph-gear-six ph-bold ph-lg"></i>
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>
+
+		<div v-if="isMobile" class="buttons">
+			<button
+				class="button nav _button"
+				@click="drawerMenuShowing = true"
+			>
+				<i class="ph-list ph-bold ph-lg"></i
+				><span v-if="menuIndicated" class="indicator"
+					><i class="ph-circle ph-fill"></i
+				></span>
+			</button>
+			<button class="button home _button" @click="mainRouter.push('/')">
+				<i class="ph-house ph-bold ph-lg"></i>
+			</button>
+			<button
+				class="button notifications _button"
+				@click="mainRouter.push('/my/notifications')"
+			>
+				<i class="ph-bell ph-bold ph-lg"></i
+				><span v-if="$i?.hasUnreadNotification" class="indicator"
+					><i class="ph-circle ph-fill"></i
+				></span>
+			</button>
+			<button class="button post _button" @click="os.post()">
+				<i class="ph-pencil ph-bold ph-lg"></i>
+			</button>
+		</div>
+
+		<transition :name="$store.state.animation ? 'menu-back' : ''">
+			<div
+				v-if="drawerMenuShowing"
+				class="menu-back _modalBg"
+				@click="drawerMenuShowing = false"
+				@touchstart.passive="drawerMenuShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'menu' : ''">
+			<XDrawerMenu v-if="drawerMenuShowing" class="menu" />
+		</transition>
+
+		<XCommon />
 	</div>
-
-	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ph-list ph-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span></button>
-		<button class="button home _button" @click="mainRouter.push('/')"><i class="ph-house ph-bold ph-lg"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ph-bell ph-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle ph-fill"></i></span></button>
-		<button class="button post _button" @click="os.post()"><i class="ph-pencil ph-bold ph-lg"></i></button>
-	</div>
-
-	<transition :name="$store.state.animation ? 'menu-back' : ''">
-		<div
-			v-if="drawerMenuShowing"
-			class="menu-back _modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'menu' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
-	</transition>
-
-	<XCommon/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, provide, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XCommon from './_common_/common.vue';
-import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
-import DeckColumnCore from '@/ui/deck/column-core.vue';
-import XSidebar from '@/ui/_common_/navbar.vue';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
-import MkButton from '@/components/MkButton.vue';
-import { getScrollContainer } from '@/scripts/scroll';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { unisonReload } from '@/scripts/unison-reload';
-const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+import {
+	computed,
+	defineAsyncComponent,
+	onMounted,
+	provide,
+	ref,
+	watch,
+} from "vue";
+import { v4 as uuid } from "uuid";
+import XCommon from "./_common_/common.vue";
+import {
+	deckStore,
+	addColumn as addColumnToStore,
+	loadDeck,
+	getProfiles,
+	deleteProfile as deleteProfile_,
+} from "./deck/deck-store";
+import DeckColumnCore from "@/ui/deck/column-core.vue";
+import XSidebar from "@/ui/_common_/navbar.vue";
+import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
+import MkButton from "@/components/MkButton.vue";
+import { getScrollContainer } from "@/scripts/scroll";
+import * as os from "@/os";
+import { navbarItemDef } from "@/navbar";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
+import { mainRouter } from "@/router";
+import { unisonReload } from "@/scripts/unison-reload";
+const XStatusBars = defineAsyncComponent(
+	() => import("@/ui/_common_/statusbars.vue")
+);
 
 mainRouter.navHook = (path, flag): boolean => {
-	if (flag === 'forcePage') return false;
-	const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
+	if (flag === "forcePage") return false;
+	const noMainColumn = !deckStore.state.columns.some(
+		(x) => x.type === "main"
+	);
 	if (deckStore.state.navWindow || noMainColumn) {
 		os.pageWindow(path);
 		return true;
@@ -100,13 +191,13 @@ mainRouter.navHook = (path, flag): boolean => {
 };
 
 const isMobile = ref(window.innerWidth <= 500);
-window.addEventListener('resize', () => {
+window.addEventListener("resize", () => {
 	isMobile.value = window.innerWidth <= 500;
 });
 
 const drawerMenuShowing = ref(false);
 
-const route = 'TODO';
+const route = "TODO";
 watch(route, () => {
 	drawerMenuShowing.value = false;
 });
@@ -122,27 +213,28 @@ const menuIndicated = computed(() => {
 });
 
 function showSettings() {
-	os.pageWindow('/settings/deck');
+	os.pageWindow("/settings/deck");
 }
 
 let columnsEl = $ref<HTMLElement>();
 
 const addColumn = async (ev) => {
 	const columns = [
-		'main',
-		'widgets',
-		'notifications',
-		'tl',
-		'antenna',
-		'list',
-		'mentions',
-		'direct',
+		"main",
+		"widgets",
+		"notifications",
+		"tl",
+		"antenna",
+		"list",
+		"mentions",
+		"direct",
 	];
 
 	const { canceled, result: column } = await os.select({
 		title: i18n.ts._deck.addColumn,
-		items: columns.map(column => ({
-			value: column, text: i18n.t('_deck._columns.' + column),
+		items: columns.map((column) => ({
+			value: column,
+			text: i18n.t("_deck._columns." + column),
 		})),
 	});
 	if (canceled) return;
@@ -150,75 +242,92 @@ const addColumn = async (ev) => {
 	addColumnToStore({
 		type: column,
 		id: uuid(),
-		name: i18n.t('_deck._columns.' + column),
+		name: i18n.t("_deck._columns." + column),
 		width: 330,
 	});
 };
 
 const onContextmenu = (ev) => {
-	os.contextMenu([{
-		text: i18n.ts._deck.addColumn,
-		action: addColumn,
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				text: i18n.ts._deck.addColumn,
+				action: addColumn,
+			},
+		],
+		ev
+	);
 };
 
-document.documentElement.style.overflowY = 'hidden';
-document.documentElement.style.scrollBehavior = 'auto';
-window.addEventListener('wheel', (ev) => {
+document.documentElement.style.overflowY = "hidden";
+document.documentElement.style.scrollBehavior = "auto";
+window.addEventListener("wheel", (ev) => {
 	if (ev.target === columnsEl && ev.deltaX === 0) {
 		columnsEl.scrollLeft += ev.deltaY;
-	} else if (getScrollContainer(ev.target as HTMLElement) == null && ev.deltaX === 0) {
+	} else if (
+		getScrollContainer(ev.target as HTMLElement) == null &&
+		ev.deltaX === 0
+	) {
 		columnsEl.scrollLeft += ev.deltaY;
 	}
 });
 loadDeck();
 
-function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
+function moveFocus(id: string, direction: "up" | "down" | "left" | "right") {
 	// TODO??
 }
 
 function changeProfile(ev: MouseEvent) {
-	const items = ref([{
-		text: deckStore.state.profile,
-		active: true.valueOf,
-	}]);
-	getProfiles().then(profiles => {
-		items.value = [{
+	const items = ref([
+		{
 			text: deckStore.state.profile,
 			active: true.valueOf,
-		}, ...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
-			text: k,
-			action: () => {
-				deckStore.set('profile', k);
-				unisonReload();
+		},
+	]);
+	getProfiles().then((profiles) => {
+		items.value = [
+			{
+				text: deckStore.state.profile,
+				active: true.valueOf,
 			},
-		}))), null, {
-			text: i18n.ts._deck.newProfile,
-			icon: 'ph-plus ph-bold ph-lg',
-			action: async () => {
-				const { canceled, result: name } = await os.inputText({
-					title: i18n.ts._deck.profile,
-					allowEmpty: false,
-				});
-				if (canceled) return;
+			...profiles
+				.filter((k) => k !== deckStore.state.profile)
+				.map((k) => ({
+					text: k,
+					action: () => {
+						deckStore.set("profile", k);
+						unisonReload();
+					},
+				})),
+			null,
+			{
+				text: i18n.ts._deck.newProfile,
+				icon: "ph-plus ph-bold ph-lg",
+				action: async () => {
+					const { canceled, result: name } = await os.inputText({
+						title: i18n.ts._deck.profile,
+						allowEmpty: false,
+					});
+					if (canceled) return;
 
-				deckStore.set('profile', name);
-				unisonReload();
+					deckStore.set("profile", name);
+					unisonReload();
+				},
 			},
-		}];
+		];
 	});
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
 async function deleteProfile() {
 	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('deleteAreYouSure', { x: deckStore.state.profile }),
+		type: "warning",
+		text: i18n.t("deleteAreYouSure", { x: deckStore.state.profile }),
 	});
 	if (canceled) return;
 
 	deleteProfile_(deckStore.state.profile);
-	deckStore.set('profile', 'default');
+	deckStore.set("profile", "default");
 	unisonReload();
 }
 </script>
@@ -228,7 +337,8 @@ async function deleteProfile() {
 .menu-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .menu-enter-from,
 .menu-leave-active {
@@ -299,7 +409,8 @@ async function deleteProfile() {
 					flex-direction: column;
 
 					> *:not(:last-of-type) {
-						border-bottom: solid var(--deckDividerThickness) var(--bg);
+						border-bottom: solid var(--deckDividerThickness)
+							var(--bg);
 					}
 				}
 			}
@@ -324,7 +435,9 @@ async function deleteProfile() {
 				justify-content: center;
 				width: 44px;
 
-				> .top, > .middle, > .bottom {
+				> .top,
+				> .middle,
+				> .bottom {
 					> .button {
 						display: block;
 						width: 100%;
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index d06b79c96..9dba7bd48 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -1,20 +1,32 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i class="ph-television ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
+	<XColumn
+		:menu="menu"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<i class="ph-television ph-bold ph-lg"></i
+			><span style="margin-left: 8px">{{ column.name }}</span>
+		</template>
 
-	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
-</XColumn>
+		<XTimeline
+			v-if="column.antennaId"
+			ref="timeline"
+			src="antenna"
+			:antenna="column.antennaId"
+			@after="() => emit('loaded')"
+		/>
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import XColumn from "./column.vue";
+import { updateColumn, Column } from "./deck-store";
+import XTimeline from "@/components/MkTimeline.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -22,8 +34,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "loaded"): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let timeline = $ref<InstanceType<typeof XTimeline>>();
@@ -35,11 +47,12 @@ onMounted(() => {
 });
 
 async function setAntenna() {
-	const antennas = await os.api('antennas/list');
+	const antennas = await os.api("antennas/list");
 	const { canceled, result: antenna } = await os.select({
 		title: i18n.ts.selectAntenna,
-		items: antennas.map(x => ({
-			value: x, text: x.name,
+		items: antennas.map((x) => ({
+			value: x,
+			text: x.name,
 		})),
 		default: props.column.antennaId,
 	});
@@ -49,11 +62,13 @@ async function setAntenna() {
 	});
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.selectAntenna,
-	action: setAntenna,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.selectAntenna,
+		action: setAntenna,
+	},
+];
 
 /*
 function focus() {
@@ -66,5 +81,4 @@ defineExpose({
 */
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/ui/deck/column-core.vue b/packages/client/src/ui/deck/column-core.vue
index 30c0dc5e1..4a4afcb07 100644
--- a/packages/client/src/ui/deck/column-core.vue
+++ b/packages/client/src/ui/deck/column-core.vue
@@ -1,27 +1,67 @@
 <template>
-<!-- TODO: リファクタの余地がありそう -->
-<div v-if="!column">たぶん見えちゃいけないやつ</div>
-<XMainColumn v-else-if="column.type === 'main'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+	<!-- TODO: リファクタの余地がありそう -->
+	<div v-if="!column">たぶん見えちゃいけないやつ</div>
+	<XMainColumn
+		v-else-if="column.type === 'main'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XWidgetsColumn
+		v-else-if="column.type === 'widgets'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XNotificationsColumn
+		v-else-if="column.type === 'notifications'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XTlColumn
+		v-else-if="column.type === 'tl'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XListColumn
+		v-else-if="column.type === 'list'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XAntennaColumn
+		v-else-if="column.type === 'antenna'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XMentionsColumn
+		v-else-if="column.type === 'mentions'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
+	<XDirectColumn
+		v-else-if="column.type === 'direct'"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="emit('parent-focus', $event)"
+	/>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XMainColumn from './main-column.vue';
-import XTlColumn from './tl-column.vue';
-import XAntennaColumn from './antenna-column.vue';
-import XListColumn from './list-column.vue';
-import XNotificationsColumn from './notifications-column.vue';
-import XWidgetsColumn from './widgets-column.vue';
-import XMentionsColumn from './mentions-column.vue';
-import XDirectColumn from './direct-column.vue';
-import { Column } from './deck-store';
+import {} from "vue";
+import XMainColumn from "./main-column.vue";
+import XTlColumn from "./tl-column.vue";
+import XAntennaColumn from "./antenna-column.vue";
+import XListColumn from "./list-column.vue";
+import XNotificationsColumn from "./notifications-column.vue";
+import XWidgetsColumn from "./widgets-column.vue";
+import XMentionsColumn from "./mentions-column.vue";
+import XDirectColumn from "./direct-column.vue";
+import { Column } from "./deck-store";
 
 defineProps<{
 	column?: Column;
@@ -29,6 +69,6 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 </script>
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 058d47544..425f00293 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -1,91 +1,131 @@
 <template>
-<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section
-	v-hotkey="keymap" class="dnpfarvg _narrow_"
-	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
-	@dragover.prevent.stop="onDragover"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
->
-	<header
-		:class="{ indicated }"
-		draggable="true"
-		@click="goTop"
-		@dragstart="onDragstart"
-		@dragend="onDragend"
-		@contextmenu.prevent.stop="onContextmenu"
+	<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+	<section
+		v-hotkey="keymap"
+		class="dnpfarvg _narrow_"
+		:class="{
+			paged: isMainColumn,
+			naked,
+			active,
+			isStacked,
+			draghover,
+			dragging,
+			dropready,
+		}"
+		@dragover.prevent.stop="onDragover"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
 	>
-		<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
-			<template v-if="active"><i class="ph-caret-up ph-bold ph-lg"></i></template>
-			<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
-		</button>
-		<div class="action">
-			<slot name="action"></slot>
+		<header
+			:class="{ indicated }"
+			draggable="true"
+			@click="goTop"
+			@dragstart="onDragstart"
+			@dragend="onDragend"
+			@contextmenu.prevent.stop="onContextmenu"
+		>
+			<button
+				v-if="isStacked && !isMainColumn"
+				class="toggleActive _button"
+				@click="toggleActive"
+			>
+				<template v-if="active"
+					><i class="ph-caret-up ph-bold ph-lg"></i
+				></template>
+				<template v-else
+					><i class="ph-caret-down ph-bold ph-lg"></i
+				></template>
+			</button>
+			<div class="action">
+				<slot name="action"></slot>
+			</div>
+			<span class="header"><slot name="header"></slot></span>
+			<button
+				v-tooltip="i18n.ts.settings"
+				class="menu _button"
+				@click.stop="showSettingsMenu"
+			>
+				<i class="ph-dots-three-outline-vertical ph-bold ph-lg"></i>
+			</button>
+		</header>
+		<div v-show="active" ref="body">
+			<slot></slot>
 		</div>
-		<span class="header"><slot name="header"></slot></span>
-		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ph-dots-three-outline-vertical ph-bold ph-lg"></i></button>
-	</header>
-	<div v-show="active" ref="body">
-		<slot></slot>
-	</div>
-</section>
+	</section>
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, provide, Ref, watch } from 'vue';
-import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column , deckStore } from './deck-store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { MenuItem } from '@/types/menu';
+import { onBeforeUnmount, onMounted, provide, Ref, watch } from "vue";
+import {
+	updateColumn,
+	swapLeftColumn,
+	swapRightColumn,
+	swapUpColumn,
+	swapDownColumn,
+	stackLeftColumn,
+	popRightColumn,
+	removeColumn,
+	swapColumn,
+	Column,
+	deckStore,
+} from "./deck-store";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { MenuItem } from "@/types/menu";
 
-provide('shouldHeaderThin', true);
-provide('shouldOmitHeaderTitle', true);
-provide('shouldSpacerMin', true);
+provide("shouldHeaderThin", true);
+provide("shouldOmitHeaderTitle", true);
+provide("shouldSpacerMin", true);
 
-const props = withDefaults(defineProps<{
-	column: Column;
-	isStacked?: boolean;
-	naked?: boolean;
-	indicated?: boolean;
-	menu?: MenuItem[];
-}>(), {
-	isStacked: false,
-	naked: false,
-	indicated: false,
-});
+const props = withDefaults(
+	defineProps<{
+		column: Column;
+		isStacked?: boolean;
+		naked?: boolean;
+		indicated?: boolean;
+		menu?: MenuItem[];
+	}>(),
+	{
+		isStacked: false,
+		naked: false,
+		indicated: false,
+	}
+);
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-	(ev: 'change-active-state', v: boolean): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
+	(ev: "change-active-state", v: boolean): void;
 }>();
 
 let body = $ref<HTMLDivElement>();
 
 let dragging = $ref(false);
-watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
+watch($$(dragging), (v) =>
+	os.deckGlobalEvents.emit(v ? "column.dragStart" : "column.dragEnd")
+);
 
 let draghover = $ref(false);
 let dropready = $ref(false);
 
-const isMainColumn = $computed(() => props.column.type === 'main');
+const isMainColumn = $computed(() => props.column.type === "main");
 const active = $computed(() => props.column.active !== false);
-watch($$(active), v => emit('change-active-state', v));
+watch($$(active), (v) => emit("change-active-state", v));
 
 const keymap = $computed(() => ({
-	'shift+up': () => emit('parent-focus', 'up'),
-	'shift+down': () => emit('parent-focus', 'down'),
-	'shift+left': () => emit('parent-focus', 'left'),
-	'shift+right': () => emit('parent-focus', 'right'),
+	"shift+up": () => emit("parent-focus", "up"),
+	"shift+down": () => emit("parent-focus", "down"),
+	"shift+left": () => emit("parent-focus", "left"),
+	"shift+right": () => emit("parent-focus", "right"),
 }));
 
 onMounted(() => {
-	os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.on('column.dragEnd', onOtherDragEnd);
+	os.deckGlobalEvents.on("column.dragStart", onOtherDragStart);
+	os.deckGlobalEvents.on("column.dragEnd", onOtherDragEnd);
 });
 
 onBeforeUnmount(() => {
-	os.deckGlobalEvents.off('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.off('column.dragEnd', onOtherDragEnd);
+	os.deckGlobalEvents.off("column.dragStart", onOtherDragStart);
+	os.deckGlobalEvents.off("column.dragEnd", onOtherDragEnd);
 });
 
 function onOtherDragStart() {
@@ -104,79 +144,97 @@ function toggleActive() {
 }
 
 function getMenu() {
-	let items = [{
-		icon: 'ph-gear-six ph-bold ph-lg',
-		text: i18n.ts._deck.configureColumn,
-		action: async () => {
-			const { canceled, result } = await os.form(props.column.name, {
-				name: {
-					type: 'string',
-					label: i18n.ts.name,
-					default: props.column.name,
+	let items = [
+		{
+			icon: "ph-gear-six ph-bold ph-lg",
+			text: i18n.ts._deck.configureColumn,
+			action: async () => {
+				const { canceled, result } = await os.form(props.column.name, {
+					name: {
+						type: "string",
+						label: i18n.ts.name,
+						default: props.column.name,
+					},
+					width: {
+						type: "number",
+						label: i18n.ts.width,
+						default: props.column.width,
+					},
+					flexible: {
+						type: "boolean",
+						label: i18n.ts.flexible,
+						default: props.column.flexible,
+					},
+				});
+				if (canceled) return;
+				updateColumn(props.column.id, result);
+			},
+		},
+		{
+			type: "parent",
+			text: i18n.ts.move + "...",
+			icon: "ph-arrows-out-cardinal ph-bold ph-lg",
+			children: [
+				{
+					icon: "ph-caret-left ph-bold ph-lg",
+					text: i18n.ts._deck.swapLeft,
+					action: () => {
+						swapLeftColumn(props.column.id);
+					},
 				},
-				width: {
-					type: 'number',
-					label: i18n.ts.width,
-					default: props.column.width,
+				{
+					icon: "ph-caret-right ph-bold ph-lg",
+					text: i18n.ts._deck.swapRight,
+					action: () => {
+						swapRightColumn(props.column.id);
+					},
 				},
-				flexible: {
-					type: 'boolean',
-					label: i18n.ts.flexible,
-					default: props.column.flexible,
-				},
-			});
-			if (canceled) return;
-			updateColumn(props.column.id, result);
+				props.isStacked
+					? {
+							icon: "ph-caret-up ph-bold ph-lg",
+							text: i18n.ts._deck.swapUp,
+							action: () => {
+								swapUpColumn(props.column.id);
+							},
+					  }
+					: undefined,
+				props.isStacked
+					? {
+							icon: "ph-caret-down ph-bold ph-lg",
+							text: i18n.ts._deck.swapDown,
+							action: () => {
+								swapDownColumn(props.column.id);
+							},
+					  }
+					: undefined,
+			],
 		},
-	}, {
-		type: 'parent',
-		text: i18n.ts.move + '...',
-		icon: 'ph-arrows-out-cardinal ph-bold ph-lg',
-		children: [{
-			icon: 'ph-caret-left ph-bold ph-lg',
-			text: i18n.ts._deck.swapLeft,
+		{
+			icon: "ph-copy ph-bold ph-lg",
+			text: i18n.ts._deck.stackLeft,
 			action: () => {
-				swapLeftColumn(props.column.id);
+				stackLeftColumn(props.column.id);
 			},
-		}, {
-			icon: 'ph-caret-right ph-bold ph-lg',
-			text: i18n.ts._deck.swapRight,
-			action: () => {
-				swapRightColumn(props.column.id);
-			},
-		}, props.isStacked ? {
-			icon: 'ph-caret-up ph-bold ph-lg',
-			text: i18n.ts._deck.swapUp,
-			action: () => {
-				swapUpColumn(props.column.id);
-			},
-		} : undefined, props.isStacked ? {
-			icon: 'ph-caret-down ph-bold ph-lg',
-			text: i18n.ts._deck.swapDown,
-			action: () => {
-				swapDownColumn(props.column.id);
-			},
-		} : undefined],
-	}, {
-		icon: 'ph-copy ph-bold ph-lg',
-		text: i18n.ts._deck.stackLeft,
-		action: () => {
-			stackLeftColumn(props.column.id);
 		},
-	}, props.isStacked ? {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts._deck.popRight,
-		action: () => {
-			popRightColumn(props.column.id);
+		props.isStacked
+			? {
+					icon: "ph-browser ph-bold ph-lg",
+					text: i18n.ts._deck.popRight,
+					action: () => {
+						popRightColumn(props.column.id);
+					},
+			  }
+			: undefined,
+		null,
+		{
+			icon: "ph-trash ph-bold ph-lg",
+			text: i18n.ts.remove,
+			danger: true,
+			action: () => {
+				removeColumn(props.column.id);
+			},
 		},
-	} : undefined, null, {
-		icon: 'ph-trash ph-bold ph-lg',
-		text: i18n.ts.remove,
-		danger: true,
-		action: () => {
-			removeColumn(props.column.id);
-		},
-	}];
+	];
 
 	if (props.menu) {
 		items.unshift(null);
@@ -197,12 +255,12 @@ function onContextmenu(ev: MouseEvent) {
 function goTop() {
 	body.scrollTo({
 		top: 0,
-		behavior: 'smooth',
+		behavior: "smooth",
 	});
 }
 
 function onDragstart(ev) {
-	ev.dataTransfer.effectAllowed = 'move';
+	ev.dataTransfer.effectAllowed = "move";
 	ev.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id);
 
 	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
@@ -220,11 +278,12 @@ function onDragover(ev) {
 	// 自分自身がドラッグされている場合
 	if (dragging) {
 		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
+		ev.dataTransfer.dropEffect = "none";
 	} else {
-		const isDeckColumn = ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_;
+		const isDeckColumn =
+			ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_;
 
-		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+		ev.dataTransfer.dropEffect = isDeckColumn ? "move" : "none";
 
 		if (isDeckColumn) draghover = true;
 	}
@@ -236,10 +295,10 @@ function onDragleave() {
 
 function onDrop(ev) {
 	draghover = false;
-	os.deckGlobalEvents.emit('column.dragEnd');
+	os.deckGlobalEvents.emit("column.dragEnd");
 
 	const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
-	if (id != null && id !== '') {
+	if (id != null && id !== "") {
 		swapColumn(props.column.id, id);
 	}
 }
@@ -249,7 +308,7 @@ function onDrop(ev) {
 .dnpfarvg {
 	header {
 		.ph-lg {
-			vertical-align: -.24em;
+			vertical-align: -0.24em;
 		}
 	}
 }
@@ -340,7 +399,8 @@ function onDrop(ev) {
 		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
 		cursor: pointer;
 
-		&, * {
+		&,
+		* {
 			user-select: none;
 		}
 
@@ -377,7 +437,8 @@ function onDrop(ev) {
 			}
 		}
 
-		> .toggleActive, > .action {
+		> .toggleActive,
+		> .action {
 			margin-left: -16px;
 		}
 
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index cf84ad517..67ebca16f 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -1,16 +1,26 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ph-envelope-simple-open ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i
+				class="ph-envelope-simple-open ph-bold ph-lg"
+				style="margin-right: 8px"
+			></i
+			>{{ column.name }}</template
+		>
 
-	<XNotes :pagination="pagination"/>
-</XColumn>
+		<XNotes :pagination="pagination" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import XNotes from '@/components/MkNotes.vue';
-import { Column } from './deck-store';
+import {} from "vue";
+import XColumn from "./column.vue";
+import XNotes from "@/components/MkNotes.vue";
+import { Column } from "./deck-store";
 
 defineProps<{
 	column: Column;
@@ -18,14 +28,14 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 const pagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 	params: {
-		visibility: 'specified'
+		visibility: "specified",
 	},
 };
 </script>
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 9247285fd..e4c820d6f 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -1,20 +1,32 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i class="ph-list-bullets ph-bold ph-lg"></i><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
+	<XColumn
+		:menu="menu"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<i class="ph-list-bullets ph-bold ph-lg"></i
+			><span style="margin-left: 8px">{{ column.name }}</span>
+		</template>
 
-	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
-</XColumn>
+		<XTimeline
+			v-if="column.listId"
+			ref="timeline"
+			src="list"
+			:list="column.listId"
+			@after="() => emit('loaded')"
+		/>
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XColumn from "./column.vue";
+import { updateColumn, Column } from "./deck-store";
+import XTimeline from "@/components/MkTimeline.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -22,8 +34,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "loaded"): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let timeline = $ref<InstanceType<typeof XTimeline>>();
@@ -33,11 +45,12 @@ if (props.column.listId == null) {
 }
 
 async function setList() {
-	const lists = await os.api('users/lists/list');
+	const lists = await os.api("users/lists/list");
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
-		items: lists.map(x => ({
-			value: x, text: x.name,
+		items: lists.map((x) => ({
+			value: x,
+			text: x.name,
 		})),
 		default: props.column.listId,
 	});
@@ -47,12 +60,13 @@ async function setList() {
 	});
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.selectList,
-	action: setList,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.selectList,
+		action: setList,
+	},
+];
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue
index 358a4a9be..357395a4e 100644
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -1,24 +1,36 @@
 <template>
-<XColumn v-if="deckStore.state.alwaysShowMainColumn || mainRouter.currentRoute.value.name !== 'index'" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<template v-if="pageMetadata?.value">
-			<i :class="pageMetadata?.value.icon"></i>
-			{{ pageMetadata?.value.title }}
+	<XColumn
+		v-if="
+			deckStore.state.alwaysShowMainColumn ||
+			mainRouter.currentRoute.value.name !== 'index'
+		"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<template v-if="pageMetadata?.value">
+				<i :class="pageMetadata?.value.icon"></i>
+				{{ pageMetadata?.value.title }}
+			</template>
 		</template>
-	</template>
 
-	<RouterView @contextmenu.stop="onContextmenu"/>
-</XColumn>
+		<RouterView @contextmenu.stop="onContextmenu" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide } from 'vue';
-import XColumn from './column.vue';
-import { deckStore, Column } from '@/ui/deck/deck-store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { ComputedRef, provide } from "vue";
+import XColumn from "./column.vue";
+import { deckStore, Column } from "@/ui/deck/deck-store";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
+import { mainRouter } from "@/router";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
 
 defineProps<{
 	column: Column;
@@ -26,12 +38,12 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 });
@@ -45,24 +57,36 @@ function onContextmenu(ev: MouseEvent) {
 	if (!ev.target) return;
 
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target as HTMLElement)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes((ev.target as HTMLElement).tagName) || (ev.target as HTMLElement).attributes['contenteditable']) return;
-	if (window.getSelection()?.toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			(ev.target as HTMLElement).tagName
+		) ||
+		(ev.target as HTMLElement).attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection()?.toString() !== "") return;
 	const path = mainRouter.currentRoute.value.path;
-	os.contextMenu([{
-		type: 'label',
-		text: path,
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: path,
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				},
+			},
+		],
+		ev
+	);
 }
 </script>
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 5510416d1..83eff7297 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -1,16 +1,23 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ph-at ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i class="ph-at ph-bold ph-lg" style="margin-right: 8px"></i
+			>{{ column.name }}</template
+		>
 
-	<XNotes :pagination="pagination"/>
-</XColumn>
+		<XNotes :pagination="pagination" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import XNotes from '@/components/MkNotes.vue';
-import { Column } from './deck-store';
+import {} from "vue";
+import XColumn from "./column.vue";
+import XNotes from "@/components/MkNotes.vue";
+import { Column } from "./deck-store";
 
 defineProps<{
 	column: Column;
@@ -18,11 +25,11 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 const pagination = {
-	endpoint: 'notes/mentions' as const,
+	endpoint: "notes/mentions" as const,
 	limit: 10,
 };
 </script>
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index 7e0e85a46..d003f08ef 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -1,19 +1,27 @@
 <template>
-<XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ph-bell ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:column="column"
+		:is-stacked="isStacked"
+		:menu="menu"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i class="ph-bell ph-bold ph-lg" style="margin-right: 8px"></i
+			>{{ column.name }}</template
+		>
 
-	<XNotifications :include-types="column.includingTypes"/>
-</XColumn>
+		<XNotifications :include-types="column.includingTypes" />
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn } from './deck-store';
-import type { Column } from './deck-store';
-import XNotifications from '@/components/MkNotifications.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import XColumn from "./column.vue";
+import { updateColumn } from "./deck-store";
+import type { Column } from "./deck-store";
+import XNotifications from "@/components/MkNotifications.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -21,25 +29,34 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 function func(): void {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: props.column.includingTypes,
-	}, {
-		done: async (res) => {
-			const { includingTypes } = res;
-			updateColumn(props.column.id, {
-				includingTypes: includingTypes,
-			});
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkNotificationSettingWindow.vue")
+		),
+		{
+			includingTypes: props.column.includingTypes,
 		},
-	}, 'closed');
+		{
+			done: async (res) => {
+				const { includingTypes } = res;
+				updateColumn(props.column.id, {
+					includingTypes: includingTypes,
+				});
+			},
+		},
+		"closed"
+	);
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.notificationSetting,
-	action: func,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.notificationSetting,
+		action: func,
+	},
+];
 </script>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 280ab6c35..7e801dc99 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -1,33 +1,57 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i v-if="column.tl === 'home'" class="ph-house ph-bold ph-lg"></i>
-		<i v-else-if="column.tl === 'local'" class="ph-chats-circle ph-bold ph-lg"></i>
-		<i v-else-if="column.tl === 'social'" class="ph-share-network ph-bold ph-lg"></i>
-		<i v-else-if="column.tl === 'global'" class="ph-planet ph-bold ph-lg"></i>
-		<span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
+	<XColumn
+		:menu="menu"
+		:column="column"
+		:is-stacked="isStacked"
+		:indicated="indicated"
+		@change-active-state="onChangeActiveState"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header>
+			<i v-if="column.tl === 'home'" class="ph-house ph-bold ph-lg"></i>
+			<i
+				v-else-if="column.tl === 'local'"
+				class="ph-chats-circle ph-bold ph-lg"
+			></i>
+			<i
+				v-else-if="column.tl === 'social'"
+				class="ph-share-network ph-bold ph-lg"
+			></i>
+			<i
+				v-else-if="column.tl === 'global'"
+				class="ph-planet ph-bold ph-lg"
+			></i>
+			<span style="margin-left: 8px">{{ column.name }}</span>
+		</template>
 
-	<div v-if="disabled" class="iwaalbte">
-		<p>
-			<i class="ph-minus-circle ph-bold ph-lg"></i>
-			{{ i18n.t('disabled-timeline.title') }}
-		</p>
-		<p class="desc">{{ i18n.t('disabled-timeline.description') }}</p>
-	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
-</XColumn>
+		<div v-if="disabled" class="iwaalbte">
+			<p>
+				<i class="ph-minus-circle ph-bold ph-lg"></i>
+				{{ i18n.t("disabled-timeline.title") }}
+			</p>
+			<p class="desc">{{ i18n.t("disabled-timeline.description") }}</p>
+		</div>
+		<XTimeline
+			v-else-if="column.tl"
+			ref="timeline"
+			:key="column.tl"
+			:src="column.tl"
+			@after="() => emit('loaded')"
+			@queue="queueUpdated"
+			@note="onNote"
+		/>
+	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XColumn from './column.vue';
-import { removeColumn, updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
+import { onMounted } from "vue";
+import XColumn from "./column.vue";
+import { removeColumn, updateColumn, Column } from "./deck-store";
+import XTimeline from "@/components/MkTimeline.vue";
+import * as os from "@/os";
+import { $i } from "@/account";
+import { instance } from "@/instance";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -35,8 +59,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "loaded"): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let disabled = $ref(false);
@@ -47,27 +71,43 @@ onMounted(() => {
 	if (props.column.tl == null) {
 		setType();
 	} else if ($i) {
-		disabled = !$i.isModerator && !$i.isAdmin && (
-			instance.disableLocalTimeline && ['local', 'social'].includes(props.column.tl) ||
-			instance.disableRecommendedTimeline && ['recommended'].includes(props.column.tl) ||
-			instance.disableGlobalTimeline && ['global'].includes(props.column.tl));
+		disabled =
+			!$i.isModerator &&
+			!$i.isAdmin &&
+			((instance.disableLocalTimeline &&
+				["local", "social"].includes(props.column.tl)) ||
+				(instance.disableRecommendedTimeline &&
+					["recommended"].includes(props.column.tl)) ||
+				(instance.disableGlobalTimeline &&
+					["global"].includes(props.column.tl)));
 	}
 });
 
 async function setType() {
 	const { canceled, result: src } = await os.select({
 		title: i18n.ts.timeline,
-		items: [{
-			value: 'home' as const, text: i18n.ts._timelines.home,
-		}, {
-			value: 'local' as const, text: i18n.ts._timelines.local,
-		}, {
-			value: 'recommended' as const, text: i18n.ts._timelines.recommended,
-		}, {
-			value: 'social' as const, text: i18n.ts._timelines.social,
-		}, {
-			value: 'global' as const, text: i18n.ts._timelines.global,
-		}],
+		items: [
+			{
+				value: "home" as const,
+				text: i18n.ts._timelines.home,
+			},
+			{
+				value: "local" as const,
+				text: i18n.ts._timelines.local,
+			},
+			{
+				value: "recommended" as const,
+				text: i18n.ts._timelines.recommended,
+			},
+			{
+				value: "social" as const,
+				text: i18n.ts._timelines.social,
+			},
+			{
+				value: "global" as const,
+				text: i18n.ts._timelines.global,
+			},
+		],
 	});
 	if (canceled) {
 		if (props.column.tl == null) {
@@ -100,11 +140,13 @@ function onChangeActiveState(state) {
 	}
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.timeline,
-	action: setType,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.timeline,
+		action: setType,
+	},
+];
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 50a53ec63..8bfd40cf4 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -1,20 +1,48 @@
 <template>
-	<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-		<template #header><i class="ph-browser ph-bold ph-lg" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<XColumn
+		:menu="menu"
+		:naked="true"
+		:column="column"
+		:is-stacked="isStacked"
+		@parent-focus="($event) => emit('parent-focus', $event)"
+	>
+		<template #header
+			><i class="ph-browser ph-bold ph-lg" style="margin-right: 8px"></i
+			>{{ column.name }}</template
+		>
 		<div class="wtdtxvec">
-			<MkAd class="a" :prefer="['widget']"/>
-			<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
-			<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
+			<MkAd class="a" :prefer="['widget']" />
+			<div
+				v-if="!(column.widgets && column.widgets.length > 0) && !edit"
+				class="intro"
+			>
+				{{ i18n.ts._deck.widgetsIntroduction }}
+			</div>
+			<XWidgets
+				:edit="edit"
+				:widgets="column.widgets"
+				@add-widget="addWidget"
+				@remove-widget="removeWidget"
+				@update-widget="updateWidget"
+				@update-widgets="updateWidgets"
+				@exit="edit = false"
+			/>
 		</div>
 	</XColumn>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import XColumn from "./column.vue";
+import {
+	addColumnWidget,
+	Column,
+	removeColumnWidget,
+	setColumnWidgets,
+	updateColumnWidget,
+} from "./deck-store";
+import XWidgets from "@/components/MkWidgets.vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	column: Column;
@@ -22,7 +50,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
 let edit = $ref(false);
@@ -47,11 +75,13 @@ function func() {
 	edit = !edit;
 }
 
-const menu = [{
-	icon: 'ph-pencil ph-bold ph-lg',
-	text: i18n.ts.editWidgets,
-	action: func,
-}];
+const menu = [
+	{
+		icon: "ph-pencil ph-bold ph-lg",
+		text: i18n.ts.editWidgets,
+		action: func,
+	},
+];
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 391234097..2fb0adb3a 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -1,114 +1,197 @@
 <template>
-<div class="dkgtipfy" :class="{ wallpaper, isMobile }">
-	<XSidebar v-if="!isMobile" class="sidebar"/>
+	<div class="dkgtipfy" :class="{ wallpaper, isMobile }">
+		<XSidebar v-if="!isMobile" class="sidebar" />
 
-	<MkStickyContainer class="contents">
-		<template #header><XStatusBars :class="$style.statusbars"/></template>
-		<main id="maincontent" style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div :class="$style.content">
-				<RouterView/>
-			</div>
-			<div :class="$style.spacer"></div>
-		</main>
-	</MkStickyContainer>
+		<MkStickyContainer class="contents">
+			<template #header
+				><XStatusBars :class="$style.statusbars"
+			/></template>
+			<main
+				id="maincontent"
+				style="min-width: 0"
+				:style="{ background: pageMetadata?.value?.bg }"
+				@contextmenu.stop="onContextmenu"
+			>
+				<div :class="$style.content">
+					<RouterView />
+				</div>
+				<div :class="$style.spacer"></div>
+			</main>
+		</MkStickyContainer>
 
-	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
-		<XWidgets @mounted="attachSticky"/>
+		<div v-if="isDesktop" ref="widgetsEl" class="widgets">
+			<XWidgets @mounted="attachSticky" />
+		</div>
+
+		<button
+			v-if="!isDesktop && !isMobile"
+			class="widgetButton _button"
+			@click="widgetsShowing = true"
+		>
+			<i class="ph-stack ph-bold ph-lg"></i>
+		</button>
+
+		<div v-if="isMobile" class="buttons">
+			<button
+				class="button nav _button"
+				@click="drawerMenuShowing = true"
+			>
+				<div class="button-wrapper">
+					<i class="ph-list ph-bold ph-lg"></i
+					><span v-if="menuIndicated" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				class="button home _button"
+				@click="
+					mainRouter.currentRoute.value.name === 'index'
+						? top()
+						: mainRouter.push('/');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 0 ? 'on' : ''"
+				>
+					<i class="ph-house ph-bold ph-lg"></i>
+				</div>
+			</button>
+			<button
+				class="button notifications _button"
+				@click="
+					mainRouter.push('/my/notifications');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 1 ? 'on' : ''"
+				>
+					<i class="ph-bell ph-bold ph-lg"></i
+					><span v-if="$i?.hasUnreadNotification" class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				class="button messaging _button"
+				@click="
+					mainRouter.push('/my/messaging');
+					updateButtonState();
+				"
+			>
+				<div
+					class="button-wrapper"
+					:class="buttonAnimIndex === 2 ? 'on' : ''"
+				>
+					<i class="ph-chats-teardrop ph-bold ph-lg"></i
+					><span
+						v-if="$i?.hasUnreadMessagingMessage"
+						class="indicator"
+						><i class="ph-circle ph-fill"></i
+					></span>
+				</div>
+			</button>
+			<button
+				class="button widget _button"
+				@click="widgetsShowing = true"
+			>
+				<div class="button-wrapper">
+					<i class="ph-stack ph-bold ph-lg"></i>
+				</div>
+			</button>
+		</div>
+
+		<button
+			v-if="isMobile && mainRouter.currentRoute.value.name === 'index'"
+			ref="postButton"
+			class="postButton button post _button"
+			@click="os.post()"
+		>
+			<i class="ph-pencil ph-bold ph-lg"></i>
+		</button>
+		<button
+			v-if="
+				isMobile && mainRouter.currentRoute.value.name === 'messaging'
+			"
+			ref="postButton"
+			class="postButton button post _button"
+			@click="messagingStart"
+		>
+			<i class="ph-user-plus ph-bold ph-lg"></i>
+		</button>
+
+		<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
+			<div
+				v-if="drawerMenuShowing"
+				class="menuDrawer-back _modalBg"
+				@click="drawerMenuShowing = false"
+				@touchstart.passive="drawerMenuShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'menuDrawer' : ''">
+			<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer" />
+		</transition>
+
+		<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
+			<div
+				v-if="widgetsShowing"
+				class="widgetsDrawer-back _modalBg"
+				@click="widgetsShowing = false"
+				@touchstart.passive="widgetsShowing = false"
+			></div>
+		</transition>
+
+		<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
+			<XWidgets v-if="widgetsShowing" class="widgetsDrawer" />
+		</transition>
+
+		<XCommon />
 	</div>
-
-	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ph-stack ph-bold ph-lg"></i></button>
-
-	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true">
-			<div class="button-wrapper">
-				<i class="ph-list ph-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</div>
-		</button>
-		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/'); updateButtonState();">
-			<div class="button-wrapper" :class="buttonAnimIndex === 0 ? 'on' : ''">
-				<i class="ph-house ph-bold ph-lg"></i>
-			</div>
-		</button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications'); updateButtonState();">
-			<div class="button-wrapper" :class="buttonAnimIndex === 1 ? 'on' : ''">
-				<i class="ph-bell ph-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</div>
-		</button>
-		<button class="button messaging _button" @click="mainRouter.push('/my/messaging'); updateButtonState();">
-			<div class="button-wrapper" :class="buttonAnimIndex === 2 ? 'on' : ''">
-				<i class="ph-chats-teardrop ph-bold ph-lg"></i><span v-if="$i?.hasUnreadMessagingMessage" class="indicator"><i class="ph-circle ph-fill"></i></span>
-			</div>
-		</button>
-		<button class="button widget _button" @click="widgetsShowing = true">
-			<div class="button-wrapper">
-				<i class="ph-stack ph-bold ph-lg"></i>
-			</div>
-		</button>
-	</div>
-
-	<button v-if="isMobile && mainRouter.currentRoute.value.name === 'index'" ref="postButton" class="postButton button post _button" @click="os.post()"><i class="ph-pencil ph-bold ph-lg"></i></button>
-	<button v-if="isMobile && mainRouter.currentRoute.value.name === 'messaging'" ref="postButton" class="postButton button post _button" @click="messagingStart"><i class="ph-user-plus ph-bold ph-lg"></i></button>
-
-	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
-		<div
-			v-if="drawerMenuShowing"
-			class="menuDrawer-back _modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'menuDrawer' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
-		<div
-			v-if="widgetsShowing"
-			class="widgetsDrawer-back _modalBg"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
-		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
-	</transition>
-
-	<XCommon/>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, computed, ref } from 'vue';
-import XCommon from './_common_/common.vue';
-import * as Acct from 'calckey-js/built/acct';
-import type { ComputedRef } from 'vue';
-import type { PageMetadata } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { navbarItemDef } from '@/navbar';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { mainRouter } from '@/router';
-import { provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
+import { defineAsyncComponent, provide, onMounted, computed, ref } from "vue";
+import XCommon from "./_common_/common.vue";
+import * as Acct from "calckey-js/built/acct";
+import type { ComputedRef } from "vue";
+import type { PageMetadata } from "@/scripts/page-metadata";
+import { instanceName } from "@/config";
+import { StickySidebar } from "@/scripts/sticky-sidebar";
+import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
+import * as os from "@/os";
+import { defaultStore } from "@/store";
+import { navbarItemDef } from "@/navbar";
+import { i18n } from "@/i18n";
+import { $i } from "@/account";
+import { mainRouter } from "@/router";
+import {
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { deviceKind } from "@/scripts/device-kind";
 
-const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
-const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
+const XSidebar = defineAsyncComponent(() => import("@/ui/_common_/navbar.vue"));
+const XStatusBars = defineAsyncComponent(
+	() => import("@/ui/_common_/statusbars.vue")
+);
 
 const DESKTOP_THRESHOLD = 1100;
 const MOBILE_THRESHOLD = 500;
 
 // デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
-const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
-window.addEventListener('resize', () => {
-	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+const isMobile = ref(
+	deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD
+);
+window.addEventListener("resize", () => {
+	isMobile.value =
+		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
 const buttonAnimIndex = ref(0);
@@ -119,7 +202,7 @@ const widgetsEl = $ref<HTMLElement>();
 const postButton = $ref<HTMLElement>();
 const widgetsShowing = $ref(false);
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
@@ -129,7 +212,7 @@ provideMetadataReceiver((info) => {
 
 const menuIndicated = computed(() => {
 	for (const def in navbarItemDef) {
-		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+		if (def === "notifications") continue; // 通知は下にボタンとして表示されてるから
 		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;
@@ -137,15 +220,15 @@ const menuIndicated = computed(() => {
 
 function updateButtonState(): void {
 	let routerState = window.location.pathname;
-	if (routerState === '/') {
+	if (routerState === "/") {
 		buttonAnimIndex.value = 0;
 		return;
 	}
-	if (routerState.includes('/my/notifications')) {
+	if (routerState.includes("/my/notifications")) {
 		buttonAnimIndex.value = 1;
 		return;
 	}
-	if (routerState.includes('/my/messaging')) {
+	if (routerState.includes("/my/messaging")) {
 		buttonAnimIndex.value = 2;
 		return;
 	}
@@ -155,55 +238,77 @@ function updateButtonState(): void {
 
 updateButtonState();
 
-mainRouter.on('change', () => {
+mainRouter.on("change", () => {
 	drawerMenuShowing.value = false;
 	updateButtonState();
 });
 
-document.documentElement.style.overflowY = 'scroll';
+document.documentElement.style.overflowY = "scroll";
 
 if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: 'right', data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: 'right', data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: 'right', data: {},
-	}]);
+	defaultStore.set("widgets", [
+		{
+			name: "calendar",
+			id: "a",
+			place: "right",
+			data: {},
+		},
+		{
+			name: "notifications",
+			id: "b",
+			place: "right",
+			data: {},
+		},
+		{
+			name: "trends",
+			id: "c",
+			place: "right",
+			data: {},
+		},
+	]);
 }
 
 function messagingStart(ev) {
-	os.popupMenu([{
-		text: i18n.ts.messagingWithUser,
-		icon: 'ph-user ph-bold ph-lg',
-		action: () => { startUser(); },
-	}, {
-		text: i18n.ts.messagingWithGroup,
-		icon: 'ph-users-three ph-bold ph-lg',
-		action: () => { startGroup(); },
-	}, {
-		text: i18n.ts.manageGroups,
-		icon: 'ph-user-circle-gear ph-bold ph-lg',
-		action: () => { mainRouter.push('/my/groups'); },
-	}], ev.currentTarget ?? ev.target);
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts.messagingWithUser,
+				icon: "ph-user ph-bold ph-lg",
+				action: () => {
+					startUser();
+				},
+			},
+			{
+				text: i18n.ts.messagingWithGroup,
+				icon: "ph-users-three ph-bold ph-lg",
+				action: () => {
+					startGroup();
+				},
+			},
+			{
+				text: i18n.ts.manageGroups,
+				icon: "ph-user-circle-gear ph-bold ph-lg",
+				action: () => {
+					mainRouter.push("/my/groups");
+				},
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
 }
 
-
 async function startUser(): void {
-	os.selectUser().then(user => {
+	os.selectUser().then((user) => {
 		mainRouter.push(`/my/messaging/${Acct.toString(user)}`);
 	});
 }
 
 async function startGroup(): void {
-	const groups1 = await os.api('users/groups/owned');
-	const groups2 = await os.api('users/groups/joined');
+	const groups1 = await os.api("users/groups/owned");
+	const groups2 = await os.api("users/groups/joined");
 	if (groups1.length === 0 && groups2.length === 0) {
 		os.alert({
-			type: 'warning',
+			type: "warning",
 			title: i18n.ts.youHaveNoGroups,
 			text: i18n.ts.joinOrCreateGroup,
 		});
@@ -211,8 +316,9 @@ async function startGroup(): void {
 	}
 	const { canceled, result: group } = await os.select({
 		title: i18n.ts.group,
-		items: groups1.concat(groups2).map(group => ({
-			value: group, text: group.name,
+		items: groups1.concat(groups2).map((group) => ({
+			value: group,
+			text: group.name,
 		})),
 	});
 	if (canceled) return;
@@ -221,47 +327,68 @@ async function startGroup(): void {
 
 onMounted(() => {
 	if (!isDesktop.value) {
-		window.addEventListener('resize', () => {
-			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
-		}, { passive: true });
+		window.addEventListener(
+			"resize",
+			() => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD)
+					isDesktop.value = true;
+			},
+			{ passive: true }
+		);
 	}
 });
 
 const onContextmenu = (ev: MouseEvent) => {
 	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
+		if (el.tagName === "A") return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
 	};
 	if (isLink(ev.target)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
-	if (window.getSelection()?.toString() !== '') return;
+	if (
+		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
+			ev.target.tagName
+		) ||
+		ev.target.attributes["contenteditable"]
+	)
+		return;
+	if (window.getSelection()?.toString() !== "") return;
 	const path = mainRouter.getCurrentPath();
-	os.contextMenu([{
-		type: 'label',
-		text: path,
-	}, {
-		icon: 'ph-browser ph-bold ph-lg',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
+	os.contextMenu(
+		[
+			{
+				type: "label",
+				text: path,
+			},
+			{
+				icon: "ph-browser ph-bold ph-lg",
+				text: i18n.ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				},
+			},
+		],
+		ev
+	);
 };
 
 const attachSticky = (el: any) => {
 	const sticky = new StickySidebar(widgetsEl);
-	window.addEventListener('scroll', () => {
-		sticky.calc(window.scrollY);
-	}, { passive: true });
+	window.addEventListener(
+		"scroll",
+		() => {
+			sticky.calc(window.scrollY);
+		},
+		{ passive: true }
+	);
 };
 
 function top() {
-	window.scroll({ top: 0, behavior: 'smooth' });
+	window.scroll({ top: 0, behavior: "smooth" });
 }
 
-const wallpaper = localStorage.getItem('wallpaper') != null;
+const wallpaper = localStorage.getItem("wallpaper") != null;
 console.log(mainRouter.currentRoute.value.name);
 </script>
 
@@ -270,7 +397,8 @@ console.log(mainRouter.currentRoute.value.name);
 .widgetsDrawer-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .widgetsDrawer-enter-from,
 .widgetsDrawer-leave-active {
@@ -292,7 +420,8 @@ console.log(mainRouter.currentRoute.value.name);
 .menuDrawer-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .menuDrawer-enter-from,
 .menuDrawer-leave-active {
@@ -366,7 +495,8 @@ console.log(mainRouter.currentRoute.value.name);
 		background: var(--bg);
 	}
 
-	> .postButton, .widgetButton {
+	> .postButton,
+	.widgetButton {
 		bottom: var(--stickyBottom);
 		right: 1.5rem;
 		height: 4rem;
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 2daa6916f..8144d3aae 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -1,49 +1,84 @@
 <template>
 	<div class="efzpzdvf">
-		<MkAd class="a" :prefer="['widget']"/>
-		<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-		<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
-		<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
+		<MkAd class="a" :prefer="['widget']" />
+		<XWidgets
+			:edit="editMode"
+			:widgets="defaultStore.reactiveState.widgets.value"
+			@add-widget="addWidget"
+			@remove-widget="removeWidget"
+			@update-widget="updateWidget"
+			@update-widgets="updateWidgets"
+			@exit="editMode = false"
+		/>
+		<button
+			v-if="editMode"
+			class="_textButton"
+			style="font-size: 0.9em"
+			@click="editMode = false"
+		>
+			<i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}
+		</button>
+		<button
+			v-else
+			class="_textButton mk-widget-edit"
+			style="font-size: 0.9em"
+			@click="editMode = true"
+		>
+			<i class="ph-pencil ph-bold ph-lg"></i> {{ i18n.ts.editWidgets }}
+		</button>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
+import { onMounted } from "vue";
+import XWidgets from "@/components/MkWidgets.vue";
+import { i18n } from "@/i18n";
+import { defaultStore } from "@/store";
 
 const emit = defineEmits<{
-	(ev: 'mounted', el: Element): void;
+	(ev: "mounted", el: Element): void;
 }>();
 
 let editMode = $ref(false);
 let rootEl = $ref<HTMLDivElement>();
 
 onMounted(() => {
-	emit('mounted', rootEl);
+	emit("mounted", rootEl);
 });
 
 function addWidget(widget) {
-	defaultStore.set('widgets', [{
-		...widget,
-		place: null,
-	}, ...defaultStore.state.widgets]);
+	defaultStore.set("widgets", [
+		{
+			...widget,
+			place: null,
+		},
+		...defaultStore.state.widgets,
+	]);
 }
 
 function removeWidget(widget) {
-	defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id !== widget.id));
+	defaultStore.set(
+		"widgets",
+		defaultStore.state.widgets.filter((w) => w.id !== widget.id)
+	);
 }
 
 function updateWidget({ id, data }) {
-	defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
-		...w,
-		data,
-	} : w));
+	defaultStore.set(
+		"widgets",
+		defaultStore.state.widgets.map((w) =>
+			w.id === id
+				? {
+						...w,
+						data,
+				  }
+				: w
+		)
+	);
 }
 
 function updateWidgets(widgets) {
-	defaultStore.set('widgets', widgets);
+	defaultStore.set("widgets", widgets);
 }
 </script>
 
diff --git a/packages/client/src/ui/visitor.vue b/packages/client/src/ui/visitor.vue
index 767c9ddbb..a00813415 100644
--- a/packages/client/src/ui/visitor.vue
+++ b/packages/client/src/ui/visitor.vue
@@ -1,14 +1,14 @@
 <template>
-<DesignB/>
-<XCommon/>
+	<DesignB />
+	<XCommon />
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import DesignA from './visitor/a.vue';
-import DesignB from './visitor/b.vue';
-import XCommon from './_common_/common.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import DesignA from "./visitor/a.vue";
+import DesignB from "./visitor/b.vue";
+import XCommon from "./_common_/common.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 1481b80a0..3894a991d 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -1,51 +1,91 @@
 <template>
-<div class="mk-app">
-	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
-			<div v-if="meta" class="about">
-				<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
-			</div>
-			<div class="action">
-				<button class="_button primary" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
+	<div class="mk-app">
+		<div
+			v-if="mainRouter.currentRoute?.name === 'index'"
+			class="banner"
+			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
+		>
+			<div>
+				<h1 v-if="meta">
+					<img
+						v-if="meta.logoImageUrl"
+						class="logo"
+						:src="meta.logoImageUrl"
+					/><span v-else class="text">{{ instanceName }}</span>
+				</h1>
+				<div v-if="meta" class="about">
+					<div
+						class="desc"
+						v-html="meta.description || i18n.ts.introMisskey"
+					></div>
+				</div>
+				<div class="action">
+					<button class="_button primary" @click="signup()">
+						{{ i18n.ts.signup }}
+					</button>
+					<button class="_button" @click="signin()">
+						{{ i18n.ts.login }}
+					</button>
+				</div>
 			</div>
 		</div>
-	</div>
-	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+		<div
+			v-else
+			class="banner-mini"
+			:style="{ backgroundImage: `url(${$instance.bannerUrl})` }"
+		>
+			<div>
+				<h1 v-if="meta">
+					<img
+						v-if="meta.logoImageUrl"
+						class="logo"
+						:src="meta.logoImageUrl"
+					/><span v-else class="text">{{ instanceName }}</span>
+				</h1>
+			</div>
 		</div>
-	</div>
 
-	<div class="main">
-		<div ref="contents" class="contents" :class="{ wallpaper }">
-			<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
-				<XHeader :info="pageInfo"/>
-			</header>
-			<main ref="main">
-				<RouterView/>
-			</main>
-			<div class="powered-by">
-				<b><MkA to="/">{{ host }}</MkA></b>
-				<small>Powered by <a href="https://codeberg.org/calckey/calckey" target="_blank">Calckey</a></small>
+		<div class="main">
+			<div ref="contents" class="contents" :class="{ wallpaper }">
+				<header
+					v-show="mainRouter.currentRoute?.name !== 'index'"
+					ref="header"
+					class="header"
+				>
+					<XHeader :info="pageInfo" />
+				</header>
+				<main ref="main">
+					<RouterView />
+				</main>
+				<div class="powered-by">
+					<b
+						><MkA to="/">{{ host }}</MkA></b
+					>
+					<small
+						>Powered by
+						<a
+							href="https://codeberg.org/calckey/calckey"
+							target="_blank"
+							>Calckey</a
+						></small
+					>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XHeader from './header.vue';
-import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { ColdDeviceStorage } from '@/store';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import XHeader from "./header.vue";
+import { host, instanceName } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import MkPagination from "@/components/MkPagination.vue";
+import MkButton from "@/components/MkButton.vue";
+import { ColdDeviceStorage } from "@/store";
+import { mainRouter } from "@/router";
+import { i18n } from "@/i18n";
 
 const DESKTOP_THRESHOLD = 1100;
 
@@ -64,7 +104,7 @@ export default defineComponent({
 			meta: null,
 			narrow: window.innerWidth < 1280,
 			announcements: {
-				endpoint: 'announcements',
+				endpoint: "announcements",
 				limit: 10,
 			},
 			mainRouter,
@@ -76,29 +116,34 @@ export default defineComponent({
 	computed: {
 		keymap(): any {
 			return {
-				'd': () => {
-					if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
-					this.$store.set('darkMode', !this.$store.state.darkMode);
+				d: () => {
+					if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
+					this.$store.set("darkMode", !this.$store.state.darkMode);
 				},
-				's': search,
-				'h|/': this.help,
+				s: search,
+				"h|/": this.help,
 			};
 		},
 	},
 
 	created() {
-		document.documentElement.style.overflowY = 'scroll';
+		document.documentElement.style.overflowY = "scroll";
 
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 	},
 
 	mounted() {
 		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
+			window.addEventListener(
+				"resize",
+				() => {
+					if (window.innerWidth >= DESKTOP_THRESHOLD)
+						this.isDesktop = true;
+				},
+				{ passive: true }
+			);
 		}
 	},
 
@@ -112,21 +157,20 @@ export default defineComponent({
 
 		changePage(page) {
 			if (page == null) return;
-			
+
 			if (page[symbols.PAGE_INFO]) {
-				
 				this.pageInfo = page[symbols.PAGE_INFO];
 			}
 		},
 
 		top() {
-			window.scroll({ top: 0, behavior: 'smooth' });
+			window.scroll({ top: 0, behavior: "smooth" });
 		},
 
 		help() {
 			// TODO(thatonecalculator): popup with keybinds
 			// window.open('https://misskey-hub.net/docs/keyboard-shortcut.md', '_blank');
-			console.log('d = dark/light mode, s = search, p = post :3');
+			console.log("d = dark/light mode, s = search, p = post :3");
 		},
 	},
 });
@@ -150,7 +194,7 @@ export default defineComponent({
 			* {
 				color: #fff;
 			}
-					
+
 			> h1 {
 				margin: 0;
 				padding: 96px 32px 0 32px;
@@ -172,7 +216,7 @@ export default defineComponent({
 
 			> .action {
 				padding-bottom: 64px;
-				
+
 				> button {
 					display: inline-block;
 					padding: 10px 20px;
@@ -213,9 +257,8 @@ export default defineComponent({
 			}
 
 			> header {
-				
 			}
-					
+
 			> h1 {
 				margin: 0;
 				padding: 32px;
@@ -258,5 +301,4 @@ export default defineComponent({
 }
 </style>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 3e72584a0..ba2206a48 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -1,71 +1,103 @@
 <template>
-<div class="mk-app">
-	<div v-if="!narrow && !root" class="side">
-		<XKanban class="kanban" full/>
-	</div>
+	<div class="mk-app">
+		<div v-if="!narrow && !root" class="side">
+			<XKanban class="kanban" full />
+		</div>
 
-	<div class="main">
-		<XKanban v-if="narrow && !root" class="banner" :powered-by="root"/>
+		<div class="main">
+			<XKanban v-if="narrow && !root" class="banner" :powered-by="root" />
 
-		<div class="contents">
-			<XHeader v-if="!root" class="header" :info="pageInfo"/>
-			<main>
-				<RouterView/>
-			</main>
-			<div v-if="!root" class="powered-by">
-				<b><MkA to="/">{{ host }}</MkA></b>
-				<small>Powered by <a href="https://codeberg.org/calckey/calckey" target="_blank">Calckey</a></small>
+			<div class="contents">
+				<XHeader v-if="!root" class="header" :info="pageInfo" />
+				<main>
+					<RouterView />
+				</main>
+				<div v-if="!root" class="powered-by">
+					<b
+						><MkA to="/">{{ host }}</MkA></b
+					>
+					<small
+						>Powered by
+						<a
+							href="https://codeberg.org/calckey/calckey"
+							target="_blank"
+							>Calckey</a
+						></small
+					>
+				</div>
 			</div>
 		</div>
-	</div>
 
-	<transition :name="$store.state.animation ? 'tray-back' : ''">
-		<div
-			v-if="showMenu"
-			class="menu-back _modalBg"
-			@click="showMenu = false"
-			@touchstart.passive="showMenu = false"
-		></div>
-	</transition>
+		<transition :name="$store.state.animation ? 'tray-back' : ''">
+			<div
+				v-if="showMenu"
+				class="menu-back _modalBg"
+				@click="showMenu = false"
+				@touchstart.passive="showMenu = false"
+			></div>
+		</transition>
 
-	<transition :name="$store.state.animation ? 'tray' : ''">
-		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="ph-house ph-bold ph-lg icon"></i>{{ i18n.ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ph-compass ph-bold ph-lg icon"></i>{{ i18n.ts.explore }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ph-television ph-bold ph-lg icon"></i>{{ i18n.ts.channel }}</MkA>
-			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text ph-bold ph-lg icon"></i>{{ i18n.ts.pages }}</MkA>
-			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square ph-bold ph-lg icon"></i>{{ i18n.ts.gallery }}</MkA>
-			<div class="action">
-				<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
+		<transition :name="$store.state.animation ? 'tray' : ''">
+			<div v-if="showMenu" class="menu">
+				<MkA to="/" class="link" active-class="active"
+					><i class="ph-house ph-bold ph-lg icon"></i
+					>{{ i18n.ts.home }}</MkA
+				>
+				<MkA to="/explore" class="link" active-class="active"
+					><i class="ph-compass ph-bold ph-lg icon"></i
+					>{{ i18n.ts.explore }}</MkA
+				>
+				<MkA to="/channels" class="link" active-class="active"
+					><i class="ph-television ph-bold ph-lg icon"></i
+					>{{ i18n.ts.channel }}</MkA
+				>
+				<MkA to="/pages" class="link" active-class="active"
+					><i class="ph-file-text ph-bold ph-lg icon"></i
+					>{{ i18n.ts.pages }}</MkA
+				>
+				<MkA to="/gallery" class="link" active-class="active"
+					><i class="ph-image-square ph-bold ph-lg icon"></i
+					>{{ i18n.ts.gallery }}</MkA
+				>
+				<div class="action">
+					<button class="_buttonPrimary" @click="signup()">
+						{{ i18n.ts.signup }}
+					</button>
+					<button class="_button" @click="signin()">
+						{{ i18n.ts.login }}
+					</button>
+				</div>
 			</div>
-		</div>
-	</transition>
-</div>
+		</transition>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, onMounted, provide } from 'vue';
-import XHeader from './header.vue';
-import XKanban from './kanban.vue';
-import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import MkPagination from '@/components/MkPagination.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
+import { ComputedRef, onMounted, provide } from "vue";
+import XHeader from "./header.vue";
+import XKanban from "./kanban.vue";
+import { host, instanceName } from "@/config";
+import { search } from "@/scripts/search";
+import * as os from "@/os";
+import { instance } from "@/instance";
+import MkPagination from "@/components/MkPagination.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import { ColdDeviceStorage, defaultStore } from "@/store";
+import { mainRouter } from "@/router";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { i18n } from "@/i18n";
 
 const DESKTOP_THRESHOLD = 1000;
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
@@ -74,10 +106,13 @@ provideMetadataReceiver((info) => {
 });
 
 const announcements = {
-	endpoint: 'announcements',
+	endpoint: "announcements",
 	limit: 10,
 };
-const isTimelineAvailable = !instance.disableLocalTimeline || !instance.disableRecommendedTimeline || !instance.disableGlobalTimeline;
+const isTimelineAvailable =
+	!instance.disableLocalTimeline ||
+	!instance.disableRecommendedTimeline ||
+	!instance.disableGlobalTimeline;
 let showMenu = $ref(false);
 let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
 let narrow = $ref(window.innerWidth < 1280);
@@ -85,37 +120,51 @@ let meta = $ref();
 
 const keymap = $computed(() => {
 	return {
-		'd': () => {
-			if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
-			defaultStore.set('darkMode', !defaultStore.state.darkMode);
+		d: () => {
+			if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
+			defaultStore.set("darkMode", !defaultStore.state.darkMode);
 		},
-		's': search,
+		s: search,
 	};
 });
 
-const root = $computed(() => mainRouter.currentRoute.value.name === 'index');
+const root = $computed(() => mainRouter.currentRoute.value.name === "index");
 
-os.api('meta', { detail: true }).then(res => {
+os.api("meta", { detail: true }).then((res) => {
 	meta = res;
 });
 
 function signin() {
-	os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSigninDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 function signup() {
-	os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {}, 'closed');
+	os.popup(
+		XSignupDialog,
+		{
+			autoSet: true,
+		},
+		{},
+		"closed"
+	);
 }
 
 onMounted(() => {
 	if (!isDesktop) {
-		window.addEventListener('resize', () => {
-			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
-		}, { passive: true });
+		window.addEventListener(
+			"resize",
+			() => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
+			},
+			{ passive: true }
+		);
 	}
 });
 
@@ -129,7 +178,8 @@ defineExpose({
 .tray-leave-active {
 	opacity: 1;
 	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+		opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
 .tray-enter-from,
 .tray-leave-active {
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 00522134a..e79bd288e 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -1,59 +1,122 @@
 <template>
-<div class="sqxihjet">
-	<div v-if="narrow === false" class="wide">
-		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="ph-house ph-bold ph-lg icon"></i>{{ i18n.ts.home }}</MkA>
-			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" active-class="active"><i class="ph-chats-circle ph-bold ph-lg icon"></i>{{ i18n.ts.timeline }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ph-compass ph-bold ph-lg icon"></i>{{ i18n.ts.explore }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ph-television ph-bold ph-lg icon"></i>{{ i18n.ts.channel }}</MkA>
-			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text ph-bold ph-lg icon"></i>{{ i18n.ts.pages }}</MkA>
-			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square ph-bold ph-lg icon"></i>{{ i18n.ts.gallery }}</MkA>
-			<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"/>
-					<span v-if="info.title" class="text">{{ info.title }}</span>
-					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+	<div class="sqxihjet">
+		<div v-if="narrow === false" class="wide">
+			<div class="content">
+				<MkA to="/" class="link" active-class="active"
+					><i class="ph-house ph-bold ph-lg icon"></i
+					>{{ i18n.ts.home }}</MkA
+				>
+				<MkA
+					v-if="isTimelineAvailable"
+					to="/timeline"
+					class="link"
+					active-class="active"
+					><i class="ph-chats-circle ph-bold ph-lg icon"></i
+					>{{ i18n.ts.timeline }}</MkA
+				>
+				<MkA to="/explore" class="link" active-class="active"
+					><i class="ph-compass ph-bold ph-lg icon"></i
+					>{{ i18n.ts.explore }}</MkA
+				>
+				<MkA to="/channels" class="link" active-class="active"
+					><i class="ph-television ph-bold ph-lg icon"></i
+					>{{ i18n.ts.channel }}</MkA
+				>
+				<MkA to="/pages" class="link" active-class="active"
+					><i class="ph-file-text ph-bold ph-lg icon"></i
+					>{{ i18n.ts.pages }}</MkA
+				>
+				<MkA to="/gallery" class="link" active-class="active"
+					><i class="ph-image-square ph-bold ph-lg icon"></i
+					>{{ i18n.ts.gallery }}</MkA
+				>
+				<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"
+						/>
+						<span v-if="info.title" class="text">{{
+							info.title
+						}}</span>
+						<MkUserName
+							v-else-if="info.userName"
+							:user="info.userName"
+							:nowrap="false"
+							class="text"
+						/>
+					</div>
+					<button
+						v-if="info.action"
+						class="_button action"
+						@click.stop="info.action.handler"
+					>
+						<!-- TODO -->
+					</button>
+				</div>
+				<div class="right">
+					<button class="_button search" @click="search()">
+						<i class="ph-magnifying-glass ph-bold ph-lg icon"></i
+						><span>{{ i18n.ts.search }}</span>
+					</button>
+					<button class="_buttonPrimary signup" @click="signup()">
+						{{ i18n.ts.signup }}
+					</button>
+					<button class="_button login" @click="signin()">
+						{{ i18n.ts.login }}
+					</button>
 				</div>
-				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
-			</div>
-			<div class="right">
-				<button class="_button search" @click="search()"><i class="ph-magnifying-glass ph-bold ph-lg icon"></i><span>{{ i18n.ts.search }}</span></button>
-				<button class="_buttonPrimary signup" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button login" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
-	</div>
-	<div v-else-if="narrow === true" class="narrow">
-		<button class="menu _button" @click="$parent.showMenu = true">
-			<i class="ph-list ph-bold ph-lg icon"></i>
-		</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"/>
-			<span v-if="info.title" class="text">{{ info.title }}</span>
-			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+		<div v-else-if="narrow === true" class="narrow">
+			<button class="menu _button" @click="$parent.showMenu = true">
+				<i class="ph-list ph-bold ph-lg icon"></i>
+			</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"
+				/>
+				<span v-if="info.title" class="text">{{ info.title }}</span>
+				<MkUserName
+					v-else-if="info.userName"
+					:user="info.userName"
+					:nowrap="false"
+					class="text"
+				/>
+			</div>
+			<button
+				v-if="info && info.action"
+				class="action _button"
+				@click.stop="info.action.handler"
+			>
+				<!-- TODO -->
+			</button>
 		</div>
-		<button v-if="info && info.action" class="action _button" @click.stop="info.action.handler">
-			<!-- TODO -->
-		</button>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import { search } from '@/scripts/search';
-import { i18n } from '@/i18n';
+import { defineComponent } from "vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import * as os from "@/os";
+import { instance } from "@/instance";
+import { search } from "@/scripts/search";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	props: {
 		info: {
-			required: true
+			required: true,
 		},
 	},
 
@@ -62,7 +125,10 @@ export default defineComponent({
 			narrow: null,
 			showMenu: false,
 			i18n,
-			isTimelineAvailable: !instance.disableLocalTimeline || !instance.disableRecommendedTimeline || !instance.disableGlobalTimeline,
+			isTimelineAvailable:
+				!instance.disableLocalTimeline ||
+				!instance.disableRecommendedTimeline ||
+				!instance.disableGlobalTimeline,
 		};
 	},
 
@@ -72,19 +138,29 @@ export default defineComponent({
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
-		search
-	}
+		search,
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index 28b222697..1391bfb67 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -1,50 +1,96 @@
 <template>
-<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
-	<div class="back" :class="{ transparent }"></div>
-	<div class="contents">
-		<div class="wrapper">
-			<h1 v-if="meta" :class="{ full }">
-				<MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl" alt="logo"><span v-else class="text">{{ instanceName }}</span></MkA>
-			</h1>
-			<template v-if="full">
-				<div v-if="meta" class="about">
-					<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
-				</div>
-				<div class="action">
-					<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
-					<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
-				</div>
-				<div class="announcements panel">
-					<header>{{ i18n.ts.announcements }}</header>
-					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
-						<section v-for="announcement in items" :key="announcement.id" class="item">
-							<div class="title">{{ announcement.title }}</div>
-							<div class="content">
-								<Mfm :text="announcement.text"/>
-								<img v-if="announcement.imageUrl" :src="announcement.imageUrl" alt="announcement image"/>
-							</div>
-						</section>
-					</MkPagination>
-				</div>
-				<div v-if="poweredBy" class="powered-by">
-					<b><MkA to="/">{{ host }}</MkA></b>
-					<small>Powered by <a href="https://codeberg.org/calckey/calckey" target="_blank">Calckey</a></small>
-				</div>
-			</template>
+	<div
+		class="rwqkcmrc"
+		:style="{
+			backgroundImage: transparent
+				? 'none'
+				: `url(${$instance.backgroundImageUrl})`,
+		}"
+	>
+		<div class="back" :class="{ transparent }"></div>
+		<div class="contents">
+			<div class="wrapper">
+				<h1 v-if="meta" :class="{ full }">
+					<MkA to="/" class="link"
+						><img
+							v-if="meta.logoImageUrl"
+							class="logo"
+							:src="meta.logoImageUrl"
+							alt="logo"
+						/><span v-else class="text">{{
+							instanceName
+						}}</span></MkA
+					>
+				</h1>
+				<template v-if="full">
+					<div v-if="meta" class="about">
+						<div
+							class="desc"
+							v-html="meta.description || i18n.ts.introMisskey"
+						></div>
+					</div>
+					<div class="action">
+						<button class="_buttonPrimary" @click="signup()">
+							{{ i18n.ts.signup }}
+						</button>
+						<button class="_button" @click="signin()">
+							{{ i18n.ts.login }}
+						</button>
+					</div>
+					<div class="announcements panel">
+						<header>{{ i18n.ts.announcements }}</header>
+						<MkPagination
+							v-slot="{ items }"
+							:pagination="announcements"
+							class="list"
+						>
+							<section
+								v-for="announcement in items"
+								:key="announcement.id"
+								class="item"
+							>
+								<div class="title">
+									{{ announcement.title }}
+								</div>
+								<div class="content">
+									<Mfm :text="announcement.text" />
+									<img
+										v-if="announcement.imageUrl"
+										:src="announcement.imageUrl"
+										alt="announcement image"
+									/>
+								</div>
+							</section>
+						</MkPagination>
+					</div>
+					<div v-if="poweredBy" class="powered-by">
+						<b
+							><MkA to="/">{{ host }}</MkA></b
+						>
+						<small
+							>Powered by
+							<a
+								href="https://codeberg.org/calckey/calckey"
+								target="_blank"
+								>Calckey</a
+							></small
+						>
+					</div>
+				</template>
+			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import MkPagination from '@/components/MkPagination.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
+import { defineComponent, defineAsyncComponent } from "vue";
+import { host, instanceName } from "@/config";
+import * as os from "@/os";
+import MkPagination from "@/components/MkPagination.vue";
+import XSigninDialog from "@/components/MkSigninDialog.vue";
+import XSignupDialog from "@/components/MkSignupDialog.vue";
+import MkButton from "@/components/MkButton.vue";
+import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
@@ -78,7 +124,7 @@ export default defineComponent({
 			meta: null,
 			narrow: window.innerWidth < 1280,
 			announcements: {
-				endpoint: 'announcements',
+				endpoint: "announcements",
 				limit: 10,
 			},
 			i18n,
@@ -86,22 +132,32 @@ export default defineComponent({
 	},
 
 	created() {
-		os.api('meta', { detail: true }).then(meta => {
+		os.api("meta", { detail: true }).then((meta) => {
 			this.meta = meta;
 		});
 	},
 
 	methods: {
 		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSigninDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 
 		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
+			os.popup(
+				XSignupDialog,
+				{
+					autoSet: true,
+				},
+				{},
+				"closed"
+			);
 		},
 	},
 });
@@ -147,7 +203,8 @@ export default defineComponent({
 				background: rgba(0, 0, 0, 0.5);
 				border-radius: var(--radius);
 
-				&, * {
+				&,
+				* {
 					color: #fff !important;
 				}
 			}
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
index c915f8242..cb2354a2e 100644
--- a/packages/client/src/ui/zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -1,21 +1,25 @@
 <template>
-<div class="mk-app">
-	<RouterView/>
+	<div class="mk-app">
+		<RouterView />
 
-	<XCommon/>
-</div>
+		<XCommon />
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { provide, ComputedRef } from 'vue';
-import XCommon from './_common_/common.vue';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
+import { provide, ComputedRef } from "vue";
+import XCommon from "./_common_/common.vue";
+import { mainRouter } from "@/router";
+import {
+	PageMetadata,
+	provideMetadataReceiver,
+	setPageMetadata,
+} from "@/scripts/page-metadata";
+import { instanceName } from "@/config";
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 
-provide('router', mainRouter);
+provide("router", mainRouter);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;
 	if (pageMetadata.value) {
@@ -23,7 +27,7 @@ provideMetadataReceiver((info) => {
 	}
 });
 
-document.documentElement.style.overflowY = 'scroll';
+document.documentElement.style.overflowY = "scroll";
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/widgets/activity.calendar.vue b/packages/client/src/widgets/activity.calendar.vue
index 2fcb7255c..d7081a27c 100644
--- a/packages/client/src/widgets/activity.calendar.vue
+++ b/packages/client/src/widgets/activity.calendar.vue
@@ -1,37 +1,58 @@
 <template>
-<svg viewBox="0 0 21 7">
-	<rect v-for="record in activity" class="day"
-		width="1" height="1"
-		:x="record.x" :y="record.date.weekday"
-		rx="1" ry="1"
-		fill="transparent">
-		<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
-	</rect>
-	<rect v-for="record in activity" class="day"
-		:width="record.v" :height="record.v"
-		:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
-		rx="1" ry="1"
-		:fill="record.color"
-		style="pointer-events: none;"/>
-	<rect class="today"
-		width="1" height="1"
-		:x="activity[0].x" :y="activity[0].date.weekday"
-		rx="1" ry="1"
-		fill="none"
-		stroke-width="0.1"
-		stroke="#eb6f92"/>
-</svg>
+	<svg viewBox="0 0 21 7">
+		<rect
+			v-for="record in activity"
+			class="day"
+			width="1"
+			height="1"
+			:x="record.x"
+			:y="record.date.weekday"
+			rx="1"
+			ry="1"
+			fill="transparent"
+		>
+			<title>
+				{{ record.date.year }}/{{ record.date.month + 1 }}/{{
+					record.date.day
+				}}
+			</title>
+		</rect>
+		<rect
+			v-for="record in activity"
+			class="day"
+			:width="record.v"
+			:height="record.v"
+			:x="record.x + (1 - record.v) / 2"
+			:y="record.date.weekday + (1 - record.v) / 2"
+			rx="1"
+			ry="1"
+			:fill="record.color"
+			style="pointer-events: none"
+		/>
+		<rect
+			class="today"
+			width="1"
+			height="1"
+			:x="activity[0].x"
+			:y="activity[0].date.weekday"
+			rx="1"
+			ry="1"
+			fill="none"
+			stroke-width="0.1"
+			stroke="#eb6f92"
+		/>
+	</svg>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps<{
-	activity: any[]
+	activity: any[];
 }>();
 
 for (const d of props.activity) {
 	d.total = d.notes + d.replies + d.renotes;
 }
-const peak = Math.max(...props.activity.map(d => d.total));
+const peak = Math.max(...props.activity.map((d) => d.total));
 
 const now = new Date();
 const year = now.getFullYear();
@@ -47,7 +68,7 @@ props.activity.slice().forEach((d, i) => {
 		year: date.getFullYear(),
 		month: date.getMonth(),
 		day: date.getDate(),
-		weekday: date.getDay()
+		weekday: date.getDay(),
 	};
 
 	d.v = peak === 0 ? 0 : d.total / (peak / 2);
@@ -55,7 +76,7 @@ props.activity.slice().forEach((d, i) => {
 	// TODO: Make Rose Pine
 	const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170;
 	const cs = d.v * 100;
-	const cl = 15 + ((1 - d.v) * 80);
+	const cl = 15 + (1 - d.v) * 80;
 	d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
 
 	if (d.date.weekday === 0) x--;
diff --git a/packages/client/src/widgets/activity.chart.vue b/packages/client/src/widgets/activity.chart.vue
index f24125aa3..d854ec733 100644
--- a/packages/client/src/widgets/activity.chart.vue
+++ b/packages/client/src/widgets/activity.chart.vue
@@ -1,32 +1,39 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
-	<polyline
-		:points="pointsNote"
-		fill="none"
-		stroke-width="1"
-		stroke="#c4a7e7"/>
-	<polyline
-		:points="pointsReply"
-		fill="none"
-		stroke-width="1"
-		stroke="#eb6f92"/>
-	<polyline
-		:points="pointsRenote"
-		fill="none"
-		stroke-width="1"
-		stroke="#ebbcba"/>
-	<polyline
-		:points="pointsTotal"
-		fill="none"
-		stroke-width="1"
-		stroke="#6e6a86"
-		stroke-dasharray="2 2"/>
-</svg>
+	<svg
+		:viewBox="`0 0 ${viewBoxX} ${viewBoxY}`"
+		@mousedown.prevent="onMousedown"
+	>
+		<polyline
+			:points="pointsNote"
+			fill="none"
+			stroke-width="1"
+			stroke="#c4a7e7"
+		/>
+		<polyline
+			:points="pointsReply"
+			fill="none"
+			stroke-width="1"
+			stroke="#eb6f92"
+		/>
+		<polyline
+			:points="pointsRenote"
+			fill="none"
+			stroke-width="1"
+			stroke="#ebbcba"
+		/>
+		<polyline
+			:points="pointsTotal"
+			fill="none"
+			stroke-width="1"
+			stroke="#6e6a86"
+			stroke-dasharray="2 2"
+		/>
+	</svg>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps<{
-	activity: any[]
+	activity: any[];
 }>();
 
 let viewBoxX: number = $ref(147);
@@ -39,15 +46,15 @@ let pointsRenote: any = $ref(null);
 let pointsTotal: any = $ref(null);
 
 function dragListen(fn) {
-	window.addEventListener('mousemove', fn);
-	window.addEventListener('mouseleave', dragClear.bind(null, fn));
-	window.addEventListener('mouseup', dragClear.bind(null, fn));
+	window.addEventListener("mousemove", fn);
+	window.addEventListener("mouseleave", dragClear.bind(null, fn));
+	window.addEventListener("mouseup", dragClear.bind(null, fn));
 }
 
 function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
+	window.removeEventListener("mousemove", fn);
+	window.removeEventListener("mouseleave", dragClear);
+	window.removeEventListener("mouseup", dragClear);
 }
 
 function onMousedown(ev) {
@@ -57,26 +64,45 @@ function onMousedown(ev) {
 	const basePos = pos;
 
 	// 動かした時
-	dragListen(me => {
+	dragListen((me) => {
 		let moveLeft = me.clientX - clickX;
 		let moveTop = me.clientY - clickY;
 
-		zoom = Math.max(1, baseZoom + (-moveTop / 20));
+		zoom = Math.max(1, baseZoom + -moveTop / 20);
 		pos = Math.min(0, basePos + moveLeft);
-		if (pos < -(((props.activity.length - 1) * zoom) - viewBoxX)) pos = -(((props.activity.length - 1) * zoom) - viewBoxX);
+		if (pos < -((props.activity.length - 1) * zoom - viewBoxX))
+			pos = -((props.activity.length - 1) * zoom - viewBoxX);
 
 		render();
 	});
 }
 
 function render() {
-	const peak = Math.max(...props.activity.map(d => d.total));
+	const peak = Math.max(...props.activity.map((d) => d.total));
 	if (peak !== 0) {
 		const activity = props.activity.slice().reverse();
-		pointsNote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.notes / peak)) * viewBoxY}`).join(' ');
-		pointsReply = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.replies / peak)) * viewBoxY}`).join(' ');
-		pointsRenote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.renotes / peak)) * viewBoxY}`).join(' ');
-		pointsTotal = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.total / peak)) * viewBoxY}`).join(' ');
+		pointsNote = activity
+			.map(
+				(d, i) => `${i * zoom + pos},${(1 - d.notes / peak) * viewBoxY}`
+			)
+			.join(" ");
+		pointsReply = activity
+			.map(
+				(d, i) =>
+					`${i * zoom + pos},${(1 - d.replies / peak) * viewBoxY}`
+			)
+			.join(" ");
+		pointsRenote = activity
+			.map(
+				(d, i) =>
+					`${i * zoom + pos},${(1 - d.renotes / peak) * viewBoxY}`
+			)
+			.join(" ");
+		pointsTotal = activity
+			.map(
+				(d, i) => `${i * zoom + pos},${(1 - d.total / peak) * viewBoxY}`
+			)
+			.join(" ");
 	}
 }
 </script>
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
index f514458b9..b148d3934 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -1,42 +1,64 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="ph-chart-bar ph-bold ph-lg"></i>{{ i18n.ts._widgets.activity }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ph-sort-ascending ph-bold ph-lg"></i></button></template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:naked="widgetProps.transparent"
+		class="mkw-activity"
+	>
+		<template #header
+			><i class="ph-chart-bar ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.activity }}</template
+		>
+		<template #func
+			><button class="_button" @click="toggleView()">
+				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
+		></template>
 
-	<div>
-		<MkLoading v-if="fetching"/>
-		<template v-else>
-			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
-			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
-		</template>
-	</div>
-</MkContainer>
+		<div>
+			<MkLoading v-if="fetching" />
+			<template v-else>
+				<XCalendar
+					v-show="widgetProps.view === 0"
+					:activity="[].concat(activity)"
+				/>
+				<XChart
+					v-show="widgetProps.view === 1"
+					:activity="[].concat(activity)"
+				/>
+			</template>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XCalendar from './activity.calendar.vue';
-import XChart from './activity.chart.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import XCalendar from "./activity.calendar.vue";
+import XChart from "./activity.chart.vue";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
-const name = 'activity';
+const name = "activity";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	view: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 0,
 		hidden: true,
 	},
@@ -47,13 +69,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const activity = ref(null);
@@ -68,11 +91,11 @@ const toggleView = () => {
 	save();
 };
 
-os.apiGet('charts/user/notes', {
+os.apiGet("charts/user/notes", {
 	userId: $i.id,
-	span: 'day',
+	span: "day",
 	limit: 7 * 21,
-}).then(res => {
+}).then((res) => {
 	activity.value = res.diffs.normal.map((_, i) => ({
 		total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i],
 		notes: res.diffs.normal[i],
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index d0eddacbb..78a30a159 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -1,39 +1,58 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
-	<template #header><i class="ph-terminal-window ph-bold ph-lg"></i>{{ i18n.ts._widgets.aiscript }}</template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
+		<template #header
+			><i class="ph-terminal-window ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.aiscript }}</template
+		>
 
-	<div class="uylguesu _monospace">
-		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
-		<button class="_buttonPrimary" @click="run">RUN</button>
-		<div class="logs">
-			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+		<div class="uylguesu _monospace">
+			<textarea
+				v-model="widgetProps.script"
+				placeholder="(1 + 1)"
+			></textarea>
+			<button class="_buttonPrimary" @click="run">RUN</button>
+			<div class="logs">
+				<div
+					v-for="log in logs"
+					:key="log.id"
+					class="log"
+					:class="{ print: log.print }"
+				>
+					{{ log.text }}
+				</div>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { AiScript, parse, utils } from "@syuilo/aiscript";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { createAiScriptEnv } from "@/scripts/aiscript/api";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
-const name = 'aiscript';
+const name = "aiscript";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	script: {
-		type: 'string' as const,
+		type: "string" as const,
 		multiline: true,
-		default: '(1 + 1)',
+		default: "(1 + 1)",
 		hidden: true,
 	},
 };
@@ -43,62 +62,74 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const logs = ref<{
-	id: string;
-	text: string;
-	print: boolean;
-}[]>([]);
+const logs = ref<
+	{
+		id: string;
+		text: string;
+		print: boolean;
+	}[]
+>([]);
 
 const run = async () => {
 	logs.value = [];
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
+	const aiscript = new AiScript(
+		createAiScriptEnv({
+			storageKey: "widget",
+			token: $i?.token,
+		}),
+		{
+			in: (q) => {
+				return new Promise((ok) => {
+					os.inputText({
+						title: q,
+					}).then(({ canceled, result: a }) => {
+						ok(a);
+					});
 				});
-			});
-		},
-		out: (value) => {
-			logs.value.push({
-				id: Math.random().toString(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
-		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
+			},
+			out: (value) => {
+				logs.value.push({
 					id: Math.random().toString(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
-	});
+					text:
+						value.type === "str"
+							? value.value
+							: utils.valToString(value),
+					print: true,
+				});
+			},
+			log: (type, params) => {
+				switch (type) {
+					case "end":
+						logs.value.push({
+							id: Math.random().toString(),
+							text: utils.valToString(params.val, true),
+							print: false,
+						});
+						break;
+					default:
+						break;
+				}
+			},
+		}
+	);
 
 	let ast;
 	try {
 		ast = parse(widgetProps.script);
 	} catch (err) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -106,7 +137,7 @@ const run = async () => {
 		await aiscript.exec(ast);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err,
 		});
 	}
diff --git a/packages/client/src/widgets/button.vue b/packages/client/src/widgets/button.vue
index f0148d7f4..9e524f295 100644
--- a/packages/client/src/widgets/button.vue
+++ b/packages/client/src/widgets/button.vue
@@ -1,34 +1,40 @@
 <template>
-<div class="mkw-button">
-	<MkButton :primary="widgetProps.colored" full @click="run">
-		{{ widgetProps.label }}
-	</MkButton>
-</div>
+	<div class="mkw-button">
+		<MkButton :primary="widgetProps.colored" full @click="run">
+			{{ widgetProps.label }}
+		</MkButton>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import MkButton from '@/components/MkButton.vue';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { AiScript, parse, utils } from "@syuilo/aiscript";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { createAiScriptEnv } from "@/scripts/aiscript/api";
+import { $i } from "@/account";
+import MkButton from "@/components/MkButton.vue";
 
-const name = 'button';
+const name = "button";
 
 const widgetPropsDef = {
 	label: {
-		type: 'string' as const,
-		default: 'BUTTON',
+		type: "string" as const,
+		default: "BUTTON",
 	},
 	colored: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	script: {
-		type: 'string' as const,
+		type: "string" as const,
 		multiline: true,
 		default: 'Mk:dialog("hello" "world")',
 	},
@@ -39,44 +45,48 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const run = async () => {
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
+	const aiscript = new AiScript(
+		createAiScriptEnv({
+			storageKey: "widget",
+			token: $i?.token,
+		}),
+		{
+			in: (q) => {
+				return new Promise((ok) => {
+					os.inputText({
+						title: q,
+					}).then(({ canceled, result: a }) => {
+						ok(a);
+					});
 				});
-			});
-		},
-		out: (value) => {
-			// nop
-		},
-		log: (type, params) => {
-			// nop
-		},
-	});
+			},
+			out: (value) => {
+				// nop
+			},
+			log: (type, params) => {
+				// nop
+			},
+		}
+	);
 
 	let ast;
 	try {
 		ast = parse(widgetProps.script);
 	} catch (err) {
 		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
+			type: "error",
+			text: "Syntax error :(",
 		});
 		return;
 	}
@@ -84,7 +94,7 @@ const run = async () => {
 		await aiscript.exec(ast);
 	} catch (err) {
 		os.alert({
-			type: 'error',
+			type: "error",
 			text: err,
 		});
 	}
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
index 52e39138d..655308d50 100644
--- a/packages/client/src/widgets/calendar.vue
+++ b/packages/client/src/widgets/calendar.vue
@@ -1,49 +1,66 @@
 <template>
-<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
-	<div class="calendar" :class="{ isHoliday }">
-		<p class="month-and-year">
-			<span class="year">{{ i18n.t('yearX', { year }) }}</span>
-			<span class="month">{{ i18n.t('monthX', { month }) }}</span>
-		</p>
-		<p v-if="month === 1 && day === 1" class="day">🎉{{ i18n.t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
-		<p v-else class="day">{{ i18n.t('dayX', { day }) }}</p>
-		<p class="week-day">{{ weekDay }}</p>
-	</div>
-	<div class="info">
-		<div>
-			<p>{{ i18n.ts.today }}: <b>{{ dayP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${dayP}%` }"></div>
-			</div>
+	<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
+		<div class="calendar" :class="{ isHoliday }">
+			<p class="month-and-year">
+				<span class="year">{{ i18n.t("yearX", { year }) }}</span>
+				<span class="month">{{ i18n.t("monthX", { month }) }}</span>
+			</p>
+			<p v-if="month === 1 && day === 1" class="day">
+				🎉{{ i18n.t("dayX", { day })
+				}}<span style="display: inline-block; transform: scaleX(-1)"
+					>🎉</span
+				>
+			</p>
+			<p v-else class="day">{{ i18n.t("dayX", { day }) }}</p>
+			<p class="week-day">{{ weekDay }}</p>
 		</div>
-		<div>
-			<p>{{ i18n.ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${monthP}%` }"></div>
+		<div class="info">
+			<div>
+				<p>
+					{{ i18n.ts.today }}: <b>{{ dayP.toFixed(1) }}%</b>
+				</p>
+				<div class="meter">
+					<div class="val" :style="{ width: `${dayP}%` }"></div>
+				</div>
 			</div>
-		</div>
-		<div>
-			<p>{{ i18n.ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${yearP}%` }"></div>
+			<div>
+				<p>
+					{{ i18n.ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b>
+				</p>
+				<div class="meter">
+					<div class="val" :style="{ width: `${monthP}%` }"></div>
+				</div>
+			</div>
+			<div>
+				<p>
+					{{ i18n.ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b>
+				</p>
+				<div class="meter">
+					<div class="val" :style="{ width: `${yearP}%` }"></div>
+				</div>
 			</div>
 		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
+import { onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { i18n } from "@/i18n";
+import { useInterval } from "@/scripts/use-interval";
 
-const name = 'calendar';
+const name = "calendar";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -53,19 +70,20 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const year = ref(0);
 const month = ref(0);
 const day = ref(0);
-const weekDay = ref('');
+const weekDay = ref("");
 const yearP = ref(0);
 const monthP = ref(0);
 const dayP = ref(0);
@@ -90,15 +108,17 @@ const tick = () => {
 	][now.getDay()];
 
 	const dayNumer = now.getTime() - new Date(ny, nm, nd).getTime();
-	const dayDenom = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
+	const dayDenom = 1000 /*ms*/ * 60 /*s*/ * 60 /*m*/ * 24; /*h*/
 	const monthNumer = now.getTime() - new Date(ny, nm, 1).getTime();
-	const monthDenom = new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
+	const monthDenom =
+		new Date(ny, nm + 1, 1).getTime() - new Date(ny, nm, 1).getTime();
 	const yearNumer = now.getTime() - new Date(ny, 0, 1).getTime();
-	const yearDenom = new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
+	const yearDenom =
+		new Date(ny + 1, 0, 1).getTime() - new Date(ny, 0, 1).getTime();
 
-	dayP.value = dayNumer / dayDenom * 100;
-	monthP.value = monthNumer / monthDenom * 100;
-	yearP.value = yearNumer / yearDenom * 100;
+	dayP.value = (dayNumer / dayDenom) * 100;
+	monthP.value = (monthNumer / monthDenom) * 100;
+	yearP.value = (yearNumer / yearDenom) * 100;
 
 	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
 };
@@ -136,12 +156,14 @@ defineExpose<WidgetComponentExpose>({
 			}
 		}
 
-		> .month-and-year, > .week-day {
+		> .month-and-year,
+		> .week-day {
 			margin: 0;
 			line-height: 18px;
 			font-size: 0.9em;
 
-			> .year, > .month {
+			> .year,
+			> .month {
 				margin: 0 4px;
 			}
 		}
@@ -186,7 +208,7 @@ defineExpose<WidgetComponentExpose>({
 
 				> .val {
 					height: 4px;
-					transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
+					transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 				}
 			}
 
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index dc99b6631..60b90a4b9 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -1,114 +1,188 @@
 <template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-clock">
-	<div class="vubelbmv" :class="widgetProps.size">
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
-		<MkAnalogClock
-			class="clock"
-			:thickness="widgetProps.thickness"
-			:offset="tzOffset"
-			:graduations="widgetProps.graduations"
-			:fade-graduations="widgetProps.fadeGraduations"
-			:twentyfour="widgetProps.twentyFour"
-			:s-animation="widgetProps.sAnimation"
-		/>
-		<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
-	</div>
-</MkContainer>
+	<MkContainer
+		:naked="widgetProps.transparent"
+		:show-header="false"
+		class="mkw-clock"
+	>
+		<div class="vubelbmv" :class="widgetProps.size">
+			<div
+				v-if="
+					widgetProps.label === 'tz' ||
+					widgetProps.label === 'timeAndTz'
+				"
+				class="_monospace label a abbrev"
+			>
+				{{ tzAbbrev }}
+			</div>
+			<MkAnalogClock
+				class="clock"
+				:thickness="widgetProps.thickness"
+				:offset="tzOffset"
+				:graduations="widgetProps.graduations"
+				:fade-graduations="widgetProps.fadeGraduations"
+				:twentyfour="widgetProps.twentyFour"
+				:s-animation="widgetProps.sAnimation"
+			/>
+			<MkDigitalClock
+				v-if="
+					widgetProps.label === 'time' ||
+					widgetProps.label === 'timeAndTz'
+				"
+				class="_monospace label c time"
+				:show-s="false"
+				:offset="tzOffset"
+			/>
+			<div
+				v-if="
+					widgetProps.label === 'tz' ||
+					widgetProps.label === 'timeAndTz'
+				"
+				class="_monospace label d offset"
+			>
+				{{ tzOffsetLabel }}
+			</div>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkAnalogClock from '@/components/MkAnalogClock.vue';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
-import { timezones } from '@/scripts/timezones';
-import { i18n } from '@/i18n';
+import {} from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkAnalogClock from "@/components/MkAnalogClock.vue";
+import MkDigitalClock from "@/components/MkDigitalClock.vue";
+import { timezones } from "@/scripts/timezones";
+import { i18n } from "@/i18n";
 
-const name = 'clock';
+const name = "clock";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	size: {
-		type: 'radio' as const,
-		default: 'medium',
-		options: [{
-			value: 'small', label: i18n.ts.small,
-		}, {
-			value: 'medium', label: i18n.ts.medium,
-		}, {
-			value: 'large', label: i18n.ts.large,
-		}],
+		type: "radio" as const,
+		default: "medium",
+		options: [
+			{
+				value: "small",
+				label: i18n.ts.small,
+			},
+			{
+				value: "medium",
+				label: i18n.ts.medium,
+			},
+			{
+				value: "large",
+				label: i18n.ts.large,
+			},
+		],
 	},
 	thickness: {
-		type: 'radio' as const,
+		type: "radio" as const,
 		default: 0.2,
-		options: [{
-			value: 0.1, label: 'thin',
-		}, {
-			value: 0.2, label: 'medium',
-		}, {
-			value: 0.3, label: 'thick',
-		}],
+		options: [
+			{
+				value: 0.1,
+				label: "thin",
+			},
+			{
+				value: 0.2,
+				label: "medium",
+			},
+			{
+				value: 0.3,
+				label: "thick",
+			},
+		],
 	},
 	graduations: {
-		type: 'radio' as const,
-		default: 'numbers',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'dots', label: 'Dots',
-		}, {
-			value: 'numbers', label: 'Numbers',
-		}],
+		type: "radio" as const,
+		default: "numbers",
+		options: [
+			{
+				value: "none",
+				label: "None",
+			},
+			{
+				value: "dots",
+				label: "Dots",
+			},
+			{
+				value: "numbers",
+				label: "Numbers",
+			},
+		],
 	},
 	fadeGraduations: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	sAnimation: {
-		type: 'radio' as const,
-		default: 'elastic',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'elastic', label: 'Elastic',
-		}, {
-			value: 'easeOut', label: 'Ease out',
-		}],
+		type: "radio" as const,
+		default: "elastic",
+		options: [
+			{
+				value: "none",
+				label: "None",
+			},
+			{
+				value: "elastic",
+				label: "Elastic",
+			},
+			{
+				value: "easeOut",
+				label: "Ease out",
+			},
+		],
 	},
 	twentyFour: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	label: {
-		type: 'radio' as const,
-		default: 'none',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'time', label: 'Time',
-		}, {
-			value: 'tz', label: 'TZ',
-		}, {
-			value: 'timeAndTz', label: 'Time + TZ',
-		}],
+		type: "radio" as const,
+		default: "none",
+		options: [
+			{
+				value: "none",
+				label: "None",
+			},
+			{
+				value: "time",
+				label: "Time",
+			},
+			{
+				value: "tz",
+				label: "TZ",
+			},
+			{
+				value: "timeAndTz",
+				label: "Time + TZ",
+			},
+		],
 	},
 	timezone: {
-		type: 'enum' as const,
+		type: "enum" as const,
 		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
+		enum: [
+			...timezones.map((tz) => ({
+				label: tz.name,
+				value: tz.name.toLowerCase(),
+			})),
+			{
+				label: "(auto)",
+				value: null,
+			},
+		],
 	},
 };
 
@@ -117,24 +191,47 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+const tzAbbrev = $computed(
+	() =>
+		(widgetProps.timezone === null
+			? timezones.find(
+					(tz) =>
+						tz.name.toLowerCase() ===
+						Intl.DateTimeFormat()
+							.resolvedOptions()
+							.timeZone.toLowerCase()
+			  )?.abbrev
+			: timezones.find(
+					(tz) => tz.name.toLowerCase() === widgetProps.timezone
+			  )?.abbrev) ?? "?"
+);
 
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+const tzOffset = $computed(() =>
+	widgetProps.timezone === null
+		? 0 - new Date().getTimezoneOffset()
+		: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)
+				?.offset ?? 0
+);
 
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+const tzOffsetLabel = $computed(
+	() =>
+		(tzOffset >= 0 ? "+" : "-") +
+		Math.floor(tzOffset / 60)
+			.toString()
+			.padStart(2, "0") +
+		":" +
+		(tzOffset % 60).toString().padStart(2, "0")
+);
 
 defineExpose<WidgetComponentExpose>({
 	name,
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
index d2bfd523f..d0b6b4fd1 100644
--- a/packages/client/src/widgets/digital-clock.vue
+++ b/packages/client/src/widgets/digital-clock.vue
@@ -1,50 +1,65 @@
 <template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
-	<div class="time">
-		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
+	<div
+		class="mkw-digitalClock _monospace"
+		:class="{ _panel: !widgetProps.transparent }"
+		:style="{ fontSize: `${widgetProps.fontSize}em` }"
+	>
+		<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
+		<div class="time">
+			<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset" />
+		</div>
+		<div v-if="widgetProps.showLabel" class="label">
+			{{ tzOffsetLabel }}
+		</div>
 	</div>
-	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { timezones } from '@/scripts/timezones';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
+import { onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { timezones } from "@/scripts/timezones";
+import MkDigitalClock from "@/components/MkDigitalClock.vue";
 
-const name = 'digitalClock';
+const name = "digitalClock";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	fontSize: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 1.5,
 		step: 0.1,
 	},
 	showMs: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	showLabel: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	timezone: {
-		type: 'enum' as const,
+		type: "enum" as const,
 		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
+		enum: [
+			...timezones.map((tz) => ({
+				label: tz.name,
+				value: tz.name.toLowerCase(),
+			})),
+			{
+				label: "(auto)",
+				value: null,
+			},
+		],
 	},
 };
 
@@ -53,24 +68,47 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+const tzAbbrev = $computed(
+	() =>
+		(widgetProps.timezone === null
+			? timezones.find(
+					(tz) =>
+						tz.name.toLowerCase() ===
+						Intl.DateTimeFormat()
+							.resolvedOptions()
+							.timeZone.toLowerCase()
+			  )?.abbrev
+			: timezones.find(
+					(tz) => tz.name.toLowerCase() === widgetProps.timezone
+			  )?.abbrev) ?? "?"
+);
 
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+const tzOffset = $computed(() =>
+	widgetProps.timezone === null
+		? 0 - new Date().getTimezoneOffset()
+		: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)
+				?.offset ?? 0
+);
 
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+const tzOffsetLabel = $computed(
+	() =>
+		(tzOffset >= 0 ? "+" : "-") +
+		Math.floor(tzOffset / 60)
+			.toString()
+			.padStart(2, "0") +
+		":" +
+		(tzOffset % 60).toString().padStart(2, "0")
+);
 
 defineExpose<WidgetComponentExpose>({
 	name,
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index e2937de5e..51c0e0d75 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -1,39 +1,74 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="ph-planet ph-bold ph-lg"></i>{{ i18n.ts._widgets.federation }}</template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:foldable="foldable"
+		:scrollable="scrollable"
+		class="mkw-federation"
+	>
+		<template #header
+			><i class="ph-planet ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.federation }}</template
+		>
 
-	<div class="wbrkwalb">
-		<MkLoading v-if="fetching"/>
-		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
-			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
-				<img :src="getInstanceIcon(instance)" alt=""/>
-				<div class="body">
-					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
-					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
+		<div class="wbrkwalb">
+			<MkLoading v-if="fetching" />
+			<transition-group
+				v-else
+				tag="div"
+				:name="$store.state.animation ? 'chart' : ''"
+				class="instances"
+			>
+				<div
+					v-for="(instance, i) in instances"
+					:key="instance.id"
+					class="instance"
+				>
+					<img :src="getInstanceIcon(instance)" alt="" />
+					<div class="body">
+						<a
+							class="a"
+							:href="'https://' + instance.host"
+							target="_blank"
+							:title="instance.host"
+							>{{ instance.host }}</a
+						>
+						<p>
+							{{ instance.softwareName || "?" }}
+							{{ instance.softwareVersion }}
+						</p>
+					</div>
+					<MkMiniChart
+						class="chart"
+						:src="charts[i].requests.received"
+					/>
 				</div>
-				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
-			</div>
-		</transition-group>
-	</div>
-</MkContainer>
+			</transition-group>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
-const name = 'federation';
+const name = "federation";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -43,13 +78,18 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{
+	widget?: Widget<WidgetProps>;
+	foldable?: boolean;
+	scrollable?: boolean;
+}>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const instances = ref([]);
@@ -57,11 +97,19 @@ const charts = ref([]);
 const fetching = ref(true);
 
 const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
+	const fetchedInstances = await os.api("federation/instances", {
+		sort: "+lastCommunicatedAt",
 		limit: 5,
 	});
-	const fetchedCharts = await Promise.all(fetchedInstances.map(i => os.apiGet('charts/instance', { host: i.host, limit: 16, span: 'hour' })));
+	const fetchedCharts = await Promise.all(
+		fetchedInstances.map((i) =>
+			os.apiGet("charts/instance", {
+				host: i.host,
+				limit: 16,
+				span: "hour",
+			})
+		)
+	);
 	instances.value = fetchedInstances;
 	charts.value = fetchedCharts;
 	fetching.value = false;
@@ -73,7 +121,11 @@ useInterval(fetch, 1000 * 60, {
 });
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index 3cb579c28..b9d4a0805 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -1,33 +1,44 @@
 <template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud">
-	<div class="">
-		<MkTagCloud v-if="activeInstances">
-			<li v-for="instance in activeInstances" :key="instance.id">
-				<a @click.prevent="onInstanceClick(instance)">
-					<img style="width: 32px;" :src="getInstanceIcon(instance)">
-				</a>
-			</li>
-		</MkTagCloud>
-	</div>
-</MkContainer>
+	<MkContainer
+		:naked="widgetProps.transparent"
+		:show-header="false"
+		class="mkw-instance-cloud"
+	>
+		<div class="">
+			<MkTagCloud v-if="activeInstances">
+				<li v-for="instance in activeInstances" :key="instance.id">
+					<a @click.prevent="onInstanceClick(instance)">
+						<img
+							style="width: 32px"
+							:src="getInstanceIcon(instance)"
+						/>
+					</a>
+				</li>
+			</MkTagCloud>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentProps } from './widget';
-import type { Widget, WidgetComponentExpose } from './widget';
-import type { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkTagCloud from '@/components/MkTagCloud.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+import {} from "vue";
+import {
+	useWidgetPropsManager,
+	WidgetComponentEmits,
+	WidgetComponentProps,
+} from "./widget";
+import type { Widget, WidgetComponentExpose } from "./widget";
+import type { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkTagCloud from "@/components/MkTagCloud.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
 
-const name = 'instanceCloud';
+const name = "instanceCloud";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -37,13 +48,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 let cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
@@ -53,21 +65,29 @@ function onInstanceClick(i) {
 	os.pageWindow(`/instance-info/${i.host}`);
 }
 
-useInterval(() => {
-	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
-		limit: 25,
-	}).then(res => {
-		activeInstances = res;
-		if (cloud) cloud.update();
-	});
-}, 1000 * 60 * 3, {
-	immediate: true,
-	afterMounted: true,
-});
+useInterval(
+	() => {
+		os.api("federation/instances", {
+			sort: "+lastCommunicatedAt",
+			limit: 25,
+		}).then((res) => {
+			activeInstances = res;
+			if (cloud) cloud.update();
+		});
+	},
+	1000 * 60 * 3,
+	{
+		immediate: true,
+		afterMounted: true,
+	}
+);
 
 function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+	return (
+		getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
+		"/client-assets/dummy.png"
+	);
 }
 
 defineExpose<WidgetComponentExpose>({
@@ -77,6 +97,4 @@ defineExpose<WidgetComponentExpose>({
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index 7f04aca59..1757bd684 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -1,69 +1,152 @@
 <template>
-<div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
-	<div class="inbox">
-		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="ph-warning ph-bold ph-lg icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
+	<div
+		class="mkw-jobQueue _monospace"
+		:class="{ _panel: !widgetProps.transparent }"
+	>
+		<div class="inbox">
+			<div class="label">
+				Inbox queue<i
+					v-if="current.inbox.waiting > 0"
+					class="ph-warning ph-bold ph-lg icon"
+				></i>
 			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
+			<div class="values">
+				<div>
+					<div>Process</div>
+					<div
+						:class="{
+							inc:
+								current.inbox.activeSincePrevTick >
+								prev.inbox.activeSincePrevTick,
+							dec:
+								current.inbox.activeSincePrevTick <
+								prev.inbox.activeSincePrevTick,
+						}"
+					>
+						{{ number(current.inbox.activeSincePrevTick) }}
+					</div>
+				</div>
+				<div>
+					<div>Active</div>
+					<div
+						:class="{
+							inc: current.inbox.active > prev.inbox.active,
+							dec: current.inbox.active < prev.inbox.active,
+						}"
+					>
+						{{ number(current.inbox.active) }}
+					</div>
+				</div>
+				<div>
+					<div>Delayed</div>
+					<div
+						:class="{
+							inc: current.inbox.delayed > prev.inbox.delayed,
+							dec: current.inbox.delayed < prev.inbox.delayed,
+						}"
+					>
+						{{ number(current.inbox.delayed) }}
+					</div>
+				</div>
+				<div>
+					<div>Waiting</div>
+					<div
+						:class="{
+							inc: current.inbox.waiting > prev.inbox.waiting,
+							dec: current.inbox.waiting < prev.inbox.waiting,
+						}"
+					>
+						{{ number(current.inbox.waiting) }}
+					</div>
+				</div>
 			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
+		</div>
+		<div class="deliver">
+			<div class="label">
+				Deliver queue<i
+					v-if="current.deliver.waiting > 0"
+					class="ph-warning ph-bold ph-lg icon"
+				></i>
 			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
+			<div class="values">
+				<div>
+					<div>Process</div>
+					<div
+						:class="{
+							inc:
+								current.deliver.activeSincePrevTick >
+								prev.deliver.activeSincePrevTick,
+							dec:
+								current.deliver.activeSincePrevTick <
+								prev.deliver.activeSincePrevTick,
+						}"
+					>
+						{{ number(current.deliver.activeSincePrevTick) }}
+					</div>
+				</div>
+				<div>
+					<div>Active</div>
+					<div
+						:class="{
+							inc: current.deliver.active > prev.deliver.active,
+							dec: current.deliver.active < prev.deliver.active,
+						}"
+					>
+						{{ number(current.deliver.active) }}
+					</div>
+				</div>
+				<div>
+					<div>Delayed</div>
+					<div
+						:class="{
+							inc: current.deliver.delayed > prev.deliver.delayed,
+							dec: current.deliver.delayed < prev.deliver.delayed,
+						}"
+					>
+						{{ number(current.deliver.delayed) }}
+					</div>
+				</div>
+				<div>
+					<div>Waiting</div>
+					<div
+						:class="{
+							inc: current.deliver.waiting > prev.deliver.waiting,
+							dec: current.deliver.waiting < prev.deliver.waiting,
+						}"
+					>
+						{{ number(current.deliver.waiting) }}
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
-	<div class="deliver">
-		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="ph-warning ph-bold ph-lg icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
-			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
-			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
-			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
-			</div>
-		</div>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import number from '@/filters/number';
-import * as sound from '@/scripts/sound';
-import * as os from '@/os';
-import { deepClone } from '@/scripts/clone';
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { stream } from "@/stream";
+import number from "@/filters/number";
+import * as sound from "@/scripts/sound";
+import * as os from "@/os";
+import { deepClone } from "@/scripts/clone";
 
-const name = 'jobQueue';
+const name = "jobQueue";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	sound: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -73,16 +156,17 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const connection = stream.useChannel('queueStats');
+const connection = stream.useChannel("queueStats");
 const current = reactive({
 	inbox: {
 		activeSincePrevTick: 0,
@@ -98,21 +182,25 @@ const current = reactive({
 	},
 });
 const prev = reactive({} as typeof current);
-const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
+const jammedSound = sound.setVolume(sound.getAudio("syuilo/queue-jammed"), 1);
 
-for (const domain of ['inbox', 'deliver']) {
+for (const domain of ["inbox", "deliver"]) {
 	prev[domain] = deepClone(current[domain]);
 }
 
 const onStats = (stats) => {
-	for (const domain of ['inbox', 'deliver']) {
+	for (const domain of ["inbox", "deliver"]) {
 		prev[domain] = deepClone(current[domain]);
 		current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
 		current[domain].active = stats[domain].active;
 		current[domain].waiting = stats[domain].waiting;
 		current[domain].delayed = stats[domain].delayed;
 
-		if (current[domain].waiting > 0 && widgetProps.sound && jammedSound.paused) {
+		if (
+			current[domain].waiting > 0 &&
+			widgetProps.sound &&
+			jammedSound.paused
+		) {
 			jammedSound.play();
 		}
 	}
@@ -124,17 +212,17 @@ const onStatsLog = (statsLog) => {
 	}
 };
 
-connection.on('stats', onStats);
-connection.on('statsLog', onStatsLog);
+connection.on("stats", onStats);
+connection.on("statsLog", onStatsLog);
 
-connection.send('requestLog', {
+connection.send("requestLog", {
 	id: Math.random().toString().substr(2, 8),
 	length: 1,
 });
 
 onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
+	connection.off("stats", onStats);
+	connection.off("statsLog", onStatsLog);
 	connection.dispose();
 });
 
@@ -147,8 +235,12 @@ defineExpose<WidgetComponentExpose>({
 
 <style lang="scss" scoped>
 @keyframes warnBlink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
 }
 
 .mkw-jobQueue {
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 140a1960b..06f2e1bd9 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -1,28 +1,47 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
-	<template #header><i class="ph-sticker ph-bold ph-lg"></i>{{ i18n.ts._widgets.memo }}</template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
+		<template #header
+			><i class="ph-sticker ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.memo }}</template
+		>
 
-	<div class="otgbylcu">
-		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
-		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
-	</div>
-</MkContainer>
+		<div class="otgbylcu">
+			<textarea
+				v-model="text"
+				:placeholder="i18n.ts.placeholder"
+				@input="onChange"
+			></textarea>
+			<button
+				:disabled="!changed"
+				class="_buttonPrimary"
+				@click="saveMemo"
+			>
+				{{ i18n.ts.save }}
+			</button>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
-const name = 'memo';
+const name = "memo";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -32,13 +51,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // Currently, due to a limitation of vue, imported types cannot be passed to generics.
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const text = ref<string | null>(defaultStore.state.memo);
@@ -46,7 +66,7 @@ const changed = ref(false);
 let timeoutId;
 
 const saveMemo = () => {
-	defaultStore.set('memo', text.value);
+	defaultStore.set("memo", text.value);
 	changed.value = false;
 };
 
@@ -56,9 +76,12 @@ const onChange = () => {
 	timeoutId = window.setTimeout(saveMemo, 1000);
 };
 
-watch(() => defaultStore.reactiveState.memo, newText => {
-	text.value = newText.value;
-});
+watch(
+	() => defaultStore.reactiveState.memo,
+	(newText) => {
+		text.value = newText.value;
+	}
+);
 
 defineExpose<WidgetComponentExpose>({
 	name,
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 9cdbb94c0..48fb9278a 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -1,35 +1,57 @@
 <template>
-<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="ph-bell ph-bold ph-lg"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="os.apiWithDialog('notifications/mark-all-as-read');"><i class="ph-check ph-bold ph-lg"></i></button><button class="_button" @click="configureNotification()"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
-	<div>
-		<XNotifications :include-types="widgetProps.includingTypes"/>
-	</div>
-</MkContainer>
+	<MkContainer
+		:style="`height: ${widgetProps.height}px;`"
+		:show-header="widgetProps.showHeader"
+		:scrollable="true"
+		class="mkw-notifications"
+	>
+		<template #header
+			><i class="ph-bell ph-bold ph-lg"></i
+			>{{ i18n.ts.notifications }}</template
+		>
+		<template #func
+			><button
+				class="_button"
+				@click="os.apiWithDialog('notifications/mark-all-as-read')"
+			>
+				<i class="ph-check ph-bold ph-lg"></i></button
+			><button class="_button" @click="configureNotification()">
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
+		<div>
+			<XNotifications :include-types="widgetProps.includingTypes" />
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import XNotifications from '@/components/MkNotifications.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
+import { defineAsyncComponent } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import XNotifications from "@/components/MkNotifications.vue";
+import * as os from "@/os";
+import { i18n } from "@/i18n";
 
-const name = 'notifications';
+const name = "notifications";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	height: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 300,
 	},
 	includingTypes: {
-		type: 'array' as const,
+		type: "array" as const,
 		hidden: true,
 		default: null,
 	},
@@ -40,25 +62,33 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const configureNotification = () => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: widgetProps.includingTypes,
-	}, {
-		done: async (res) => {
-			const { includingTypes } = res;
-			widgetProps.includingTypes = includingTypes;
-			save();
+	os.popup(
+		defineAsyncComponent(
+			() => import("@/components/MkNotificationSettingWindow.vue")
+		),
+		{
+			includingTypes: widgetProps.includingTypes,
 		},
-	}, 'closed');
+		{
+			done: async (res) => {
+				const { includingTypes } = res;
+				widgetProps.includingTypes = includingTypes;
+				save();
+			},
+		},
+		"closed"
+	);
 };
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/online-users.vue b/packages/client/src/widgets/online-users.vue
index ed885bf13..5ec197bcd 100644
--- a/packages/client/src/widgets/online-users.vue
+++ b/packages/client/src/widgets/online-users.vue
@@ -1,24 +1,43 @@
 <template>
-<div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
-	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
-		<template #n><b>{{ onlineUsersCount }}</b></template>
-	</I18n>
-</div>
+	<div
+		class="mkw-onlineUsers"
+		:class="{
+			_panel: !widgetProps.transparent,
+			pad: !widgetProps.transparent,
+		}"
+	>
+		<I18n
+			v-if="onlineUsersCount"
+			:src="i18n.ts.onlineUsersCount"
+			text-tag="span"
+			class="text"
+		>
+			<template #n
+				><b>{{ onlineUsersCount }}</b></template
+			>
+		</I18n>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
-const name = 'onlineUsers';
+const name = "onlineUsers";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -28,19 +47,20 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const onlineUsersCount = ref(0);
 
 const tick = () => {
-	os.api('get-online-users-count').then(res => {
+	os.api("get-online-users-count").then((res) => {
 		onlineUsersCount.value = res.count;
 	});
 };
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index bc18cd815..ef160f8c6 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -1,40 +1,56 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
-	<template #header><i class="ph-camera ph-bold ph-lg"></i>{{ i18n.ts._widgets.photos }}</template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:naked="widgetProps.transparent"
+		:class="$style.root"
+		:data-transparent="widgetProps.transparent ? true : null"
+		class="mkw-photos"
+	>
+		<template #header
+			><i class="ph-camera ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.photos }}</template
+		>
 
-	<div class="">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.stream">
-			<div
-				v-for="(image, i) in images" :key="i"
-				:class="$style.img"
-				:style="`background-image: url(${thumbnail(image)})`"
-			></div>
+		<div class="">
+			<MkLoading v-if="fetching" />
+			<div v-else :class="$style.stream">
+				<div
+					v-for="(image, i) in images"
+					:key="i"
+					:class="$style.img"
+					:style="`background-image: url(${thumbnail(image)})`"
+				></div>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import { stream } from "@/stream";
+import { getStaticImageUrl } from "@/scripts/get-static-image-url";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
 
-const name = 'photos';
+const name = "photos";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -44,16 +60,17 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
-const connection = stream.useChannel('main');
+const connection = stream.useChannel("main");
 const images = ref([]);
 const fetching = ref(true);
 
@@ -70,15 +87,15 @@ const thumbnail = (image: any): string => {
 		: image.thumbnailUrl;
 };
 
-os.api('drive/stream', {
-	type: 'image/*',
+os.api("drive/stream", {
+	type: "image/*",
 	limit: 9,
-}).then(res => {
+}).then((res) => {
 	images.value = res;
 	fetching.value = false;
 });
 
-connection.on('driveFileCreated', onDriveFileCreated);
+connection.on("driveFileCreated", onDriveFileCreated);
 onUnmounted(() => {
 	connection.dispose();
 });
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue
index f1708775b..e44f23fbb 100644
--- a/packages/client/src/widgets/post-form.vue
+++ b/packages/client/src/widgets/post-form.vue
@@ -1,30 +1,36 @@
 <template>
-<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
+	<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false" />
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XPostForm from '@/components/MkPostForm.vue';
+import {} from "vue";
+import { GetFormResultType } from "@/scripts/form";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import XPostForm from "@/components/MkPostForm.vue";
 
-const name = 'postForm';
+const name = "postForm";
 
-const widgetPropsDef = {
-};
+const widgetPropsDef = {};
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index 788c3c5c8..0126f2169 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -1,65 +1,89 @@
 <template>
-<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
-	<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
+	<MkContainer
+		:naked="widgetProps.transparent"
+		:show-header="widgetProps.showHeader"
+		class="mkw-rss-ticker"
+	>
+		<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
+		<template #func
+			><button class="_button" @click="configure">
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
 
-	<div class="ekmkgxbk">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<transition name="change" mode="default">
-				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
-					<span v-for="item in items" class="item">
-						<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
-					</span>
-				</MarqueeText>
-			</transition>
+		<div class="ekmkgxbk">
+			<MkLoading v-if="fetching" />
+			<div v-else class="feed">
+				<transition name="change" mode="default">
+					<MarqueeText
+						:key="key"
+						:duration="widgetProps.duration"
+						:reverse="widgetProps.reverse"
+					>
+						<span v-for="item in items" class="item">
+							<a
+								class="link"
+								:href="item.link"
+								rel="nofollow noopener"
+								target="_blank"
+								:title="item.title"
+								>{{ item.title }}</a
+							><span class="divider"></span>
+						</span>
+					</MarqueeText>
+				</transition>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import MarqueeText from '@/components/MkMarquee.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { useInterval } from '@/scripts/use-interval';
-import { shuffle } from '@/scripts/shuffle';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import MarqueeText from "@/components/MkMarquee.vue";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { useInterval } from "@/scripts/use-interval";
+import { shuffle } from "@/scripts/shuffle";
 
-const name = 'rssTicker';
+const name = "rssTicker";
 
 const widgetPropsDef = {
 	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+		type: "string" as const,
+		default: "http://feeds.afpbb.com/rss/afpbb/afpbbnews",
 	},
 	shuffle: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	refreshIntervalSec: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 60,
 	},
 	duration: {
-		type: 'range' as const,
+		type: "range" as const,
 		default: 70,
 		step: 1,
 		min: 5,
 		max: 200,
 	},
 	reverse: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 };
@@ -69,13 +93,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const items = ref([]);
@@ -83,8 +108,8 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
+	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then((res) => {
+		res.json().then((feed) => {
 			if (widgetProps.shuffle) {
 				shuffle(feed.items);
 			}
@@ -110,17 +135,18 @@ defineExpose<WidgetComponentExpose>({
 </script>
 
 <style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+.change-enter-active,
+.change-leave-active {
 	position: absolute;
 	top: 0;
-  transition: all 1s ease;
+	transition: all 1s ease;
 }
 .change-enter-from {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(-100%);
 }
 .change-leave-to {
-  opacity: 0;
+	opacity: 0;
 	transform: translateY(100%);
 }
 
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index 236d348a9..370ec2023 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -1,34 +1,51 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
-	<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
+		<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
+		<template #func
+			><button class="_button" @click="configure">
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
 
-	<div class="ekmkgxbj">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<a v-for="item in items" class="item" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
+		<div class="ekmkgxbj">
+			<MkLoading v-if="fetching" />
+			<div v-else class="feed">
+				<a
+					v-for="item in items"
+					class="item"
+					:href="item.link"
+					rel="nofollow noopener"
+					target="_blank"
+					:title="item.title"
+					>{{ item.title }}</a
+				>
+			</div>
 		</div>
-	</div>
-</MkContainer>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { useInterval } from '@/scripts/use-interval';
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import { useInterval } from "@/scripts/use-interval";
 
-const name = 'rss';
+const name = "rss";
 
 const widgetPropsDef = {
 	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+		type: "string" as const,
+		default: "http://feeds.afpbb.com/rss/afpbb/afpbbnews",
 	},
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -38,21 +55,22 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const items = ref([]);
 const fetching = ref(true);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
+	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then((res) => {
+		res.json().then((feed) => {
 			items.value = feed.items;
 			fetching.value = false;
 		});
diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index 00c3a10c9..76ef290f6 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -1,81 +1,93 @@
 <template>
-<div class="lcfyofjk">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="cpuPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="cpuPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="cpuHeadX"
-					:cy="cpuHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
-		/>
-		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="memPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="memPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="memHeadX"
-					:cy="memHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
-		/>
-		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
-	</svg>
-</div>
+	<div class="lcfyofjk">
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<defs>
+				<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
+					<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+					<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+				</linearGradient>
+				<mask
+					:id="cpuMaskId"
+					x="0"
+					y="0"
+					:width="viewBoxX"
+					:height="viewBoxY"
+				>
+					<polygon
+						:points="cpuPolygonPoints"
+						fill="#fff"
+						fill-opacity="0.5"
+					/>
+					<polyline
+						:points="cpuPolylinePoints"
+						fill="none"
+						stroke="#fff"
+						stroke-width="1"
+					/>
+					<circle :cx="cpuHeadX" :cy="cpuHeadY" r="1.5" fill="#fff" />
+				</mask>
+			</defs>
+			<rect
+				x="-2"
+				y="-2"
+				:width="viewBoxX + 4"
+				:height="viewBoxY + 4"
+				:style="`stroke: none; fill: url(#${cpuGradientId}); mask: url(#${cpuMaskId})`"
+			/>
+			<text x="1" y="5">
+				CPU
+				<tspan>{{ cpuP }}%</tspan>
+			</text>
+		</svg>
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<defs>
+				<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
+					<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+					<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+				</linearGradient>
+				<mask
+					:id="memMaskId"
+					x="0"
+					y="0"
+					:width="viewBoxX"
+					:height="viewBoxY"
+				>
+					<polygon
+						:points="memPolygonPoints"
+						fill="#fff"
+						fill-opacity="0.5"
+					/>
+					<polyline
+						:points="memPolylinePoints"
+						fill="none"
+						stroke="#fff"
+						stroke-width="1"
+					/>
+					<circle :cx="memHeadX" :cy="memHeadY" r="1.5" fill="#fff" />
+				</mask>
+			</defs>
+			<rect
+				x="-2"
+				y="-2"
+				:width="viewBoxX + 4"
+				:height="viewBoxY + 4"
+				:style="`stroke: none; fill: url(#${memGradientId}); mask: url(#${memMaskId})`"
+			/>
+			<text x="1" y="5">
+				MEM
+				<tspan>{{ memP }}%</tspan>
+			</text>
+		</svg>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import { v4 as uuid } from 'uuid';
+import { onMounted, onBeforeUnmount } from "vue";
+import { v4 as uuid } from "uuid";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let viewBoxX: number = $ref(50);
@@ -85,41 +97,55 @@ const cpuGradientId = uuid();
 const cpuMaskId = uuid();
 const memGradientId = uuid();
 const memMaskId = uuid();
-let cpuPolylinePoints: string = $ref('');
-let memPolylinePoints: string = $ref('');
-let cpuPolygonPoints: string = $ref('');
-let memPolygonPoints: string = $ref('');
+let cpuPolylinePoints: string = $ref("");
+let memPolylinePoints: string = $ref("");
+let cpuPolygonPoints: string = $ref("");
+let memPolygonPoints: string = $ref("");
 let cpuHeadX: any = $ref(null);
 let cpuHeadY: any = $ref(null);
 let memHeadX: any = $ref(null);
 let memHeadY: any = $ref(null);
-let cpuP: string = $ref('');
-let memP: string = $ref('');
+let cpuP: string = $ref("");
+let memP: string = $ref("");
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8)
+	props.connection.on("stats", onStats);
+	props.connection.on("statsLog", onStatsLog);
+	props.connection.send("requestLog", {
+		id: Math.random().toString().substr(2, 8),
 	});
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
+	props.connection.off("stats", onStats);
+	props.connection.off("statsLog", onStatsLog);
 });
 
 function onStats(connStats) {
 	stats.push(connStats);
 	if (stats.length > 50) stats.shift();
 
-	let cpuPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - s.cpu) * viewBoxY]);
-	let memPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY]);
-	cpuPolylinePoints = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	memPolylinePoints = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	let cpuPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.cpu) * viewBoxY,
+	]);
+	let memPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.mem.active / props.meta.mem.total) * viewBoxY,
+	]);
+	cpuPolylinePoints = cpuPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
+	memPolylinePoints = memPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
 
-	cpuPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	memPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	cpuPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	memPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
 
 	cpuHeadX = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][0];
 	cpuHeadY = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][1];
@@ -127,7 +153,7 @@ function onStats(connStats) {
 	memHeadY = memPolylinePointsStats[memPolylinePointsStats.length - 1][1];
 
 	cpuP = (connStats.cpu * 100).toFixed(0);
-	memP = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
+	memP = ((connStats.mem.active / props.meta.mem.total) * 100).toFixed(0);
 }
 
 function onStatsLog(statsLog) {
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index cafebeb1d..5aa4d2698 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -1,21 +1,21 @@
 <template>
-<div class="vrvdvrys">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ph-microchip ph-bold ph-lg"></i>CPU</p>
-		<p>{{ meta.cpu.cores }} Logical cores</p>
-		<p>{{ meta.cpu.model }}</p>
+	<div class="vrvdvrys">
+		<XPie class="pie" :value="usage" />
+		<div>
+			<p><i class="ph-microchip ph-bold ph-lg"></i>CPU</p>
+			<p>{{ meta.cpu.cores }} Logical cores</p>
+			<p>{{ meta.cpu.model }}</p>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import XPie from './pie.vue';
+import { onMounted, onBeforeUnmount } from "vue";
+import XPie from "./pie.vue";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let usage: number = $ref(0);
@@ -25,11 +25,11 @@ function onStats(stats) {
 }
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
+	props.connection.on("stats", onStats);
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
+	props.connection.off("stats", onStats);
 });
 </script>
 
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index b16e5db60..67ea398c1 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -1,19 +1,19 @@
 <template>
-<div class="zbwaqsat">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
-		<p>Total: {{ bytes(total, 1) }}</p>
-		<p>Free: {{ bytes(available, 1) }}</p>
-		<p>Used: {{ bytes(used, 1) }}</p>
+	<div class="zbwaqsat">
+		<XPie class="pie" :value="usage" />
+		<div>
+			<p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
+			<p>Total: {{ bytes(total, 1) }}</p>
+			<p>Free: {{ bytes(available, 1) }}</p>
+			<p>Used: {{ bytes(used, 1) }}</p>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-import XPie from './pie.vue';
-import bytes from '@/filters/bytes';
+import {} from "vue";
+import XPie from "./pie.vue";
+import bytes from "@/filters/bytes";
 
 const props = defineProps<{
 	meta: any; // TODO
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index 58a41f2e6..96dd3333d 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -1,45 +1,80 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
-	<template #header><i class="ph-hard-drives ph-bold ph-lg"></i>{{ i18n.ts._widgets.serverMetric }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ph-sort-ascending ph-bold ph-lg"></i></button></template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:naked="widgetProps.transparent"
+	>
+		<template #header
+			><i class="ph-hard-drives ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.serverMetric }}</template
+		>
+		<template #func
+			><button class="_button" @click="toggleView()">
+				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
+		></template>
 
-	<div v-if="meta" class="mkw-serverMetric">
-		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
-		<XNet v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
-		<XCpu v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
-		<XMemory v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
-		<XDisk v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
-	</div>
-</MkContainer>
+		<div v-if="meta" class="mkw-serverMetric">
+			<XCpuMemory
+				v-if="widgetProps.view === 0"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XNet
+				v-else-if="widgetProps.view === 1"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XCpu
+				v-else-if="widgetProps.view === 2"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XMemory
+				v-else-if="widgetProps.view === 3"
+				:connection="connection"
+				:meta="meta"
+			/>
+			<XDisk
+				v-else-if="widgetProps.view === 4"
+				:connection="connection"
+				:meta="meta"
+			/>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget';
-import XCpuMemory from './cpu-mem.vue';
-import XNet from './net.vue';
-import XCpu from './cpu.vue';
-import XMemory from './mem.vue';
-import XDisk from './disk.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "../widget";
+import XCpuMemory from "./cpu-mem.vue";
+import XNet from "./net.vue";
+import XCpu from "./cpu.vue";
+import XMemory from "./mem.vue";
+import XDisk from "./disk.vue";
+import MkContainer from "@/components/MkContainer.vue";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { stream } from "@/stream";
+import { i18n } from "@/i18n";
 
-const name = 'serverMetric';
+const name = "serverMetric";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	view: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 0,
 		hidden: true,
 	},
@@ -50,18 +85,19 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const meta = ref(null);
 
-os.api('server-info', {}).then(res => {
+os.api("server-info", {}).then((res) => {
 	meta.value = res;
 });
 
@@ -74,7 +110,7 @@ const toggleView = () => {
 	save();
 };
 
-const connection = stream.useChannel('serverStats');
+const connection = stream.useChannel("serverStats");
 onUnmounted(() => {
 	connection.dispose();
 });
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
index 11ab1b2bf..e3ef00d5e 100644
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -1,23 +1,23 @@
 <template>
-<div class="zlxnikvl">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ph-cpu ph-bold ph-lg"></i>RAM</p>
-		<p>Total: {{ bytes(total, 1) }}</p>
-		<p>Used: {{ bytes(used, 1) }}</p>
-		<p>Free: {{ bytes(free, 1) }}</p>
+	<div class="zlxnikvl">
+		<XPie class="pie" :value="usage" />
+		<div>
+			<p><i class="ph-cpu ph-bold ph-lg"></i>RAM</p>
+			<p>Total: {{ bytes(total, 1) }}</p>
+			<p>Used: {{ bytes(used, 1) }}</p>
+			<p>Free: {{ bytes(free, 1) }}</p>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import XPie from './pie.vue';
-import bytes from '@/filters/bytes';
+import { onMounted, onBeforeUnmount } from "vue";
+import XPie from "./pie.vue";
+import bytes from "@/filters/bytes";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let usage: number = $ref(0);
@@ -33,11 +33,11 @@ function onStats(stats) {
 }
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
+	props.connection.on("stats", onStats);
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
+	props.connection.off("stats", onStats);
 });
 </script>
 
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
index b698953f9..648880c24 100644
--- a/packages/client/src/widgets/server-metric/net.vue
+++ b/packages/client/src/widgets/server-metric/net.vue
@@ -1,64 +1,60 @@
 <template>
-<div class="oxxrhrto">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="inPolygonPoints"
-			fill="#94a029"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="inPolylinePoints"
-			fill="none"
-			stroke="#94a029"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="inHeadX"
-			:cy="inHeadY"
-			r="1.5"
-			fill="#94a029"
-		/>
-		<text x="1" y="5">NET rx <tspan>{{ bytes(inRecent) }}</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="outPolygonPoints"
-			fill="#ff9156"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="outPolylinePoints"
-			fill="none"
-			stroke="#ff9156"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="outHeadX"
-			:cy="outHeadY"
-			r="1.5"
-			fill="#ff9156"
-		/>
-		<text x="1" y="5">NET tx <tspan>{{ bytes(outRecent) }}</tspan></text>
-	</svg>
-</div>
+	<div class="oxxrhrto">
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<polygon
+				:points="inPolygonPoints"
+				fill="#94a029"
+				fill-opacity="0.5"
+			/>
+			<polyline
+				:points="inPolylinePoints"
+				fill="none"
+				stroke="#94a029"
+				stroke-width="1"
+			/>
+			<circle :cx="inHeadX" :cy="inHeadY" r="1.5" fill="#94a029" />
+			<text x="1" y="5">
+				NET rx
+				<tspan>{{ bytes(inRecent) }}</tspan>
+			</text>
+		</svg>
+		<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
+			<polygon
+				:points="outPolygonPoints"
+				fill="#ff9156"
+				fill-opacity="0.5"
+			/>
+			<polyline
+				:points="outPolylinePoints"
+				fill="none"
+				stroke="#ff9156"
+				stroke-width="1"
+			/>
+			<circle :cx="outHeadX" :cy="outHeadY" r="1.5" fill="#ff9156" />
+			<text x="1" y="5">
+				NET tx
+				<tspan>{{ bytes(outRecent) }}</tspan>
+			</text>
+		</svg>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import bytes from '@/filters/bytes';
+import { onMounted, onBeforeUnmount } from "vue";
+import bytes from "@/filters/bytes";
 
 const props = defineProps<{
-	connection: any,
-	meta: any
+	connection: any;
+	meta: any;
 }>();
 
 let viewBoxX: number = $ref(50);
 let viewBoxY: number = $ref(30);
 let stats: any[] = $ref([]);
-let inPolylinePoints: string = $ref('');
-let outPolylinePoints: string = $ref('');
-let inPolygonPoints: string = $ref('');
-let outPolygonPoints: string = $ref('');
+let inPolylinePoints: string = $ref("");
+let outPolylinePoints: string = $ref("");
+let inPolygonPoints: string = $ref("");
+let outPolygonPoints: string = $ref("");
 let inHeadX: any = $ref(null);
 let inHeadY: any = $ref(null);
 let outHeadX: any = $ref(null);
@@ -67,32 +63,49 @@ let inRecent: number = $ref(0);
 let outRecent: number = $ref(0);
 
 onMounted(() => {
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8)
+	props.connection.on("stats", onStats);
+	props.connection.on("statsLog", onStatsLog);
+	props.connection.send("requestLog", {
+		id: Math.random().toString().substr(2, 8),
 	});
 });
 
 onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
+	props.connection.off("stats", onStats);
+	props.connection.off("statsLog", onStatsLog);
 });
 
 function onStats(connStats) {
 	stats.push(connStats);
 	if (stats.length > 50) stats.shift();
 
-	const inPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.rx)));
-	const outPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.tx)));
+	const inPeak = Math.max(1024 * 64, Math.max(...stats.map((s) => s.net.rx)));
+	const outPeak = Math.max(
+		1024 * 64,
+		Math.max(...stats.map((s) => s.net.tx))
+	);
 
-	let inPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY]);
-	let outPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY]);
-	inPolylinePoints = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	outPolylinePoints = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	let inPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.net.rx / inPeak) * viewBoxY,
+	]);
+	let outPolylinePointsStats = stats.map((s, i) => [
+		viewBoxX - (stats.length - 1 - i),
+		(1 - s.net.tx / outPeak) * viewBoxY,
+	]);
+	inPolylinePoints = inPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
+	outPolylinePoints = outPolylinePointsStats
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
 
-	inPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	outPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	inPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	outPolygonPoints = `${
+		viewBoxX - (stats.length - 1)
+	},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
 
 	inHeadX = inPolylinePointsStats[inPolylinePointsStats.length - 1][0];
 	inHeadY = inPolylinePointsStats[inPolylinePointsStats.length - 1][1];
diff --git a/packages/client/src/widgets/server-metric/pie.vue b/packages/client/src/widgets/server-metric/pie.vue
index 868dbc048..9edbfc94e 100644
--- a/packages/client/src/widgets/server-metric/pie.vue
+++ b/packages/client/src/widgets/server-metric/pie.vue
@@ -1,27 +1,31 @@
 <template>
-<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
-	<circle
-		:r="r"
-		cx="50%" cy="50%"
-		fill="none"
-		stroke-width="0.1"
-		stroke="rgba(0, 0, 0, 0.05)"
-	/>
-	<circle
-		:r="r"
-		cx="50%" cy="50%"
-		:stroke-dasharray="Math.PI * (r * 2)"
-		:stroke-dashoffset="strokeDashoffset"
-		fill="none"
-		stroke-width="0.1"
-		:stroke="color"
-	/>
-	<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
-</svg>
+	<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
+		<circle
+			:r="r"
+			cx="50%"
+			cy="50%"
+			fill="none"
+			stroke-width="0.1"
+			stroke="rgba(0, 0, 0, 0.05)"
+		/>
+		<circle
+			:r="r"
+			cx="50%"
+			cy="50%"
+			:stroke-dasharray="Math.PI * (r * 2)"
+			:stroke-dashoffset="strokeDashoffset"
+			fill="none"
+			stroke-width="0.1"
+			:stroke="color"
+		/>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle">
+			{{ (value * 100).toFixed(0) }}%
+		</text>
+	</svg>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import {} from "vue";
 
 const props = defineProps<{
 	value: number;
@@ -29,8 +33,10 @@ const props = defineProps<{
 
 const r = 0.45;
 
-const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
-const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
+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>
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
index 128b0f35b..fa0c1c9e0 100644
--- a/packages/client/src/widgets/slideshow.vue
+++ b/packages/client/src/widgets/slideshow.vue
@@ -1,33 +1,50 @@
 <template>
-<div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
-	<div @click="choose">
-		<p v-if="widgetProps.folderId == null">
-			{{ i18n.ts.folder }}
-		</p>
-		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ i18n.t('no-image') }}</p>
-		<div ref="slideA" class="slide a"></div>
-		<div ref="slideB" class="slide b"></div>
+	<div
+		class="kvausudm _panel mkw-slideshow"
+		:style="{ height: widgetProps.height + 'px' }"
+	>
+		<div @click="choose">
+			<p v-if="widgetProps.folderId == null">
+				{{ i18n.ts.folder }}
+			</p>
+			<p
+				v-if="
+					widgetProps.folderId != null &&
+					images.length === 0 &&
+					!fetching
+				"
+			>
+				{{ i18n.t("no-image") }}
+			</p>
+			<div ref="slideA" class="slide a"></div>
+			<div ref="slideB" class="slide b"></div>
+		</div>
 	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
-const name = 'slideshow';
+const name = "slideshow";
 
 const widgetPropsDef = {
 	height: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 300,
 	},
 	folderId: {
-		type: 'string' as const,
+		type: "string" as const,
 		default: null,
 		hidden: true,
 	},
@@ -38,13 +55,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const images = ref([]);
@@ -56,39 +74,39 @@ const change = () => {
 	if (images.value.length === 0) return;
 
 	const index = Math.floor(Math.random() * images.value.length);
-	const img = `url(${ images.value[index].url })`;
+	const img = `url(${images.value[index].url})`;
 
 	slideB.value.style.backgroundImage = img;
 
-	slideB.value.classList.add('anime');
+	slideB.value.classList.add("anime");
 	window.setTimeout(() => {
 		// 既にこのウィジェットがunmountされていたら要素がない
 		if (slideA.value == null) return;
 
 		slideA.value.style.backgroundImage = img;
 
-		slideB.value.classList.remove('anime');
+		slideB.value.classList.remove("anime");
 	}, 1000);
 };
 
 const fetch = () => {
 	fetching.value = true;
 
-	os.api('drive/files', {
+	os.api("drive/files", {
 		folderId: widgetProps.folderId,
-		type: 'image/*',
+		type: "image/*",
 		limit: 100,
-	}).then(res => {
+	}).then((res) => {
 		images.value = res;
 		fetching.value = false;
-		slideA.value.style.backgroundImage = '';
-		slideB.value.style.backgroundImage = '';
+		slideA.value.style.backgroundImage = "";
+		slideB.value.style.backgroundImage = "";
 		change();
 	});
 };
 
 const choose = () => {
-	os.selectDriveFolder(false).then(folder => {
+	os.selectDriveFolder(false).then((folder) => {
 		if (folder == null) {
 			return;
 		}
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index f0e7232bf..6ae74b813 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -1,57 +1,110 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
-	<template #header>
-		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="ph-house ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="ph-chats-circle ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="ph-share-network ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="ph-planet ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'list'" class="ph-list-bullets ph-bold ph-lg"></i>
-			<i v-else-if="widgetProps.src === 'antenna'" class="ph-television ph-bold ph-lg"></i>
-			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : i18n.t('_timelines.' + widgetProps.src) }}</span>
-			<i :class="menuOpened ? 'ph-caret-up ph-bold ph-lg' : 'ph-caret-down ph-bold ph-lg'" style="margin-left: 8px;"></i>
-		</button>
-	</template>
+	<MkContainer
+		:show-header="widgetProps.showHeader"
+		:style="`height: ${widgetProps.height}px;`"
+		:scrollable="true"
+		class="mkw-timeline"
+	>
+		<template #header>
+			<button class="_button" @click="choose">
+				<i
+					v-if="widgetProps.src === 'home'"
+					class="ph-house ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'local'"
+					class="ph-chats-circle ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'social'"
+					class="ph-share-network ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'global'"
+					class="ph-planet ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'list'"
+					class="ph-list-bullets ph-bold ph-lg"
+				></i>
+				<i
+					v-else-if="widgetProps.src === 'antenna'"
+					class="ph-television ph-bold ph-lg"
+				></i>
+				<span style="margin-left: 8px">{{
+					widgetProps.src === "list"
+						? widgetProps.list.name
+						: widgetProps.src === "antenna"
+						? widgetProps.antenna.name
+						: i18n.t("_timelines." + widgetProps.src)
+				}}</span>
+				<i
+					:class="
+						menuOpened
+							? 'ph-caret-up ph-bold ph-lg'
+							: 'ph-caret-down ph-bold ph-lg'
+					"
+					style="margin-left: 8px"
+				></i>
+			</button>
+		</template>
 
-	<div>
-		<XTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
-	</div>
-</MkContainer>
+		<div>
+			<XTimeline
+				:key="
+					widgetProps.src === 'list'
+						? `list:${widgetProps.list.id}`
+						: widgetProps.src === 'antenna'
+						? `antenna:${widgetProps.antenna.id}`
+						: widgetProps.src
+				"
+				:src="widgetProps.src"
+				:list="widgetProps.list ? widgetProps.list.id : null"
+				:antenna="widgetProps.antenna ? widgetProps.antenna.id : null"
+			/>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
+import { GetFormResultType } from "@/scripts/form";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import * as os from "@/os";
+import MkContainer from "@/components/MkContainer.vue";
+import XTimeline from "@/components/MkTimeline.vue";
+import { $i } from "@/account";
+import { i18n } from "@/i18n";
 
-const name = 'timeline';
+const name = "timeline";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	height: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 300,
 	},
 	src: {
-		type: 'string' as const,
-		default: 'home',
+		type: "string" as const,
+		default: "home",
 		hidden: true,
 	},
 	antenna: {
-		type: 'object' as const,
+		type: "object" as const,
 		default: null,
 		hidden: true,
 	},
 	list: {
-		type: 'object' as const,
+		type: "object" as const,
 		default: null,
 		hidden: true,
 	},
@@ -62,13 +115,14 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const menuOpened = ref(false);
@@ -81,42 +135,62 @@ const setSrc = (src) => {
 const choose = async (ev) => {
 	menuOpened.value = true;
 	const [antennas, lists] = await Promise.all([
-		os.api('antennas/list'),
-		os.api('users/lists/list')
+		os.api("antennas/list"),
+		os.api("users/lists/list"),
 	]);
-	const antennaItems = antennas.map(antenna => ({
+	const antennaItems = antennas.map((antenna) => ({
 		text: antenna.name,
-		icon: 'ph-flying-saucer ph-bold ph-lg',
+		icon: "ph-flying-saucer ph-bold ph-lg",
 		action: () => {
 			widgetProps.antenna = antenna;
-			setSrc('antenna');
-		}
+			setSrc("antenna");
+		},
 	}));
-	const listItems = lists.map(list => ({
+	const listItems = lists.map((list) => ({
 		text: list.name,
-		icon: 'ph-list-bullets ph-bold ph-lg',
+		icon: "ph-list-bullets ph-bold ph-lg",
 		action: () => {
 			widgetProps.list = list;
-			setSrc('list');
-		}
+			setSrc("list");
+		},
 	}));
-	os.popupMenu([{
-		text: i18n.ts._timelines.home,
-		icon: 'ph-house ph-bold ph-lg',
-		action: () => { setSrc('home'); }
-	}, {
-		text: i18n.ts._timelines.local,
-		icon: 'ph-chats-teardrop ph-bold ph-lg',
-		action: () => { setSrc('local'); }
-	}, {
-		text: i18n.ts._timelines.social,
-		icon: 'ph-share-network ph-bold ph-lg',
-		action: () => { setSrc('social'); }
-	}, {
-		text: i18n.ts._timelines.global,
-		icon: 'ph-planet ph-bold ph-lg',
-		action: () => { setSrc('global'); }
-	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
+	os.popupMenu(
+		[
+			{
+				text: i18n.ts._timelines.home,
+				icon: "ph-house ph-bold ph-lg",
+				action: () => {
+					setSrc("home");
+				},
+			},
+			{
+				text: i18n.ts._timelines.local,
+				icon: "ph-chats-teardrop ph-bold ph-lg",
+				action: () => {
+					setSrc("local");
+				},
+			},
+			{
+				text: i18n.ts._timelines.social,
+				icon: "ph-share-network ph-bold ph-lg",
+				action: () => {
+					setSrc("social");
+				},
+			},
+			{
+				text: i18n.ts._timelines.global,
+				icon: "ph-planet ph-bold ph-lg",
+				action: () => {
+					setSrc("global");
+				},
+			},
+			antennaItems.length > 0 ? null : undefined,
+			...antennaItems,
+			listItems.length > 0 ? null : undefined,
+			...listItems,
+		],
+		ev.currentTarget ?? ev.target
+	).then(() => {
 		menuOpened.value = false;
 	});
 };
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index 4789293d6..6bf5c0b97 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -1,37 +1,62 @@
 <template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="ph-hash ph-bold ph-lg"></i>{{ i18n.ts._widgets.trends }}</template>
+	<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
+		<template #header
+			><i class="ph-hash ph-bold ph-lg"></i
+			>{{ i18n.ts._widgets.trends }}</template
+		>
 
-	<div class="wbrkwala">
-		<MkLoading v-if="fetching"/>
-		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
-			<div v-for="stat in stats" :key="stat.tag">
-				<div class="tag">
-					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
-					<p>{{ i18n.t('nUsersMentioned', { n: stat.usersCount }) }}</p>
+		<div class="wbrkwala">
+			<MkLoading v-if="fetching" />
+			<transition-group
+				v-else
+				tag="div"
+				:name="$store.state.animation ? 'chart' : ''"
+				class="tags"
+			>
+				<div v-for="stat in stats" :key="stat.tag">
+					<div class="tag">
+						<MkA
+							class="a"
+							:to="`/tags/${encodeURIComponent(stat.tag)}`"
+							:title="stat.tag"
+							>#{{ stat.tag }}</MkA
+						>
+						<p>
+							{{
+								i18n.t("nUsersMentioned", {
+									n: stat.usersCount,
+								})
+							}}
+						</p>
+					</div>
+					<MkMiniChart class="chart" :src="stat.chart" />
 				</div>
-				<MkMiniChart class="chart" :src="stat.chart"/>
-			</div>
-		</transition-group>
-	</div>
-</MkContainer>
+			</transition-group>
+		</div>
+	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkMiniChart from "@/components/MkMiniChart.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
 
-const name = 'hashtags';
+const name = "hashtags";
 
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -41,20 +66,21 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 const stats = ref([]);
 const fetching = ref(true);
 
 const fetch = () => {
-	os.api('hashtags/trend').then(res => {
+	os.api("hashtags/trend").then((res) => {
 		stats.value = res;
 		fetching.value = false;
 	});
diff --git a/packages/client/src/widgets/unix-clock.vue b/packages/client/src/widgets/unix-clock.vue
index cf85ac782..190bcd092 100644
--- a/packages/client/src/widgets/unix-clock.vue
+++ b/packages/client/src/widgets/unix-clock.vue
@@ -1,38 +1,50 @@
 <template>
-<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
-	<div class="time">
-		<span v-text="ss"></span>
-		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
-		<span v-if="widgetProps.showMs" v-text="ms"></span>
+	<div
+		class="mkw-unixClock _monospace"
+		:class="{ _panel: !widgetProps.transparent }"
+		:style="{ fontSize: `${widgetProps.fontSize}em` }"
+	>
+		<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
+		<div class="time">
+			<span v-text="ss"></span>
+			<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }"
+				>:</span
+			>
+			<span v-if="widgetProps.showMs" v-text="ms"></span>
+		</div>
+		<div v-if="widgetProps.showLabel" class="label">UTC</div>
 	</div>
-	<div v-if="widgetProps.showLabel" class="label">UTC</div>
-</div>
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
+import { onUnmounted, ref, watch } from "vue";
+import {
+	useWidgetPropsManager,
+	Widget,
+	WidgetComponentEmits,
+	WidgetComponentExpose,
+	WidgetComponentProps,
+} from "./widget";
+import { GetFormResultType } from "@/scripts/form";
 
-const name = 'unixClock';
+const name = "unixClock";
 
 const widgetPropsDef = {
 	transparent: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: false,
 	},
 	fontSize: {
-		type: 'number' as const,
+		type: "number" as const,
 		default: 1.5,
 		step: 0.1,
 	},
 	showMs: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	showLabel: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 };
@@ -42,18 +54,19 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
 
-const { widgetProps, configure } = useWidgetPropsManager(name,
+const { widgetProps, configure } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 
 let intervalId;
-const ss = ref('');
-const ms = ref('');
+const ss = ref("");
+const ms = ref("");
 const showColon = ref(false);
 let prevSec: string | null = null;
 
@@ -68,17 +81,23 @@ watch(showColon, (v) => {
 const tick = () => {
 	const now = new Date();
 	ss.value = Math.floor(now.getTime() / 1000).toString();
-	ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
+	ms.value = Math.floor((now.getTime() % 1000) / 10)
+		.toString()
+		.padStart(2, "0");
 	if (ss.value !== prevSec) showColon.value = true;
 	prevSec = ss.value;
 };
 
 tick();
 
-watch(() => widgetProps.showMs, () => {
-	if (intervalId) window.clearInterval(intervalId);
-	intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
-}, { immediate: true });
+watch(
+	() => widgetProps.showMs,
+	() => {
+		if (intervalId) window.clearInterval(intervalId);
+		intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
+	},
+	{ immediate: true }
+);
 
 onUnmounted(() => {
 	window.clearInterval(intervalId);
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
index 441845549..515c58c47 100644
--- a/packages/client/src/widgets/user-list.vue
+++ b/packages/client/src/widgets/user-list.vue
@@ -1,38 +1,50 @@
 <template>
 	<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
-		<template #header><i class="ph-user-list ph-bold ph-lg"></i> {{ list ? list.name : i18n.ts._widgets.userList }}</template>
-		<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ph-gear-six ph-bold ph-lg"></i></button></template>
+		<template #header
+			><i class="ph-user-list ph-bold ph-lg"></i>
+			{{ list ? list.name : i18n.ts._widgets.userList }}</template
+		>
+		<template #func="{ buttonStyleClass }"
+			><button
+				class="_button"
+				:class="buttonStyleClass"
+				@click="configure()"
+			>
+				<i class="ph-gear-six ph-bold ph-lg"></i></button
+		></template>
 
 		<div class="wsdlkfj">
 			<div v-if="widgetProps.listId == null" class="init">
-				<MkButton primary @click="chooseList">{{ i18n.ts._widgets._userList.chooseList }}</MkButton>
+				<MkButton primary @click="chooseList">{{
+					i18n.ts._widgets._userList.chooseList
+				}}</MkButton>
 			</div>
-			<MkLoading v-else-if="fetching"/>
+			<MkLoading v-else-if="fetching" />
 			<div v-else class="users">
-				<MkAvatars :user-ids="users" class="userAvatars"/>
+				<MkAvatars :user-ids="users" class="userAvatars" />
 			</div>
 		</div>
 	</MkContainer>
 </template>
 
 <script lang="ts" setup>
-import { useWidgetPropsManager, Widget, WidgetComponentExpose } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkAvatars from '@/components/MkAvatars.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import MkButton from '@/components/MkButton.vue';
+import { useWidgetPropsManager, Widget, WidgetComponentExpose } from "./widget";
+import { GetFormResultType } from "@/scripts/form";
+import MkContainer from "@/components/MkContainer.vue";
+import MkAvatars from "@/components/MkAvatars.vue";
+import * as os from "@/os";
+import { useInterval } from "@/scripts/use-interval";
+import { i18n } from "@/i18n";
+import MkButton from "@/components/MkButton.vue";
 
-const name = 'userList';
+const name = "userList";
 const widgetPropsDef = {
 	showHeader: {
-		type: 'boolean' as const,
+		type: "boolean" as const,
 		default: true,
 	},
 	listId: {
-		type: 'string' as const,
+		type: "string" as const,
 		default: null,
 		hidden: true,
 	},
@@ -41,22 +53,24 @@ type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
 // 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
 //const props = defineProps<WidgetComponentProps<WidgetProps>>();
 //const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
+const props = defineProps<{ widget?: Widget<WidgetProps> }>();
+const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
+const { widgetProps, configure, save } = useWidgetPropsManager(
+	name,
 	widgetPropsDef,
 	props,
-	emit,
+	emit
 );
 let list = $ref();
 let users = $ref([]);
 let fetching = $ref(true);
 async function chooseList() {
-	const lists = await os.api('users/lists/list');
+	const lists = await os.api("users/lists/list");
 	const { canceled, result: list } = await os.select({
 		title: i18n.ts.selectList,
-		items: lists.map(x => ({
-			value: x, text: x.name,
+		items: lists.map((x) => ({
+			value: x,
+			text: x.name,
 		})),
 		default: widgetProps.listId,
 	});
@@ -70,13 +84,13 @@ const fetch = () => {
 		fetching = false;
 		return;
 	}
-	os.api('users/lists/show', {
+	os.api("users/lists/show", {
 		listId: widgetProps.listId,
-	}).then(_list => {
+	}).then((_list) => {
 		list = _list;
-		os.api('users/show', {
+		os.api("users/show", {
 			userIds: list.userIds,
-		}).then(_users => {
+		}).then((_users) => {
 			users = list.userIds;
 			fetching = false;
 		});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7b0b3123..dad391189 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -788,6 +788,12 @@ importers:
       photoswipe:
         specifier: 5.3.4
         version: 5.3.4
+      prettier:
+        specifier: 2.8.7
+        version: 2.8.7
+      prettier-plugin-vue:
+        specifier: 1.1.6
+        version: 1.1.6
       prismjs:
         specifier: 1.29.0
         version: 1.29.0
@@ -12363,6 +12369,18 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /prettier-plugin-vue@1.1.6:
+    resolution: {integrity: sha512-trQ/oY+6hSsGe2zPIFThXMIM0TbxMEbk2VOrKjwHWuSz7OEo0rnumbz9a47OxVPCaAnGY9vZG8qDTiTmk9bq0A==}
+    dependencies:
+      prettier: 2.8.7
+    dev: true
+
+  /prettier@2.8.7:
+    resolution: {integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}