fix(frontend/pizzax): デフォルト値が適用できないことがあるのを修正 (#13057)

* fix(frontend/pizzax): デフォルト値が適用できないことがあるのを修正

* fix

* いらんプロパティをけす

packages/frontend/package.json

@@ -44,6 +44,7 @@
 		"crc-32": "^1.2.2",
 		"cropperjs": "2.0.0-beta.4",
 		"date-fns": "2.30.0",
+		"defu": "^6.1.4",
 		"escape-regexp": "0.0.1",
 		"estree-walker": "3.0.3",
 		"eventemitter3": "5.0.1",
@@ -53,9 +54,9 @@
 		"json5": "2.2.3",
 		"matter-js": "0.19.0",
 		"mfm-js": "0.24.0",
+		"misskey-bubble-game": "workspace:*",
 		"misskey-js": "workspace:*",
 		"misskey-reversi": "workspace:*",
-		"misskey-bubble-game": "workspace:*",
 		"photoswipe": "5.4.3",
 		"punycode": "2.3.1",
 		"rollup": "4.9.6",

packages/frontend/src/pages/timeline.vue

@@ -71,37 +71,33 @@ const src = computed({
 	set: (x) => saveSrc(x),
 });
 const withRenotes = computed({
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-	get: () => (defaultStore.reactiveState.tl.value.filter?.withRenotes ?? saveTlFilter('withRenotes', true)),
-	set: (x) => saveTlFilter('withRenotes', x),
+	get: () => defaultStore.reactiveState.tl.value.filter.withRenotes,
+	set: (x: boolean) => saveTlFilter('withRenotes', x),
 });
 const withReplies = computed({
 	get: () => {
 		if (!$i) return false;
 		if (['local', 'social'].includes(src.value) && onlyFiles.value) {
 			return false;
 		} else {
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			return defaultStore.reactiveState.tl.value.filter?.withReplies ?? saveTlFilter('withReplies', true);
+			return defaultStore.reactiveState.tl.value.filter.withReplies;
 		}
 	},
-	set: (x) => saveTlFilter('withReplies', x),
+	set: (x: boolean) => saveTlFilter('withReplies', x),
 });
 const onlyFiles = computed({
 	get: () => {
 		if (['local', 'social'].includes(src.value) && withReplies.value) {
 			return false;
 		} else {
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			return defaultStore.reactiveState.tl.value.filter?.onlyFiles ?? saveTlFilter('onlyFiles', false);
+			return defaultStore.reactiveState.tl.value.filter.onlyFiles;
 		}
 	},
-	set: (x) => saveTlFilter('onlyFiles', x),
+	set: (x: boolean) => saveTlFilter('onlyFiles', x),
 });
 const withSensitive = computed({
-	// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-	get: () => (defaultStore.reactiveState.tl.value.filter?.withSensitive ?? saveTlFilter('withSensitive', true)),
-	set: (x) => {
+	get: () => defaultStore.reactiveState.tl.value.filter.withSensitive,
+	set: (x: boolean) => {
 		saveTlFilter('withSensitive', x);
 
 		// これだけはクライアント側で完結する処理なので手動でリロード

packages/frontend/src/pizzax.ts

@@ -7,6 +7,7 @@
 
 import { onUnmounted, Ref, ref, watch } from 'vue';
 import { BroadcastChannel } from 'broadcast-channel';
+import { defu } from 'defu';
 import { $i } from '@/account.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { get, set } from '@/scripts/idb-proxy.js';
@@ -80,6 +81,18 @@ export class Storage<T extends StateDef> {
 		this.loaded = this.ready.then(() => this.load());
 	}
 
+	private isPureObject(value: unknown): value is Record<string, unknown> {
+		return typeof value === 'object' && value !== null && !Array.isArray(value);
+	}
+
+	private mergeState<T>(value: T, def: T): T {
+		if (this.isPureObject(value) && this.isPureObject(def)) {
+			if (_DEV_) console.log('Merging state. Incoming: ', value, ' Default: ', def);
+			return defu(value, def) as T;
+		}
+		return value;
+	}
+
 	private async init(): Promise<void> {
 		await this.migrate();
 
@@ -89,11 +102,11 @@ export class Storage<T extends StateDef> {
 
 		for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
 			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
-				this.reactiveState[k].value = this.state[k] = deviceState[k];
+				this.reactiveState[k].value = this.state[k] = this.mergeState<T[keyof T]['default']>(deviceState[k], v.default);
 			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
-				this.reactiveState[k].value = this.state[k] = registryCache[k];
+				this.reactiveState[k].value = this.state[k] = this.mergeState<T[keyof T]['default']>(registryCache[k], v.default);
 			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
-				this.reactiveState[k].value = this.state[k] = deviceAccountState[k];
+				this.reactiveState[k].value = this.state[k] = this.mergeState<T[keyof T]['default']>(deviceAccountState[k], v.default);
 			} else {
 				this.reactiveState[k].value = this.state[k] = v.default;
 				if (_DEV_) console.log('Use default value', k, v.default);