From 54b2843e69645ed29431a6b346edc1401d2b6102 Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Fri, 2 Feb 2024 17:08:19 +0000
Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=E3=82=AB=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=83=A0CSS=E3=81=AE=E3=83=90=E3=83=83=E3=82=AF=E3=82=A2?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E6=A9=9F=E8=83=BD=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backup-and-syncing-custom-css/backup.vue  | 257 ++++++++++++++++++
 .../backup-and-syncing-custom-css/main.vue    |  27 ++
 packages/frontend/src/pages/tms/flags.vue     |   4 +
 3 files changed, 288 insertions(+)
 create mode 100644 packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
 create mode 100644 packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue

diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
new file mode 100644
index 000000000000..1e5eb68860d5
--- /dev/null
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -0,0 +1,257 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<div>
+		<MkButton inline primary @click="saveNew">新規作成</MkButton>
+	</div>
+	<template v-if="customCssBackups.length === 0">
+		<MkInfo>バックアップがありません。「新規作成」で現在適用されているカスタムCSSのバックアップを作成できます。</MkInfo>
+	</template>
+	<template v-else>
+		<div class="_gaps_s">
+			<div
+				v-for="backup in customCssBackups" :key="backup.id" class="_panel" :class="$style.profile"
+				@click="($event: MouseEvent) => menu($event, backup.id)"
+				@contextmenu.prevent.stop="($event: MouseEvent) => menu($event, backup.id)"
+			>
+				<div :class="$style.name">{{ backup.name }}</div>
+				<div :class="$style.time">作成日: {{ new Date(backup.createAt).toLocaleString() }}</div>
+			</div>
+		</div>
+	</template>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { v4 } from 'uuid';
+import { apiWithDialog, inputText, popupMenu, confirm } from '@/os.js';
+import { miLocalStorage } from '@/local-storage.js';
+import { unisonReload } from '@/scripts/unison-reload.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import MkInfo from '@/components/MkInfo.vue';
+import MkButton from '@/components/MkButton.vue';
+
+type CustomCSSBackup = {
+	id: string;
+	name: string;
+	createAt: string;
+	customCss: string;
+};
+type CustomCSSBackups = CustomCSSBackup[];
+
+const scope = ['tms', 'customCssBackups'];
+
+const customCssBackups = ref<CustomCSSBackups>([]);
+
+const saveNew = async () => {
+	const customCss = miLocalStorage.getItem('customCss') ?? '';
+	if (!customCss) {
+		await confirm({
+			type: 'error',
+			title: 'カスタムCSSが設定されていません',
+			text: 'カスタムCSSを設定されていない状態ではバックアップを作成できません。',
+		});
+
+		return;
+	}
+
+	const { canceled, result: name } = await inputText({
+		title: 'バックアップ名を入力',
+	});
+	if (canceled) {
+		return;
+	}
+
+	const backup: CustomCSSBackup = {
+		id: v4(),
+		name,
+		createAt: new Date().toISOString(),
+		customCss: miLocalStorage.getItem('customCss') ?? '',
+	};
+
+	await apiWithDialog('i/registry/set', {
+		scope,
+		key: backup.id,
+		value: backup,
+	});
+
+	misskeyApi('i/registry/get-all', {
+		scope,
+	}).then(res => {
+		customCssBackups.value = Object.values(res);
+	});
+};
+
+const applyBackup = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	const { canceled } = await confirm({
+		type: 'info',
+		title: 'カスタムCSSのバックアップを適用',
+		text: `カスタムCSSのバックアップ「${backup.name}」を適用しますか？`,
+	});
+	if (canceled) {
+		return;
+	}
+
+	miLocalStorage.setItem('customCss', backup.customCss);
+
+	unisonReload();
+};
+
+const renameBackup = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	const { canceled, result: name } = await inputText({
+		title: 'バックアップ名を入力',
+		default: backup.name,
+	});
+	if (canceled) {
+		return;
+	}
+
+	backup.name = name;
+
+	await apiWithDialog('i/registry/set', {
+		scope,
+		key: backup.id,
+		value: backup,
+	});
+};
+
+const overrideBackup = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	const customCss = miLocalStorage.getItem('customCss') ?? '';
+	if (!customCss) {
+		await confirm({
+			type: 'error',
+			title: 'カスタムCSSが設定されていません',
+			text: 'カスタムCSSを設定されていない状態では上書き保存できません。\nカスタムCSSのバックアップを削除する場合はメニューから「削除」を選択してください。',
+		});
+
+		return;
+	}
+
+	const { canceled } = await confirm({
+		type: 'warning',
+		title: 'カスタムCSSのバックアップを上書き',
+		text: `カスタムCSSのバックアップ「${backup.name}」を現在のカスタムCSSで上書きします。この操作は取り消せません。`,
+	});
+	if (canceled) {
+		return;
+	}
+
+	backup.customCss = customCss;
+
+	await apiWithDialog('i/registry/set', {
+		scope,
+		key: backup.id,
+		value: backup,
+	});
+};
+
+const deleteBackup = async (backupId: string) => {
+	const profile = customCssBackups.value.find((p) => p.id === backupId);
+	if (!profile) {
+		return;
+	}
+
+	const { canceled } = await confirm({
+		type: 'warning',
+		title: 'カスタムCSSのバックアップを削除',
+		text: `カスタムCSSのバックアップ「${profile.name}」を削除します。この操作は取り消せません。`,
+	});
+	if (canceled) {
+		return;
+	}
+
+	await apiWithDialog('i/registry/remove', {
+		scope,
+		key: profile.id,
+	});
+
+	misskeyApi('i/registry/get-all', {
+		scope,
+	}).then(res => {
+		customCssBackups.value = Object.values(res);
+	});
+};
+
+const menu = (ev: MouseEvent, backupId: string) => {
+	const profile = customCssBackups.value.find((p) => p.id === backupId);
+	if (!profile) {
+		return;
+	}
+
+	return popupMenu([{
+		text: '適用',
+		icon: 'ti ti-cloud-upload',
+		action: () => applyBackup(backupId),
+	}, {
+		text: '名前を変更',
+		icon: 'ti ti-forms',
+		action: () => renameBackup(backupId),
+	}, {
+		text: '上書き保存',
+		icon: 'ti ti-device-floppy',
+		action: () => overrideBackup(backupId),
+	}, {
+		type: 'a',
+		text: 'ダウンロード',
+		icon: 'ti ti-download',
+		href: URL.createObjectURL(new Blob([JSON.stringify(profile, null, 2)], { type: 'application/json' })),
+		download: `${profile.name}.json`,
+	}, {
+		type: 'divider',
+	}, {
+		text: '削除',
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () => deleteBackup(backupId),
+	}], (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+};
+
+onMounted(() => {
+	misskeyApi('i/registry/get-all', {
+		scope,
+	}).then(res => {
+		customCssBackups.value = Object.values(res);
+	});
+});
+
+defineExpose({
+	customCssBackups,
+});
+
+</script>
+
+<style lang="scss" module>
+.profile {
+	padding: 20px;
+	cursor: pointer;
+	border: var(--panelBorder);
+
+	>.name {
+		font-weight: 700;
+	}
+
+	>.time {
+		font-size: 0.85em;
+		opacity: 0.7;
+	}
+}</style>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
new file mode 100644
index 000000000000..b8c66eac2039
--- /dev/null
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
@@ -0,0 +1,27 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<FormSection>
+	<MkFolder>
+		<template #label>カスタムCSSのバックアップと同期</template>
+		<div class="_gaps_s">
+			<FormSection first>
+				<template #label>作成したバックアップ</template>
+				<Backup ref="backup"/>
+			</FormSection>
+		</div>
+	</MkFolder>
+</FormSection>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, shallowRef } from 'vue';
+import FormSection from '@/components/form/section.vue';
+import MkFolder from '@/components/MkFolder.vue';
+
+const Backup = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/backup.vue'));
+const backup = shallowRef<InstanceType<typeof Backup> | null>(null);
+</script>
diff --git a/packages/frontend/src/pages/tms/flags.vue b/packages/frontend/src/pages/tms/flags.vue
index 38015c91e7c0..a45b88615e31 100644
--- a/packages/frontend/src/pages/tms/flags.vue
+++ b/packages/frontend/src/pages/tms/flags.vue
@@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInfo warn>{{ i18n.tsx._tms._flags.warning({ name: instance.name ?? host }) }}</MkInfo>
 					<MkInfo>{{ i18n.ts._tms.reportIssuesToGithub }} <a href="https://github.com/taiyme/misskey/issues" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a></MkInfo>
 				</div>
+				<XBackupAndSyncingCustomCss ref="backupAndSyncingCustomCss"/>
 				<XMain ref="xMain"/>
 				<div class="_buttonsCenter"><MkButton rounded small link to="/tms/settings"><i class="ti ti-settings"></i> {{ i18n.ts._tms.taiymeSettings }}</MkButton></div>
 			</div>
@@ -43,6 +44,9 @@ import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';
 const XMain = defineAsyncComponent(() => import('@/pages/tms/flags.main.vue'));
 const xMain = shallowRef<InstanceType<typeof XMain> | null>(null);
 
+const XBackupAndSyncingCustomCss = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/main.vue'));
+const backupAndSyncingCustomCss = shallowRef<InstanceType<typeof XBackupAndSyncingCustomCss> | null>(null);
+
 definePageMetadata(() => ({
 	title: i18n.ts._tms._flags.title,
 	icon: 'ti ti-flask',

From 7307edc468748fd78fc200b05d7b0f5dced6bad4 Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Sun, 4 Feb 2024 10:58:05 +0000
Subject: [PATCH 02/11] fix: fix css style

---
 .../src/pages/tms/backup-and-syncing-custom-css/backup.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
index 1e5eb68860d5..7ea98e9e9c85 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -246,11 +246,11 @@ defineExpose({
 	cursor: pointer;
 	border: var(--panelBorder);
 
-	>.name {
+	> .name {
 		font-weight: 700;
 	}
 
-	>.time {
+	> .time {
 		font-size: 0.85em;
 		opacity: 0.7;
 	}

From cef62651682b72ae66d53604a084c036f946ad10 Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Mon, 5 Feb 2024 17:53:54 +0000
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=E3=82=AB=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=83=A0CSS=E3=81=AE=E5=90=8C=E6=9C=9F=E6=A9=9F=E8=83=BD?=
 =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            | 113 ++++++++++++++
 locales/ja-JP.yml                             |  29 ++++
 packages/backend/src/server/web/boot.js       |   1 +
 packages/frontend/src/_dev_boot_.ts           |   1 +
 packages/frontend/src/boot/common.ts          |  36 ++++-
 .../src/pages/settings/custom-css.vue         |  35 ++++-
 .../backup-and-syncing-custom-css/backup.vue  | 146 +++++++++++++++---
 .../backup-and-syncing-custom-css/main.vue    |  39 +++--
 .../backup-and-syncing-custom-css/sync.vue    |  80 ++++++++++
 .../frontend/src/pages/tms/flags.main.vue     |   8 +-
 packages/frontend/src/pages/tms/flags.vue     |   8 +-
 packages/frontend/src/pages/tms/settings.vue  |   6 +-
 .../src/pages/tms/waitTmsStoreLoaded.ts       |   4 +
 packages/frontend/src/tms/flask-store.ts      |   8 +
 14 files changed, 461 insertions(+), 53 deletions(-)
 create mode 100644 packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
 create mode 100644 packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 4bcee2962b3b..06be08f14618 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9704,6 +9704,119 @@ export interface Locale extends ILocale {
              * {x}を開く
              */
             readonly "openX": ParameterizedString<"x">;
+            readonly "_backupAndSyncingCustomCss": {
+                /**
+                 * カスタムCSSのバックアップと同期
+                 */
+                readonly "title": string;
+                readonly "_backup": {
+                    /**
+                     * カスタムCSSのバックアップ
+                     */
+                    readonly "title": string;
+                    /**
+                     * 現在のカスタムCSSをバックアップとしてサーバーに保存することが可能です。
+                     */
+                    readonly "description": string;
+                    /**
+                     * バックアップがありません。「新規作成」で現在適用されているカスタムCSSのバックアップを作成できます。
+                     */
+                    readonly "notfound": string;
+                    /**
+                     * 作成日時: {datetime}
+                     */
+                    readonly "createdAt": ParameterizedString<"datetime">;
+                    /**
+                     * バックアップの読み込みに失敗しました。
+                     */
+                    readonly "cannnotLoad": string;
+                    /**
+                     * バックアップファイルはjson形式である必要があります。
+                     */
+                    readonly "invalidFile": string;
+                    /**
+                     * バックアップIDが不正です。
+                     */
+                    readonly "invalidId": string;
+                    /**
+                     * バックアップ名が不正です。
+                     */
+                    readonly "invalidName": string;
+                    /**
+                     * バックアップのカスタムCSSが不正です。
+                     */
+                    readonly "invalidCustomCss": string;
+                    /**
+                     * カスタムCSSが設定されていません
+                     */
+                    readonly "noCustomCss": string;
+                    /**
+                     * カスタムCSSを設定されていない状態ではバックアップを作成できません。
+                     */
+                    readonly "noCustomCssDescription": string;
+                    /**
+                     * バックアップ名を入力
+                     */
+                    readonly "inputBackupName": string;
+                    /**
+                     * カスタムCSSのバックアップを適用
+                     */
+                    readonly "applyBackup": string;
+                    /**
+                     * カスタムCSSのバックアップ「{name}」を適用しますか？
+                     */
+                    readonly "applyBackupDescription": ParameterizedString<"name">;
+                    /**
+                     * カスタムCSSを設定されていない状態では上書き保存できません。
+                     * カスタムCSSのバックアップを削除する場合はメニューから「削除」を選択してください。
+                     */
+                    readonly "cannotOverrideEmpty": string;
+                    /**
+                     * カスタムCSSのバックアップを上書き保存
+                     */
+                    readonly "overrideBackup": string;
+                    /**
+                     * カスタムCSSのバックアップ「{name}」を上書き保存しますか？
+                     * この操作は取り消せません。
+                     */
+                    readonly "overrideBackupDescription": ParameterizedString<"name">;
+                    /**
+                     * カスタムCSSのバックアップを削除
+                     */
+                    readonly "deleteBackup": string;
+                    /**
+                     * カスタムCSSのバックアップ「{name}」を削除しますか？
+                     * この操作は取り消せません。
+                     */
+                    readonly "deleteBackupDescription": ParameterizedString<"name">;
+                    /**
+                     * 上書き保存
+                     */
+                    readonly "override": string;
+                };
+                readonly "_syncing": {
+                    /**
+                     * カスタムCSSの同期
+                     */
+                    readonly "title": string;
+                    /**
+                     * カスタムCSSの同期を有効化すると、カスタムCSSの変更がリアルタイムに同期されます。
+                     */
+                    readonly "description": string;
+                    /**
+                     * カスタムCSSの同期を有効化
+                     */
+                    readonly "enable": string;
+                    /**
+                     * 同期するカスタムCSSを選択
+                     */
+                    readonly "select": string;
+                    /**
+                     * 任意のカスタムCSSのバックアップを他のデバイスとの間で同期することができます。
+                     */
+                    readonly "selectDescription": string;
+                };
+            };
         };
     };
 }
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index dcfadc7323d4..8b7866891125 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2588,3 +2588,32 @@ _tms:
     warning: "これらの設定を有効にすると、ページの表示や挙動に深刻な影響を及ぼし、{name}が正常に利用できなくなる可能性があります。"
     forceFetchX: "{x}を強制取得"
     openX: "{x}を開く"
+    _backupAndSyncingCustomCss:
+      title: "カスタムCSSのバックアップと同期"
+      _backup:
+        title: "カスタムCSSのバックアップ"
+        description: "現在のカスタムCSSをバックアップとしてサーバーに保存することが可能です。"
+        notfound: "バックアップがありません。「新規作成」で現在適用されているカスタムCSSのバックアップを作成できます。"
+        createdAt: "作成日時: {datetime}"
+        cannnotLoad: "バックアップの読み込みに失敗しました。"
+        invalidFile: "バックアップファイルはjson形式である必要があります。"
+        invalidId: "バックアップIDが不正です。"
+        invalidName: "バックアップ名が不正です。"
+        invalidCustomCss: "バックアップのカスタムCSSが不正です。"
+        noCustomCss: "カスタムCSSが設定されていません"
+        noCustomCssDescription: "カスタムCSSを設定されていない状態ではバックアップを作成できません。"
+        inputBackupName: "バックアップ名を入力"
+        applyBackup: "カスタムCSSのバックアップを適用"
+        applyBackupDescription: "カスタムCSSのバックアップ「{name}」を適用しますか？"
+        cannotOverrideEmpty: "カスタムCSSを設定されていない状態では上書き保存できません。\nカスタムCSSのバックアップを削除する場合はメニューから「削除」を選択してください。"
+        overrideBackup: "カスタムCSSのバックアップを上書き保存"
+        overrideBackupDescription: "カスタムCSSのバックアップ「{name}」を上書き保存しますか？\nこの操作は取り消せません。"
+        deleteBackup: "カスタムCSSのバックアップを削除"
+        deleteBackupDescription: "カスタムCSSのバックアップ「{name}」を削除しますか？\nこの操作は取り消せません。"
+        override: "上書き保存"
+      _syncing:
+        title: "カスタムCSSの同期"
+        description: "カスタムCSSの同期を有効化すると、カスタムCSSの変更がリアルタイムに同期されます。"
+        enable: "カスタムCSSの同期を有効化"
+        select: "同期するカスタムCSSを選択"
+        selectDescription: "任意のカスタムCSSのバックアップを他のデバイスとの間で同期することができます。"
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index c6b52a7a6bd7..69eb93a97b99 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -146,6 +146,7 @@
 	if (customCss && customCss.length > 0) {
 		const style = document.createElement('style');
 		style.innerHTML = customCss;
+		style.id = 'customCss';
 		document.head.appendChild(style);
 	}
 
diff --git a/packages/frontend/src/_dev_boot_.ts b/packages/frontend/src/_dev_boot_.ts
index d01a957048ec..9164b1db1eaf 100644
--- a/packages/frontend/src/_dev_boot_.ts
+++ b/packages/frontend/src/_dev_boot_.ts
@@ -86,6 +86,7 @@ async function main() {
 	if (customCss && customCss.length > 0) {
 		const style = document.createElement('style');
 		style.innerHTML = customCss;
+		style.id = 'customCss';
 		document.head.appendChild(style);
 	}
 }
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index b7c1f7800cf0..4918c0da84f4 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -5,6 +5,7 @@
 
 import { computed, watch, version as vueVersion, App } from 'vue';
 import { compareVersions } from 'compare-versions';
+import type { CustomCSSBackup } from '@/pages/tms/backup-and-syncing-custom-css/backup.vue';
 import widgets from '@/widgets/index.js';
 import directives from '@/directives/index.js';
 import components from '@/components/index.js';
@@ -25,6 +26,8 @@ import { fetchCustomEmojis } from '@/custom-emojis.js';
 import { setupRouter } from '@/global/router/definition.js';
 import { tmsFlaskStore } from '@/tms/flask-store.js';
 import { tmsStore } from '@/tms/store.js';
+import { useStream } from '@/stream.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 export async function common(createVue: () => App<Element>) {
 	console.info(`Misskey v${version}`);
@@ -123,10 +126,10 @@ export async function common(createVue: () => App<Element>) {
 	html.setAttribute('lang', lang);
 	//#endregion
 
-	await defaultStore.ready;
-	await deckStore.ready;
-	await tmsStore.ready;
-	await tmsFlaskStore.ready;
+	await defaultStore.loaded;
+	await deckStore.loaded;
+	await tmsStore.loaded;
+	await tmsFlaskStore.loaded;
 
 	const fetchInstanceMetaPromise = fetchInstance();
 
@@ -210,6 +213,31 @@ export async function common(createVue: () => App<Element>) {
 		}
 	}, { immediate: true });
 
+	// tms custom css syncing
+	const enabledCustomCssSyncing = tmsFlaskStore.state.enabledCustomCssSyncing;
+	if (enabledCustomCssSyncing) {
+		const syncingCustomCssId = tmsFlaskStore.state.syncingCustomCssId;
+		const connection = useStream().useChannel('main');
+		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;
+			}
+
+			const customCss = (value as CustomCSSBackup).customCss;
+			miLocalStorage.setItem('customCss', customCss);
+
+			const styleDom = document.querySelector('style#customCss');
+			if (styleDom) {
+				styleDom.innerHTML = customCss;
+			}
+		});
+	}
+
 	// Keep screen on
 	const onVisibilityChange = () => document.addEventListener('visibilitychange', () => {
 		if (document.visibilityState === 'visible') {
diff --git a/packages/frontend/src/pages/settings/custom-css.vue b/packages/frontend/src/pages/settings/custom-css.vue
index 5c12ab81e750..987f46baa19d 100644
--- a/packages/frontend/src/pages/settings/custom-css.vue
+++ b/packages/frontend/src/pages/settings/custom-css.vue
@@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
+import type { CustomCSSBackup } from '../tms/backup-and-syncing-custom-css/backup.vue';
 import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
@@ -22,19 +23,41 @@ import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const localCustomCss = ref(miLocalStorage.getItem('customCss') ?? '');
 
+const enabledCustomCssSyncing = ref(tmsFlaskStore.state.enabledCustomCssSyncing);
+const syncingCustomCssId = ref(tmsFlaskStore.state.syncingCustomCssId);
+
 async function apply() {
 	miLocalStorage.setItem('customCss', localCustomCss.value);
 
-	const { canceled } = await os.confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
+	if (enabledCustomCssSyncing.value && syncingCustomCssId.value) {
+		const scope = ['tms', 'customCssBackups'] as const satisfies string[];
+		const backup = await misskeyApi('i/registry/get', {
+			scope,
+			key: syncingCustomCssId.value,
+		}) as CustomCSSBackup | null;
+		if (!backup) return;
+
+		backup.customCss = localCustomCss.value;
+
+		await os.apiWithDialog('i/registry/set', {
+			scope,
+			key: syncingCustomCssId.value,
+			value: backup,
+		});
+	} else {
+		const { canceled } = await os.confirm({
+			type: 'info',
+			text: i18n.ts.reloadToApplySetting,
+		});
+		if (canceled) return;
 
-	unisonReload();
+		unisonReload();
+	}
 }
 
 watch(localCustomCss, async () => {
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
index 7ea98e9e9c85..ce92d99a6d06 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -5,11 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
-	<div>
-		<MkButton inline primary @click="saveNew">新規作成</MkButton>
+	<div :class="$style.buttons">
+		<MkButton inline primary @click="saveNew">{{ i18n.ts.createNew }}</MkButton>
+		<MkButton inline @click="upload">{{ i18n.ts.upload }}</MkButton>
 	</div>
 	<template v-if="customCssBackups.length === 0">
-		<MkInfo>バックアップがありません。「新規作成」で現在適用されているカスタムCSSのバックアップを作成できます。</MkInfo>
+		<MkInfo>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.notfound }}</MkInfo>
 	</template>
 	<template v-else>
 		<div class="_gaps_s">
@@ -19,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				@contextmenu.prevent.stop="($event: MouseEvent) => menu($event, backup.id)"
 			>
 				<div :class="$style.name">{{ backup.name }}</div>
-				<div :class="$style.time">作成日: {{ new Date(backup.createAt).toLocaleString() }}</div>
+				<div :class="$style.time">{{ i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.createdAt({ datetime: new Date(backup.createAt).toLocaleString() }) }}</div>
 			</div>
 		</div>
 	</template>
@@ -35,16 +36,18 @@ import { unisonReload } from '@/scripts/unison-reload.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+import { codePreview } from '@/tms/popup.js';
 
-type CustomCSSBackup = {
+export type CustomCSSBackup = {
 	id: string;
 	name: string;
 	createAt: string;
 	customCss: string;
 };
-type CustomCSSBackups = CustomCSSBackup[];
+export type CustomCSSBackups = CustomCSSBackup[];
 
-const scope = ['tms', 'customCssBackups'];
+const scope = ['tms', 'customCssBackups'] as const satisfies string[];
 
 const customCssBackups = ref<CustomCSSBackups>([]);
 
@@ -53,15 +56,15 @@ const saveNew = async () => {
 	if (!customCss) {
 		await confirm({
 			type: 'error',
-			title: 'カスタムCSSが設定されていません',
-			text: 'カスタムCSSを設定されていない状態ではバックアップを作成できません。',
+			title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.noCustomCss,
+			text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.noCustomCssDescription,
 		});
 
 		return;
 	}
 
 	const { canceled, result: name } = await inputText({
-		title: 'バックアップ名を入力',
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.inputBackupName,
 	});
 	if (canceled) {
 		return;
@@ -87,6 +90,85 @@ const saveNew = async () => {
 	});
 };
 
+const upload = async () => {
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.multiple = false;
+	input.onchange = async () => {
+		if (!input.files || input.files.length === 0) return;
+
+		const file = input.files[0];
+
+		if (file.type !== 'application/json') {
+			return alert({
+				type: 'error',
+				title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannnotLoad,
+				text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidFile,
+			});
+		}
+
+		let json: { [key: string]: unknown };
+		try {
+			json = JSON.parse(await file.text());
+		} catch (err) {
+			return alert({
+				type: 'error',
+				title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannnotLoad,
+				text: (err as SyntaxError).message,
+			});
+		}
+		const result = validate(json);
+		if (!result.valid) {
+			return alert({
+				type: 'error',
+				title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannnotLoad,
+				text: result.error,
+			});
+		}
+
+		await apiWithDialog('i/registry/set', { scope, key: result.value.id, value: result.value });
+
+		// 一応廃棄
+		window['__misskey_input_ref__'] = null;
+	};
+
+	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+	// iOS Safari で正常に動かす為のおまじない
+	window['__misskey_input_ref__'] = input;
+
+	input.click();
+};
+
+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))) {
+		return {
+			valid: false,
+			error: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidId,
+		};
+	}
+	if ('name' in json && typeof json.name !== 'string') {
+		return {
+			valid: false,
+			error: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidName,
+		};
+	}
+	if ('createAt' in json && typeof json.createAt !== 'string') {
+		json.createAt = new Date().toISOString();
+	}
+	if ('customCss' in json && (typeof json.customCss !== 'string' || json.customCss.length === 0)) {
+		return {
+			valid: false,
+			error: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidCustomCss,
+		};
+	}
+
+	return {
+		valid: true,
+		value: json as CustomCSSBackup,
+	};
+};
+
 const applyBackup = async (backupId: string) => {
 	const backup = customCssBackups.value.find((p) => p.id === backupId);
 	if (!backup) {
@@ -95,8 +177,8 @@ const applyBackup = async (backupId: string) => {
 
 	const { canceled } = await confirm({
 		type: 'info',
-		title: 'カスタムCSSのバックアップを適用',
-		text: `カスタムCSSのバックアップ「${backup.name}」を適用しますか？`,
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.applyBackup,
+		text: i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.applyBackupDescription({ name: backup.name }),
 	});
 	if (canceled) {
 		return;
@@ -114,7 +196,7 @@ const renameBackup = async (backupId: string) => {
 	}
 
 	const { canceled, result: name } = await inputText({
-		title: 'バックアップ名を入力',
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.inputBackupName,
 		default: backup.name,
 	});
 	if (canceled) {
@@ -140,8 +222,8 @@ const overrideBackup = async (backupId: string) => {
 	if (!customCss) {
 		await confirm({
 			type: 'error',
-			title: 'カスタムCSSが設定されていません',
-			text: 'カスタムCSSを設定されていない状態では上書き保存できません。\nカスタムCSSのバックアップを削除する場合はメニューから「削除」を選択してください。',
+			title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.noCustomCss,
+			text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannotOverrideEmpty,
 		});
 
 		return;
@@ -149,8 +231,8 @@ const overrideBackup = async (backupId: string) => {
 
 	const { canceled } = await confirm({
 		type: 'warning',
-		title: 'カスタムCSSのバックアップを上書き',
-		text: `カスタムCSSのバックアップ「${backup.name}」を現在のカスタムCSSで上書きします。この操作は取り消せません。`,
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.overrideBackup,
+		text: i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.overrideBackupDescription({ name: backup.name }),
 	});
 	if (canceled) {
 		return;
@@ -173,8 +255,8 @@ const deleteBackup = async (backupId: string) => {
 
 	const { canceled } = await confirm({
 		type: 'warning',
-		title: 'カスタムCSSのバックアップを削除',
-		text: `カスタムCSSのバックアップ「${profile.name}」を削除します。この操作は取り消せません。`,
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.deleteBackup,
+		text: i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.deleteBackupDescription({ name: profile.name }),
 	});
 	if (canceled) {
 		return;
@@ -192,6 +274,18 @@ const deleteBackup = async (backupId: string) => {
 	});
 };
 
+const preview = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	await codePreview({
+		lang: 'css',
+		code: backup.customCss,
+	});
+};
+
 const menu = (ev: MouseEvent, backupId: string) => {
 	const profile = customCssBackups.value.find((p) => p.id === backupId);
 	if (!profile) {
@@ -199,27 +293,28 @@ const menu = (ev: MouseEvent, backupId: string) => {
 	}
 
 	return popupMenu([{
-		text: '適用',
+		text: i18n.ts.apply,
 		icon: 'ti ti-cloud-upload',
 		action: () => applyBackup(backupId),
 	}, {
-		text: '名前を変更',
+		text: i18n.ts.rename,
 		icon: 'ti ti-forms',
 		action: () => renameBackup(backupId),
 	}, {
 		text: '上書き保存',
+		text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.override,
 		icon: 'ti ti-device-floppy',
 		action: () => overrideBackup(backupId),
 	}, {
 		type: 'a',
-		text: 'ダウンロード',
+		text: i18n.ts.download,
 		icon: 'ti ti-download',
 		href: URL.createObjectURL(new Blob([JSON.stringify(profile, null, 2)], { type: 'application/json' })),
 		download: `${profile.name}.json`,
 	}, {
 		type: 'divider',
 	}, {
-		text: '削除',
+		text: i18n.ts.delete,
 		icon: 'ti ti-trash',
 		danger: true,
 		action: () => deleteBackup(backupId),
@@ -241,6 +336,11 @@ defineExpose({
 </script>
 
 <style lang="scss" module>
+.buttons {
+	display: flex;
+	gap: var(--margin);
+	flex-wrap: wrap;
+}
 .profile {
 	padding: 20px;
 	cursor: pointer;
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
index b8c66eac2039..e0bd21f381a6 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
@@ -4,24 +4,37 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<FormSection>
-	<MkFolder>
-		<template #label>カスタムCSSのバックアップと同期</template>
-		<div class="_gaps_s">
-			<FormSection first>
-				<template #label>作成したバックアップ</template>
-				<Backup ref="backup"/>
-			</FormSection>
-		</div>
-	</MkFolder>
-</FormSection>
+<MkFolder>
+	<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss.title }}</template>
+	<div class="_gaps_s">
+		<FormSection first>
+			<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.title }}</template>
+			<XBackup ref="xBackup"/>
+		</FormSection>
+
+		<FormSection v-if="xBackup && xBackup.customCssBackups">
+			<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.title }}</template>
+			<div class="_gaps_m">
+				<XSync ref="xSync" :customCssBackups="xBackup.customCssBackups"/>
+				<template v-if="xSync && xSync.edited">
+					<MkButton primary :disabled="!xSync.changed" @click="xSync.save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+				</template>
+			</div>
+		</FormSection>
+	</div>
+</MkFolder>
 </template>
 
 <script lang="ts" setup>
 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'));
+const xBackup = shallowRef<InstanceType<typeof XBackup> | null>(null);
 
-const Backup = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/backup.vue'));
-const backup = shallowRef<InstanceType<typeof Backup> | null>(null);
+const XSync = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/sync.vue'));
+const xSync = shallowRef<InstanceType<typeof XSync> | null>(null);
 </script>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
new file mode 100644
index 000000000000..a4edff925c67
--- /dev/null
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
@@ -0,0 +1,80 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<div class="_gaps_s">
+		<MkSwitch v-model="enabled">{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.enable }}</MkSwitch>
+		<MkInfo>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.description }}</MkInfo>
+	</div>
+
+	<template v-if="enabled">
+		<div class="_gaps_s">
+			<MkInfo>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.selectDescription }}</MkInfo>
+			<MkSelect v-model="selected">
+				<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.select }}</template>
+				<option v-for="backup in customCssBackups" :key="backup.id" :value="backup.id">{{ backup.name }}</option>
+			</MkSelect>
+		</div>
+	</template>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { readonly, ref, watch } from 'vue';
+import type { CustomCSSBackup, CustomCSSBackups } from './backup.vue.js';
+import MkInfo from '@/components/MkInfo.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { unisonReload } from '@/scripts/unison-reload.js';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { miLocalStorage } from '@/local-storage.js';
+
+const scope = ['tms', 'customCssBackups'] as const satisfies string[];
+
+const edited = ref(false);
+const changed = ref(false);
+
+const enabled = ref(tmsFlaskStore.state.enabledCustomCssSyncing);
+const selected = ref(tmsFlaskStore.state.syncingCustomCssId);
+
+const save = async (): Promise<void> => {
+	if (!changed.value) return;
+	changed.value = false;
+
+	tmsFlaskStore.set('enabledCustomCssSyncing', enabled.value);
+	tmsFlaskStore.set('syncingCustomCssId', enabled.value ? selected.value : null);
+
+	if (enabled.value && selected.value) {
+		const customCss = await misskeyApi('i/registry/get', {
+			scope,
+			key: selected.value,
+		}) as CustomCSSBackup | null;
+		miLocalStorage.setItem('customCss', customCss ? customCss.customCss : '');
+	}
+
+	unisonReload();
+};
+
+watch([
+	enabled,
+	selected,
+], () => {
+	edited.value = true;
+	changed.value = true;
+}, { deep: true });
+
+defineProps<{
+	customCssBackups: CustomCSSBackups;
+}>();
+
+defineExpose({
+	save,
+	edited: readonly(edited),
+	changed: readonly(changed),
+});
+</script>
diff --git a/packages/frontend/src/pages/tms/flags.main.vue b/packages/frontend/src/pages/tms/flags.main.vue
index 874e66494f4b..19dea71a945d 100644
--- a/packages/frontend/src/pages/tms/flags.main.vue
+++ b/packages/frontend/src/pages/tms/flags.main.vue
@@ -5,6 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
+	<FormSection>
+		<XBackupAndSyncingCustomCss ref="backupAndSyncingCustomCss"/>
+	</FormSection>
 	<FormSection>
 		<template #label>For developer</template>
 		<div class="_gaps_s">
@@ -27,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, readonly, ref, watch } from 'vue';
+import { defineAsyncComponent, readonly, ref, shallowRef, watch } from 'vue';
 import { commitHash, lang, version } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
@@ -36,6 +39,9 @@ import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 
+const XBackupAndSyncingCustomCss = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/main.vue'));
+const backupAndSyncingCustomCss = shallowRef<InstanceType<typeof XBackupAndSyncingCustomCss> | null>(null);
+
 const confirmDialog = async (): Promise<boolean> => {
 	const { canceled } = await confirm({
 		type: 'info',
diff --git a/packages/frontend/src/pages/tms/flags.vue b/packages/frontend/src/pages/tms/flags.vue
index a45b88615e31..f84394e97d40 100644
--- a/packages/frontend/src/pages/tms/flags.vue
+++ b/packages/frontend/src/pages/tms/flags.vue
@@ -15,8 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInfo warn>{{ i18n.tsx._tms._flags.warning({ name: instance.name ?? host }) }}</MkInfo>
 					<MkInfo>{{ i18n.ts._tms.reportIssuesToGithub }} <a href="https://github.com/taiyme/misskey/issues" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a></MkInfo>
 				</div>
-				<XBackupAndSyncingCustomCss ref="backupAndSyncingCustomCss"/>
-				<XMain ref="xMain"/>
+				<FormSuspense :p="ready"><XMain ref="xMain"/></FormSuspense>
 				<div class="_buttonsCenter"><MkButton rounded small link to="/tms/settings"><i class="ti ti-settings"></i> {{ i18n.ts._tms.taiymeSettings }}</MkButton></div>
 			</div>
 		</MkSpacer>
@@ -33,10 +32,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, shallowRef } from 'vue';
+import { ready } from './waitTmsStoreLoaded.js';
 import { host } from '@/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import FormSuspense from '@/components/form/suspense.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';
@@ -44,9 +45,6 @@ import TmsSoftwareVersions from '@/components/TmsSoftwareVersions.vue';
 const XMain = defineAsyncComponent(() => import('@/pages/tms/flags.main.vue'));
 const xMain = shallowRef<InstanceType<typeof XMain> | null>(null);
 
-const XBackupAndSyncingCustomCss = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/main.vue'));
-const backupAndSyncingCustomCss = shallowRef<InstanceType<typeof XBackupAndSyncingCustomCss> | null>(null);
-
 definePageMetadata(() => ({
 	title: i18n.ts._tms._flags.title,
 	icon: 'ti ti-flask',
diff --git a/packages/frontend/src/pages/tms/settings.vue b/packages/frontend/src/pages/tms/settings.vue
index 9de4019ebdf6..e261ef82d877 100644
--- a/packages/frontend/src/pages/tms/settings.vue
+++ b/packages/frontend/src/pages/tms/settings.vue
@@ -13,7 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInfo>{{ i18n.ts._tms._settings.description }}</MkInfo>
 					<MkInfo>{{ i18n.ts._tms.reportIssuesToGithub }} <a href="https://github.com/taiyme/misskey/issues" target="_blank" class="_link">{{ i18n.ts.learnMore }}</a></MkInfo>
 				</div>
-				<XMain ref="xMain"/>
+				<FormSuspense :p="ready">
+					<XMain ref="xMain"/>
+				</FormSuspense>
 				<div class="_buttonsCenter"><MkButton rounded small link to="/tms/flags"><i class="ti ti-flask"></i> {{ i18n.ts._tms.taiymeFlags }}</MkButton></div>
 			</div>
 		</MkSpacer>
@@ -30,8 +32,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, shallowRef } from 'vue';
+import { ready } from './waitTmsStoreLoaded.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import FormSuspense from '@/components/form/suspense.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInfo from '@/components/MkInfo.vue';
 
diff --git a/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts b/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts
new file mode 100644
index 000000000000..31d9abb39d8d
--- /dev/null
+++ b/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts
@@ -0,0 +1,4 @@
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { tmsStore } from '@/tms/store.js';
+
+export const ready = async () => await Promise.all([tmsStore.loaded, tmsFlaskStore.loaded]);
diff --git a/packages/frontend/src/tms/flask-store.ts b/packages/frontend/src/tms/flask-store.ts
index ec775c25e62c..5a3464683930 100644
--- a/packages/frontend/src/tms/flask-store.ts
+++ b/packages/frontend/src/tms/flask-store.ts
@@ -10,4 +10,12 @@ import { Storage } from '@/pizzax.js';
  * tmsFlaskStore -- 独自実装した実験的機能についてのデータを格納する
  */
 export const tmsFlaskStore = markRaw(new Storage('tmsFlask', {
+	enabledCustomCssSyncing: {
+		where: 'deviceAccount',
+		default: false,
+	},
+	syncingCustomCssId: {
+		where: 'deviceAccount',
+		default: null as string | null,
+	},
 }));

From 1ff045a4864812dee3d8f000fb6ef6af9fe43181 Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Mon, 5 Feb 2024 17:56:29 +0000
Subject: [PATCH 04/11] =?UTF-8?q?feat:=20=E3=82=AB=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=83=A0CSS=E3=81=AE=E3=83=90=E3=83=83=E3=82=AF=E3=82=A2?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E3=81=AE=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  4 +
 locales/ja-JP.yml                             |  1 +
 .../src/components/TmsCodePreviewDialog.vue   | 84 +++++++++++++++++++
 .../backup-and-syncing-custom-css/backup.vue  |  5 +-
 packages/frontend/src/tms/popup.ts            | 38 +++++++++
 5 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/components/TmsCodePreviewDialog.vue
 create mode 100644 packages/frontend/src/tms/popup.ts

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 06be08f14618..81daf0773e2f 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9793,6 +9793,10 @@ export interface Locale extends ILocale {
                      * 上書き保存
                      */
                     readonly "override": string;
+                    /**
+                     * バックアップ内容を見る
+                     */
+                    readonly "preview": string;
                 };
                 readonly "_syncing": {
                     /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8b7866891125..d3036ce7e2d3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2611,6 +2611,7 @@ _tms:
         deleteBackup: "カスタムCSSのバックアップを削除"
         deleteBackupDescription: "カスタムCSSのバックアップ「{name}」を削除しますか？\nこの操作は取り消せません。"
         override: "上書き保存"
+        preview: "バックアップ内容を見る"
       _syncing:
         title: "カスタムCSSの同期"
         description: "カスタムCSSの同期を有効化すると、カスタムCSSの変更がリアルタイムに同期されます。"
diff --git a/packages/frontend/src/components/TmsCodePreviewDialog.vue b/packages/frontend/src/components/TmsCodePreviewDialog.vue
new file mode 100644
index 000000000000..09b5c32e16bc
--- /dev/null
+++ b/packages/frontend/src/components/TmsCodePreviewDialog.vue
@@ -0,0 +1,84 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow ref="modal" :height="height" :width="width" @close="close()" @closed="emit('closed')">
+	<!-- eslint-disable-next-line vue/no-v-html -->
+	<div :class="[$style.centerPage, 'codeBlock']" v-html="html">
+	</div>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import MkModalWindow from './MkModalWindow.vue';
+
+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();
+};
+
+const resizeModal = () => {
+	const h = window.innerHeight;
+	const w = window.innerWidth;
+
+	if (w < 600) {
+		height.value = h;
+		width.value = w;
+	} else {
+		height.value = h * 0.8;
+		width.value = w * 0.8;
+	}
+};
+
+onMounted(() => {
+	resizeModal();
+	window.addEventListener('resize', resizeModal);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', resizeModal);
+});
+
+defineProps<{
+	html: string;
+}>();
+</script>
+
+<style lang="scss" module>
+.centerPage {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100cqh;
+	box-sizing: border-box;
+}
+</style>
+
+<style lang="scss" scoped>
+.codeBlock :deep(.shiki) {
+	margin: 0;
+	padding-left: 1em;
+	padding-right: 1em;
+	height: 100%;
+	width: 100%;
+	display: inline-block;
+	line-height: 1.5em;
+	font-size: 1em;
+	white-space: pre;
+
+	& pre,
+	& code {
+		font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
index ce92d99a6d06..39e8c99c7d95 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -301,7 +301,10 @@ const menu = (ev: MouseEvent, backupId: string) => {
 		icon: 'ti ti-forms',
 		action: () => renameBackup(backupId),
 	}, {
-		text: '上書き保存',
+		text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.preview,
+		icon: 'ti ti-eye-code',
+		action: () => preview(backupId),
+	}, {
 		text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.override,
 		icon: 'ti ti-device-floppy',
 		action: () => overrideBackup(backupId),
diff --git a/packages/frontend/src/tms/popup.ts b/packages/frontend/src/tms/popup.ts
new file mode 100644
index 000000000000..2cdfe5d09e66
--- /dev/null
+++ b/packages/frontend/src/tms/popup.ts
@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { BUNDLED_LANGUAGES, type Lang as ShikiLangs } from 'shiki';
+import { popup } from '@/os.js';
+import TmsCodePreviewDialog from '@/components/TmsCodePreviewDialog.vue';
+import { getHighlighter } from '@/scripts/code-highlighter.js';
+
+type CodePreviewProps = {
+	lang?: ShikiLangs | 'aiscript';
+	code: string;
+};
+export const codePreview = async (props: CodePreviewProps): Promise<void> => {
+	return new Promise(async (resolve) => {
+		const highlighter = await getHighlighter();
+		let codeLang: CodePreviewProps['lang'] = undefined;
+		if (props.lang && !highlighter.getLoadedLanguages().includes(props.lang as ShikiLangs)) {
+			const bundles = BUNDLED_LANGUAGES.filter((lang) => lang.id === props.lang || lang.aliases?.includes(props.lang as ShikiLangs));
+			if (bundles.length > 0) {
+				await highlighter.loadLanguage(props.lang as ShikiLangs);
+				codeLang = props.lang;
+			}
+		} else {
+			codeLang = props.lang;
+		}
+		const html = highlighter.codeToHtml(props.code, {
+			lang: codeLang,
+		});
+
+		popup(TmsCodePreviewDialog, { html }, {
+			done: () => {
+				resolve();
+			},
+		}, 'closed');
+	});
+};

From 999d380769db48f5a65a18a3c91c19846b0dd79f Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Mon, 5 Feb 2024 19:58:23 +0000
Subject: [PATCH 05/11] =?UTF-8?q?change:=20MkCode=E3=82=92=E4=BD=BF?=
 =?UTF-8?q?=E3=81=86=E3=82=88=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/TmsCodePreviewDialog.vue   | 45 +++++++++----------
 .../backup-and-syncing-custom-css/backup.vue  |  1 +
 packages/frontend/src/tms/popup.ts            | 21 ++-------
 3 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/packages/frontend/src/components/TmsCodePreviewDialog.vue b/packages/frontend/src/components/TmsCodePreviewDialog.vue
index 09b5c32e16bc..7dec5fd4ce32 100644
--- a/packages/frontend/src/components/TmsCodePreviewDialog.vue
+++ b/packages/frontend/src/components/TmsCodePreviewDialog.vue
@@ -4,16 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModalWindow ref="modal" :height="height" :width="width" @close="close()" @closed="emit('closed')">
+<MkModalWindow
+	ref="modal"
+	:height="height"
+	:width="width"
+	@close="close()"
+	@closed="emit('closed')"
+>
+	<template #header><i class="ti ti-file-text"></i> {{ name }}</template>
+
 	<!-- eslint-disable-next-line vue/no-v-html -->
-	<div :class="[$style.centerPage, 'codeBlock']" v-html="html">
-	</div>
+	<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';
 
 const modal = shallowRef<InstanceType<typeof MkModalWindow>>();
 const height = ref(window.innerHeight);
@@ -50,35 +58,26 @@ onUnmounted(() => {
 });
 
 defineProps<{
-	html: string;
+	name: string;
+	lang?: string;
+	code: string;
 }>();
 </script>
 
 <style lang="scss" module>
-.centerPage {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 100cqh;
-	box-sizing: border-box;
+.codeBlock {
+	height: 100%;
+
+	> div {
+		height: 100%;
+	}
 }
 </style>
 
 <style lang="scss" scoped>
-.codeBlock :deep(.shiki) {
+.codeBlock :deep(pre.shiki) {
 	margin: 0;
-	padding-left: 1em;
-	padding-right: 1em;
 	height: 100%;
-	width: 100%;
-	display: inline-block;
-	line-height: 1.5em;
-	font-size: 1em;
-	white-space: pre;
-
-	& pre,
-	& code {
-		font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
-	}
+	border-radius: 0;
 }
 </style>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
index 39e8c99c7d95..145c1ca21bf7 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -281,6 +281,7 @@ const preview = async (backupId: string) => {
 	}
 
 	await codePreview({
+		name: backup.name,
 		lang: 'css',
 		code: backup.customCss,
 	});
diff --git a/packages/frontend/src/tms/popup.ts b/packages/frontend/src/tms/popup.ts
index 2cdfe5d09e66..f38c1cc73cb0 100644
--- a/packages/frontend/src/tms/popup.ts
+++ b/packages/frontend/src/tms/popup.ts
@@ -3,33 +3,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { BUNDLED_LANGUAGES, type Lang as ShikiLangs } from 'shiki';
+import { type BundledLanguage as ShikiLangs } from 'shiki';
 import { popup } from '@/os.js';
 import TmsCodePreviewDialog from '@/components/TmsCodePreviewDialog.vue';
-import { getHighlighter } from '@/scripts/code-highlighter.js';
 
 type CodePreviewProps = {
+	name: string;
 	lang?: ShikiLangs | 'aiscript';
 	code: string;
 };
 export const codePreview = async (props: CodePreviewProps): Promise<void> => {
 	return new Promise(async (resolve) => {
-		const highlighter = await getHighlighter();
-		let codeLang: CodePreviewProps['lang'] = undefined;
-		if (props.lang && !highlighter.getLoadedLanguages().includes(props.lang as ShikiLangs)) {
-			const bundles = BUNDLED_LANGUAGES.filter((lang) => lang.id === props.lang || lang.aliases?.includes(props.lang as ShikiLangs));
-			if (bundles.length > 0) {
-				await highlighter.loadLanguage(props.lang as ShikiLangs);
-				codeLang = props.lang;
-			}
-		} else {
-			codeLang = props.lang;
-		}
-		const html = highlighter.codeToHtml(props.code, {
-			lang: codeLang,
-		});
-
-		popup(TmsCodePreviewDialog, { html }, {
+		popup(TmsCodePreviewDialog, props, {
 			done: () => {
 				resolve();
 			},

From 8b7ed9bcccdb8309436821b8d699bc97b594e87e Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Thu, 8 Feb 2024 04:35:52 +0000
Subject: [PATCH 06/11] =?UTF-8?q?chore:=20tweak=20changed=E3=83=95?=
 =?UTF-8?q?=E3=83=A9=E3=82=B0=E3=81=8C=E6=AD=A3=E3=81=97=E3=81=8F=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=20=E3=83=90=E3=83=83=E3=82=AF=E3=82=A2=E3=83=83=E3=83=97?=
 =?UTF-8?q?=E3=81=AE=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E6=99=82=E3=81=AB?=
 =?UTF-8?q?ID=E3=81=8C=E3=81=AA=E3=81=84=E5=A0=B4=E5=90=88=E3=81=A8?=
 =?UTF-8?q?=E6=97=A2=E5=AD=98=E3=81=AE=E3=82=82=E3=81=AE=E3=81=A8=E8=A1=9D?=
 =?UTF-8?q?=E7=AA=81=E3=81=97=E3=81=9F=E9=9A=9B=E3=81=AB=E6=96=B0=E8=A6=8F?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4=20=E3=83=90=E3=83=83=E3=82=AF=E3=82=A2?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E3=81=AE=E6=9B=B4=E6=96=B0=E6=97=A5=E6=99=82?=
 =?UTF-8?q?=E3=82=92=E8=A8=98=E9=8C=B2=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                                 |  4 ----
 locales/ja-JP.yml                                  |  1 -
 .../tms/backup-and-syncing-custom-css/backup.vue   | 14 +++++++++-----
 .../tms/backup-and-syncing-custom-css/sync.vue     |  2 +-
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 8d4496f3b757..c8a87fedbe4e 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9742,10 +9742,6 @@ export interface Locale extends ILocale {
                      * バックアップファイルはjson形式である必要があります。
                      */
                     readonly "invalidFile": string;
-                    /**
-                     * バックアップIDが不正です。
-                     */
-                    readonly "invalidId": string;
                     /**
                      * バックアップ名が不正です。
                      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 67e5c0344212..7277ad6a9cfa 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2599,7 +2599,6 @@ _tms:
         createdAt: "作成日時: {datetime}"
         cannnotLoad: "バックアップの読み込みに失敗しました。"
         invalidFile: "バックアップファイルはjson形式である必要があります。"
-        invalidId: "バックアップIDが不正です。"
         invalidName: "バックアップ名が不正です。"
         invalidCustomCss: "バックアップのカスタムCSSが不正です。"
         noCustomCss: "カスタムCSSが設定されていません"
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
index 145c1ca21bf7..9b9c5d2e8dca 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -43,6 +43,7 @@ export type CustomCSSBackup = {
 	id: string;
 	name: string;
 	createAt: string;
+	updatedAt: string;
 	customCss: string;
 };
 export type CustomCSSBackups = CustomCSSBackup[];
@@ -74,6 +75,7 @@ const saveNew = async () => {
 		id: v4(),
 		name,
 		createAt: new Date().toISOString(),
+		updatedAt: new Date().toISOString(),
 		customCss: miLocalStorage.getItem('customCss') ?? '',
 	};
 
@@ -141,11 +143,8 @@ 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))) {
-		return {
-			valid: false,
-			error: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidId,
-		};
+	if ('id' in json && (typeof json.id !== 'string' || !uuidv4Matcher.test(json.id) || customCssBackups.value.some((b) => b.id === json.id))) {
+		json.id = v4();
 	}
 	if ('name' in json && typeof json.name !== 'string') {
 		return {
@@ -156,6 +155,9 @@ const validate = (json: { [key: string]: unknown }): { valid: true, value: Custo
 	if ('createAt' in json && typeof json.createAt !== 'string') {
 		json.createAt = new Date().toISOString();
 	}
+	if ('updatedAt' in json && typeof json.updatedAt !== 'string') {
+		json.updatedAt = new Date().toISOString();
+	}
 	if ('customCss' in json && (typeof json.customCss !== 'string' || json.customCss.length === 0)) {
 		return {
 			valid: false,
@@ -203,6 +205,7 @@ const renameBackup = async (backupId: string) => {
 		return;
 	}
 
+	backup.updatedAt = new Date().toISOString();
 	backup.name = name;
 
 	await apiWithDialog('i/registry/set', {
@@ -238,6 +241,7 @@ const overrideBackup = async (backupId: string) => {
 		return;
 	}
 
+	backup.updatedAt = new Date().toISOString();
 	backup.customCss = customCss;
 
 	await apiWithDialog('i/registry/set', {
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
index a4edff925c67..f24a5f85c381 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
@@ -65,7 +65,7 @@ watch([
 	selected,
 ], () => {
 	edited.value = true;
-	changed.value = true;
+	changed.value = tmsFlaskStore.state.enabledCustomCssSyncing !== enabled.value || tmsFlaskStore.state.syncingCustomCssId !== selected.value;
 }, { deep: true });
 
 defineProps<{

From 4613772fb91d1bb2e4ffbc2c927389e0137a8104 Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Thu, 8 Feb 2024 05:25:40 +0000
Subject: [PATCH 07/11] =?UTF-8?q?MkFolder=E3=82=92=E3=82=84=E3=82=81?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/index.d.ts                            |  4 ---
 locales/ja-JP.yml                             |  1 -
 .../backup-and-syncing-custom-css/backup.vue  |  1 -
 .../backup-and-syncing-custom-css/main.vue    | 33 +++++++++----------
 .../frontend/src/pages/tms/flags.main.vue     |  4 +--
 5 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index c8a87fedbe4e..c34881bd4e5f 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -9713,10 +9713,6 @@ export interface Locale extends ILocale {
              */
             readonly "openX": ParameterizedString<"x">;
             readonly "_backupAndSyncingCustomCss": {
-                /**
-                 * カスタムCSSのバックアップと同期
-                 */
-                readonly "title": string;
                 readonly "_backup": {
                     /**
                      * カスタムCSSのバックアップ
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 7277ad6a9cfa..ddc5077854e4 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2591,7 +2591,6 @@ _tms:
     forceFetchX: "{x}を強制取得"
     openX: "{x}を開く"
     _backupAndSyncingCustomCss:
-      title: "カスタムCSSのバックアップと同期"
       _backup:
         title: "カスタムCSSのバックアップ"
         description: "現在のカスタムCSSをバックアップとしてサーバーに保存することが可能です。"
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
index 9b9c5d2e8dca..9b62350f5e7f 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -352,7 +352,6 @@ defineExpose({
 .profile {
 	padding: 20px;
 	cursor: pointer;
-	border: var(--panelBorder);
 
 	> .name {
 		font-weight: 700;
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
index e0bd21f381a6..173f08bc6044 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
@@ -4,25 +4,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkFolder>
-	<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss.title }}</template>
-	<div class="_gaps_s">
-		<FormSection first>
-			<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.title }}</template>
-			<XBackup ref="xBackup"/>
-		</FormSection>
+<div class="_gaps_s">
+	<FormSection>
+		<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.title }}</template>
+		<XBackup ref="xBackup"/>
+	</FormSection>
 
-		<FormSection v-if="xBackup && xBackup.customCssBackups">
-			<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.title }}</template>
-			<div class="_gaps_m">
-				<XSync ref="xSync" :customCssBackups="xBackup.customCssBackups"/>
-				<template v-if="xSync && xSync.edited">
-					<MkButton primary :disabled="!xSync.changed" @click="xSync.save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-				</template>
-			</div>
-		</FormSection>
-	</div>
-</MkFolder>
+	<FormSection v-if="xBackup && xBackup.customCssBackups">
+		<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.title }}</template>
+		<div class="_gaps_m">
+			<XSync ref="xSync" :customCssBackups="xBackup.customCssBackups"/>
+			<template v-if="xSync && xSync.edited">
+				<MkButton primary :disabled="!xSync.changed" @click="xSync.save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+			</template>
+		</div>
+	</FormSection>
+</div>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/frontend/src/pages/tms/flags.main.vue b/packages/frontend/src/pages/tms/flags.main.vue
index 19dea71a945d..78951e87726d 100644
--- a/packages/frontend/src/pages/tms/flags.main.vue
+++ b/packages/frontend/src/pages/tms/flags.main.vue
@@ -5,9 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
-	<FormSection>
-		<XBackupAndSyncingCustomCss ref="backupAndSyncingCustomCss"/>
-	</FormSection>
+	<XBackupAndSyncingCustomCss ref="backupAndSyncingCustomCss"/>
 	<FormSection>
 		<template #label>For developer</template>
 		<div class="_gaps_s">

From 3c5b06f9a80d9103f3eb30cacfe199c69c1b2997 Mon Sep 17 00:00:00 2001
From: CaffeinePower <cffnpwr@gmail.com>
Date: Tue, 9 Apr 2024 17:04:42 +0000
Subject: [PATCH 08/11] =?UTF-8?q?=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3?=
 =?UTF-8?q?=E3=82=B9=E8=A1=A8=E8=A8=98=E3=82=92=E8=BF=BD=E8=A8=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts b/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts
index 31d9abb39d8d..ed2c0d13dd7a 100644
--- a/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts
+++ b/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts
@@ -1,3 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
 import { tmsFlaskStore } from '@/tms/flask-store.js';
 import { tmsStore } from '@/tms/store.js';
 

From 7f025c202f9834d2fd646e6d797cd0a8c9bb0318 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 11 Oct 2024 01:19:12 +0900
Subject: [PATCH 09/11] =?UTF-8?q?refactor(boot):=20innerHTML=E3=81=8B?=
 =?UTF-8?q?=E3=82=89textContent=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/server/web/boot.embed.js |  8 ++++----
 packages/backend/src/server/web/boot.js       | 16 ++++++++--------
 packages/frontend/src/_dev_boot_.ts           |  8 ++++----
 packages/frontend/src/boot/common.ts          | 10 +++++++---
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/backend/src/server/web/boot.embed.js b/packages/backend/src/server/web/boot.embed.js
index 173f7b0222df..905ccb8cf75f 100644
--- a/packages/backend/src/server/web/boot.embed.js
+++ b/packages/backend/src/server/web/boot.embed.js
@@ -105,10 +105,10 @@
 	}
 	//#endregion
 
-	async function addStyle(styleText) {
-		let css = document.createElement('style');
-		css.appendChild(document.createTextNode(styleText));
-		document.head.appendChild(css);
+	function addStyle(styleText) {
+		const styleTag = document.createElement('style');
+		styleTag.textContent = styleText;
+		document.head.appendChild(styleTag);
 	}
 
 	async function renderError(code) {
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index f56d122b2cc2..0b6031e74dd5 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -136,16 +136,16 @@
 
 	const customCss = localStorage.getItem('customCss');
 	if (customCss && customCss.length > 0) {
-		const style = document.createElement('style');
-		style.innerHTML = customCss;
-		style.id = 'customCss';
-		document.head.appendChild(style);
+		const styleTag = document.createElement('style');
+		styleTag.textContent = customCss;
+		styleTag.id = 'custom_css';
+		document.head.appendChild(styleTag);
 	}
 
-	async function addStyle(styleText) {
-		let css = document.createElement('style');
-		css.appendChild(document.createTextNode(styleText));
-		document.head.appendChild(css);
+	function addStyle(styleText) {
+		const styleTag = document.createElement('style');
+		styleTag.textContent = styleText;
+		document.head.appendChild(styleTag);
 	}
 
 	async function renderError(code, details) {
diff --git a/packages/frontend/src/_dev_boot_.ts b/packages/frontend/src/_dev_boot_.ts
index ae3861160d0d..9b1b812a8c8a 100644
--- a/packages/frontend/src/_dev_boot_.ts
+++ b/packages/frontend/src/_dev_boot_.ts
@@ -79,10 +79,10 @@ async function main() {
 
 	const customCss = localStorage.getItem('customCss');
 	if (customCss && customCss.length > 0) {
-		const style = document.createElement('style');
-		style.innerHTML = customCss;
-		style.id = 'customCss';
-		document.head.appendChild(style);
+		const styleTag = document.createElement('style');
+		styleTag.textContent = customCss;
+		styleTag.id = 'custom_css';
+		document.head.appendChild(styleTag);
 	}
 }
 
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index b8c3c9377b9d..6277f8d19aea 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -233,10 +233,14 @@ export async function common(createVue: () => App<Element>) {
 			const customCss = (value as CustomCSSBackup).customCss;
 			miLocalStorage.setItem('customCss', customCss);
 
-			const styleDom = document.querySelector('style#customCss');
-			if (styleDom) {
-				styleDom.innerHTML = customCss;
+			let styleTag = document.getElementById('custom_css');
+			if (styleTag == null) {
+				styleTag = document.createElement('style');
+				styleTag.id = 'custom_css';
+				document.head.appendChild(styleTag);
 			}
+
+			styleTag.textContent = customCss;
 		});
 	}
 

From 76a81ad18a44204772898e8472350338b710f6f2 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 11 Oct 2024 01:22:34 +0900
Subject: [PATCH 10/11] fix format

---
 packages/frontend/src/boot/common.ts          | 10 +++----
 .../src/components/TmsCodePreviewDialog.vue   | 26 +++++++++----------
 .../backup-and-syncing-custom-css/backup.vue  | 12 +++++----
 .../backup-and-syncing-custom-css/main.vue    |  1 -
 .../backup-and-syncing-custom-css/sync.vue    |  2 +-
 packages/frontend/src/tms/popup.ts            | 14 +++++-----
 6 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 6277f8d19aea..343aa39419c5 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/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');
diff --git a/packages/frontend/src/components/TmsCodePreviewDialog.vue b/packages/frontend/src/components/TmsCodePreviewDialog.vue
index 7dec5fd4ce32..22590014ef05 100644
--- a/packages/frontend/src/components/TmsCodePreviewDialog.vue
+++ b/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>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
index 9b62350f5e7f..0ed4ba4dfc7f 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
+++ b/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>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
index 173f08bc6044..4cab1cedd4ae 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
+++ b/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'));
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
index f24a5f85c381..0463884084c7 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
+++ b/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';
diff --git a/packages/frontend/src/tms/popup.ts b/packages/frontend/src/tms/popup.ts
index f38c1cc73cb0..119d0f0195e1 100644
--- a/packages/frontend/src/tms/popup.ts
+++ b/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(),
+		});
 	});
 };

From c014c8e25569c8e3e635824db3d3577c41c4e860 Mon Sep 17 00:00:00 2001
From: taiyme <53635909+taiyme@users.noreply.github.com>
Date: Fri, 11 Oct 2024 01:30:25 +0900
Subject: [PATCH 11/11] format

---
 .../src/pages/tms/backup-and-syncing-custom-css/sync.vue  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
index 0463884084c7..a515010f5157 100644
--- a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
@@ -34,6 +34,10 @@ import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { miLocalStorage } from '@/local-storage.js';
 
+defineProps<{
+	customCssBackups: CustomCSSBackups;
+}>();
+
 const scope = ['tms', 'customCssBackups'] as const satisfies string[];
 
 const edited = ref(false);
@@ -68,10 +72,6 @@ watch([
 	changed.value = tmsFlaskStore.state.enabledCustomCssSyncing !== enabled.value || tmsFlaskStore.state.syncingCustomCssId !== selected.value;
 }, { deep: true });
 
-defineProps<{
-	customCssBackups: CustomCSSBackups;
-}>();
-
 defineExpose({
 	save,
 	edited: readonly(edited),