enhance(frontend): make deck profiles syncable

locales/index.d.ts

@@ -9848,6 +9848,10 @@ export interface Locale extends ILocale {
          * 幅を自動調整
          */
         "flexible": string;
+        /**
+         * プロファイル情報のデバイス間同期を有効にする
+         */
+        "enableSyncBetweenDevicesForProfiles": string;
         "_columns": {
             /**
              * メイン

locales/ja-JP.yml

@@ -2603,6 +2603,7 @@ _deck:
   useSimpleUiForNonRootPages: "非ルートページは簡易UIで表示"
   usedAsMinWidthWhenFlexible: "「幅を自動調整」が有効の場合、これが幅の最小値となります"
   flexible: "幅を自動調整"
+  enableSyncBetweenDevicesForProfiles: "プロファイル情報のデバイス間同期を有効にする"
 
   _columns:
     main: "メイン"

packages/frontend/src/pages/settings/deck.vue

@@ -4,23 +4,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps_m">
-	<MkSwitch v-model="useSimpleUiForNonRootPages">{{ i18n.ts._deck.useSimpleUiForNonRootPages }}</MkSwitch>
+<SearchMarker path="/settings/deck" :label="i18n.ts.deck" :keywords="['deck', 'ui']" icon="ti ti-columns">
+	<div class="_gaps_m">
+		<MkSwitch :modelValue="profilesSyncEnabled" @update:modelValue="changeProfilesSyncEnabled">{{ i18n.ts._deck.enableSyncBetweenDevicesForProfiles }}</MkSwitch>
 
-	<MkSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</MkSwitch>
+		<MkSwitch v-model="useSimpleUiForNonRootPages">{{ i18n.ts._deck.useSimpleUiForNonRootPages }}</MkSwitch>
 
-	<MkSwitch v-model="alwaysShowMainColumn">{{ i18n.ts._deck.alwaysShowMainColumn }}</MkSwitch>
+		<MkSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</MkSwitch>
 
-	<MkRadios v-model="columnAlign">
-		<template #label>{{ i18n.ts._deck.columnAlign }}</template>
-		<option value="left">{{ i18n.ts.left }}</option>
-		<option value="center">{{ i18n.ts.center }}</option>
-	</MkRadios>
-</div>
+		<MkSwitch v-model="alwaysShowMainColumn">{{ i18n.ts._deck.alwaysShowMainColumn }}</MkSwitch>
+
+		<MkRadios v-model="columnAlign">
+			<template #label>{{ i18n.ts._deck.columnAlign }}</template>
+			<option value="left">{{ i18n.ts.left }}</option>
+			<option value="center">{{ i18n.ts.center }}</option>
+		</MkRadios>
+	</div>
+</SearchMarker>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import { i18n } from '@/i18n.js';
@@ -32,6 +36,20 @@ const useSimpleUiForNonRootPages = prefer.model('deck.useSimpleUiForNonRootPages
 const alwaysShowMainColumn = prefer.model('deck.alwaysShowMainColumn');
 const columnAlign = prefer.model('deck.columnAlign');
 
+const profilesSyncEnabled = ref(prefer.isSyncEnabled('deck.profiles'));
+
+function changeProfilesSyncEnabled(value: boolean) {
+	if (value) {
+		prefer.enableSync('deck.profiles').then((res) => {
+			if (res == null) return;
+			if (res.enabled) profilesSyncEnabled.value = true;
+		});
+	} else {
+		prefer.disableSync('deck.profiles');
+		profilesSyncEnabled.value = false;
+	}
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);

packages/frontend/src/utility/autogen/settings-search-index.ts

@@ -604,6 +604,13 @@ export const searchIndexes: SearchIndexItem[] = [
 		path: '/settings/drive',
 		icon: 'ti ti-cloud',
 	},
+	{
+		id: 'FfZdOs8y',
+		label: i18n.ts.deck,
+		keywords: ['deck', 'ui'],
+		path: '/settings/deck',
+		icon: 'ti ti-columns',
+	},
 	{
 		id: 'BlJ2rsw9h',
 		children: [