Merge remote-tracking branch 'refs/remotes/misskey-dev/master'

Conflicts:
	package.json
	packages/client/src/components/MkButton.vue
	packages/client/src/components/ui/button.vue
	packages/client/src/pages/timeline.tutorial.vue

packages/client/src/account.ts

@@ -146,7 +146,7 @@ export async function openAccountMenu(opts: {
 	onChoose?: (account: misskey.entities.UserDetailed) => void;
 }, ev: MouseEvent) {
 	function showSigninDialog() {
-		popup(defineAsyncComponent(() => import('@/components/signin-dialog.vue')), {}, {
+		popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
 			done: res => {
 				addAccount(res.id, res.i);
 				success();
@@ -155,7 +155,7 @@ export async function openAccountMenu(opts: {
 	}
 
 	function createAccount() {
-		popup(defineAsyncComponent(() => import('@/components/signup-dialog.vue')), {}, {
+		popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
 			done: res => {
 				addAccount(res.id, res.i);
 				switchAccountWithToken(res.i);

packages/client/src/components/MkAbuseReport.vue

@@ -36,9 +36,9 @@
 </template>
 
 <script lang="ts" setup>
-import MkButton from '@/components/ui/button.vue';
+import MkButton from '@/components/MkButton.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import MkKeyValue from '@/components/key-value.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 import { acct, userPage } from '@/filters/user';
 import * as os from '@/os';
 import { i18n } from '@/i18n';

packages/client/src/components/MkAbuseReportWindow.vue

@@ -25,9 +25,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XWindow from '@/components/ui/window.vue';
+import XWindow from '@/components/MkWindow.vue';
 import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/ui/button.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 

packages/client/src/components/MkAnalogClock.vue

@@ -26,6 +26,7 @@
 		</text>
 	</template>
 
+	<!--
 	<line
 		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
@@ -35,6 +36,20 @@
 		:stroke-width="thickness / 2"
 		stroke-linecap="round"
 	/>
+	-->
+
+	<line
+		class="s"
+		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
+		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
+		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
+		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
+		:stroke="sHandColor"
+		:stroke-width="thickness / 2"
+		:style="`transform: rotateZ(${sAngle}rad)`"
+		stroke-linecap="round"
+	/>
 
 	<line
 		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
@@ -59,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, shallowRef } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
 import tinycolor from 'tinycolor2';
 import { globalEvents } from '@/events.js';
 
@@ -84,6 +99,7 @@ const props = withDefaults(defineProps<{
 	twentyfour?: boolean;
 	graduations?: 'none' | 'dots' | 'numbers';
 	fadeGraduations?: boolean;
+	sAnimation?: 'none' | 'elastic' | 'easeOut';
 }>(), {
 	numbers: false,
 	thickness: 0.1,
@@ -91,6 +107,7 @@ const props = withDefaults(defineProps<{
 	twentyfour: false,
 	graduations: 'dots',
 	fadeGraduations: true,
+	sAnimation: 'elastic',
 });
 
 const graduationsMajor = computed(() => {
@@ -125,6 +142,8 @@ let s = $ref<number>(0);
 let hAngle = $ref<number>(0);
 let mAngle = $ref<number>(0);
 let sAngle = $ref<number>(0);
+let disableSAnimate = $ref(false);
+let sOneRound = false;
 
 function tick() {
 	const now = new Date();
@@ -134,7 +153,21 @@ function tick() {
 	h = now.getHours();
 	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
 	mAngle = Math.PI * (m + s / 60) / 30;
-	sAngle = Math.PI * s / 30;
+	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
+		sAngle = Math.PI * 60 / 30;
+		window.setTimeout(() => {
+			disableSAnimate = true;
+			window.setTimeout(() => {
+				sAngle = 0;
+				window.setTimeout(() => {
+					disableSAnimate = false;
+				}, 100);
+			}, 100);
+		}, 700);
+	} else {
+		sAngle = Math.PI * s / 30;
+	}
+	sOneRound = s === 59;
 }
 
 tick();
@@ -175,5 +208,18 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .mbcofsoe {
 	display: block;
+
+	> .s {
+		will-change: transform;
+		transform-origin: 50% 50%;
+
+		&.animate.elastic {
+			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+		}
+
+		&.animate.easeOut {
+			transition: transform .7s cubic-bezier(0,.7,.3,1);
+		}
+	}
 }
 </style>

packages/client/src/components/MkButton.vue

@@ -0,0 +1,226 @@
+<template>
+<button
+	v-if="!link" class="bghgjjyj _button"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:type="type"
+	@click="emit('click', $event)"
+	@mousedown="onMousedown"
+>
+	<div ref="ripples" class="ripples"></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+</button>
+<MkA
+	v-else class="bghgjjyj _button"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:to="to"
+	@mousedown="onMousedown"
+>
+	<div ref="ripples" class="ripples"></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted } from 'vue';
+
+const props = defineProps<{
+	type?: 'button' | 'submit' | 'reset';
+	primary?: boolean;
+	gradate?: boolean;
+	rounded?: boolean;
+	inline?: boolean;
+	link?: boolean;
+	to?: string;
+	autofocus?: boolean;
+	wait?: boolean;
+	danger?: boolean;
+	full?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'click', payload: MouseEvent): void;
+}>();
+
+let el = $ref<HTMLElement | null>(null);
+let ripples = $ref<HTMLElement | null>(null);
+
+onMounted(() => {
+	if (props.autofocus) {
+		nextTick(() => {
+			el!.focus();
+		});
+	}
+});
+
+function distance(p, q): number {
+	return Math.hypot(p.x - q.x, p.y - q.y);
+}
+
+function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
+	const origin = { x: circleCenterX, y: circleCenterY };
+	const dist1 = distance({ x: 0, y: 0 }, origin);
+	const dist2 = distance({ x: boxW, y: 0 }, origin);
+	const dist3 = distance({ x: 0, y: boxH }, origin);
+	const dist4 = distance({ x: boxW, y: boxH }, origin);
+	return Math.max(dist1, dist2, dist3, dist4) * 2;
+}
+
+function onMousedown(evt: MouseEvent): void {
+	const target = evt.target! as HTMLElement;
+	const rect = target.getBoundingClientRect();
+
+	const ripple = document.createElement('div');
+	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
+	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
+
+	ripples!.appendChild(ripple);
+
+	const circleCenterX = evt.clientX - rect.left;
+	const circleCenterY = evt.clientY - rect.top;
+
+	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
+
+	window.setTimeout(() => {
+		ripple.style.transform = 'scale(' + (scale / 2) + ')';
+	}, 1);
+	window.setTimeout(() => {
+		ripple.style.transition = 'all 1s ease';
+		ripple.style.opacity = '0';
+	}, 1000);
+	window.setTimeout(() => {
+		if (ripples) ripples.removeChild(ripple);
+	}, 2000);
+}
+</script>
+
+<style lang="scss" scoped>
+.bghgjjyj {
+	position: relative;
+	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
+	display: block;
+	min-width: 100px;
+	width: max-content;
+	padding: 8px 16px;
+	text-align: center;
+	font-weight: normal;
+	font-size: 1em;
+	box-shadow: none;
+	text-decoration: none;
+	background: var(--buttonBg);
+	border-radius: 5px;
+	overflow: clip;
+	box-sizing: border-box;
+	transition: background 0.1s ease;
+
+	&:not(:disabled):hover {
+		background: var(--buttonHoverBg);
+	}
+
+	&:not(:disabled):active {
+		background: var(--buttonHoverBg);
+	}
+
+	&.full {
+		width: 100%;
+	}
+
+	&.rounded {
+		border-radius: 999px;
+	}
+
+	&.primary {
+		font-weight: bold;
+		color: var(--fgOnAccent) !important;
+		background: var(--accent);
+
+		&:not(:disabled):hover {
+			background: var(--X8);
+		}
+
+		&:not(:disabled):active {
+			background: var(--X8);
+		}
+	}
+
+	&.gradate {
+		font-weight: bold;
+		color: var(--fgOnAccent) !important;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+
+		&:not(:disabled):hover {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
+		}
+
+		&:not(:disabled):active {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
+		}
+	}
+
+	&.danger {
+		color: #ff2a2a;
+
+		&.primary {
+			color: #fff;
+			background: #ff2a2a;
+
+			&:not(:disabled):hover {
+				background: #ff4242;
+			}
+
+			&:not(:disabled):active {
+				background: #d42e2e;
+			}
+		}
+	}
+
+	&:disabled {
+		opacity: 0.7;
+	}
+
+	&:focus-visible {
+		outline: solid 2px var(--focus);
+		outline-offset: 2px;
+	}
+
+	&.inline {
+		display: inline-block;
+		width: auto;
+		min-width: 100px;
+	}
+
+	> .ripples {
+		position: absolute;
+		z-index: 0;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 6px;
+		overflow: hidden;
+
+		::v-deep(div) {
+			position: absolute;
+			width: 2px;
+			height: 2px;
+			border-radius: 100%;
+			background: rgba(0, 0, 0, 0.1);
+			opacity: 1;
+			transform: scale(1);
+			transition: all 0.5s cubic-bezier(0,.5,0,1);
+		}
+	}
+
+	&.primary > .ripples ::v-deep(div) {
+		background: rgba(0, 0, 0, 0.15);
+	}
+
+	> .content {
+		position: relative;
+		z-index: 1;
+	}
+}
+</style>

packages/client/src/components/MkChartTooltip.vue

@@ -14,7 +14,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkTooltip from './ui/tooltip.vue';
+import MkTooltip from './MkTooltip.vue';
 
 const props = defineProps<{
 	showing: boolean;

packages/client/src/components/MkCode.vue

@@ -11,5 +11,5 @@ defineProps<{
 	inline?: boolean;
 }>();
 
-const XCode = defineAsyncComponent(() => import('./code-core.vue'));
+const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
 </script>

packages/client/src/components/MkContextMenu.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount } from 'vue';
-import MkMenu from './menu.vue';
+import MkMenu from './MkMenu.vue';
 import { MenuItem } from './types/menu.vue';
 import contains from '@/scripts/contains';
 import * as os from '@/os';

packages/client/src/components/MkCropperDialog.vue

@@ -30,7 +30,7 @@ import { nextTick, onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/ui/modal-window.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';

packages/client/src/components/MkDateSeparatedList.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, h, PropType, TransitionGroup } from 'vue';
-import MkAd from '@/components/global/ad.vue';
+import MkAd from '@/components/global/MkAd.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 
@@ -13,22 +13,22 @@ export default defineComponent({
 		direction: {
 			type: String,
 			required: false,
-			default: 'down'
+			default: 'down',
 		},
 		reversed: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		noGap: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 		ad: {
 			type: Boolean,
 			required: false,
-			default: false
+			default: false,
 		},
 	},
 
@@ -38,7 +38,7 @@ export default defineComponent({
 			const month = new Date(time).getMonth() + 1;
 			return i18n.t('monthAndDay', {
 				month: month.toString(),
-				day: date.toString()
+				day: date.toString(),
 			});
 		}
 
@@ -48,7 +48,7 @@ export default defineComponent({
 			if (!slots || !slots.default) return;
 
 			const el = slots.default({
-				item: item
+				item: item,
 			})[0];
 			if (el.key == null && item.id) el.key = item.id;
 
@@ -60,20 +60,20 @@ export default defineComponent({
 					class: 'separator',
 					key: item.id + ':separator',
 				}, h('p', {
-					class: 'date'
+					class: 'date',
 				}, [
 					h('span', [
 						h('i', {
 							class: 'fas fa-angle-up icon',
 						}),
-						getDateText(item.createdAt)
+						getDateText(item.createdAt),
 					]),
 					h('span', [
 						getDateText(props.items[i + 1].createdAt),
 						h('i', {
 							class: 'fas fa-angle-down icon',
-						})
-					])
+						}),
+					]),
 				]));
 
 				return [el, separator];
@@ -93,16 +93,16 @@ export default defineComponent({
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
 			defaultStore.state.animation ? {
-					class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-					name: 'list',
-					tag: 'div',
-					'data-direction': props.direction,
-					'data-reversed': props.reversed ? 'true' : 'false',
-				} : {
-					class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				},
+				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+				name: 'list',
+				tag: 'div',
+				'data-direction': props.direction,
+				'data-reversed': props.reversed ? 'true' : 'false',
+			} : {
+				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+			},
 			{ default: renderChildren });
-	}
+	},
 });
 </script>
 

packages/client/src/components/MkDialog.vue

@@ -40,8 +40,8 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import MkModal from '@/components/ui/modal.vue';
-import MkButton from '@/components/ui/button.vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSelect from '@/components/form/select.vue';
 import { i18n } from '@/i18n';

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

@@ -1,5 +1,6 @@
 <template>
-<div class="ncvczrfv"
+<div
+	class="ncvczrfv"
 	:class="{ isSelected }"
 	draggable="true"
 	:title="title"
@@ -34,7 +35,7 @@
 import { computed, defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
-import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -63,31 +64,31 @@ function getMenu() {
 	return [{
 		text: i18n.ts.rename,
 		icon: 'fas fa-i-cursor',
-		action: rename
+		action: rename,
 	}, {
 		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
 		icon: props.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
-		action: toggleSensitive
+		action: toggleSensitive,
 	}, {
 		text: i18n.ts.describeFile,
 		icon: 'fas fa-i-cursor',
-		action: describe
+		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
 		icon: 'fas fa-link',
-		action: copyUrl
+		action: copyUrl,
 	}, {
 		type: 'a',
 		href: props.file.url,
 		target: '_blank',
 		text: i18n.ts.download,
 		icon: 'fas fa-download',
-		download: props.file.name
+		download: props.file.name,
 	}, null, {
 		text: i18n.ts.delete,
 		icon: 'fas fa-trash-alt',
 		danger: true,
-		action: deleteFile
+		action: deleteFile,
 	}];
 }
 
@@ -127,35 +128,35 @@ function rename() {
 		if (canceled) return;
 		os.api('drive/files/update', {
 			fileId: props.file.id,
-			name: name
+			name: name,
 		});
 	});
 }
 
 function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
 		title: i18n.ts.describeFile,
 		input: {
 			placeholder: i18n.ts.inputNewDescription,
 			default: props.file.comment != null ? props.file.comment : '',
 		},
-		image: props.file
+		image: props.file,
 	}, {
 		done: result => {
 			if (!result || result.canceled) return;
 			let comment = result.result;
 			os.api('drive/files/update', {
 				fileId: props.file.id,
-				comment: comment.length === 0 ? null : comment
+				comment: comment.length === 0 ? null : comment,
 			});
-		}
+		},
 	}, 'closed');
 }
 
 function toggleSensitive() {
 	os.api('drive/files/update', {
 		fileId: props.file.id,
-		isSensitive: !props.file.isSensitive
+		isSensitive: !props.file.isSensitive,
 	});
 }
 
@@ -176,7 +177,7 @@ async function deleteFile() {
 
 	if (canceled) return;
 	os.api('drive/files/delete', {
-		fileId: props.file.id
+		fileId: props.file.id,
 	});
 }
 </script>

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

@@ -1,5 +1,6 @@
 <template>
-<div class="rghtznwe"
+<div
+	class="rghtznwe"
 	:class="{ draghover }"
 	draggable="true"
 	:title="title"
@@ -123,7 +124,7 @@ function onDrop(ev: DragEvent) {
 		emit('removeFile', file.id);
 		os.api('drive/files/update', {
 			fileId: file.id,
-			folderId: props.folder.id
+			folderId: props.folder.id,
 		});
 	}
 	//#endregion
@@ -139,7 +140,7 @@ function onDrop(ev: DragEvent) {
 		emit('removeFolder', folder.id);
 		os.api('drive/folders/update', {
 			folderId: folder.id,
-			parentId: props.folder.id
+			parentId: props.folder.id,
 		}).then(() => {
 			// noop
 		}).catch(err => {
@@ -147,13 +148,13 @@ function onDrop(ev: DragEvent) {
 				case 'detected-circular-definition':
 					os.alert({
 						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder
+						text: i18n.ts.circularReferenceFolder,
 					});
 					break;
 				default:
 					os.alert({
 						type: 'error',
-						text: i18n.ts.somethingHappened
+						text: i18n.ts.somethingHappened,
 					});
 			}
 		});
@@ -186,19 +187,19 @@ function rename() {
 	os.inputText({
 		title: i18n.ts.renameFolder,
 		placeholder: i18n.ts.inputNewFolderName,
-		default: props.folder.name
+		default: props.folder.name,
 	}).then(({ canceled, result: name }) => {
 		if (canceled) return;
 		os.api('drive/folders/update', {
 			folderId: props.folder.id,
-			name: name
+			name: name,
 		});
 	});
 }
 
 function deleteFolder() {
 	os.api('drive/folders/delete', {
-		folderId: props.folder.id
+		folderId: props.folder.id,
 	}).then(() => {
 		if (defaultStore.state.uploadFolder === props.folder.id) {
 			defaultStore.set('uploadFolder', null);
@@ -209,13 +210,13 @@ function deleteFolder() {
 				os.alert({
 					type: 'error',
 					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders
+					text: i18n.ts.hasChildFilesOrFolders,
 				});
 				break;
 			default:
 				os.alert({
 					type: 'error',
-					text: i18n.ts.unableToDelete
+					text: i18n.ts.unableToDelete,
 				});
 		}
 	});
@@ -230,11 +231,11 @@ function onContextmenu(ev: MouseEvent) {
 		text: i18n.ts.openInWindow,
 		icon: 'fas fa-window-restore',
 		action: () => {
-			os.popup(defineAsyncComponent(() => import('./drive-window.vue')), {
-				initialFolder: props.folder
+			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
+				initialFolder: props.folder,
 			}, {
 			}, 'closed');
-		}
+		},
 	}, null, {
 		text: i18n.ts.rename,
 		icon: 'fas fa-i-cursor',

packages/client/src/components/MkDrive.vue

@@ -90,10 +90,10 @@
 <script lang="ts" setup>
 import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import XNavFolder from './drive.nav-folder.vue';
-import XFolder from './drive.folder.vue';
-import XFile from './drive.file.vue';
-import MkButton from './ui/button.vue';
+import MkButton from './MkButton.vue';
+import XNavFolder from '@/components/MkDrive.navFolder.vue';
+import XFolder from '@/components/MkDrive.folder.vue';
+import XFile from '@/components/MkDrive.file.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { defaultStore } from '@/store';

packages/client/src/components/MkDriveFileThumbnail.vue

@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 
 const props = defineProps<{
 	file: Misskey.entities.DriveFile;

packages/client/src/components/MkDriveSelectDialog.vue

@@ -1,5 +1,6 @@
 <template>
-<XModalWindow ref="dialog"
+<XModalWindow
+	ref="dialog"
 	:width="800"
 	:height="500"
 	:with-ok-button="true"
@@ -20,8 +21,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from './drive.vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
+import XDrive from '@/components/MkDrive.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
 

packages/client/src/components/MkDriveWindow.vue

@@ -1,5 +1,6 @@
 <template>
-<XWindow ref="window"
+<XWindow
+	ref="window"
 	:initial-width="800"
 	:initial-height="500"
 	:can-resize="true"
@@ -15,8 +16,8 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from './drive.vue';
-import XWindow from '@/components/ui/window.vue';
+import XDrive from '@/components/MkDrive.vue';
+import XWindow from '@/components/MkWindow.vue';
 import { i18n } from '@/i18n';
 
 defineProps<{

packages/client/src/components/MkEmojiPicker.vue

@@ -80,10 +80,10 @@
 <script lang="ts" setup>
 import { ref, computed, watch, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
-import XSection from './emoji-picker.section.vue';
+import XSection from '@/components/MkEmojiPicker.section.vue';
 import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import Ripple from '@/components/ripple.vue';
+import Ripple from '@/components/MkRipple.vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { deviceKind } from '@/scripts/device-kind';

packages/client/src/components/MkEmojiPickerDialog.vue

@@ -27,8 +27,8 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import MkModal from '@/components/ui/modal.vue';
-import MkEmojiPicker from '@/components/emoji-picker.vue';
+import MkModal from '@/components/MkModal.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { defaultStore } from '@/store';
 
 withDefaults(defineProps<{

packages/client/src/components/MkEmojiPickerWindow.vue

@@ -13,8 +13,8 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkWindow from '@/components/ui/window.vue';
-import MkEmojiPicker from '@/components/emoji-picker.vue';
+import MkWindow from '@/components/MkWindow.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 
 withDefaults(defineProps<{
 	src?: HTMLElement;

packages/client/src/components/MkFileListForAdmin.vue

@@ -35,8 +35,8 @@
 import { computed } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
 import MkSwitch from '@/components/ui/switch.vue';
-import MkPagination from '@/components/ui/pagination.vue';
-import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import bytes from '@/filters/bytes';
 import * as os from '@/os';
 import { i18n } from '@/i18n';

packages/client/src/components/MkForgotPassword.vue

@@ -33,8 +33,8 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
-import MkButton from '@/components/ui/button.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import * as os from '@/os';
 import { instance } from '@/instance';

packages/client/src/components/MkFormDialog.vue

@@ -61,9 +61,9 @@ import FormTextarea from './form/textarea.vue';
 import FormSwitch from './form/switch.vue';
 import FormSelect from './form/select.vue';
 import FormRange from './form/range.vue';
-import MkButton from './ui/button.vue';
+import MkButton from './MkButton.vue';
 import FormRadios from './form/radios.vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
 
 export default defineComponent({
 	components: {

packages/client/src/components/MkFormula.vue

@@ -1,5 +1,5 @@
 <template>
-<XFormula :formula="formula" :block="block" />
+<XFormula :formula="formula" :block="block"/>
 </template>
 
 <script lang="ts">
@@ -8,17 +8,17 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XFormula: defineAsyncComponent(() => import('./formula-core.vue'))
+		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
 	},
 	props: {
 		formula: {
 			type: String,
-			required: true
+			required: true,
 		},
 		block: {
 			type: Boolean,
-			required: true
-		}
-	}
+			required: true,
+		},
+	},
 });
 </script>

packages/client/src/components/MkGalleryPostPreview.vue

@@ -14,26 +14,15 @@
 </MkA>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import { userName } from '@/filters/user';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		ImgWithBlurhash
-	},
-	props: {
-		post: {
-			type: Object,
-			required: true
-		},
-	},
-	methods: {
-		userName
-	}
-});
+const props = defineProps<{
+	post: any;
+}>();
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkImageViewer.vue

@@ -17,7 +17,7 @@ import { } from 'vue';
 import * as misskey from 'misskey-js';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
-import MkModal from '@/components/ui/modal.vue';
+import MkModal from '@/components/MkModal.vue';
 
 const props = withDefaults(defineProps<{
 	image: misskey.entities.DriveFile;

packages/client/src/components/MkInfo.vue

@@ -6,23 +6,12 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
+<script lang="ts" setup>
+import { } from 'vue';
 
-export default defineComponent({
-	props: {
-		warn: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
-	},
-	data() {
-		return {
-		};
-	}
-});
+const props = defineProps<{
+	warn?: boolean;
+}>();
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkInstanceCardMini.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import * as misskey from 'misskey-js';
-import MkMiniChart from '@/components/mini-chart.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 
 const props = defineProps<{

packages/client/src/components/MkInstanceStats.vue

@@ -68,7 +68,7 @@ import {
 	DoughnutController,
 } from 'chart.js';
 import MkSelect from '@/components/form/select.vue';
-import MkChart from '@/components/chart.vue';
+import MkChart from '@/components/MkChart.vue';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';
 import { i18n } from '@/i18n';

packages/client/src/components/MkLaunchPad.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkModal from '@/components/ui/modal.vue';
+import MkModal from '@/components/MkModal.vue';
 import { navbarItemDef } from '@/navbar';
 import { instanceName } from '@/config';
 import { defaultStore } from '@/store';

packages/client/src/components/MkLink.vue

@@ -26,7 +26,7 @@ const target = self ? null : '_blank';
 const el = $ref();
 
 useTooltip($$(el), (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/url-preview-popup.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
 		showing,
 		url: props.url,
 		source: el,

packages/client/src/components/MkMediaCaption.vue

@@ -30,8 +30,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { length } from 'stringz';
-import MkModal from '@/components/ui/modal.vue';
-import MkButton from '@/components/ui/button.vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
 

packages/client/src/components/MkMediaImage.vue

@@ -24,7 +24,7 @@
 import { watch } from 'vue';
 import * as misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
 
 const props = defineProps<{

packages/client/src/components/MkMediaList.vue

@@ -18,9 +18,9 @@ import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
 import 'photoswipe/style.css';
-import XBanner from './media-banner.vue';
-import XImage from './media-image.vue';
-import XVideo from './media-video.vue';
+import XBanner from '@/components/MkMediaBanner.vue';
+import XImage from '@/components/MkMediaImage.vue';
+import XVideo from '@/components/MkMediaVideo.vue';
 import * as os from '@/os';
 import { FILE_TYPE_BROWSERSAFE } from '@/const';
 import { defaultStore } from '@/store';

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

@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import { on } from 'events';
 import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
-import MkMenu from './menu.vue';
+import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 import * as os from '@/os';
 

packages/client/src/components/MkMenu.vue

@@ -63,7 +63,7 @@ import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 
-const XChild = defineAsyncComponent(() => import('./menu.child.vue'));
+const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
 
 const props = defineProps<{
 	items: MenuItem[];

packages/client/src/components/MkModalPageWindow.vue

@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import { ComputedRef, provide } from 'vue';
-import MkModal from '@/components/ui/modal.vue';
+import MkModal from '@/components/MkModal.vue';
 import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';

packages/client/src/components/MkModalWindow.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
-import MkModal from './modal.vue';
+import MkModal from './MkModal.vue';
 
 const props = withDefaults(defineProps<{
 	withOkButton: boolean;

packages/client/src/components/MkNote.vue

@@ -106,17 +106,17 @@
 import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
-import MkNoteSub from './MkNoteSub.vue';
-import XNoteHeader from './note-header.vue';
-import XNoteSimple from './note-simple.vue';
-import XReactionsViewer from './reactions-viewer.vue';
-import XMediaList from './media-list.vue';
-import XCwButton from './cw-button.vue';
-import XPoll from './poll.vue';
-import XRenoteButton from './renote-button.vue';
-import MkUrlPreview from '@/components/url-preview.vue';
-import MkInstanceTicker from '@/components/instance-ticker.vue';
-import MkVisibility from '@/components/visibility.vue';
+import MkNoteSub from '@/components/MkNoteSub.vue';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XMediaList from '@/components/MkMediaList.vue';
+import XCwButton from '@/components/MkCwButton.vue';
+import XPoll from '@/components/MkPoll.vue';
+import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { focusPrev, focusNext } from '@/scripts/focus';
 import { checkWordMute } from '@/scripts/check-word-mute';

packages/client/src/components/MkNoteDetailed.vue

@@ -117,16 +117,16 @@
 import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
 import * as mfm from 'mfm-js';
 import * as misskey from 'misskey-js';
-import MkNoteSub from './MkNoteSub.vue';
-import XNoteSimple from './note-simple.vue';
-import XReactionsViewer from './reactions-viewer.vue';
-import XMediaList from './media-list.vue';
-import XCwButton from './cw-button.vue';
-import XPoll from './poll.vue';
-import XRenoteButton from './renote-button.vue';
-import MkUrlPreview from '@/components/url-preview.vue';
-import MkInstanceTicker from '@/components/instance-ticker.vue';
-import MkVisibility from '@/components/visibility.vue';
+import MkNoteSub from '@/components/MkNoteSub.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XMediaList from '@/components/MkMediaList.vue';
+import XCwButton from '@/components/MkCwButton.vue';
+import XPoll from '@/components/MkPoll.vue';
+import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';

packages/client/src/components/MkNoteHeader.vue

@@ -17,7 +17,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import MkVisibility from '@/components/visibility.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
 

packages/client/src/components/MkNoteSimple.vue

@@ -9,7 +9,7 @@
 				<XCwButton v-model="showContent" :note="note"/>
 			</p>
 			<div v-show="note.cw == null || showContent" class="content">
-				<MkNoteSubNoteContent class="text" :note="note"/>
+				<MkSubNoteContent class="text" :note="note"/>
 			</div>
 		</div>
 	</div>
@@ -19,9 +19,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from './note-header.vue';
-import MkNoteSubNoteContent from './sub-note-content.vue';
-import XCwButton from './cw-button.vue';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XCwButton from '@/components/MkCwButton.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;

packages/client/src/components/MkNoteSub.vue

@@ -10,7 +10,7 @@
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div v-show="note.cw == null || showContent" class="content">
-					<MkNoteSubNoteContent class="text" :note="note"/>
+					<MkSubNoteContent class="text" :note="note"/>
 				</div>
 			</div>
 		</div>
@@ -27,9 +27,9 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import * as misskey from 'misskey-js';
-import XNoteHeader from './note-header.vue';
-import MkNoteSubNoteContent from './sub-note-content.vue';
-import XCwButton from './cw-button.vue';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XCwButton from '@/components/MkCwButton.vue';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
 import { i18n } from '@/i18n';

packages/client/src/components/MkNotes.vue

@@ -19,9 +19,9 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import XNote from '@/components/note.vue';
-import XList from '@/components/date-separated-list.vue';
-import MkPagination, { Paging } from '@/components/ui/pagination.vue';
+import XNote from '@/components/MkNote.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import { i18n } from '@/i18n';
 
 const props = defineProps<{

packages/client/src/components/MkNotification.vue

@@ -75,9 +75,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XReactionIcon from './reaction-icon.vue';
-import MkFollowButton from './follow-button.vue';
-import XReactionTooltip from './reaction-tooltip.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import XReactionTooltip from '@/components/MkReactionTooltip.vue';
 import { getNoteSummary } from '@/scripts/get-note-summary';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';

packages/client/src/components/MkNotificationSettingWindow.vue

@@ -31,9 +31,9 @@
 import { } from 'vue';
 import { notificationTypes } from 'misskey-js';
 import MkSwitch from './form/switch.vue';
-import MkInfo from './ui/info.vue';
-import MkButton from './ui/button.vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
+import MkInfo from './MkInfo.vue';
+import MkButton from './MkButton.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
 const emit = defineEmits<{

packages/client/src/components/MkNotificationToast.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import XNotification from './notification.vue';
+import XNotification from '@/components/MkNotification.vue';
 import * as os from '@/os';
 
 defineProps<{

packages/client/src/components/MkNotifications.vue

@@ -19,10 +19,10 @@
 <script lang="ts" setup>
 import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
 import { notificationTypes } from 'misskey-js';
-import MkPagination, { Paging } from '@/components/ui/pagination.vue';
-import XNotification from '@/components/notification.vue';
-import XList from '@/components/date-separated-list.vue';
-import XNote from '@/components/note.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import XNotification from '@/components/MkNotification.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
+import XNote from '@/components/MkNote.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { $i } from '@/account';

packages/client/src/components/MkObjectView.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import XValue from './object-view.value.vue';
+import XValue from './MkObjectView.value.vue';
 
 const props = defineProps<{
 	value: Record<string, unknown>;

packages/client/src/components/MkPageWindow.vue

@@ -25,8 +25,8 @@
 
 <script lang="ts" setup>
 import { ComputedRef, inject, provide } from 'vue';
-import RouterView from './global/router-view.vue';
-import XWindow from '@/components/ui/window.vue';
+import RouterView from '@/components/global/RouterView.vue';
+import XWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/scripts/popout';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';

packages/client/src/components/MkPagination.vue

@@ -36,7 +36,7 @@ import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref,
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
 import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
-import MkButton from '@/components/ui/button.vue';
+import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
 
 const SECOND_FETCH_LIMIT = 30;

packages/client/src/components/MkPollEditor.vue

@@ -52,7 +52,7 @@ import { ref, watch } from 'vue';
 import MkInput from './form/input.vue';
 import MkSelect from './form/select.vue';
 import MkSwitch from './form/switch.vue';
-import MkButton from './ui/button.vue';
+import MkButton from './MkButton.vue';
 import { formatDateTimeString } from '@/scripts/format-time-string';
 import { addTime } from '@/scripts/time';
 import { i18n } from '@/i18n';

packages/client/src/components/MkPopupMenu.vue

@@ -6,8 +6,8 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkModal from './modal.vue';
-import MkMenu from './menu.vue';
+import MkModal from './MkModal.vue';
+import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 
 defineProps<{

packages/client/src/components/MkPostForm.vue

@@ -72,10 +72,10 @@ import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import * as Acct from 'misskey-js/built/acct';
 import { throttle } from 'throttle-debounce';
-import XNoteSimple from './note-simple.vue';
-import XNotePreview from './note-preview.vue';
-import XPostFormAttaches from './post-form-attaches.vue';
-import XPollEditor from './poll-editor.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XNotePreview from '@/components/MkNotePreview.vue';
+import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
+import XPollEditor from '@/components/MkPollEditor.vue';
 import { host, url } from '@/config';
 import { erase, unique } from '@/scripts/array';
 import { extractMentions } from '@/scripts/extract-mentions';
@@ -86,7 +86,7 @@ import { stream } from '@/stream';
 import { selectFiles } from '@/scripts/select-file';
 import {selectFileEnc, selectFilesEnc} from '@/scripts/select-file-enc';
 import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
-import MkInfo from '@/components/ui/info.vue';
+import MkInfo from '@/components/MkInfo.vue';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
@@ -392,7 +392,7 @@ function setVisibility() {
 		return;
 	}
 
-	os.popup(defineAsyncComponent(() => import('./visibility-picker.vue')), {
+	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
 		currentVisibility: visibility,
 		currentLocalOnly: localOnly,
 		src: visibilityButton,

packages/client/src/components/MkPostFormAttaches.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 
 export default defineComponent({
@@ -88,7 +88,7 @@ export default defineComponent({
 		},
 
 		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
+			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
 				title: this.$ts.describeFile,
 				input: {
 					placeholder: this.$ts.inputNewDescription,

packages/client/src/components/MkPostFormDialog.vue

@@ -6,8 +6,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkModal from '@/components/ui/modal.vue';
-import MkPostForm from '@/components/post-form.vue';
+import MkModal from '@/components/MkModal.vue';
+import MkPostForm from '@/components/MkPostForm.vue';
 
 export default defineComponent({
 	components: {

packages/client/src/components/MkReactionTooltip.vue

@@ -9,8 +9,8 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkTooltip from './ui/tooltip.vue';
-import XReactionIcon from './reaction-icon.vue';
+import MkTooltip from './MkTooltip.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
 
 const props = defineProps<{
 	reaction: string;

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

@@ -18,8 +18,8 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkTooltip from './ui/tooltip.vue';
-import XReactionIcon from './reaction-icon.vue';
+import MkTooltip from './MkTooltip.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
 
 const props = defineProps<{
 	reaction: string;

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

@@ -15,8 +15,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
-import XDetails from '@/components/reactions-viewer.details.vue';
-import XReactionIcon from '@/components/reaction-icon.vue';
+import XDetails from '@/components/MkReactionsViewer.details.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { $i } from '@/account';

packages/client/src/components/MkReactionsViewer.vue

@@ -8,7 +8,7 @@
 import { computed } from 'vue';
 import * as misskey from 'misskey-js';
 import { $i } from '@/account';
-import XReaction from './reactions-viewer.reaction.vue';
+import XReaction from '@/components/MkReactionsViewer.reaction.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;

packages/client/src/components/MkRenoteButton.vue

@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import * as misskey from 'misskey-js';
-import XDetails from '@/components/users-tooltip.vue';
+import XDetails from '@/components/MkUsersTooltip.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
 import { $i } from '@/account';

packages/client/src/components/MkRipple.vue

@@ -1,8 +1,9 @@
 <template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
+<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
-			<animate attributeName="r"
+			<animate
+				attributeName="r"
 				begin="0s" dur="0.5s"
 				values="4; 32"
 				calcMode="spline"
@@ -10,7 +11,8 @@
 				keySplines="0.165, 0.84, 0.44, 1"
 				repeatCount="1"
 			/>
-			<animate attributeName="stroke-width"
+			<animate
+				attributeName="stroke-width"
 				begin="0s" dur="0.5s"
 				values="16; 0"
 				calcMode="spline"
@@ -21,7 +23,8 @@
 		</circle>
 		<g fill="none" fill-rule="evenodd">
 			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
-				<animate attributeName="r"
+				<animate
+					attributeName="r"
 					begin="0s" dur="0.8s"
 					:values="`${particle.size}; 0`"
 					calcMode="spline"
@@ -29,7 +32,8 @@
 					keySplines="0.165, 0.84, 0.44, 1"
 					repeatCount="1"
 				/>
-				<animate attributeName="cx"
+				<animate
+					attributeName="cx"
 					begin="0s" dur="0.8s"
 					:values="`${particle.xA}; ${particle.xB}`"
 					calcMode="spline"
@@ -37,7 +41,8 @@
 					keySplines="0.3, 0.61, 0.355, 1"
 					repeatCount="1"
 				/>
-				<animate attributeName="cy"
+				<animate
+					attributeName="cy"
 					begin="0s" dur="0.8s"
 					:values="`${particle.yA}; ${particle.yB}`"
 					calcMode="spline"
@@ -51,59 +56,47 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		x: {
-			type: Number,
-			required: true
-		},
-		y: {
-			type: Number,
-			required: true
-		},
-		particle: {
-			type: Boolean,
-			required: false,
-			default: true,
-		}
-	},
-	emits: ['end'],
-	setup(props, context) {
-		const particles = [];
-		const origin = 64;
-		const colors = ['#FF1493', '#00FFFF', '#FFE202'];
+const props = withDefaults(defineProps<{
+	x: number;
+	y: number;
+	particle?: boolean;
+}>(), {
+	particle: true,
+});
 
-		if (props.particle) {
-			for (let i = 0; i < 12; i++) {
-				const angle = Math.random() * (Math.PI * 2);
-				const pos = Math.random() * 16;
-				const velocity = 16 + (Math.random() * 48);
-				particles.push({
-					size: 4 + (Math.random() * 8),
-					xA: origin + (Math.sin(angle) * pos),
-					yA: origin + (Math.cos(angle) * pos),
-					xB: origin + (Math.sin(angle) * (pos + velocity)),
-					yB: origin + (Math.cos(angle) * (pos + velocity)),
-					color: colors[Math.floor(Math.random() * colors.length)]
-				});
-			}
-		}
+const emit = defineEmits<{
+	(ev: 'end'): void;
+}>();
 
-		onMounted(() => {
-			window.setTimeout(() => {
-				context.emit('end');
-			}, 1100);
+const particles = [];
+const origin = 64;
+const colors = ['#FF1493', '#00FFFF', '#FFE202'];
+const zIndex = os.claimZIndex('high');
+
+if (props.particle) {
+	for (let i = 0; i < 12; i++) {
+		const angle = Math.random() * (Math.PI * 2);
+		const pos = Math.random() * 16;
+		const velocity = 16 + (Math.random() * 48);
+		particles.push({
+			size: 4 + (Math.random() * 8),
+			xA: origin + (Math.sin(angle) * pos),
+			yA: origin + (Math.cos(angle) * pos),
+			xB: origin + (Math.sin(angle) * (pos + velocity)),
+			yB: origin + (Math.cos(angle) * (pos + velocity)),
+			color: colors[Math.floor(Math.random() * colors.length)],
 		});
+	}
+}
 
-		return {
-			particles,
-			zIndex: os.claimZIndex('high'),
-		};
-	},
+onMounted(() => {
+	window.setTimeout(() => {
+		emit('end');
+	}, 1100);
 });
 </script>
 

packages/client/src/components/MkSample.vue

@@ -29,7 +29,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import MkButton from '@/components/ui/button.vue';
+import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkTextarea from '@/components/form/textarea.vue';

packages/client/src/components/MkSignin.vue

@@ -51,9 +51,9 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import MkButton from '@/components/ui/button.vue';
+import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
-import MkInfo from '@/components/ui/info.vue';
+import MkInfo from '@/components/MkInfo.vue';
 import { apiUrl, host as configHost } from '@/config';
 import { byteify, hexify } from '@/scripts/2fa';
 import * as os from '@/os';
@@ -237,7 +237,7 @@ function loginFailed(err) {
 }
 
 function resetPassword() {
-	os.popup(defineAsyncComponent(() => import('@/components/forgot-password.vue')), {}, {
+	os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
 	}, 'closed');
 }
 </script>

packages/client/src/components/MkSigninDialog.vue

@@ -14,8 +14,8 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import MkSignin from './signin.vue';
-import XModalWindow from '@/components/ui/modal-window.vue';
+import MkSignin from '@/components/MkSignin.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{

packages/client/src/components/MkSignup.vue

@@ -68,10 +68,10 @@
 import { } from 'vue';
 import getPasswordStrength from 'syuilo-password-strength';
 import { toUnicode } from 'punycode/';
-import MkButton from './ui/button.vue';
-import MkCaptcha from './captcha.vue';
+import MkButton from './MkButton.vue';
 import MkInput from './form/input.vue';
 import MkSwitch from './form/switch.vue';
+import MkCaptcha from '@/components/MkCaptcha.vue';
 import * as config from '@/config';
 import * as os from '@/os';
 import { login } from '@/account';