ホームのカスタマイズ情報を複数のデバイス間で同期できるように

locales/ja-JP.yml

@@ -282,6 +282,8 @@ common:
     disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
     load-raw-images: "添付された画像を高画質で表示する"
     load-remote-media: "リモートサーバーのメディアを表示する"
+    sync: "同期"
+    home-profile: "ホームのプロファイル"
 
   search: "検索"
   delete: "削除"

src/client/app/common/views/components/settings/settings.vue

@@ -131,6 +131,12 @@
 				</section>
 			</section>
 
+			<section>
+				<header>{{ $t('@._settings.sync') }}</header>
+				<ui-input v-if="$root.isMobile" v-model="homeProfile">{{ $t('@._settings.home-profile') }}</ui-input>
+				<ui-input v-else v-model="mobileHomeProfile">{{ $t('@._settings.home-profile') }}</ui-input>
+			</section>
+
 			<section>
 				<header>{{ $t('@._settings.web-search-engine') }}</header>
 				<ui-input v-model="webSearchEngine">{{ $t('@._settings.web-search-engine') }}<template #desc>{{ $t('@._settings.web-search-engine-desc') }}</template></ui-input>
@@ -500,6 +506,16 @@ export default Vue.extend({
 			get() { return this.$store.state.device.mobileNotificationPosition; },
 			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
 		},
+
+		homeProfile: {
+			get() { return this.$store.state.device.homeProfile; },
+			set(value) { this.$store.commit('device/set', { key: 'homeProfile', value }); }
+		},
+
+		mobileHomeProfile: {
+			get() { return this.$store.state.device.mobileHomeProfile; },
+			set(value) { this.$store.commit('device/set', { key: 'mobileHomeProfile', value }); }
+		},
 	},
 	created() {
 		this.$root.getMeta().then(meta => {

src/client/app/desktop/views/home/home.vue

@@ -102,7 +102,11 @@ export default Vue.extend({
 	computed: {
 		home(): any[] {
 			if (this.$store.getters.isSignedIn) {
+				if (this.$store.state.device.homeProfile) {
+					return this.$store.state.settings.homeProfiles[this.$store.state.device.homeProfile] || this.$store.state.device.home || [];
+				} else {
 					return this.$store.state.device.home || [];
+				}
 			} else {
 				return [{
 					name: 'instance',
@@ -186,6 +190,14 @@ export default Vue.extend({
 			if (this.$store.state.device.home == null) {
 				this.$store.commit('device/setHome', _defaultDesktopHomeWidgets);
 			}
+
+			if (this.$store.state.device.homeProfile) {
+				this.$watch('$store.state.device.home', () => {
+					this.$store.dispatch('settings/updateHomeProfile');
+				}, {
+					deep: true
+				});
+			}
 		}
 	},
 
@@ -245,7 +257,7 @@ export default Vue.extend({
 
 		focus() {
 			(this.$refs.content as any).focus();
-		}
+		},
 	}
 });
 </script>

src/client/app/mobile/views/pages/widgets.vue

@@ -72,8 +72,12 @@ export default Vue.extend({
 
 	computed: {
 		widgets(): any[] {
+			if (this.$store.state.device.mobileHomeProfile) {
+				return this.$store.state.settings.mobileHomeProfiles[this.$store.state.device.mobileHomeProfile] || this.$store.state.device.mobileHome;
+			} else {
 				return this.$store.state.device.mobileHome;
 			}
+		}
 	},
 
 	created() {
@@ -98,6 +102,14 @@ export default Vue.extend({
 				id: 'g', data: {}
 			}]);
 		}
+
+		if (this.$store.state.device.mobileHomeProfile) {
+			this.$watch('$store.state.device.mobileHome', () => {
+				this.$store.dispatch('settings/updateMobileHomeProfile');
+			}, {
+				deep: true
+			});
+		}
 	},
 
 	mounted() {

src/client/app/store.ts

@@ -34,10 +34,14 @@ const defaultSettings = {
 	gamesReversiShowBoardLabels: false,
 	gamesReversiUseAvatarStones: true,
 	disableAnimatedMfm: false,
+	homeProfiles: {},
+	mobileHomeProfiles: {},
 };
 
 const defaultDeviceSettings = {
 	home: null,
+	homeProfile: null,
+	mobileHomeProfile: null,
 	mobileHome: [],
 	deck: null,
 	deckMode: false,
@@ -361,6 +365,32 @@ export default (os: MiOS) => new Vuex.Store({
 						});
 					}
 				},
+
+				updateHomeProfile(ctx) {
+					const profiles = ctx.state.homeProfiles;
+					profiles[ctx.rootState.device.homeProfile] = ctx.rootState.device.home;
+					ctx.commit('set', {
+						key: 'homeProfiles',
+						value: profiles
+					});
+					os.api('i/update-client-setting', {
+						name: 'homeProfiles',
+						value: profiles
+					});
+				},
+
+				updateMobileHomeProfile(ctx) {
+					const profiles = ctx.state.mobileHomeProfiles;
+					profiles[ctx.rootState.device.mobileHomeProfile] = ctx.rootState.device.mobileHome;
+					ctx.commit('set', {
+						key: 'mobileHomeProfiles',
+						value: profiles
+					});
+					os.api('i/update-client-setting', {
+						name: 'mobileHomeProfiles',
+						value: profiles
+					});
+				}
 			}
 		}
 	}