enhance(frontend): ウィジェットもpreference管理に

packages/frontend/src/boot/main-boot.ts

@@ -154,6 +154,7 @@ export async function mainBoot() {
 				prefer.set('lightTheme', ColdDeviceStorage.get('lightTheme'));
 				prefer.set('darkTheme', ColdDeviceStorage.get('darkTheme'));
 				prefer.set('syncDeviceDarkMode', ColdDeviceStorage.get('syncDeviceDarkMode'));
+				prefer.set('widgets', store.state.widgets);
 				prefer.set('keepCw', store.state.keepCw);
 				prefer.set('collapseRenotes', store.state.collapseRenotes);
 				prefer.set('rememberNoteVisibility', store.state.rememberNoteVisibility);

packages/frontend/src/preferences/def.ts

@@ -35,6 +35,15 @@ export const PREF_DEF = {
 		accountDependent: true,
 		default: null as string | null,
 	},
+	widgets: {
+		accountDependent: true,
+		default: [] as {
+			name: string;
+			id: string;
+			place: string | null;
+			data: Record<string, any>;
+		}[],
+	},
 
 	themes: {
 		default: [] as Theme[],

packages/frontend/src/preferences/utility.ts

@@ -203,7 +203,7 @@ export async function enableAutoBackup() {
 export const shouldSuggestRestoreBackup = ref(false);
 
 if ($i != null) {
-	if (new Date($i.createdAt).getTime() < (Date.now() - 1000 * 60 * 30)) { // アカウント作成直後は意味ないので除外
+	if (new Date($i.createdAt).getTime() > (Date.now() - 1000 * 60 * 30)) { // アカウント作成直後は意味ないので除外
 		miLocalStorage.setItem('hidePreferencesRestoreSuggestion', 'true');
 	} else {
 		if (miLocalStorage.getItem('hidePreferencesRestoreSuggestion') !== 'true') {

packages/frontend/src/store.ts

@@ -102,15 +102,6 @@ export const store = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
-	widgets: {
-		where: 'account',
-		default: [] as {
-			name: string;
-			id: string;
-			place: string | null;
-			data: Record<string, any>;
-		}[],
-	},
 	tl: {
 		where: 'deviceAccount',
 		default: {
@@ -187,6 +178,15 @@ export const store = markRaw(new Storage('base', {
 	},
 
 	//#region TODO: そのうち消す (preferに移行済み)
+	widgets: {
+		where: 'account',
+		default: [] as {
+			name: string;
+			id: string;
+			place: string | null;
+			data: Record<string, any>;
+		}[],
+	},
 	defaultSideView: {
 		where: 'device',
 		default: false,

packages/frontend/src/ui/_common_/PreferenceRestore.vue

@@ -39,15 +39,6 @@ function skip() {
 	overflow: clip;
 	contain: strict;
 	background: var(--MI_THEME-panel);
-
-	@container (max-width: 1000px) {
-		display: block;
-		text-align: center;
-
-		> .body {
-			display: none;
-		}
-	}
 }
 
 .icon {

packages/frontend/src/ui/classic.vue

@@ -143,20 +143,18 @@ if (window.innerWidth < 1024) {
 
 document.documentElement.style.overflowY = 'scroll';
 
-store.loaded.then(() => {
-	if (store.state.widgets.length === 0) {
-		store.set('widgets', [{
-			name: 'calendar',
-			id: 'a', place: null, data: {},
-		}, {
-			name: 'notifications',
-			id: 'b', place: null, data: {},
-		}, {
-			name: 'trends',
-			id: 'c', place: null, data: {},
-		}]);
-	}
-});
+if (prefer.s.widgets.length === 0) {
+	prefer.set('widgets', [{
+		name: 'calendar',
+		id: 'a', place: null, data: {},
+	}, {
+		name: 'notifications',
+		id: 'b', place: null, data: {},
+	}, {
+		name: 'trends',
+		id: 'c', place: null, data: {},
+	}]);
+}
 
 onMounted(() => {
 	window.addEventListener('resize', () => {

packages/frontend/src/ui/universal.vue

@@ -106,7 +106,6 @@ import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 import type { PageMetadata } from '@/utility/page-metadata.js';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import * as os from '@/os.js';
-import { store } from '@/store.js';
 import { navbarItemDef } from '@/navbar.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
@@ -178,20 +177,18 @@ if (window.innerWidth > 1024) {
 	}
 }
 
-store.loaded.then(() => {
-	if (store.state.widgets.length === 0) {
-		store.set('widgets', [{
-			name: 'calendar',
-			id: 'a', place: 'right', data: {},
-		}, {
-			name: 'notifications',
-			id: 'b', place: 'right', data: {},
-		}, {
-			name: 'trends',
-			id: 'c', place: 'right', data: {},
-		}]);
-	}
-});
+if (prefer.s.widgets.length === 0) {
+	prefer.set('widgets', [{
+		name: 'calendar',
+		id: 'a', place: 'right', data: {},
+	}, {
+		name: 'notifications',
+		id: 'b', place: 'right', data: {},
+	}, {
+		name: 'trends',
+		id: 'c', place: 'right', data: {},
+	}]);
+}
 
 onMounted(() => {
 	if (!isDesktop.value) {

packages/frontend/src/ui/universal.widgets.vue

@@ -19,7 +19,7 @@ const editMode = ref(false);
 <script lang="ts" setup>
 import XWidgets from '@/components/MkWidgets.vue';
 import { i18n } from '@/i18n.js';
-import { store } from '@/store.js';
+import { prefer } from '@/preferences.js';
 
 const props = withDefaults(defineProps<{
 	// null = 全てのウィジェットを表示
@@ -31,24 +31,24 @@ const props = withDefaults(defineProps<{
 });
 
 const widgets = computed(() => {
-	if (props.place === null) return store.reactiveState.widgets.value;
-	if (props.place === 'left') return store.reactiveState.widgets.value.filter(w => w.place === 'left');
-	return store.reactiveState.widgets.value.filter(w => w.place !== 'left');
+	if (props.place === null) return prefer.r.widgets.value;
+	if (props.place === 'left') return prefer.r.widgets.value.filter(w => w.place === 'left');
+	return prefer.r.widgets.value.filter(w => w.place !== 'left');
 });
 
 function addWidget(widget) {
-	store.set('widgets', [{
+	prefer.set('widgets', [{
 		...widget,
 		place: props.place,
-	}, ...store.state.widgets]);
+	}, ...prefer.s.widgets]);
 }
 
 function removeWidget(widget) {
-	store.set('widgets', store.state.widgets.filter(w => w.id !== widget.id));
+	prefer.set('widgets', prefer.s.widgets.filter(w => w.id !== widget.id));
 }
 
 function updateWidget({ id, data }) {
-	store.set('widgets', store.state.widgets.map(w => w.id === id ? {
+	prefer.set('widgets', prefer.s.widgets.map(w => w.id === id ? {
 		...w,
 		data,
 		place: props.place,
@@ -57,18 +57,18 @@ function updateWidget({ id, data }) {
 
 function updateWidgets(thisWidgets) {
 	if (props.place === null) {
-		store.set('widgets', thisWidgets);
+		prefer.set('widgets', thisWidgets);
 		return;
 	}
 	if (props.place === 'left') {
-		store.set('widgets', [
+		prefer.set('widgets', [
 			...thisWidgets.map(w => ({ ...w, place: 'left' })),
-			...store.state.widgets.filter(w => w.place !== 'left' && !thisWidgets.some(t => w.id === t.id)),
+			...prefer.s.widgets.filter(w => w.place !== 'left' && !thisWidgets.some(t => w.id === t.id)),
 		]);
 		return;
 	}
-	store.set('widgets', [
-		...store.state.widgets.filter(w => w.place === 'left' && !thisWidgets.some(t => w.id === t.id)),
+	prefer.set('widgets', [
+		...prefer.s.widgets.filter(w => w.place === 'left' && !thisWidgets.some(t => w.id === t.id)),
 		...thisWidgets.map(w => ({ ...w, place: 'right' })),
 	]);
 }