fix format

packages/frontend/src/boot/common.ts

@@ -223,14 +223,10 @@ export async function common(createVue: () => App<Element>) {
 		const scope = ['tms', 'customCssBackups'] as const satisfies string[];
 
 		connection.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
-			if (!recievedScope || scope.length !== recievedScope.length || scope.some((v, i) => v !== recievedScope[i])) {
-				return;
-			}
-			if (key !== syncingCustomCssId) {
-				return;
-			}
+			if (scope.join('/') !== recievedScope?.join('/')) return;
+			if (key !== syncingCustomCssId) return;
 
-			const customCss = (value as CustomCSSBackup).customCss;
+			const { customCss } = value as unknown as CustomCSSBackup;
 			miLocalStorage.setItem('customCss', customCss);
 
 			let styleTag = document.getElementById('custom_css');

packages/frontend/src/components/TmsCodePreviewDialog.vue

@@ -12,25 +12,29 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="emit('closed')"
 >
 	<template #header><i class="ti ti-file-text"></i> {{ name }}</template>
-
-	<!-- eslint-disable-next-line vue/no-v-html -->
 	<MkCode :lang="lang" :code="code" :class="[$style.codeBlock, 'codeBlock']"/>
 </MkModalWindow>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
-import MkModalWindow from './MkModalWindow.vue';
-import MkCode from './MkCode.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkCode from '@/components/MkCode.vue';
+
+defineProps<{
+	name: string;
+	lang?: string;
+	code: string;
+}>();
+
+const emit = defineEmits<{
+	closed: [];
+}>();
 
 const modal = shallowRef<InstanceType<typeof MkModalWindow>>();
 const height = ref(window.innerHeight);
 const width = ref(window.innerWidth);
 
-const emit = defineEmits<{
-		(event: 'closed'): void;
-	}>();
-
 const close = () => {
 	modal.value?.close();
 };
@@ -56,12 +60,6 @@ onMounted(() => {
 onUnmounted(() => {
 	window.removeEventListener('resize', resizeModal);
 });
-
-defineProps<{
-	name: string;
-	lang?: string;
-	code: string;
-}>();
 </script>
 
 <style lang="scss" module>

packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue

@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { v4 } from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { apiWithDialog, inputText, popupMenu, confirm } from '@/os.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { unisonReload } from '@/scripts/unison-reload.js';
@@ -66,13 +66,14 @@ const saveNew = async () => {
 
 	const { canceled, result: name } = await inputText({
 		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.inputBackupName,
+		default: '',
 	});
 	if (canceled) {
 		return;
 	}
 
 	const backup: CustomCSSBackup = {
-		id: v4(),
+		id: uuid(),
 		name,
 		createAt: new Date().toISOString(),
 		updatedAt: new Date().toISOString(),
@@ -144,7 +145,7 @@ const upload = async () => {
 const validate = (json: { [key: string]: unknown }): { valid: true, value: CustomCSSBackup } | { valid: false, error: string } => {
 	const uuidv4Matcher = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
 	if ('id' in json && (typeof json.id !== 'string' || !uuidv4Matcher.test(json.id) || customCssBackups.value.some((b) => b.id === json.id))) {
-		json.id = v4();
+		json.id = uuid();
 	}
 	if ('name' in json && typeof json.name !== 'string') {
 		return {
@@ -340,7 +341,6 @@ onMounted(() => {
 defineExpose({
 	customCssBackups,
 });
-
 </script>
 
 <style lang="scss" module>
@@ -349,6 +349,7 @@ defineExpose({
 	gap: var(--margin);
 	flex-wrap: wrap;
 }
+
 .profile {
 	padding: 20px;
 	cursor: pointer;
@@ -361,4 +362,5 @@ defineExpose({
 		font-size: 0.85em;
 		opacity: 0.7;
 	}
-}</style>
+}
+</style>

packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue

@@ -26,7 +26,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { defineAsyncComponent, shallowRef } from 'vue';
 import { i18n } from '@/i18n.js';
 import FormSection from '@/components/form/section.vue';
-import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 
 const XBackup = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/backup.vue'));

packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue

@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { readonly, ref, watch } from 'vue';
-import type { CustomCSSBackup, CustomCSSBackups } from './backup.vue.js';
+import type { CustomCSSBackup, CustomCSSBackups } from './backup.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';

packages/frontend/src/tms/popup.ts

@@ -3,21 +3,23 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { type BundledLanguage as ShikiLangs } from 'shiki';
+import type { BundledLanguage } from 'shiki/langs';
 import { popup } from '@/os.js';
 import TmsCodePreviewDialog from '@/components/TmsCodePreviewDialog.vue';
 
 type CodePreviewProps = {
 	name: string;
-	lang?: ShikiLangs | 'aiscript';
+	lang?: BundledLanguage | 'aiscript';
 	code: string;
 };
-export const codePreview = async (props: CodePreviewProps): Promise<void> => {
-	return new Promise(async (resolve) => {
-		popup(TmsCodePreviewDialog, props, {
+
+export const codePreview = (props: CodePreviewProps): Promise<void> => {
+	return new Promise((resolve) => {
+		const { dispose } = popup(TmsCodePreviewDialog, props, {
 			done: () => {
 				resolve();
 			},
-		}, 'closed');
+			closed: () => dispose(),
+		});
 	});
 };