feat(frontend): tms: ノートの下書き機能など

locales/en-US.yml

@@ -2212,3 +2212,5 @@ _tms:
   unreact: "Unreact"
   pakuru: "Pakuru"
   numberquote: "Numberquote"
+  drafts: "Drafts"
+  loadDraft: "Load from draft"

locales/ja-CJP.yml

@@ -2304,3 +2304,5 @@ _tms:
   unreact: "刂マケツ゚彐ソを解除"
   pakuru: "八゜ケゑ"
   numberquote: "数字引用ずゑ"
+  drafts: "草稿"
+  loadDraft: "草稿を読み込む"

locales/ja-JP.yml

@@ -2304,3 +2304,5 @@ _tms:
   unreact: "リアクションを解除"
   pakuru: "パクる"
   numberquote: "数字引用する"
+  drafts: "下書き"
+  loadDraft: "下書きを読み込む"

locales/ja-KS.yml

@@ -2304,3 +2304,5 @@ _tms:
   unreact: "リアクションやめる"
   pakuru: "パクる"
   numberquote: "数字引用する"
+  drafts: "下書き"
+  loadDraft: "下書きを読み込む"

packages/client/src/components/MkAbuseReportWindow.vue

@@ -1,5 +1,5 @@
 <template>
-<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
+<MkWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
 	<template #header>
 		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
@@ -19,13 +19,13 @@
 			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
 		</div>
 	</div>
-</XWindow>
+</MkWindow>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import XWindow from '@/components/MkWindow.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
@@ -40,22 +40,22 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const uiWindow = ref<InstanceType<typeof XWindow>>();
-const comment = ref(props.initialComment || '');
+const uiWindow = ref<InstanceType<typeof MkWindow>>();
+const comment = ref(props.initialComment ?? '');
 
-function send() {
+const send = (): void => {
 	os.apiWithDialog('users/report-abuse', {
 		userId: props.user.id,
 		comment: comment.value,
-	}, undefined).then(res => {
+	}, undefined).then(() => {
 		os.alert({
 			type: 'success',
-			text: i18n.ts.abuseReported
+			text: i18n.ts.abuseReported,
 		});
 		uiWindow.value?.close();
 		emit('closed');
 	});
-}
+};
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkAutocomplete.vue

@@ -285,6 +285,7 @@ function onKeydown(event: KeyboardEvent) {
 			break;
 
 		case 'Escape':
+		case 'Esc':
 			cancel();
 			props.close();
 			break;

packages/client/src/components/MkChart.vue

@@ -9,9 +9,9 @@
 
 <script lang="ts" setup>
 /* eslint-disable id-denylist --
-  Chart.js has a `data` attribute in most chart definitions, which triggers the
-  id-denylist violation when setting it. This is causing about 60+ lint issues.
-  As this is part of Chart.js's API it makes sense to disable the check here.
+	Chart.js has a `data` attribute in most chart definitions, which triggers the
+	id-denylist violation when setting it. This is causing about 60+ lint issues.
+	As this is part of Chart.js's API it makes sense to disable the check here.
 */
 import { onMounted, ref, watch, PropType } from 'vue';
 import {

packages/client/src/components/MkContainer.vue

@@ -11,7 +11,7 @@
 		</div>
 	</header>
 	<Transition
-		:name="$store.state.animation ? 'container-toggle' : ''"
+		:name="defaultStore.state.animation ? 'container-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -20,7 +20,7 @@
 		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
 			<slot></slot>
 			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ $ts.showMore }}</span>
+				<span>{{ i18n.ts.showMore }}</span>
 			</button>
 		</div>
 	</Transition>
