chore: 🚨 lint

.gitignore

@@ -32,6 +32,9 @@ coverage
 # docker dev config
 /dev/docker-compose.yml
 
+# ESLint
+.eslintcache
+
 # misskey
 built
 db

packages/client/.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["@eslint-sets/vue3", "@eslint-sets/vue3-ts"],
 	"plugins": ["file-progress", "prettier"],
+	"ignorePatterns": ["**/*.json5"],
 	"rules": {
 		"file-progress/activate": 1
 	}

packages/client/package.json

@@ -5,8 +5,8 @@
 		"watch": "pnpm vite build --watch --mode development",
 		"build": "pnpm vite build",
 		"build:debug": "pnpm run build",
-		"lint": "pnpm rome check **/*.ts --apply && pnpm run lint:vue",
+		"lint": "pnpm rome check **/*.ts --apply ; pnpm run lint:vue",
-		"lint:vue": "pnpm paralint --ext .vue --fix '**/*.vue' --cache",
+		"lint:vue": "pnpm eslint src --fix '**/*.vue' --cache ; pnpm run format",
 		"format": "pnpm rome format * --write && pnpm prettier --write '**/*.{scss,vue}' --cache --cache-strategy metadata"
 	},
 	"devDependencies": {
@@ -16,7 +16,7 @@
 		"@phosphor-icons/web": "^2.0.3",
 		"@rollup/plugin-alias": "5.0.0",
 		"@rollup/plugin-json": "6.0.0",
-		"@rollup/pluginutils": "^5.0.3",
+		"@rollup/pluginutils": "^5.0.4",
 		"@syuilo/aiscript": "0.11.1",
 		"@types/escape-regexp": "0.0.1",
 		"@types/glob": "8.1.0",
@@ -28,15 +28,15 @@
 		"@types/seedrandom": "3.0.5",
 		"@types/throttle-debounce": "5.0.0",
 		"@types/tinycolor2": "1.4.3",
-		"@types/uuid": "9.0.2",
+		"@types/uuid": "9.0.3",
-		"@vitejs/plugin-vue": "4.3.1",
+		"@vitejs/plugin-vue": "4.3.4",
 		"@vue/compiler-sfc": "3.3.4",
 		"autobind-decorator": "2.4.0",
 		"autosize": "6.0.1",
 		"blurhash": "2.0.5",
-		"broadcast-channel": "5.2.0",
+		"broadcast-channel": "5.3.0",
 		"browser-image-resizer": "github:misskey-dev/browser-image-resizer",
-		"chart.js": "4.3.3",
+		"chart.js": "4.4.0",
 		"chartjs-adapter-date-fns": "3.0.0",
 		"chartjs-chart-matrix": "^2.0.1",
 		"chartjs-plugin-gradient": "0.6.1",
@@ -63,36 +63,35 @@
 		"katex": "0.16.8",
 		"matter-js": "0.19.0",
 		"mfm-js": "0.23.3",
-		"paralint": "^1.2.1",
 		"photoswipe": "5.3.8",
-		"prettier": "3.0.2",
+		"prettier": "3.0.3",
 		"prettier-plugin-vue": "1.1.6",
 		"prismjs": "1.29.0",
 		"punycode": "2.3.0",
 		"rndstr": "1.0.0",
-		"rollup": "3.28.0",
+		"rollup": "3.28.1",
 		"s-age": "1.1.2",
-		"sass": "1.66.0",
+		"sass": "1.66.1",
 		"seedrandom": "3.0.5",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
 		"swiper": "10.2.0",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
-		"three": "0.155.0",
+		"three": "0.156.0",
 		"throttle-debounce": "5.0.0",
 		"tinycolor2": "1.6.0",
 		"tsc-alias": "1.8.7",
 		"tsconfig-paths": "4.2.0",
 		"twemoji-parser": "14.0.0",
-		"typescript": "5.1.6",
+		"typescript": "5.2.2",
 		"unicode-emoji-json": "^0.4.0",
 		"uuid": "9.0.0",
 		"vanilla-tilt": "1.8.1",
 		"vite": "4.4.9",
 		"vite-plugin-compression": "^0.5.1",
 		"vue": "3.3.4",
-		"vue-draggable-plus": "^0.2.5",
+		"vue-draggable-plus": "^0.2.6",
 		"vue-isyourpasswordsafe": "^2.0.0",
 		"vue-plyr": "^7.0.0",
 		"vue-prism-editor": "2.0.0-alpha.2"

packages/client/src/account.ts

@@ -1,10 +1,10 @@
 import { defineAsyncComponent, reactive } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import { i18n } from "./i18n";
 import { del, get, set } from "@/scripts/idb-proxy";
 import { apiUrl } from "@/config";
-import { waiting, api, popup, popupMenu, success, alert } from "@/os";
+import { alert, api, popup, popupMenu, success, waiting } from "@/os";
-import { unisonReload, reloadChannel } from "@/scripts/unison-reload";
+import { reloadChannel, unisonReload } from "@/scripts/unison-reload";
 
 // TODO: 他のタブと永続化されたstateを同期
 
@@ -28,7 +28,7 @@ export async function signout() {
 
 	const accounts = await getAccounts();
 
-	//#region Remove service worker registration
+	// #region Remove service worker registration
 	try {
 		if (navigator.serviceWorker.controller) {
 			const registration = await navigator.serviceWorker.ready;
@@ -52,7 +52,7 @@ export async function signout() {
 			});
 		}
 	} catch (err) {}
-	//#endregion
+	// #endregion
 
 	document.cookie = "igi=; path=/";
 

packages/client/src/components/MkDialog.vue

@@ -199,7 +199,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, shallowRef, computed } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
 import * as Acct from "firefish-js/built/acct";
 import MkModal from "@/components/MkModal.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -281,7 +281,9 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
 const inputValue = ref<string | number | null>(props.input?.default ?? null);
 const selectedValue = ref(props.select?.default ?? null);
 
-let disabledReason = ref<null | "charactersExceeded" | "charactersBelow">(null);
+const disabledReason = ref<null | "charactersExceeded" | "charactersBelow">(
+	null,
+);
 const okButtonDisabled = computed<boolean>(() => {
 	if (props.input) {
 		if (props.input.minLength) {

packages/client/src/components/MkDrive.file.vue

@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref } from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import bytes from "@/filters/bytes";
@@ -160,7 +160,7 @@ function rename() {
 		if (canceled) return;
 		os.api("drive/files/update", {
 			fileId: props.file.id,
-			name: name,
+			name,
 		});
 	});
 }
@@ -179,7 +179,7 @@ function describe() {
 		{
 			done: (result) => {
 				if (!result || result.canceled) return;
-				let comment = result.result;
+				const comment = result.result;
 				os.api("drive/files/update", {
 					fileId: props.file.id,
 					comment: comment.length === 0 ? null : comment,

packages/client/src/components/MkDrive.folder.vue

@@ -38,7 +38,7 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref } from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
@@ -131,7 +131,7 @@ function onDrop(ev: DragEvent) {
 		return;
 	}
 
-	//#region ドライブのファイル
+	// #region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
@@ -141,9 +141,9 @@ function onDrop(ev: DragEvent) {
 			folderId: props.folder.id,
 		});
 	}
-	//#endregion
+	// #endregion
 
-	//#region ドライブのフォルダ
+	// #region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
@@ -175,7 +175,7 @@ function onDrop(ev: DragEvent) {
 				}
 			});
 	}
-	//#endregion
+	// #endregion
 }
 
 function onDragstart(ev: DragEvent) {
@@ -207,7 +207,7 @@ function rename() {
 		if (canceled) return;
 		os.api("drive/folders/update", {
 			folderId: props.folder.id,
-			name: name,
+			name,
 		});
 	});
 }

packages/client/src/components/MkDrive.navFolder.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
@@ -86,7 +86,7 @@ function onDrop(ev: DragEvent) {
 		return;
 	}
 
-	//#region ドライブのファイル
+	// #region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
@@ -96,9 +96,9 @@ function onDrop(ev: DragEvent) {
 			folderId: props.folder ? props.folder.id : null,
 		});
 	}
-	//#endregion
+	// #endregion
 
-	//#region ドライブのフォルダ
+	// #region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 	if (driveFolder != null && driveFolder !== "") {
 		const folder = JSON.parse(driveFolder);
@@ -110,7 +110,7 @@ function onDrop(ev: DragEvent) {
 			parentId: props.folder ? props.folder.id : null,
 		});
 	}
-	//#endregion
+	// #endregion
 }
 </script>
 

packages/client/src/components/MkDrive.vue

@@ -139,7 +139,7 @@ import {
 	ref,
 	watch,
 } from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
 import MkButton from "./MkButton.vue";
 import XNavFolder from "@/components/MkDrive.navFolder.vue";
 import XFolder from "@/components/MkDrive.folder.vue";
@@ -294,7 +294,7 @@ function onDrop(ev: DragEvent): any {
 		return;
 	}
 
-	//#region ドライブのファイル
+	// #region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
@@ -305,9 +305,9 @@ function onDrop(ev: DragEvent): any {
 			folderId: folder.value ? folder.value.id : null,
 		});
 	}
-	//#endregion
+	// #endregion
 
-	//#region ドライブのフォルダ
+	// #region ドライブのフォルダ
 	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 	if (driveFolder != null && driveFolder !== "") {
 		const droppedFolder = JSON.parse(driveFolder);
@@ -339,7 +339,7 @@ function onDrop(ev: DragEvent): any {
 				}
 			});
 	}
