ローカルのjsonファイルを保存・読み込みできるように

locales/ja-JP.yml

@@ -899,10 +899,12 @@ _plugin:
 _preferencesRegistry:
   list: "一覧"
   saveNew: "新規保存"
+  loadFile: "ファイルを読み込み"
   apply: "このデバイスに適用"
   delete: "削除"
   save: "上書き保存"
   rename: "名称変更"
+  download: "ダウンロード"
   saveNewDescription: "現在のデバイスの状態をサーバーに保存します。"
   inputName: "レジストリ名を入力"
   cannotSave: "保存できません"
@@ -914,6 +916,8 @@ _preferencesRegistry:
   noRegistries: "レジストリは登録されていません。「新規保存」で現在のクライアント設定をサーバーに保存できます。"
   createdAt: "作成日時: {date} {time}"
   updatedAt: "更新日時: {date} {time}"
+  cannotLoad: "読み込みできません"
+  invalidFile: "ファイル形式が違います。"
 
 _registry:
   scope: "スコープ"

packages/client/src/pages/settings/preferences-registry.vue

@@ -1,6 +1,9 @@
 <template>
 <div class="_formRoot">
-	<MkButton class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton>
+	<div :class="$style.buttons">
+		<MkButton inline class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton>
+		<MkButton inline class="" @click="loadFile">{{ ts._preferencesRegistry.loadFile }}</MkButton>
+	</div>
 
 	<FormSection>
 		<template #label>{{ ts._preferencesRegistry.list }}</template>
@@ -38,6 +41,7 @@ import { unisonReload } from '@/scripts/unison-reload';
 import { stream } from '@/stream';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { version } from '@/config';
 const { t, ts } = i18n;
 
 useCssModule();
@@ -46,10 +50,12 @@ const scope = ['clientPreferencesProfiles'];
 
 const connection = $i && stream.useChannel('main');
 
+const registryProps = ['name', 'createdAt', 'updatedAt', 'version', 'defaultStore', 'coldDeviceStorage', 'fontSize', 'useSystemFont', 'wallpaper'];
 type Registry = {
 	name: string;
 	createdAt: string;
 	updatedAt: string | null;
+	version: string;
 	defaultStore: Partial<typeof defaultStore.state>;
 	coldDeviceStorage: Partial<typeof ColdDeviceStorage.default>;
 	fontSize: string | null;
@@ -75,6 +81,34 @@ function getDefaultStoreValues() {
 	}, {} as any);
 }
 
+function isObject(value: any) {
+	return value && typeof value === 'object' && !Array.isArray(value);
+}
+
+function validate(registry: any): void {
+	if (!registries) return;
+
+	// Check if unnecessary properties exist
+	if (Object.keys(registry).some(key => !registryProps.includes(key))) throw Error('Unnecessary properties exist');
+
+	if (!registry.name) throw Error('Name is falsy');
+	if (!registry.version) throw Error('Version is falsy');
+	
+	// Check if createdAt and updatedAt is Date
+	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
+	if (!registry.createdAt || Number.isNaN(new Date(registry.createdAt).getTime())) throw Error('createdAt is falsy or not Date');
+	if (registry.updatedAt) {
+		if (Number.isNaN(new Date(registry.updatedAt).getTime())) {
+			throw Error('updatedAt is not Date');
+		}
+	} else if (registry.updatedAt !== null) {
+		throw Error('updatedAt is not null');
+	}
+
+	if (!registry.defaultStore || !isObject(registry.defaultStore)) throw Error('defaultStore is falsy or not an object');
+	if (!registry.coldDeviceStorage || !isObject(registry.coldDeviceStorage)) throw Error('coldDeviceStorage is falsy or not an object');
+}
+
 async function saveNew() {
 	if (!registries) return;
 
@@ -96,6 +130,7 @@ async function saveNew() {
 		name,
 		createdAt: (new Date()).toISOString(),
 		updatedAt: null,
+		version,
 		defaultStore: getDefaultStoreValues(),
 		coldDeviceStorage: ColdDeviceStorage.getAll(),
 		fontSize: localStorage.getItem('fontSize'),
@@ -103,7 +138,50 @@ async function saveNew() {
 		wallpaper: localStorage.getItem('wallpaper'),
 	};
 	await os.api('i/registry/set', { scope, key: id, value: registry });
-	registries[id] = registry;
+}
+
+function loadFile() {
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.multiple = false;
+	input.onchange = async () => {
+		if (!registries) return;
+		if (!input.files || input.files.length === 0) return;
+
+		const file = input.files[0];
+
+		if (file.type !== 'application/json') {
+			return os.alert({
+				type: 'error',
+				title: ts._preferencesRegistry.cannotLoad,
+				text: ts._preferencesRegistry.invalidFile,
+			});
+		}
+
+		let registry: Registry;
+		try {
+			registry = JSON.parse(await file.text()) as unknown as Registry;
+			validate(registry);
+		} catch (e) {
+			return os.alert({
+				type: 'error',
+				title: ts._preferencesRegistry.cannotLoad,
+				text: e?.message,
+			});
+		}
+
+		const id = uuid();
+		await os.api('i/registry/set', { scope, key: id, value: registry });
+
+		// 一応廃棄
+		(window as any).__misskey_input_ref__ = null;
+	};
+
+	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+	// iOS Safari で正常に動かす為のおまじない
+	(window as any).__misskey_input_ref__ = input;
+
+	input.click();
 }
 
 async function applyRegistry(id: string) {
@@ -190,6 +268,7 @@ async function save(id: string) {
 		name,
 		createdAt,
 		updatedAt: (new Date()).toISOString(),
+		version,
 		defaultStore: getDefaultStoreValues(),
 		coldDeviceStorage: ColdDeviceStorage.getAll(),
 		fontSize: localStorage.getItem('fontSize'),
@@ -197,7 +276,6 @@ async function save(id: string) {
 		wallpaper: localStorage.getItem('wallpaper'),
 	};
 	await os.api('i/registry/set', { scope, key: id, value: registry });
-	registries[id] = registry;
 }
 
 async function rename(id: string) {
@@ -229,10 +307,18 @@ async function rename(id: string) {
 }
 
 function menu(ev: MouseEvent, registryId: string) {
+	if (!registries) return;
+
 	return os.popupMenu([{
 		text: ts._preferencesRegistry.apply,
 		icon: 'fas fa-circle-down',
 		action: () => applyRegistry(registryId),
+	}, {
+		type: 'a',
+		text: ts._preferencesRegistry.download,
+		icon: 'fas fa-download',
+		href: URL.createObjectURL(new Blob([JSON.stringify(registries[registryId], null, 2)], { type: 'application/json' })),
+		download: `${registries[registryId].name}.json`,
 	}, {
 		text: ts._preferencesRegistry.rename,
 		icon: 'fas fa-i-cursor',
@@ -272,6 +358,12 @@ defineExpose({
 </script>
 
 <style lang="scss" module>
+.buttons {
+	display: flex;
+	gap: var(--margin);
+	flex-wrap: wrap;
+}
+
 .registry {
 	padding: 20px;
 	cursor: pointer;