@@ -29,6 +29,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	props: {
@@ -73,6 +75,8 @@ export default defineComponent({
 			showBody: this.expanded,
 			omitted: null,
 			ignoreOmit: false,
+			defaultStore,
+			i18n,
 		};
 	},
 	mounted() {

packages/client/src/components/MkContextMenu.vue

@@ -1,5 +1,5 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" appear>
+<Transition :name="defaultStore.state.animation ? 'fade' : ''" appear>
 	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
@@ -12,6 +12,7 @@ import MkMenu from './MkMenu.vue';
 import { MenuItem } from '@/types/menu';
 import contains from '@/scripts/contains';
 import * as os from '@/os';
+import { defaultStore } from '@/store';
 
 const props = defineProps<{
 	items: MenuItem[];

packages/client/src/components/MkCropperDialog.vue

@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialogEl"
 	:width="800"
 	:height="500"
@@ -22,15 +22,15 @@
 			</div>
 		</div>
 	</template>
-</XModalWindow>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
@@ -52,18 +52,22 @@ const props = defineProps<{
 const imgUrl = `${url}/proxy/image.webp?${query({
 	url: props.file.url,
 })}`;
-let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
-let imgEl = $ref<HTMLImageElement>();
+const dialogEl = $ref<InstanceType<typeof MkModalWindow>>();
+const imgEl = $ref<HTMLImageElement>();
 let cropper: Cropper | null = null;
 let loading = $ref(true);
 
-const ok = async () => {
+const ok = async (): Promise<void> => {
 	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
 		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
+		if (!croppedCanvas) return;
+
 		croppedCanvas.toBlob(blob => {
+			if (!blob) return;
+
 			const formData = new FormData();
 			formData.append('file', blob);
-			formData.append('i', $i.token);
+			formData.append('i', $i?.token);
 			if (defaultStore.state.uploadFolder) {
 				formData.append('folderId', defaultStore.state.uploadFolder);
 			}
@@ -84,43 +88,43 @@ const ok = async () => {
 	const f = await promise;
 
 	emit('ok', f);
-	dialogEl.close();
+	dialogEl?.close();
 };
 
-const cancel = () => {
+const cancel = (): void => {
 	emit('cancel');
-	dialogEl.close();
+	dialogEl?.close();
 };
 
-const onImageLoad = () => {
+const onImageLoad = (): void => {
 	loading = false;
 
-	if (cropper) {
-		cropper.getCropperImage()!.$center('contain');
-		cropper.getCropperSelection()!.$center();
-	}
+	cropper?.getCropperImage()?.$center('contain');
+	cropper?.getCropperSelection()?.$center();
 };
 
 onMounted(() => {
-	cropper = new Cropper(imgEl, {
-	});
+	if (!imgEl) return;
+	cropper = new Cropper(imgEl, {});
 
 	const computedStyle = getComputedStyle(document.documentElement);
 
-	const selection = cropper.getCropperSelection()!;
+	const selection = cropper.getCropperSelection();
+	if (!selection) return;
+
 	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
 	selection.aspectRatio = props.aspectRatio;
 	selection.initialAspectRatio = props.aspectRatio;
 	selection.outlined = true;
 
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper?.getCropperImage()?.$center('contain');
 		selection.$center();
 	}, 100);
 
 	// モーダルオープンアニメーションが終わったあとで再度調整
 	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
+		cropper?.getCropperImage()?.$center('contain');
 		selection.$center();
 	}, 500);
 });

packages/client/src/components/MkDialog.vue

@@ -132,7 +132,7 @@ function onBgClick() {
 }
 */
 function onKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Escape') cancel();
+	if (evt.key === 'Escape' || evt.key === 'Esc') cancel();
 }
 
 function onInputKeydown(evt: KeyboardEvent) {

packages/client/src/components/MkDrive.vue

@@ -27,7 +27,8 @@
 		<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
 	</nav>
 	<div
-		ref="main" class="main"
+		ref="main"
+		class="main"
 		:class="{ uploading: uploadings.length > 0, fetching }"
 		@dragover.prevent.stop="onDragover"
 		@dragenter="onDragenter"

packages/client/src/components/MkDriveSelectDialog.vue

@@ -1,5 +1,5 @@
 <template>
-<XModalWindow
+<MkModalWindow
 	ref="dialog"
 	:width="800"
 	:height="500"
@@ -14,15 +14,15 @@
 		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
 	</template>
-	<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
-</XModalWindow>
+	<MkDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
+</MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { DriveFile } from 'misskey-js/built/entities';
-import XDrive from '@/components/MkDrive.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
+import MkDrive from '@/components/MkDrive.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
 import number from '@/filters/number';
 import { i18n } from '@/i18n';
 
@@ -38,7 +38,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const dialog = ref<InstanceType<typeof XModalWindow>>();
+const dialog = ref<InstanceType<typeof MkModalWindow>>();
 
 const selected = ref<DriveFile[]>([]);
 

packages/client/src/components/MkDriveWindow.vue

@@ -1,5 +1,5 @@
 <template>
-<XWindow
+<MkWindow
 	ref="window"
 	:initial-width="800"
 	:initial-height="500"
@@ -9,15 +9,15 @@
 	<template #header>
 		{{ i18n.ts.drive }}
 	</template>
-	<XDrive :initial-folder="initialFolder"/>
-</XWindow>
+	<MkDrive :initial-folder="initialFolder"/>
+</MkWindow>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
 import * as Misskey from 'misskey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XWindow from '@/components/MkWindow.vue';
+import MkDrive from '@/components/MkDrive.vue';
+import MkWindow from '@/components/MkWindow.vue';
 import { i18n } from '@/i18n';
 
 defineProps<{

packages/client/src/components/MkFileListForAdmin.vue

@@ -92,7 +92,7 @@ const props = defineProps<{
 		> .file {
 			position: relative;
 			aspect-ratio: 1;
-		
+
 			> .thumbnail {
 				width: 100%;
 				height: 100%;

packages/client/src/components/MkFolder.vue

@@ -9,7 +9,7 @@
 		</button>
 	</header>
 	<Transition
-		:name="$store.state.animation ? 'folder-toggle' : ''"
+		:name="defaultStore.state.animation ? 'folder-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -25,6 +25,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import tinycolor from 'tinycolor2';
+import { defaultStore } from '@/store';
 
 const localStoragePrefix = 'ui:folder:';
 
@@ -44,10 +45,12 @@ export default defineComponent({
 	data(): ({
 		bg: string | null;
 		showBody: boolean;
+		defaultStore: typeof defaultStore;
 	}) {
 		return {
 			bg: null,
 			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
+			defaultStore,
 		};
 	},
 	watch: {