-	//#endregion
+	// #endregion
 }
 
 function selectLocalFile() {
@@ -354,7 +354,7 @@ function urlUpload() {
 	}).then(({ canceled, result: url }) => {
 		if (canceled || !url) return;
 		os.api("drive/files/upload-from-url", {
-			url: url,
+			url,
 			folderId: folder.value ? folder.value.id : undefined,
 		});
 
@@ -372,7 +372,7 @@ function createFolder() {
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
 		os.api("drive/folders/create", {
-			name: name,
+			name,
 			parentId: folder.value ? folder.value.id : undefined,
 		}).then((createdFolder) => {
 			addFolder(createdFolder, true);
@@ -389,7 +389,7 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
 		if (canceled) return;
 		os.api("drive/folders/update", {
 			folderId: folderToRename.id,
-			name: name,
+			name,
 		}).then((updatedFolder) => {
 			// FIXME: 画面を更新するために自分自身に移動
 			move(updatedFolder);

packages/client/src/components/MkDriveFileThumbnail.vue

@@ -68,7 +68,7 @@ const is = computed(() => {
 			"application/x-tar",
 			"application/gzip",
 			"application/x-7z-compressed",
-		].some((archiveType) => archiveType === props.file.type)
+		].includes(props.file.type)
 	)
 		return "archive";
 	return "unknown";

packages/client/src/components/MkDriveSelectDialog.vue

@@ -37,7 +37,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
 import XDrive from "@/components/MkDrive.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import number from "@/filters/number";

packages/client/src/components/MkDriveWindow.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import {} from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
 import XDrive from "@/components/MkDrive.vue";
 import XWindow from "@/components/MkWindow.vue";
 import { i18n } from "@/i18n";

packages/client/src/components/MkEmojiPicker.section.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { addSkinTone } from "@/scripts/emojilist";
 
 const props = defineProps<{

packages/client/src/components/MkEmojiPicker.vue

@@ -1,5 +1,5 @@
 <template>
-	<FocusTrap v-bind:active="isActive">
+	<FocusTrap :active="isActive">
 		<div
 			class="omfetrab"
 			:class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]"
@@ -163,14 +163,15 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onMounted } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
+import { FocusTrap } from "focus-trap-vue";
 import XSection from "@/components/MkEmojiPicker.section.vue";
+import type { UnicodeEmojiDef } from "@/scripts/emojilist";
 import {
 	emojilist,
-	unicodeEmojiCategories,
-	UnicodeEmojiDef,
 	getNicelyLabeledCategory,
+	unicodeEmojiCategories,
 } from "@/scripts/emojilist";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import Ripple from "@/components/MkRipple.vue";
@@ -180,7 +181,6 @@ import { deviceKind } from "@/scripts/device-kind";
 import { emojiCategories, instance } from "@/instance";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
-import { FocusTrap } from "focus-trap-vue";
 
 const props = withDefaults(
 	defineProps<{

packages/client/src/components/MkFeaturedPhotos.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import * as Misskey from "firefish-js";
+import type * as Misskey from "firefish-js";
 import * as os from "@/os";
 
 const meta = ref<Misskey.entities.DetailedInstanceMetadata>();

packages/client/src/components/MkFollowButton.vue

@@ -1,14 +1,15 @@
 <template>
 	<button
 		v-if="!hideMenu"
+		v-tooltip="i18n.ts.menu"
 		class="menu _button"
 		@click.stop="menu"
-		v-tooltip="i18n.ts.menu"
 	>
 		<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 	</button>
 	<button
 		v-if="$i != null && $i.id != user.id"
+		v-tooltip="full ? null : `${state} ${user.name || user.username}`"
 		class="kpoogebi _button follow-button"
 		:class="{
 			wait,
@@ -18,9 +19,8 @@
 			blocking: isBlocking,
 		}"
 		:disabled="wait"
-		@click.stop="onClick"
 		:aria-label="`${state} ${user.name || user.username}`"
-		v-tooltip="full ? null : `${state} ${user.name || user.username}`"
+		@click.stop="onClick"
 	>
 		<template v-if="!wait">
 			<template v-if="isBlocking">
@@ -88,13 +88,13 @@ const props = withDefaults(
 
 const isBlocking = computed(() => props.user.isBlocking);
 
-let state = ref(i18n.ts.processing);
+const state = ref(i18n.ts.processing);
 
-let isFollowing = ref(props.user.isFollowing);
+const isFollowing = ref(props.user.isFollowing);
-let hasPendingFollowRequestFromYou = ref(
+const hasPendingFollowRequestFromYou = ref(
 	props.user.hasPendingFollowRequestFromYou,
 );
-let wait = ref(false);
+const wait = ref(false);
 const connection = stream.useChannel("main");
 
 if (props.user.isFollowing == null) {

packages/client/src/components/MkForgotPassword.vue

@@ -64,7 +64,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import {} from "vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -77,11 +76,11 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let dialog: InstanceType<typeof XModalWindow> = ref();
+const dialog: InstanceType<typeof XModalWindow> = ref();
 
-let username = ref("");
+const username = ref("");
-let email = ref("");
+const email = ref("");
-let processing = ref(false);
+const processing = ref(false);
 
 async function onSubmit() {
 	processing.value = true;

packages/client/src/components/MkFormula.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
 
 export default defineComponent({
 	components: {

packages/client/src/components/MkHeatmap.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, watch, shallowRef, ref } from "vue";
+import { nextTick, onMounted, ref, shallowRef, watch } from "vue";
 import { Chart } from "chart.js";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
@@ -26,8 +26,8 @@ const props = defineProps<{
 const rootEl = shallowRef<HTMLDivElement>(null);
 const chartEl = shallowRef<HTMLCanvasElement>(null);
 const now = new Date();
-let chartInstance: Chart = null;
+let chartInstance: Chart = null,
-let fetching = ref(true);
+	fetching = ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
 	position: "middle",
@@ -233,7 +233,7 @@ async function renderChart() {
 							return ["Active: " + v.v];
 						},
 					},
-					//mode: 'index',
+					// mode: 'index',
 					animation: {
 						duration: 0,
 					},

packages/client/src/components/MkImageViewer.vue

@@ -28,7 +28,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import {} from "vue";
 import type * as misskey from "firefish-js";
 import bytes from "@/filters/bytes";
 import number from "@/filters/number";

packages/client/src/components/MkImgWithBlurhash.vue

@@ -49,7 +49,7 @@ const props = withDefaults(
 );
 
 const canvas = ref<HTMLCanvasElement>();
-let loaded = ref(false);
+const loaded = ref(false);
 
 function draw() {
 	if (props.hash == null || canvas.value == null) return;

packages/client/src/components/MkInfo.vue

@@ -11,8 +11,8 @@
 			v-if="closeable"
 			v-tooltip="i18n.ts.close"
 			class="_buttonIcon close"
-			@click.stop="close"
 			:aria-label="i18n.t('close')"
+			@click.stop="close"
 		>
 			<i class="ph-x ph-bold ph-lg"></i>
 		</button>

packages/client/src/components/MkInstanceCardMini.vue

@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import * as firefish from "firefish-js";
+import type * as firefish from "firefish-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
@@ -35,7 +35,7 @@ const props = defineProps<{
 	instance: firefish.entities.Instance;
 }>();
 
-let chartValues = ref<number[] | null>(null);
+const chartValues = ref<number[] | null>(null);
 
 os.apiGet("charts/instance", {
 	host: props.instance.host,

packages/client/src/components/MkInstanceSelectDialog.vue

@@ -58,11 +58,11 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
+import type { Instance } from "firefish-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 "firefish-js/built/entities";
 
 const emit = defineEmits<{
 	(ev: "ok", selected: Instance): void;
@@ -70,10 +70,10 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let hostname = ref("");
+const hostname = ref("");
-let instances: Instance[] = ref([]);
+const instances: Instance[] = ref([]);
-let selected: Instance | null = ref(null);
+const selected: Instance | null = ref(null);
-let dialogEl = ref<InstanceType<typeof XModalWindow>>();
+const dialogEl = ref<InstanceType<typeof XModalWindow>>();
 
 let searchOrderLatch = 0;
 const search = () => {

packages/client/src/components/MkInstanceStats.vue

@@ -116,11 +116,11 @@ import { initChart } from "@/scripts/init-chart";
 initChart();
 
 const chartLimit = 500;
-let chartSpan = ref<"hour" | "day">("hour");
+const chartSpan = ref<"hour" | "day">("hour");
-let chartSrc = ref("active-users");
+const chartSrc = ref("active-users");
-let heatmapSrc = ref("active-users");
+const heatmapSrc = ref("active-users");
-let subDoughnutEl = shallowRef<HTMLCanvasElement>();
+const subDoughnutEl = shallowRef<HTMLCanvasElement>();
-let pubDoughnutEl = shallowRef<HTMLCanvasElement>();
+const pubDoughnutEl = shallowRef<HTMLCanvasElement>();
 
 const { handler: externalTooltipHandler1 } = useChartTooltip({
 	position: "middle",

packages/client/src/components/MkInstanceTicker.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="hpaizdrt"
-		v-tooltip="capitalize(instance.softwareName)"
 		ref="ticker"
+		v-tooltip="capitalize(instance.softwareName)"
+		class="hpaizdrt"
 		:style="bg"
 	>
 		<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true" />
@@ -26,7 +26,7 @@ const props = defineProps<{
 	};
 }>();
 
-let ticker = ref<HTMLElement | null>(null);
+const ticker = ref<HTMLElement | null>(null);
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {

packages/client/src/components/MkMedia.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="media" v-size="{ max: [350] }">
+	<div v-size="{ max: [350] }" class="media">
 		<button v-if="hide" class="hidden" @click="hide = false">
 			<ImgWithBlurhash
 				:hash="media.blurhash"
@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, ref, computed } from "vue";
+import { computed, ref, watch } from "vue";
 import VuePlyr from "vue-plyr";
 import "vue-plyr/dist/vue-plyr.css";
 import type * as misskey from "firefish-js";
@@ -104,7 +104,7 @@ const props = defineProps<{
 	raw?: boolean;
 }>();
 
-let hide = ref(true);
+const hide = ref(true);
 
 const plyr = ref();
 

packages/client/src/components/MkMediaBanner.vue

@@ -71,7 +71,7 @@ const props = withDefaults(
 );
 
 const audioEl = ref<HTMLAudioElement | null>();
-let hide = ref(true);
+const hide = ref(true);
 
 function volumechange() {
 	if (audioEl.value)

packages/client/src/components/MkMediaList.vue

@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import PhotoSwipeLightbox from "photoswipe/lightbox";
 import PhotoSwipe from "photoswipe";
 import "photoswipe/style.css";
@@ -125,11 +125,11 @@ onMounted(() => {
 			className: "pwsp__alt-text-container",
 			appendTo: "wrapper",
 			onInit: (el, pwsp) => {
-				let textBox = document.createElement("p");
+				const textBox = document.createElement("p");
 				textBox.className = "pwsp__alt-text";
 				el.appendChild(textBox);
 
-				let preventProp = function (ev: Event): void {
+				const preventProp = function (ev: Event): void {
 					ev.stopPropagation();
 				};
 

packages/client/src/components/MkMenu.child.vue

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, ref } from "vue";
 import MkMenu from "./MkMenu.vue";
-import { MenuItem } from "@/types/menu";
+import type { MenuItem } from "@/types/menu";
 
 const props = defineProps<{
 	items: MenuItem[];

packages/client/src/components/MkMenu.vue

@@ -14,8 +14,8 @@
 					width: width && !asDrawer ? width + 'px' : '',
 					maxHeight: maxHeight ? maxHeight + 'px' : '',
 				}"
-				@contextmenu.self="(e) => e.preventDefault()"
 				tabindex="-1"
+				@contextmenu.self="(e) => e.preventDefault()"
 			>
 				<template v-for="item in items2">
 					<div v-if="item === null" class="divider"></div>
@@ -47,7 +47,7 @@
 							v-if="item.avatar"
 							:user="item.avatar"
 							class="avatar"
-							disableLink
+							disable-link
 						/>
 						<span :style="item.textStyle || ''">{{
 							item.text
@@ -100,7 +100,7 @@
 						<MkAvatar
 							:user="item.user"
 							class="avatar"
-							disableLink
+							disable-link
 						/><MkUserName :user="item.user" />
 						<span
 							v-if="item.indicate"
@@ -168,7 +168,7 @@
 							v-if="item.avatar"
 							:user="item.avatar"
 							class="avatar"
-							disableLink
+							disable-link
 						/>
 						<span :style="item.textStyle || ''">{{
 							item.text
@@ -210,11 +210,16 @@ import {
 	ref,
 	watch,
 } from "vue";
+import { FocusTrap } from "focus-trap-vue";
 import FormSwitch from "@/components/form/switch.vue";
-import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
+import type {
+	InnerMenuItem,
+	MenuAction,
+	MenuItem,
+	MenuPending,
+} from "@/types/menu";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
-import { FocusTrap } from "focus-trap-vue";
 
 const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
 const focusTrap = ref();
@@ -233,13 +238,13 @@ const emit = defineEmits<{
 	(ev: "close", actioned?: boolean): void;
 }>();
 
-let itemsEl = ref<HTMLDivElement>();
+const itemsEl = ref<HTMLDivElement>();
 
-let items2: InnerMenuItem[] = ref([]);
+const items2: InnerMenuItem[] = ref([]);
 
-let child = ref<InstanceType<typeof XChild>>();
+const child = ref<InstanceType<typeof XChild>>();
 
-let childShowingItem = ref<MenuItem | null>();
+const childShowingItem = ref<MenuItem | null>();
 
 watch(
 	() => props.items,
@@ -267,8 +272,8 @@ watch(
 	},
 );
 
-let childMenu = ref<MenuItem[] | null>();
+const childMenu = ref<MenuItem[] | null>();
-let childTarget = ref<HTMLElement | null>();
+const childTarget = ref<HTMLElement | null>();
 
 function closeChild() {
 	childMenu.value = null;

packages/client/src/components/MkMiniChart.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, ref } from "vue";
+import { ref, watch } from "vue";
 import { v4 as uuid } from "uuid";
 import tinycolor from "tinycolor2";
 import { useInterval } from "@/scripts/use-interval";
@@ -37,10 +37,10 @@ const props = defineProps<{
 const viewBoxX = 50;
 const viewBoxY = 50;
 const gradientId = uuid();
-let polylinePoints = ref("");
+const polylinePoints = ref("");
-let polygonPoints = ref("");
+const polygonPoints = ref("");
-let headX = ref<number | null>(null);
+const headX = ref<number | null>(null);
-let headY = ref<number | null>(null);
+const headY = ref<number | null>(null);
 const accent = tinycolor(
 	getComputedStyle(document.documentElement).getPropertyValue("--accent"),
 );

packages/client/src/components/MkModal.vue

@@ -25,6 +25,7 @@
 			<div
 				v-show="manualShowing != null ? manualShowing : showing"
 				v-hotkey.global="keymap"
+				v-focus
 				:class="[
 					$style.root,
 					{
@@ -44,7 +45,6 @@
 					'--transformOrigin': transformOrigin,
 				}"
 				tabindex="-1"
-				v-focus
 			>
 				<div
 					class="_modalBg data-cy-bg"
@@ -78,20 +78,20 @@
 
 <script lang="ts" setup>
 import {
+	computed,
 	nextTick,
 	onMounted,
-	watch,
-	provide,
 	onUnmounted,
+	provide,
 	ref,
 	shallowRef,
-	computed,
+	watch,
 } from "vue";
+import { FocusTrap } from "focus-trap-vue";
 import * as os from "@/os";
 import { isTouchUsing } from "@/scripts/touch";
 import { defaultStore } from "@/store";
 import { deviceKind } from "@/scripts/device-kind";
-import { FocusTrap } from "focus-trap-vue";
 
 function getFixedContainer(el: Element | null): Element | null {
 	if (el == null || el.tagName === "BODY") return null;
@@ -139,13 +139,13 @@ const emit = defineEmits<{
 
 provide("modal", true);
 
-let maxHeight = ref<number>();
+const maxHeight = ref<number>();
-let fixed = ref(false);
+const fixed = ref(false);
-let transformOrigin = ref("center");
+const transformOrigin = ref("center");
-let showing = ref(true);
+const showing = ref(true);
-let content = shallowRef<HTMLElement>();
+const content = shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
-let useSendAnime = ref(false);
+const useSendAnime = ref(false);
 const type = computed<ModalTypes>(() => {
 	if (props.preferType === "auto") {
 		if (
@@ -164,7 +164,7 @@ const type = computed<ModalTypes>(() => {
 const isEnableBgTransparent = computed(
 	() => props.transparentBg && type.value === "popup",
 );
-let transitionName = computed(() =>
+const transitionName = computed(() =>
 	defaultStore.state.animation
 		? useSendAnime.value
 			? "send"
@@ -175,7 +175,7 @@ let transitionName = computed(() =>
 			: "modal"
 		: "",
 );
-let transitionDuration = computed(() =>
+const transitionDuration = computed(() =>
 	transitionName.value === "send"
 		? 400
 		: transitionName.value === "modal-popup"
@@ -235,8 +235,7 @@ const align = () => {
 	const width = content.value!.offsetWidth;
 	const height = content.value!.offsetHeight;
 
-	let left;
+	let left, top;
-	let top;
 
 	const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
 	const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
@@ -321,8 +320,8 @@ const align = () => {
 		left = 0;
 	}
 
-	let transformOriginX = "center";
+	let transformOriginX = "center",
-	let transformOriginY = "center";
+		transformOriginY = "center";
 
 	if (
 		top >=

packages/client/src/components/MkModalPageWindow.vue

@@ -28,8 +28,8 @@
 				</span>
 				<button
 					class="_button"
-					@click="$refs.modal.close()"
 					:aria-label="i18n.t('close')"
+					@click="$refs.modal.close()"
 				>
 					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
@@ -52,7 +52,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide, ref, computed } from "vue";
+import type { ComputedRef } from "vue";
+import { computed, provide, ref } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import { popout as _popout } from "@/scripts/popout";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
@@ -60,7 +61,8 @@ import { url } from "@/config";
 import * as os from "@/os";
 import { mainRouter, routes } from "@/router";
 import { i18n } from "@/i18n";
-import { PageMetadata, provideMetadataReceiver } from "@/scripts/page-metadata";
+import type { PageMetadata } from "@/scripts/page-metadata";
+import { provideMetadataReceiver } from "@/scripts/page-metadata";
 import { Router } from "@/nirax";
 
 const props = defineProps<{
@@ -76,12 +78,12 @@ const router = new Router(routes, props.initialPath);
 
 router.addListener("push", (ctx) => {});
 
-let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
+const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
-let rootEl = ref();
+const rootEl = ref();
-let modal = ref<InstanceType<typeof MkModal>>();
+const modal = ref<InstanceType<typeof MkModal>>();
-let path = ref(props.initialPath);
+const path = ref(props.initialPath);
-let width = ref(860);
+const width = ref(860);
-let height = ref(660);
+const height = ref(660);
 const history = [];
 
 provide("router", router);

packages/client/src/components/MkModalWindow.vue

@@ -25,10 +25,10 @@
 				<div ref="headerEl" class="header">
 					<button
 						v-if="props.withOkButton"
+						v-tooltip="i18n.ts.close"
 						:aria-label="i18n.t('close')"
 						class="_button"
 						@click="$emit('close')"
-						v-tooltip="i18n.ts.close"
 					>
 						<i class="ph-x ph-bold ph-lg"></i>
 					</button>
@@ -92,9 +92,9 @@ const emit = defineEmits<{
 	(event: "ok"): void;
 }>();
 
-let modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
-let rootEl = shallowRef<HTMLElement>();
+const rootEl = shallowRef<HTMLElement>();
-let headerEl = shallowRef<HTMLElement>();
+const headerEl = shallowRef<HTMLElement>();
 
 const close = (ev) => {
 	modal.value?.close(ev);

packages/client/src/components/MkNote.vue

@@ -1,15 +1,15 @@
 <template>
 	<div
-		:aria-label="accessibleLabel"
 		v-if="!muted.muted"
 		v-show="!isDeleted"
+		:id="appearNote.id"
 		ref="el"
 		v-hotkey="keymap"
 		v-size="{ max: [500, 350] }"
+		:aria-label="accessibleLabel"
 		class="tkcbzcuz note-container"
 		:tabindex="!isDeleted ? '-1' : null"
 		:class="{ renote: isRenote }"
-		:id="appearNote.id"
 	>
 		<MkNoteSub
 			v-if="appearNote.reply && !detailedView && !collapsedReply"
@@ -19,10 +19,10 @@
 		<div
 			v-if="!detailedView"
 			class="note-context"
-			@click="noteClick"
 			:class="{
 				collapsedReply: collapsedReply && appearNote.reply,
 			}"
+			@click="noteClick"
 		>
 			<div class="line"></div>
 			<div v-if="appearNote._prId_" class="info">
@@ -87,11 +87,11 @@
 		</div>
 		<article
 			class="article"
-			@contextmenu.stop="onContextmenu"
-			@click="noteClick"
 			:style="{
 				cursor: expandOnNoteClick && !detailedView ? 'pointer' : '',
 			}"
+			@contextmenu.stop="onContextmenu"
+			@click="noteClick"
 		>
 			<div class="main">
 				<div class="header-container">
@@ -103,8 +103,8 @@
 						class="text"
 						:note="appearNote"
 						:detailed="true"
-						:detailedView="detailedView"
+						:detailed-view="detailedView"
-						:parentId="appearNote.parentId"
+						:parent-id="appearNote.parentId"
 						@push="(e) => router.push(notePage(e))"
 						@focusfooter="footerEl.focus()"
 						@expanded="(e) => setPostExpanded(e)"
@@ -171,7 +171,7 @@
 						class="button"
 						:note="appearNote"
 						:count="appearNote.renoteCount"
-						:detailedView="detailedView"
+						:detailed-view="detailedView"
 					/>
 					<XStarButtonNoEmoji
 						v-if="!enableEmojiReactions"
@@ -212,9 +212,9 @@
 							appearNote.myReaction != null
 						"
 						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 						class="button _button reacted"
 						@click.stop="undoReact(appearNote)"
-						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 					>
 						<i class="ph-minus ph-bold ph-lg"></i>
 					</button>
@@ -259,8 +259,8 @@ import { computed, inject, onMounted, ref } from "vue";
 import * as mfm from "mfm-js";
 import type { Ref } from "vue";
 import type * as misskey from "firefish-js";
-import MkNoteSub from "@/components/MkNoteSub.vue";
 import MkSubNoteContent from "./MkSubNoteContent.vue";
+import MkNoteSub from "@/components/MkNoteSub.vue";
 import XNoteHeader from "@/components/MkNoteHeader.vue";
 import XRenoteButton from "@/components/MkRenoteButton.vue";
 import XReactionsViewer from "@/components/MkReactionsViewer.vue";
@@ -271,7 +271,7 @@ import MkVisibility from "@/components/MkVisibility.vue";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
 import { pleaseLogin } from "@/scripts/please-login";
-import { focusPrev, focusNext } from "@/scripts/focus";
+import { focusNext, focusPrev } from "@/scripts/focus";
 import { getWordSoftMute } from "@/scripts/check-word-mute";
 import { useRouter } from "@/router";
 import { userPage } from "@/filters/user";
@@ -297,7 +297,7 @@ const props = defineProps<{
 
 const inChannel = inject("inChannel", null);
 
-let note = ref(deepClone(props.note));
+const note = ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
 	if (what === "note") return i18n.ts.userSaysSomethingReason;
@@ -333,7 +333,7 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = computed(() =>
+const appearNote = computed(() =>
 	isRenote ? (note.value.renote as misskey.entities.Note) : note.value,
 );
 const isMyRenote = $i && $i.id === note.value.userId;
@@ -385,7 +385,7 @@ function react(viaKeyboard = false): void {
 		(reaction) => {
 			os.api("notes/reactions/create", {
 				noteId: appearNote.value.id,
-				reaction: reaction,
+				reaction,
 			});
 		},
 		() => {
@@ -516,7 +516,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 		],
 		renoteTime.value,
 		{
-			viaKeyboard: viaKeyboard,
+			viaKeyboard,
 		},
 	);
 }
@@ -560,7 +560,7 @@ function readPromo() {
 	isDeleted.value = true;
 }
 
-let postIsExpanded = ref(false);
+const postIsExpanded = ref(false);
 
 function setPostExpanded(val: boolean) {
 	postIsExpanded.value = val;

packages/client/src/components/MkNoteDetailed.vue

@@ -10,27 +10,27 @@
 		:class="{ renote: isRenote }"
 	>
 		<MkNoteSub
-			v-if="conversation"
 			v-for="note in conversation"
+			v-if="conversation"
 			:key="note.id"
 			class="reply-to"
 			:note="note"
-			:detailedView="true"
+			:detailed-view="true"
 		/>
 		<MkLoading v-else-if="note.reply" mini />
 		<MkNoteSub
 			v-if="note.reply"
 			:note="note.reply"
 			class="reply-to"
-			:detailedView="true"
+			:detailed-view="true"
 		/>
 
 		<MkNote
 			ref="noteEl"
-			@contextmenu.stop="onContextmenu"
 			tabindex="-1"
 			:note="note"
-			detailedView
+			detailed-view
+			@contextmenu.stop="onContextmenu"
 		></MkNote>
 
 		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
@@ -41,22 +41,22 @@
 				}}</span>
 				{{ i18n.ts._notification._types.reply }}
 			</option>
-			<option value="renotes" v-if="note.renoteCount > 0">
+			<option v-if="note.renoteCount > 0" value="renotes">
 				<!-- <i class="ph-repeat ph-bold ph-lg"></i> -->
 				<span class="count">{{ note.renoteCount }}</span>
 				{{ i18n.ts._notification._types.renote }}
 			</option>
-			<option value="reactions" v-if="reactionsCount > 0">
+			<option v-if="reactionsCount > 0" value="reactions">
 				<!-- <i class="ph-smiley ph-bold ph-lg"></i> -->
 				<span class="count">{{ reactionsCount }}</span>
 				{{ i18n.ts.reaction }}
 			</option>
-			<option value="quotes" v-if="directQuotes?.length > 0">
+			<option v-if="directQuotes?.length > 0" value="quotes">
 				<!-- <i class="ph-quotes ph-bold ph-lg"></i> -->
 				<span class="count">{{ directQuotes.length }}</span>
 				{{ i18n.ts._notification._types.quote }}
 			</option>
-			<option value="clips" v-if="clips?.length > 0">
+			<option v-if="clips?.length > 0" value="clips">
 				<!-- <i class="ph-paperclip ph-bold ph-lg"></i> -->
 				<span class="count">{{ clips.length }}</span>
 				{{ i18n.ts.clips }}
@@ -64,26 +64,26 @@
 		</MkTab>
 
 		<MkNoteSub
-			v-if="directReplies && tab === 'replies'"
 			v-for="note in directReplies"
+			v-if="directReplies && tab === 'replies'"
 			:key="note.id"
 			:note="note"
 			class="reply"
 			:conversation="replies"
-			:detailedView="true"
+			:detailed-view="true"
-			:parentId="note.id"
+			:parent-id="note.id"
 		/>
 		<MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" />
 
 		<MkNoteSub
-			v-if="directQuotes && tab === 'quotes'"
 			v-for="note in directQuotes"
+			v-if="directQuotes && tab === 'quotes'"
 			:key="note.id"
 			:note="note"
 			class="reply"
 			:conversation="replies"
-			:detailedView="true"
+			:detailed-view="true"
-			:parentId="note.id"
+			:parent-id="note.id"
 		/>
 		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
 
@@ -94,8 +94,8 @@
 			:pagination="pagination"
 		> -->
 		<MkUserCardMini
-			v-if="tab === 'renotes' && renotes"
 			v-for="item in renotes"
+			v-if="tab === 'renotes' && renotes"
 			:key="item.user.id"
 			:user="item.user"
 			:with-chart="false"
@@ -151,11 +151,12 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, onUpdated, ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
+import type { NoteUpdatedEvent } from "firefish-js/built/streaming.types";
 import MkTab from "@/components/MkTab.vue";
 import MkNote from "@/components/MkNote.vue";
 import MkNoteSub from "@/components/MkNoteSub.vue";
-import XRenoteButton from "@/components/MkRenoteButton.vue";
+import type XRenoteButton from "@/components/MkRenoteButton.vue";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
 import MkReactedUsers from "@/components/MkReactedUsers.vue";
 import { pleaseLogin } from "@/scripts/please-login";
@@ -170,16 +171,15 @@ 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 "firefish-js/built/streaming.types";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
 }>();
 
-let tab = ref("replies");
+const tab = ref("replies");
 
-let note = ref(deepClone(props.note));
+const note = ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
 	if (what === "note") return i18n.ts.userSaysSomethingReason;
@@ -214,12 +214,12 @@ const muted = ref(
 );
 const translation = ref(null);
 const translating = ref(false);
-let conversation = ref<null | misskey.entities.Note[]>([]);
+const conversation = ref<null | misskey.entities.Note[]>([]);
 const replies = ref<misskey.entities.Note[]>([]);
-let directReplies = ref<null | misskey.entities.Note[]>([]);
+const directReplies = ref<null | misskey.entities.Note[]>([]);
-let directQuotes = ref<null | misskey.entities.Note[]>([]);
+const directQuotes = ref<null | misskey.entities.Note[]>([]);
-let clips = ref();
+const clips = ref();
-let renotes = ref();
+const renotes = ref();
 let isScrolling;
 
 const reactionsCount = Object.values(props.note.reactions).reduce(
@@ -238,7 +238,7 @@ const keymap = {
 
 useNoteCapture({
 	rootEl: el,
-	note: note,
+	note,
 	isDeletedRef: isDeleted,
 });
 
@@ -260,7 +260,7 @@ function react(viaKeyboard = false): void {
 		(reaction) => {
 			os.api("notes/reactions/create", {
 				noteId: note.value.id,
-				reaction: reaction,
+				reaction,
 			});
 		},
 		() => {

packages/client/src/components/MkNoteHeader.vue

@@ -49,7 +49,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import {} from "vue";
 import type * as misskey from "firefish-js";
 import { defaultStore } from "@/store";
 import MkVisibility from "@/components/MkVisibility.vue";
@@ -63,7 +62,7 @@ const props = defineProps<{
 	pinned?: boolean;
 }>();
 
-let note = ref(props.note);
+const note = ref(props.note);
 
 const showTicker =
 	defaultStore.state.instanceTicker === "always" ||

packages/client/src/components/MkNotePreview.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-size="{ min: [350, 500] }" class="fefdfafb">
-		<MkAvatar class="avatar" :user="$i" disableLink />
+		<MkAvatar class="avatar" :user="$i" disable-link />
 		<div class="main">
 			<div class="header">
 				<MkUserName :user="$i" />
@@ -11,7 +11,7 @@
 						:text="preprocess(text).trim()"
 						:author="$i"
 						:i="$i"
-						advancedMfm
+						advanced-mfm
 					/>
 				</div>
 			</div>

packages/client/src/components/MkNoteSimple.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import XNoteHeader from "@/components/MkNoteHeader.vue";
 import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
 

packages/client/src/components/MkNoteSub.vue

@@ -1,10 +1,10 @@
 <template>
 	<article
 		v-if="!muted.muted || muted.what === 'reply'"
+		:id="detailedView ? appearNote.id : null"
 		ref="el"
 		v-size="{ max: [450, 500] }"
 		class="wrpstxzv"
-		:id="detailedView ? appearNote.id : null"
 		tabindex="-1"
 		:class="{
 			children: depth > 1,
@@ -16,8 +16,8 @@
 		<div v-if="conversation && depth > 1" class="line"></div>
 		<div
 			class="main"
-			@click="noteClick"
 			:style="{ cursor: expandOnNoteClick ? 'pointer' : '' }"
+			@click="noteClick"
 		>
 			<div class="avatar-container">
 				<MkAvatar class="avatar" :user="appearNote.user" />
@@ -32,9 +32,9 @@
 					<MkSubNoteContent
 						class="text"
 						:note="note"
-						:parentId="parentId"
+						:parent-id="parentId"
 						:conversation="conversation"
-						:detailedView="detailedView"
+						:detailed-view="detailedView"
 						@focusfooter="footerEl.focus()"
 					/>
 					<div v-if="translating || translation" class="translation">
@@ -117,9 +117,9 @@
 							appearNote.myReaction != null
 						"
 						ref="reactButton"
+						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 						class="button _button reacted"
 						@click.stop="undoReact(appearNote)"
-						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 					>
 						<i class="ph-minus ph-bold ph-lg"></i>
 					</button>
@@ -137,17 +137,17 @@
 		</div>
 		<template v-if="conversation">
 			<MkNoteSub
-				v-if="replyLevel < 11 && depth < 5"
 				v-for="reply in replies"
+				v-if="replyLevel < 11 && depth < 5"
 				:key="reply.id"
 				:note="reply"
 				class="reply"
 				:class="{ single: replies.length == 1 }"
 				:conversation="conversation"
 				:depth="replies.length == 1 ? depth : depth + 1"
-				:replyLevel="replyLevel + 1"
+				:reply-level="replyLevel + 1"
-				:parentId="appearNote.id"
+				:parent-id="appearNote.id"
-				:detailedView="detailedView"
+				:detailed-view="detailedView"
 			/>
 			<div v-else-if="replies.length > 0" class="more">
 				<div class="line"></div>
@@ -177,9 +177,9 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, ref, computed } from "vue";
+import { computed, inject, ref } from "vue";
 import type { Ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import XNoteHeader from "@/components/MkNoteHeader.vue";
 import MkSubNoteContent from "@/components/MkSubNoteContent.vue";
 import XReactionsViewer from "@/components/MkReactionsViewer.vue";
@@ -223,7 +223,7 @@ const props = withDefaults(
 	},
 );
 
-let note = ref(deepClone(props.note));
+const note = ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
 	if (what === "note") return i18n.ts.userSaysSomethingReason;
@@ -247,7 +247,7 @@ const menuButton = ref<HTMLElement>();
 const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const reactButton = ref<HTMLElement>();
-let appearNote = computed(() =>
+const appearNote = computed(() =>
 	isRenote ? (note.value.renote as misskey.entities.Note) : note.value,
 );
 const isDeleted = ref(false);
@@ -291,7 +291,7 @@ function react(viaKeyboard = false): void {
 		(reaction) => {
 			os.api("notes/reactions/create", {
 				noteId: appearNote.value.id,
-				reaction: reaction,
+				reaction,
 			});
 		},
 		() => {

packages/client/src/components/MkNotes.vue

@@ -12,7 +12,7 @@
 		</template>
 
 		<template #default="{ items: notes }">
-			<div class="giivymft" :class="{ noGap }" ref="tlEl">
+			<div ref="tlEl" class="giivymft" :class="{ noGap }">
 				<XList
 					ref="notes"
 					v-slot="{ item: note }"

packages/client/src/components/MkNotification.vue

@@ -219,7 +219,7 @@
 					<MkFollowButton
 						:user="notification.user"
 						:full="true"
-						:hideMenu="true"
+						:hide-menu="true"
 					/></div
 			></span>
 			<span
@@ -273,8 +273,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import XReactionTooltip from "@/components/MkReactionTooltip.vue";
@@ -310,8 +310,7 @@ const defaultReaction = ["⭐", "👍", "❤️"].includes(instance.defaultReact
 	? instance.defaultReaction
 	: "⭐";
 
-let readObserver: IntersectionObserver | undefined;
+let readObserver: IntersectionObserver | undefined, connection;
-let connection;
 
 onMounted(() => {
 	if (!props.notification.isRead) {

packages/client/src/components/MkNotificationSettingWindow.vue

@@ -41,7 +41,6 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 
-import {} from "vue";
 import { notificationTypes } from "firefish-js";
 import MkSwitch from "./form/switch.vue";
 import MkInfo from "./MkInfo.vue";
@@ -65,12 +64,12 @@ const props = withDefaults(
 	},
 );
 
-let includingTypes = computed(() => props.includingTypes || []);
+const includingTypes = computed(() => props.includingTypes || []);
 
 const dialog = ref<InstanceType<typeof XModalWindow>>();
 
-let typesMap = ref<Record<(typeof notificationTypes)[number], boolean>>({});
+const typesMap = ref<Record<(typeof notificationTypes)[number], boolean>>({});
-let useGlobalSetting = ref(
+const useGlobalSetting = ref(
 	(includingTypes.value === null || includingTypes.value.length === 0) &&
 		props.showGlobalToggle,
 );

packages/client/src/components/MkNotificationToast.vue

@@ -28,7 +28,7 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("high");
-let showing = ref(true);
+const showing = ref(true);
 
 onMounted(() => {
 	window.setTimeout(() => {

packages/client/src/components/MkNotifications.vue

@@ -26,7 +26,7 @@
 					"
 					:key="notification.id"
 					:note="notification.note"
-					:collapsedReply="
+					:collapsed-reply="
 						notification.type === 'reply' ||
 						(notification.type === 'mention' &&
 							notification.note.replyId != null)
@@ -46,9 +46,10 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, onMounted, computed, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
-import { notificationTypes } from "firefish-js";
+import type { notificationTypes } from "firefish-js";
-import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import type { Paging } from "@/components/MkPagination.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import XNotification from "@/components/MkNotification.vue";
 import XList from "@/components/MkDateSeparatedList.vue";
 import XNote from "@/components/MkNote.vue";

packages/client/src/components/MkPageWindow.vue

@@ -8,8 +8,8 @@
 		:buttons-left="buttonsLeft"
 		:buttons-right="buttonsRight"
 		:contextmenu="contextmenu"
-		@closed="$emit('closed')"
 		class="page-window"
+		@closed="$emit('closed')"
 	>
 		<template #header>
 			<template v-if="pageMetadata?.value">
@@ -30,7 +30,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide, ref, computed } from "vue";
+import type { ComputedRef } from "vue";
+import { computed, provide, ref } from "vue";
 import RouterView from "@/components/global/RouterView.vue";
 import XWindow from "@/components/MkWindow.vue";
 import { popout as _popout } from "@/scripts/popout";
@@ -39,7 +40,8 @@ import { url } from "@/config";
 import { mainRouter, routes } from "@/router";
 import { Router } from "@/nirax";
 import { i18n } from "@/i18n";
-import { PageMetadata, provideMetadataReceiver } from "@/scripts/page-metadata";
+import type { PageMetadata } from "@/scripts/page-metadata";
+import { provideMetadataReceiver } from "@/scripts/page-metadata";
 
 const props = defineProps<{
 	initialPath: string;
@@ -51,8 +53,8 @@ defineEmits<{
 
 const router = new Router(routes, props.initialPath);
 
-let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
+const pageMetadata = ref<null | ComputedRef<PageMetadata>>();
-let windowEl = ref<InstanceType<typeof XWindow>>();
+const windowEl = ref<InstanceType<typeof XWindow>>();
 const history = ref<{ path: string; key: any }[]>([
 	{
 		path: router.getCurrentPath(),

packages/client/src/components/MkPagination.vue

@@ -63,29 +63,22 @@
 </template>
 
 <script lang="ts" setup>
-import {
+import type { ComputedRef } from "vue";
-	computed,
+import { computed, isRef, onActivated, onDeactivated, ref, watch } from "vue";
-	ComputedRef,
+import type * as misskey from "firefish-js";
-	isRef,
-	onActivated,
-	onDeactivated,
-	ref,
-	watch,
-} from "vue";
-import * as misskey from "firefish-js";
 import * as os from "@/os";
 import {
-	onScrollTop,
-	isTopVisible,
-	getScrollPosition,
 	getScrollContainer,
+	getScrollPosition,
+	isTopVisible,
+	onScrollTop,
 } from "@/scripts/scroll";
 import MkButton from "@/components/MkButton.vue";
 import { i18n } from "@/i18n";
 
-export type Paging<
+export interface Paging<
 	E extends keyof misskey.Endpoints = keyof misskey.Endpoints,
-> = {
+> {
 	endpoint: E;
 	limit: number;
 	params?:
@@ -104,7 +97,7 @@ export type Paging<
 	reversed?: boolean;
 
 	offsetMode?: boolean;
-};
+}
 
 const SECOND_FETCH_LIMIT = 30;
 
@@ -123,7 +116,10 @@ const emit = defineEmits<{
 	(ev: "queue", count: number): void;
 }>();
 
-type Item = { id: string; [another: string]: unknown };
+interface Item {
+	id: string;
+	[another: string]: unknown;
+}
 
 const rootEl = ref<HTMLElement>();
 const items = ref<Item[]>([]);
@@ -207,12 +203,12 @@ const refresh = async (): void => {
 		})
 		.then(
 			(res) => {
-				let ids = items.value.reduce(
+				const ids = items.value.reduce(
 					(a, b) => {
 						a[b.id] = true;
 						return a;
 					},
-					{} as { [id: string]: boolean },
+					{} as Record<string, boolean>,
 				);
 
 				for (let i = 0; i < res.length; i++) {
@@ -364,7 +360,7 @@ const prepend = (item: Item): void => {
 					// オーバーフローしたら古いアイテムは捨てる
 					if (items.value.length >= props.displayLimit) {
 						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-						//items.value = items.value.slice(-props.displayLimit);
+						// items.value = items.value.slice(-props.displayLimit);
 						while (items.value.length >= props.displayLimit) {
 							items.value.shift();
 						}
@@ -394,7 +390,7 @@ const prepend = (item: Item): void => {
 			// オーバーフローしたら古いアイテムは捨てる
 			if (items.value.length >= props.displayLimit) {
 				// このやり方だとVue 3.2以降アニメーションが動かなくなる
-				//this.items = items.value.slice(0, props.displayLimit);
+				// this.items = items.value.slice(0, props.displayLimit);
 				while (items.value.length >= props.displayLimit) {
 					items.value.pop();
 				}

packages/client/src/components/MkPoll.vue

@@ -53,7 +53,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import { sum } from "@/scripts/array";
 import { pleaseLogin } from "@/scripts/please-login";
 import * as os from "@/os";

packages/client/src/components/MkPollEditor.vue

@@ -16,8 +16,8 @@
 				</MkInput>
 				<button
 					class="_button"
-					@click="remove(i)"
 					:aria-label="i18n.t('remove')"
+					@click="remove(i)"
 				>
 					<i class="ph-x ph-bold ph-lg"></i>
 				</button>

packages/client/src/components/MkPopupMenu.vue

@@ -5,9 +5,9 @@
 		:z-priority="'high'"
 		:src="src"
 		:transparent-bg="true"
+		tabindex="-1"
 		@click="modal?.close()"
 		@closed="emit('closed')"
-		tabindex="-1"
 	>
 		<MkMenu
 			:items="items"
@@ -28,7 +28,7 @@ import { ref } from "vue";
 
 import MkModal from "./MkModal.vue";
 import MkMenu from "./MkMenu.vue";
-import { MenuItem } from "@/types/menu";
+import type { MenuItem } from "@/types/menu";
 
 defineProps<{
 	items: MenuItem[];
@@ -43,7 +43,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = ref<InstanceType<typeof MkModal>>();
+const modal = ref<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkPostForm.vue

@@ -86,8 +86,8 @@
 				{{ i18n.ts.quoteAttached
 				}}<button
 					class="_button"
-					@click="quoteId = null"
 					:aria-label="i18n.t('removeQuote')"
+					@click="quoteId = null"
 				>
 					<i class="ph-x ph-bold ph-lg"></i>
 				</button>
@@ -99,8 +99,8 @@
 						<MkAcct :user="u" />
 						<button
 							class="_button"
-							@click="removeVisibleUser(u)"
 							:aria-label="i18n.t('removeRecipient')"
+							@click="removeVisibleUser(u)"
 						>
 							<i class="ph-x ph-bold ph-lg"></i>
 						</button>
@@ -234,16 +234,16 @@
 
 <script lang="ts" setup>
 import {
+	computed,
+	defineAsyncComponent,
 	inject,
-	watch,
 	nextTick,
 	onMounted,
-	defineAsyncComponent,
 	ref,
-	computed,
+	watch,
 } from "vue";
 import * as mfm from "mfm-js";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import autosize from "autosize";
 import insertTextAtCursor from "insert-text-at-cursor";
 import { length } from "stringz";
@@ -315,40 +315,42 @@ const cwInputEl = ref<HTMLInputElement | null>(null);
 const hashtagsInputEl = ref<HTMLInputElement | null>(null);
 const visibilityButton = ref<HTMLElement | null>(null);
 
-let posting = ref(false);
+const posting = ref(false);
-let text = ref(props.initialText ?? "");
+const text = ref(props.initialText ?? "");
-let files = ref(props.initialFiles ?? []);
+const files = ref(props.initialFiles ?? []);
-let poll = ref<{
+const poll = ref<{
 	choices: string[];
 	multiple: boolean;
 	expiresAt: string | null;
 	expiredAfter: string | null;
 } | null>(null);
-let useCw = ref(false);
+const useCw = ref(false);
-let showPreview = ref(false);
+const showPreview = ref(false);
-let cw = ref<string | null>(null);
+const cw = ref<string | null>(null);
-let localOnly = ref<boolean>(
+const localOnly = ref<boolean>(
 	props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility
 		? defaultStore.state.localOnly
 		: defaultStore.state.defaultNoteLocalOnly,
 );
-let visibility = ref(
+const visibility = ref(
 	props.initialVisibility ??
 		((defaultStore.state.rememberNoteVisibility
 			? defaultStore.state.visibility
 			: defaultStore.state
 					.defaultNoteVisibility) as (typeof misskey.noteVisibilities)[number]),
 );
-let visibleUsers = ref([]);
+const visibleUsers = ref([]);
 if (props.initialVisibleUsers) {
 	props.initialVisibleUsers.forEach(pushVisibleUser);
 }
-let autocomplete = ref(null);
+const autocomplete = ref(null);
-let draghover = ref(false);
+const draghover = ref(false);
-let quoteId = ref(null);
+const quoteId = ref(null);
-let hasNotSpecifiedMentions = ref(false);
+const hasNotSpecifiedMentions = ref(false);
-let recentHashtags = ref(JSON.parse(localStorage.getItem("hashtags") || "[]"));
+const recentHashtags = ref(
-let imeText = ref("");
+	JSON.parse(localStorage.getItem("hashtags") || "[]"),
+);
+const imeText = ref("");
 
 const typing = throttle(3000, () => {
 	if (props.channel) {
@@ -415,8 +417,8 @@ const maxTextLength = computed((): number => {
 const canPost = computed((): boolean => {
 	return (
 		!posting.value &&
-		(1 <= textLength.value ||
+		(textLength.value >= 1 ||
-			1 <= files.value.length ||
+			files.value.length >= 1 ||
 			!!poll.value ||
 			!!props.renote) &&
 		textLength.value <= maxTextLength.value &&
@@ -816,14 +818,14 @@ function onDrop(ev): void {
 		return;
 	}
 
-	//#region ドライブのファイル
+	// #region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
 		files.value.push(file);
 		ev.preventDefault();
 	}
-	//#endregion
+	// #endregion
 }
 
 function saveDraft() {
@@ -896,7 +898,7 @@ async function post() {
 		}
 	}
 
-	let token = undefined;
+	let token;
 
 	if (postAccount.value) {
 		const storedAccounts = await getAccounts();
@@ -976,7 +978,7 @@ function showActions(ev) {
 	);
 }
 
-let postAccount = ref<misskey.entities.UserDetailed | null>(null);
+const postAccount = ref<misskey.entities.UserDetailed | null>(null);
 
 function openAccountMenu(ev: MouseEvent) {
 	openAccountMenu_(

packages/client/src/components/MkPostFormAttaches.vue

@@ -8,9 +8,9 @@
 			delay-on-touch-only="true"
 		>
 			<div
-				class="file"
 				v-for="element in _files"
 				:key="element.id"
+				class="file"
 				@click="showFileMenu(element, $event)"
 				@contextmenu.prevent="showFileMenu(element, $event)"
 			>
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, computed } from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
@@ -105,10 +105,11 @@ async function describe(file) {
 		{
 			done: (result) => {
 				if (!result || result.canceled) return;
-				let comment = result.result.length === 0 ? null : result.result;
+				const comment =
+					result.result.length === 0 ? null : result.result;
 				os.api("drive/files/update", {
 					fileId: file.id,
-					comment: comment,
+					comment,
 				}).then(() => {
 					file.comment = comment;
 				});

packages/client/src/components/MkPostFormDialog.vue

@@ -21,8 +21,7 @@
 <script lang="ts" setup>
 import { shallowRef } from "vue";
 
-import {} from "vue";
+import type * as misskey from "firefish-js";
-import * as misskey from "firefish-js";
 import MkModal from "@/components/MkModal.vue";
 import MkPostForm from "@/components/MkPostForm.vue";
 
@@ -48,8 +47,8 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
-let form = shallowRef<InstanceType<typeof MkPostForm>>();
+const form = shallowRef<InstanceType<typeof MkPostForm>>();
 
 function onPosted() {
 	modal.value.close({

packages/client/src/components/MkPushNotificationAllowButton.vue

@@ -76,12 +76,12 @@ defineProps<{
 }>();
 
 // ServiceWorker registration
-let registration = ref<ServiceWorkerRegistration | undefined>();
+const registration = ref<ServiceWorkerRegistration | undefined>();
 // If this browser supports push notification
-let supported = ref(false);
+const supported = ref(false);
 // If this browser has already subscribed to push notification
-let pushSubscription = ref<PushSubscription | null>(null);
+const pushSubscription = ref<PushSubscription | null>(null);
-let pushRegistrationInServer = ref<
+const pushRegistrationInServer = ref<
 	| {
 			state?: string;
 			key?: string;
@@ -209,6 +209,6 @@ if (navigator.serviceWorker == null) {
 }
 
 defineExpose({
-	pushRegistrationInServer: pushRegistrationInServer,
+	pushRegistrationInServer,
 });
 </script>

packages/client/src/components/MkReactedUsers.vue

@@ -36,8 +36,8 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import MkReactionIcon from "@/components/MkReactionIcon.vue";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
 import * as os from "@/os";
@@ -46,10 +46,10 @@ const props = defineProps<{
 	noteId: misskey.entities.Note["id"];
 }>();
 
-let note = ref<misskey.entities.Note>();
+const note = ref<misskey.entities.Note>();
-let tab = ref<string>();
+const tab = ref<string>();
-let reactions = ref<string[]>();
+const reactions = ref<string[]>();
-let users = ref();
+const users = ref();
 
 watch(tab, async () => {
 	const res = await os.api("notes/reactions", {

packages/client/src/components/MkReactionsViewer.reaction.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import XDetails from "@/components/MkReactionsViewer.details.vue";
 import XReactionIcon from "@/components/MkReactionIcon.vue";
 import * as os from "@/os";

packages/client/src/components/MkReactionsViewer.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import { $i } from "@/account";
 import XReaction from "@/components/MkReactionsViewer.reaction.vue";
 

packages/client/src/components/MkRenoteButton.vue

@@ -12,9 +12,9 @@
 	</button>
 	<button
 		v-else
+		v-tooltip.noDelay.bottom="i18n.ts.disabled"
 		class="eddddedb _button"
 		disabled="true"
-		v-tooltip.noDelay.bottom="i18n.ts.disabled"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
 	</button>
@@ -31,7 +31,7 @@ import { $i } from "@/account";
 import { useTooltip } from "@/scripts/use-tooltip";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
-import { MenuItem } from "@/types/menu";
+import type { MenuItem } from "@/types/menu";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -70,7 +70,7 @@ useTooltip(buttonRef, async (showing) => {
 	);
 });
 
-let hasRenotedBefore = ref(false);
+const hasRenotedBefore = ref(false);
 os.api("notes/renotes", {
 	noteId: props.note.id,
 	userId: $i.id,
@@ -82,7 +82,7 @@ os.api("notes/renotes", {
 const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 	pleaseLogin();
 
-	let buttonActions: Array<MenuItem> = [];
+	const buttonActions: Array<MenuItem> = [];
 
 	if (props.note.visibility === "public") {
 		buttonActions.push({
@@ -191,7 +191,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 		});
 	}
 
-	if (canRenote) {
+	if (canRenote.value) {
 		buttonActions.push({
 			text: `${i18n.ts.renote} (${i18n.ts.local})`,
 			icon: "ph-hand-fist ph-bold ph-lg",

packages/client/src/components/MkShowMoreButton.vue

@@ -9,8 +9,8 @@
 	</button>
 </template>
 <script lang="ts" setup>
-import { i18n } from "@/i18n";
 import { ref } from "vue";
+import { i18n } from "@/i18n";
 
 const props = defineProps<{
 	modelValue: boolean;

packages/client/src/components/MkSignin.vue

@@ -160,7 +160,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, computed } from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
 import { toUnicode } from "punycode/";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -172,17 +172,17 @@ import { login } from "@/account";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
 
-let signing = ref(false);
+const signing = ref(false);
-let user = ref(null);
+const user = ref(null);
-let username = ref("");
+const username = ref("");
-let password = ref("");
+const password = ref("");
-let token = ref("");
+const token = ref("");
-let host = ref(toUnicode(configHost));
+const host = ref(toUnicode(configHost));
-let totpLogin = ref(false);
+const totpLogin = ref(false);
-let challengeData = ref(null);
+const challengeData = ref(null);
-let queryingKey = ref(false);
+const queryingKey = ref(false);
-let hCaptchaResponse = ref(null);
+const hCaptchaResponse = ref(null);
-let reCaptchaResponse = ref(null);
+const reCaptchaResponse = ref(null);
 
 const meta = computed(() => instance);
 

packages/client/src/components/MkSigninDialog.vue

@@ -14,7 +14,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import {} from "vue";
 import MkSignin from "@/components/MkSignin.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import { i18n } from "@/i18n";

packages/client/src/components/MkSignup.vue

@@ -284,7 +284,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
 
 import getPasswordStrength from "syuilo-password-strength";
 import { toUnicode } from "punycode/";
@@ -314,15 +314,15 @@ const emit = defineEmits<{
 
 const host = toUnicode(config.host);
 
-let hcaptcha = ref();
+const hcaptcha = ref();
-let recaptcha = ref();
+const recaptcha = ref();
 
-let username: string = ref("");
+const username: string = ref("");
-let password: string = ref("");
+const password: string = ref("");
-let retypedPassword: string = ref("");
+const retypedPassword: string = ref("");
-let invitationCode: string = ref("");
+const invitationCode: string = ref("");
-let email = ref("");
+const email = ref("");
-let usernameState:
+const usernameState:
 	| null
 	| "wait"
 	| "ok"
@@ -331,8 +331,8 @@ let usernameState:
 	| "invalid-format"
 	| "min-range"
 	| "max-range" = ref(null);
-let invitationState: null | "entered" = ref(null);
+const invitationState: null | "entered" = ref(null);
-let emailState:
+const emailState:
 	| null
 	| "wait"
 	| "ok"
@@ -343,12 +343,12 @@ let emailState:
 	| "unavailable:smtp"
 	| "unavailable"
 	| "error" = ref(null);
-let passwordStrength: "" | "low" | "medium" | "high" = ref("");
+const passwordStrength: "" | "low" | "medium" | "high" = ref("");
-let passwordRetypeState: null | "match" | "not-match" = ref(null);
+const passwordRetypeState: null | "match" | "not-match" = ref(null);
-let submitting: boolean = ref(false);
+const submitting: boolean = ref(false);
-let ToSAgreement: boolean = ref(false);
+const ToSAgreement: boolean = ref(false);
-let hCaptchaResponse = ref(null);
+const hCaptchaResponse = ref(null);
-let reCaptchaResponse = ref(null);
+const reCaptchaResponse = ref(null);
 
 const shouldDisableSubmitting = computed((): boolean => {
 	return (

packages/client/src/components/MkSparkle.vue

@@ -79,8 +79,8 @@ const el = ref<HTMLElement>();
 const width = ref(0);
 const height = ref(0);
 const colors = ["#eb6f92", "#9ccfd8", "#f6c177", "#f6c177", "#f6c177"];
-let stop = false;
+let stop = false,
-let ro: ResizeObserver | undefined;
+	ro: ResizeObserver | undefined;
 
 onMounted(() => {
 	if (!reducedMotion()) {

packages/client/src/components/MkStarButtonNoEmoji.vue

@@ -1,9 +1,9 @@
 <template>
 	<button
+		ref="buttonRef"
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
 		class="button _button"
 		:class="$style.root"
-		ref="buttonRef"
 		@click.stop="toggleStar($event)"
 	>
 		<span v-if="!reacted">

packages/client/src/components/MkSubNoteContent.vue

@@ -13,13 +13,13 @@
 		</MkA>
 		<MkA
 			v-else-if="!detailed && note.replyId"
+			v-tooltip="i18n.ts.jumpToPrevious"
 			:to="
 				detailedView
 					? `#${note.replyId}`
 					: `${notePage(note)}#${note.replyId}`
 			"
 			behavior="browser"
-			v-tooltip="i18n.ts.jumpToPrevious"
 			class="reply-icon"
 			@click.stop
 		>
@@ -46,18 +46,18 @@
 			}"
 		>
 			<XShowMoreButton
-				ref="showMoreButton"
 				v-if="isLong && collapsed"
+				ref="showMoreButton"
 				v-model="collapsed"
-				v-on:keydown="focusFooter"
+				@keydown="focusFooter"
 			></XShowMoreButton>
 			<XCwButton
-				ref="cwButton"
 				v-if="note.cw && !showContent"
+				ref="cwButton"
 				v-model="showContent"
 				:note="note"
-				v-on:keydown="focusFooter"
+				@keydown="focusFooter"
-				v-on:update:model-value="(val) => emit('expanded', val)"
+				@update:model-value="(val) => emit('expanded', val)"
 			/>
 			<div
 				class="body"
@@ -85,13 +85,13 @@
 					</MkA>
 					<MkA
 						v-else-if="!detailed && note.replyId"
+						v-tooltip="i18n.ts.jumpToPrevious"
 						:to="
 							detailedView
 								? `#${note.replyId}`
 								: `${notePage(note)}#${note.replyId}`
 						"
 						behavior="browser"
-						v-tooltip="i18n.ts.jumpToPrevious"
 						class="reply-icon"
 						@click.stop
 					>
@@ -139,7 +139,7 @@
 						(showMoreButton && collapsed)
 					"
 					tabindex="0"
-					v-on:focus="
+					@focus="
 						cwButton?.focus();
 						showMoreButton?.focus();
 					"
@@ -157,9 +157,9 @@
 		</div>
 		<MkButton
 			v-if="hasMfm && defaultStore.state.animatedMfm"
-			@click.stop="toggleMfm"
 			mini
 			rounded
+			@click.stop="toggleMfm"
 		>
 			<template v-if="disableMfm">
 				<i class="ph-play ph-bold"></i> {{ i18n.ts._mfm.play }}
@@ -177,7 +177,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import * as mfm from "mfm-js";
 import * as os from "@/os";
 import XNoteSimple from "@/components/MkNoteSimple.vue";
@@ -222,7 +222,7 @@ const urls = props.note.text
 	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
 	: null;
 
-let showContent = ref(false);
+const showContent = ref(false);
 
 const mfms = props.note.text
 	? extractMfmWithAnimation(mfm.parse(props.note.text))
@@ -230,7 +230,7 @@ const mfms = props.note.text
 
 const hasMfm = ref(mfms && mfms.length > 0);
 
-let disableMfm = ref(defaultStore.state.animatedMfm);
+const disableMfm = ref(defaultStore.state.animatedMfm);
 
 async function toggleMfm() {
 	if (disableMfm.value) {

packages/client/src/components/MkTagCloud.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch, onBeforeUnmount, ref } from "vue";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import tinycolor from "tinycolor2";
 
 const loaded = !!window.TagCanvas;
@@ -39,11 +39,11 @@ const idForTags = Array.from(Array(16))
 			],
 	)
 	.join("");
-let available = ref(false);
+const available = ref(false);
-let rootEl = ref<HTMLElement | null>(null);
+const rootEl = ref<HTMLElement | null>(null);
-let canvasEl = ref<HTMLCanvasElement | null>(null);
+const canvasEl = ref<HTMLCanvasElement | null>(null);
-let tagsEl = ref<HTMLElement | null>(null);
+const tagsEl = ref<HTMLElement | null>(null);
-let width = ref(300);
+const width = ref(300);
 
 watch(available, () => {
 	try {
@@ -56,7 +56,7 @@ watch(available, () => {
 			initial: [-0.03, -0.01],
 			frontSelect: true,
 			imageRadius: 8,
-			//dragControl: true,
+			// dragControl: true,
 			dragThreshold: 3,
 			wheelZoom: false,
 			reverse: true,

packages/client/src/components/MkTimeline.vue

@@ -12,8 +12,8 @@
 	<div v-if="queue > 0" class="new">
 		<button
 			class="_buttonPrimary _shadow"
-			@click="tlComponent.scrollTop()"
 			:class="{ instant: !$store.state.animation }"
+			@click="tlComponent.scrollTop()"
 		>
 			{{ i18n.ts.newNoteRecived }}
 			<i class="ph-arrow-up ph-bold"></i>
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, onUnmounted, ref } from "vue";
+import { computed, onUnmounted, provide, ref } from "vue";
 import XNotes from "@/components/MkNotes.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import { stream } from "@/stream";
@@ -45,7 +45,7 @@ const props = defineProps<{
 	sound?: boolean;
 }>();
 
-let queue = ref(0);
+const queue = ref(0);
 
 const emit = defineEmits<{
 	(ev: "note"): void;
@@ -83,13 +83,7 @@ const onChangeFollowing = () => {
 	}
 };
 
-let endpoint;
+let endpoint, query, connection, connection2, tlHint, tlHintClosed;
-let query;
-let connection;
-let connection2;
-
-let tlHint;
-let tlHintClosed;
 
 if (props.src === "antenna") {
 	endpoint = "antennas/notes";
@@ -223,7 +217,7 @@ function closeHint() {
 }
 
 const pagination = {
-	endpoint: endpoint,
+	endpoint,
 	limit: 10,
 	params: query,
 };

packages/client/src/components/MkToast.vue

@@ -30,7 +30,7 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("high");
-let showing = ref(true);
+const showing = ref(true);
 
 onMounted(() => {
 	window.setTimeout(() => {

packages/client/src/components/MkTokenGenerateWindow.vue

@@ -6,10 +6,10 @@
 		:with-ok-button="true"
 		:ok-button-disabled="false"
 		:can-close="false"
+		style="padding: 12px"
 		@close="dialog.close()"
 		@closed="$emit('closed')"
 		@ok="ok()"
-		style="padding: 12px"
 	>
 		<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
 		<div v-if="information" class="_section">
@@ -19,7 +19,7 @@
 			<div style="margin-bottom: 16px">
 				<b>{{ i18n.ts.name }}</b>
 			</div>
-			<MkInput style="margin-bottom: 16px" v-model="name" />
+			<MkInput v-model="name" style="margin-bottom: 16px" />
 		</div>
 		<div class="_section">
 			<div style="margin-bottom: 16px">
@@ -32,10 +32,10 @@
 				i18n.ts.enableAll
 			}}</MkButton>
 			<MkSwitch
-				style="margin-bottom: 6px"
 				v-for="kind in initialPermissions || kinds"
 				:key="kind"
 				v-model="permissions[kind]"
+				style="margin-bottom: 6px"
 				>{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch
 			>
 		</div>
@@ -45,7 +45,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import {} from "vue";
 import { permissions as kinds } from "firefish-js";
 import MkInput from "./form/input.vue";
 import MkSwitch from "./form/switch.vue";
@@ -75,8 +74,8 @@ const emit = defineEmits<{
 }>();
 
 const dialog = ref<InstanceType<typeof XModalWindow>>();
-let name = ref(props.initialName);
+const name = ref(props.initialName);
-let permissions = ref({});
+const permissions = ref({});
 
 if (props.initialPermissions) {
 	for (const kind of props.initialPermissions) {

packages/client/src/components/MkTutorialDialog.vue

@@ -230,7 +230,7 @@ const isGlobalTimelineAvailable =
 	!instance.disableGlobalTimeline ||
 	($i != null && ($i.isModerator || $i.isAdmin));
 
-let timelines = ["home"];
+const timelines = ["home"];
 
 if (isLocalTimelineAvailable) {
 	timelines.push("local");

packages/client/src/components/MkUpdated.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, ref } from "vue";
+import { ref, shallowRef } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import MkSparkle from "@/components/MkSparkle.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -43,8 +43,8 @@ import * as os from "@/os";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
-let newRelease = ref(false);
+const newRelease = ref(false);
-let data = ref(Object);
+const data = ref(Object);
 
 os.api("release").then((res) => {
 	data.value = res;

packages/client/src/components/MkUrlPreview.vue

@@ -20,10 +20,10 @@
 					<img :src="thumbnail" loading="lazy" />
 					<button
 						v-if="tweetId"
-						class="_button"
 						v-tooltip="
 							tweetExpanded ? i18n.ts.close : i18n.ts.expandTweet
 						"
+						class="_button"
 						@click.stop.prevent="tweetExpanded = !tweetExpanded"
 					>
 						<i
@@ -34,10 +34,10 @@
 					</button>
 					<button
 						v-else-if="player.url"
-						class="_button"
 						v-tooltip="
 							playerEnabled ? i18n.ts.close : i18n.ts.enablePlayer
 						"
+						class="_button"
 						@click.stop.prevent="playerEnabled = !playerEnabled"
 					>
 						<i
@@ -100,7 +100,7 @@
 
 <script lang="ts" setup>
 import { onUnmounted, ref } from "vue";
-import { url as local, lang } from "@/config";
+import { lang, url as local } from "@/config";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
 
@@ -117,22 +117,22 @@ const props = withDefaults(
 const self = props.url.startsWith(local);
 const attr = self ? "to" : "href";
 const target = self ? null : "_blank";
-let fetching = ref(true);
+const fetching = ref(true);
-let title = ref<string | null>(null);
+const title = ref<string | null>(null);
-let description = ref<string | null>(null);
+const description = ref<string | null>(null);
-let thumbnail = ref<string | null>(null);
+const thumbnail = ref<string | null>(null);
-let icon = ref<string | null>(null);
+const icon = ref<string | null>(null);
-let sitename = ref<string | null>(null);
+const sitename = ref<string | null>(null);
-let player = ref({
+const player = ref({
 	url: null,
 	width: null,
 	height: null,
 });
-let playerEnabled = ref(false);
+const playerEnabled = ref(false);
-let tweetId = ref<string | null>(null);
+const tweetId = ref<string | null>(null);
-let tweetExpanded = ref(props.detail);
+const tweetExpanded = ref(props.detail);
 const embedId = `embed${Math.random().toString().replace(/\D/, "")}`;
-let tweetHeight = ref(150);
+const tweetHeight = ref(150);
 
 const requestUrl = new URL(props.url);
 if (!["http:", "https:"].includes(requestUrl.protocol))

packages/client/src/components/MkUrlPreviewPopup.vue

@@ -28,8 +28,8 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("middle");
-let top = ref(0);
+const top = ref(0);
-let left = ref(0);
+const left = ref(0);
 
 onMounted(() => {
 	const rect = props.source.getBoundingClientRect();

packages/client/src/components/MkUserCardMini.vue

@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
 import { acct, userPage } from "@/filters/user";
@@ -43,7 +43,7 @@ const props = withDefaults(
 	},
 );
 
-let chartValues = ref<number[] | null>(null);
+const chartValues = ref<number[] | null>(null);
 
 if (props.withChart) {
 	os.apiGet("charts/user/notes", {

packages/client/src/components/MkUserInfo.vue

@@ -88,7 +88,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import XShowMoreButton from "@/components/MkShowMoreButton.vue";
 import MkNumber from "@/components/MkNumber.vue";
@@ -100,13 +100,13 @@ const props = defineProps<{
 	detailed?: boolean;
 }>();
 
-let isLong = ref(
+const isLong = ref(
 	props.detailed &&
 		props.user.description &&
 		(props.user.description.split("\n").length > 9 ||
 			props.user.description.length > 400),
 );
-let collapsed = ref(isLong.value);
+const collapsed = ref(isLong.value);
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkUserList.vue

@@ -27,7 +27,8 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import MkUserInfo from "@/components/MkUserInfo.vue";
-import MkPagination, { Paging } from "@/components/MkPagination.vue";
+import type { Paging } from "@/components/MkPagination.vue";
+import MkPagination from "@/components/MkPagination.vue";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{

packages/client/src/components/MkUserOnlineIndicator.vue

@@ -5,7 +5,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import { i18n } from "@/i18n";
 
 const props = defineProps<{

packages/client/src/components/MkUserPreview.vue

@@ -29,9 +29,9 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import MkUserInfo from "@/components/MkUserInfo.vue";
 import * as Acct from "firefish-js/built/acct";
 import type * as misskey from "firefish-js";
+import MkUserInfo from "@/components/MkUserInfo.vue";
 import * as os from "@/os";
 
 const props = defineProps<{
@@ -47,9 +47,9 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("middle");
-let user = ref<misskey.entities.UserDetailed | null>(null);
+const user = ref<misskey.entities.UserDetailed | null>(null);
-let top = ref(0);
+const top = ref(0);
-let left = ref(0);
+const left = ref(0);
 
 onMounted(() => {
 	if (typeof props.q === "object") {

packages/client/src/components/MkUserSelectDialog.vue

@@ -46,7 +46,7 @@
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
-							disableLink
+							disable-link
 						/>
 						<div class="body">
 							<MkUserName :user="user" class="name" />
@@ -74,7 +74,7 @@
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
-							disableLink
+							disable-link
 						/>
 						<div class="body">
 							<MkUserName :user="user" class="name" />
@@ -89,7 +89,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import MkInput from "@/components/form/input.vue";
 import FormSplit from "@/components/form/split.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
@@ -103,12 +103,12 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let username = ref("");
+const username = ref("");
-let host = ref("");
+const host = ref("");
-let users: misskey.entities.UserDetailed[] = ref([]);
+const users: misskey.entities.UserDetailed[] = ref([]);
-let recentUsers: misskey.entities.UserDetailed[] = ref([]);
+const recentUsers: misskey.entities.UserDetailed[] = ref([]);
-let selected: misskey.entities.UserDetailed | null = ref(null);
+const selected: misskey.entities.UserDetailed | null = ref(null);
-let dialogEl = ref();
+const dialogEl = ref();
 
 const search = () => {
 	if (username.value === "" && host.value === "") {

packages/client/src/components/MkUserSelectLocalDialog.vue

@@ -42,7 +42,7 @@
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
-							disableLink
+							disable-link
 						/>
 						<div class="body">
 							<MkUserName :user="user" class="name" />
@@ -70,7 +70,7 @@
 							:user="user"
 							class="avatar"
 							:show-indicator="true"
-							disableLink
+							disable-link
 						/>
 						<div class="body">
 							<MkUserName :user="user" class="name" />
@@ -85,7 +85,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import MkInput from "@/components/form/input.vue";
 import FormSplit from "@/components/form/split.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
@@ -99,11 +99,11 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let username = ref("");
+const username = ref("");
-let users: misskey.entities.UserDetailed[] = ref([]);
+const users: misskey.entities.UserDetailed[] = ref([]);
-let recentUsers: misskey.entities.UserDetailed[] = ref([]);
+const recentUsers: misskey.entities.UserDetailed[] = ref([]);
-let selected: misskey.entities.UserDetailed | null = ref(null);
+const selected: misskey.entities.UserDetailed | null = ref(null);
-let dialogEl = ref();
+const dialogEl = ref();
 
 const search = () => {
 	if (username.value === "") {

packages/client/src/components/MkUsersTooltip.vue

@@ -7,7 +7,7 @@
 	>
 		<div class="beaffaef">
 			<div v-for="u in users" :key="u.id" class="user">
-				<MkAvatar class="avatar" :user="u" disableLink />
+				<MkAvatar class="avatar" :user="u" disable-link />
 				<MkUserName class="name" :user="u" :nowrap="true" />
 			</div>
 			<div v-if="users.length < count" class="omitted">

packages/client/src/components/MkVisibility.vue

@@ -2,13 +2,13 @@
 	<span v-if="note.visibility !== 'public'" :class="$style.visibility">
 		<i
 			v-if="note.visibility === 'home'"
-			class="ph-house ph-bold ph-lg"
 			v-tooltip="i18n.ts._visibility.home"
+			class="ph-house ph-bold ph-lg"
 		></i>
 		<i
 			v-else-if="note.visibility === 'followers'"
-			class="ph-lock ph-bold ph-lg"
 			v-tooltip="i18n.ts._visibility.followers"
+			class="ph-lock ph-bold ph-lg"
 		></i>
 		<i
 			v-else-if="note.visibility === 'specified'"
@@ -18,8 +18,8 @@
 	</span>
 	<span v-if="note.localOnly" :class="$style.localOnly"
 		><i
-			class="ph-hand-fist ph-bold ph-lg"
 			v-tooltip="i18n.ts._visibility.localOnly"
+			class="ph-hand-fist ph-bold ph-lg"
 		></i
 	></span>
 </template>

packages/client/src/components/MkVisibilityPicker.vue

@@ -122,8 +122,8 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, watch, shallowRef, ref } from "vue";
+import { nextTick, ref, shallowRef, watch } from "vue";
-import * as misskey from "firefish-js";
+import type * as misskey from "firefish-js";
 import MkModal from "@/components/MkModal.vue";
 import { i18n } from "@/i18n";
 
@@ -147,8 +147,8 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let v = ref(props.currentVisibility);
+const v = ref(props.currentVisibility);
-let localOnly = ref(props.currentLocalOnly);
+const localOnly = ref(props.currentLocalOnly);
 
 watch(localOnly, () => {
 	emit("changeLocalOnly", localOnly.value);

packages/client/src/components/MkWaitingDialog.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, shallowRef } from "vue";
+import { shallowRef, watch } from "vue";
 import MkModal from "@/components/MkModal.vue";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();

packages/client/src/components/MkWidgets.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="vjoppmmu">
 		<template v-if="edit">
-			<header tabindex="-1" v-focus>
+			<header v-focus tabindex="-1">
 				<MkSelect
 					v-model="widgetAdderSelected"
 					style="margin-bottom: var(--margin)"
@@ -39,8 +39,8 @@
 						</button>
 						<button
 							class="remove _button"
-							@click.prevent.stop="removeWidget(element)"
 							:aria-label="i18n.t('close')"
+							@click.prevent.stop="removeWidget(element)"
 						>
 							<i class="ph-x ph-bold ph-lg"></i>
 						</button>
@@ -72,7 +72,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { computed, ref } from "vue";
 import { v4 as uuid } from "uuid";
 import { VueDraggable } from "vue-draggable-plus";
 import MkSelect from "@/components/form/select.vue";
@@ -81,11 +81,11 @@ import { widgets as widgetDefs } from "@/widgets";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
-type Widget = {
+interface Widget {
 	name: string;
 	id: string;
 	data: Record<string, any>;
-};
+}
 
 const props = defineProps<{
 	widgets: Widget[];
@@ -141,7 +141,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		["INPUT", "TEXTAREA", "IMG", "VIDEO", "CANVAS"].includes(
 			ev.target.tagName,
 		) ||
-		ev.target.attributes["contenteditable"]
+		ev.target.attributes.contenteditable
 	)
 		return;
 	if (window.getSelection()?.toString() !== "") return;

packages/client/src/components/MkWindow.vue

@@ -118,7 +118,7 @@
 import { onBeforeUnmount, onMounted, provide, ref } from "vue";
 import contains from "@/scripts/contains";
 import * as os from "@/os";
-import { MenuItem } from "@/types/menu";
+import type { MenuItem } from "@/types/menu";
 
 const minHeight = 50;
 const minWidth = 250;
@@ -170,14 +170,14 @@ const emit = defineEmits<{
 
 provide("inWindow", true);
 
-let rootEl = ref<HTMLElement | null>();
+const rootEl = ref<HTMLElement | null>();
-let showing = ref(true);
+const showing = ref(true);
-let beforeClickedAt = 0;
+let beforeClickedAt = 0,
-let maximized = ref(false);
+	maximized = ref(false),
-let unMaximizedTop = "";
+	unMaximizedTop = "",
-let unMaximizedLeft = "";
+	unMaximizedLeft = "",
-let unMaximizedWidth = "";
+	unMaximizedWidth = "",
-let unMaximizedHeight = "";
+	unMaximizedHeight = "";
 
 function close() {
 	showing.value = false;
@@ -280,8 +280,8 @@ function onHeaderMousedown(evt: MouseEvent) {
 	const windowHeight = main.offsetHeight;
 
 	function move(x: number, y: number) {
-		let moveLeft = x - moveBaseX;
+		let moveLeft = x - moveBaseX,
-		let moveTop = y - moveBaseY;
+			moveTop = y - moveBaseY;
 
 		// 下はみ出し
 		if (moveTop + windowHeight > browserHeight)

packages/client/src/components/form/checkbox.vue

@@ -24,7 +24,8 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref, ref } from "vue";
+import type { Ref } from "vue";
+import { ref, toRefs } from "vue";
 import * as os from "@/os";
 import Ripple from "@/components/MkRipple.vue";
 import { i18n } from "@/i18n";
@@ -38,7 +39,7 @@ const emit = defineEmits<{
 	(ev: "update:modelValue", v: boolean): void;
 }>();
 
-let button = ref<HTMLElement>();
+const button = ref<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;

packages/client/src/components/global/MkAvatar.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch, computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import type * as misskey from "firefish-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import { extractAvgColorFromBlurhash } from "@/scripts/extract-avg-color-from-blurhash";
@@ -74,7 +74,7 @@ function onClick(ev: MouseEvent) {
 	emit("click", ev);
 }
 
-let color = ref();
+const color = ref();
 
 watch(
 	() => props.user.avatarBlurhash,

packages/client/src/components/global/MkPageHeader.vue

@@ -122,13 +122,13 @@
 
 <script lang="ts" setup>
 import {
+	computed,
 	inject,
 	nextTick,
 	onMounted,
 	onUnmounted,
 	ref,
 	watch,
-	computed,
 } from "vue";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import { popupMenu } from "@/os";
@@ -178,7 +178,7 @@ const tabRefs = {};
 const tabHighlightEl = ref<HTMLElement | null>(null);
 const tabsEl = ref<HTMLElement | null>(null);
 const bg = ref(null);
-let narrow = ref(false);
+const narrow = ref(false);
 const hasTabs = computed(() => props.tabs && props.tabs.length > 0);
 const hasActions = computed(() => props.actions && props.actions.length > 0);
 const show = computed(() => {

packages/client/src/components/global/MkStickyContainer.vue

@@ -22,8 +22,8 @@ import { inject, onMounted, onUnmounted, provide, ref, watch } from "vue";
 const headerEl = ref<HTMLElement>();
 const bodyEl = ref<HTMLElement>();
 
-let headerHeight = ref<string | undefined>(),
+const headerHeight = ref<string | undefined>();
-	childStickyTop = ref(0);
+const childStickyTop = ref(0);
 const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
 provide(CURRENT_STICKY_TOP, childStickyTop);
 

packages/client/src/components/global/MkTime.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, computed } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { i18n } from "@/i18n";
 import { dateTimeFormat } from "@/scripts/intl-const";
 
@@ -37,7 +37,7 @@ const _time =
 const invalid = Number.isNaN(_time);
 const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
 
-let now = ref((props.origin ?? new Date()).getTime());
+const now = ref((props.origin ?? new Date()).getTime());
 const relative = computed<string>(() => {
 	if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない
 	if (invalid) return i18n.ts._ago.invalid;

packages/client/src/components/global/RouterView.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide, shallowRef, ref } from "vue";
+import { inject, onBeforeUnmount, provide, ref, shallowRef } from "vue";
 import type { Resolved, Router } from "@/nirax";
 import { defaultStore } from "@/store";
 
@@ -48,11 +48,11 @@ function resolveNested(current: Resolved, d = 0): Resolved | null {
 }
 
 const current = resolveNested(router.current)!;
-let currentPageComponent = shallowRef(current.route.component),
+const currentPageComponent = shallowRef(current.route.component);
-	currentPageProps = ref(current.props),
+const currentPageProps = ref(current.props);
-	key = ref(
+const key = ref(
 	current.route.path + JSON.stringify(Object.fromEntries(current.props)),
-	);
+);
 
 function onChange({ resolved, key: newKey }) {
 	const current = resolveNested(resolved);

packages/client/src/components/global/i18n.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent } from "vue";
+import { defineComponent, h } from "vue";
 
 export default defineComponent({
 	props: {

packages/client/src/components/index.ts

@@ -1,4 +1,4 @@
-import { App } from "vue";
+import type { App } from "vue";
 
 import Mfm from "./global/MkMisskeyFlavoredMarkdown.vue";
 import MkA from "./global/MkA.vue";

packages/client/src/components/mfm.ts

@@ -498,7 +498,7 @@ export default defineComponent({
 							// (see the issue #9816 on Codeberg)
 							if (token.props.content.slice(-6).toLowerCase() === "search") {
 								const sentinel = "#";
-								let ast2 = (isPlain ? mfm.parseSimple : mfm.parse)(
+								const ast2 = (isPlain ? mfm.parseSimple : mfm.parse)(
 									token.props.content.slice(0, -6) + sentinel,
 								);
 								if (

packages/client/src/components/page/page.block.vue

@@ -9,7 +9,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { defineComponent } from "vue";
 import XText from "./page.text.vue";
 import XSection from "./page.section.vue";
 import XImage from "./page.image.vue";
@@ -25,8 +26,8 @@ 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 type { Hpml } from "@/scripts/hpml/evaluator";
-import { Block } from "@/scripts/hpml/block";
+import type { Block } from "@/scripts/hpml/block";
 
 export default defineComponent({
 	components: {

packages/client/src/components/page/page.button.vue

@@ -7,11 +7,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, unref } from "vue";
+import type { PropType } from "vue";
+import { defineComponent, unref } from "vue";
 import MkButton from "../MkButton.vue";
 import * as os from "@/os";
-import { ButtonBlock } from "@/scripts/hpml/block";
+import type { ButtonBlock } from "@/scripts/hpml/block";
-import { Hpml } from "@/scripts/hpml/evaluator";
+import type { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {

packages/client/src/components/page/page.canvas.vue

@@ -5,9 +5,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from "vue";
+import type { PropType, Ref } from "vue";
-import { CanvasBlock } from "@/scripts/hpml/block";
+import { defineComponent, onMounted, ref } from "vue";
-import { Hpml } from "@/scripts/hpml/evaluator";
+import type { CanvasBlock } from "@/scripts/hpml/block";
+import type { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	props: {

packages/client/src/components/page/page.counter.vue

@@ -7,10 +7,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue";
+import type { PropType } from "vue";
+import { computed, defineComponent } from "vue";
 import MkButton from "../MkButton.vue";
-import { CounterVarBlock } from "@/scripts/hpml/block";
+import type { CounterVarBlock } from "@/scripts/hpml/block";
-import { Hpml } from "@/scripts/hpml/evaluator";
+import type { Hpml } from "@/scripts/hpml/evaluator";
 
 export default defineComponent({
 	components: {