fix(frontend): デッキのプロファイルが新規作成できない問題を修正 (#15406)

* fix(frontend): デッキのプロファイルが保存できない問題を修正

* Update Changelog

* Update CHANGELOG.md

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Fix: データセーバー有効時にもユーザーページの「ファイル」タブで画像が読み込まれてしまう問題を修正
 - Fix: MFMの `sparkle` エフェクトが正しく表示されない問題を修正
 - Fix: ページのURLにスラッシュが含まれている場合にページが正しく表示されない問題を修正
+- Fix: デッキのプロファイルが新規作成できない問題を修正
 - ローカライゼーションの更新
 - Playが実装されたため、ページ機能の「ソースを見る」は削除されました
 

packages/frontend/src/ui/deck.vue

@@ -95,7 +95,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, ref, watch, shallowRef } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
-import { deckStore, columnTypes, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js';
+import { deckStore, columnTypes, addColumn as addColumnToStore, forceSaveDeck, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js';
 import type { ColumnType } from './deck/deck-store.js';
 import type { MenuItem } from '@/types/menu.js';
 import XSidebar from '@/ui/_common_/navbar.vue';
@@ -233,10 +233,15 @@ function changeProfile(ev: MouseEvent) {
 					title: i18n.ts._deck.profile,
 					minLength: 1,
 				});
+
 				if (canceled || name == null) return;
 
-				deckStore.set('profile', name);
+				os.promiseDialog((async () => {
+					await deckStore.set('profile', name);
+					await forceSaveDeck();
+				})(), () => {
 					unisonReload();
+				});
 			},
 		});
 	}).then(() => {
@@ -251,9 +256,18 @@ async function deleteProfile() {
 	});
 	if (canceled) return;
 
-	deleteProfile_(deckStore.state.profile);
+	os.promiseDialog((async () => {
-	deckStore.set('profile', 'default');
+		if (deckStore.state.profile === 'default') {
+			await deckStore.set('columns', []);
+			await deckStore.set('layout', []);
+			await forceSaveDeck();
+		} else {
+			await deleteProfile_(deckStore.state.profile);
+		}
+		await deckStore.set('profile', 'default');
+	})(), () => {
 		unisonReload();
+	});
 }
 </script>
 

packages/frontend/src/ui/deck/deck-store.ts

@@ -112,9 +112,8 @@ export const loadDeck = async () => {
 	deckStore.set('layout', deck.layout);
 };
 
-// TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
+export async function forceSaveDeck() {
-export const saveDeck = throttle(1000, () => {
+	await misskeyApi('i/registry/set', {
-	misskeyApi('i/registry/set', {
 		scope: ['client', 'deck', 'profiles'],
 		key: deckStore.state.profile,
 		value: {
@@ -122,6 +121,11 @@ export const saveDeck = throttle(1000, () => {
 			layout: deckStore.reactiveState.layout.value,
 		},
 	});
+}
+
+// TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
+export const saveDeck = throttle(1000, () => {
+	forceSaveDeck();
 });
 
 export async function getProfiles(): Promise<string[]> {