Improve sync

9 files changed, 262 insertions, 255 deletions

diff --git a/src/client/app/common/define-widget.ts b/src/client/app/common/define-widget.ts
index 632ddf2ed6..ba4deafe3a 100644
--- a/src/client/app/common/define-widget.ts
+++ b/src/client/app/common/define-widget.ts
@@ -60,9 +60,9 @@ export default function <T extends object>(data: {
 
 			save() {
 				if (this.platform == 'deck') {
-					this.$store.commit('device/updateDeckColumn', this.column);
+					this.$store.commit('updateDeckColumn', this.column);
 				} else {
-					this.$store.commit('device/updateWidget', this.widget);
+					this.$store.commit('updateWidget', this.widget);
 				}
 			}
 		}
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
index 094791a153..2d962aaafa 100644
--- a/src/client/app/common/views/components/settings/settings.vue
+++ b/src/client/app/common/views/components/settings/settings.vue
@@ -133,8 +133,8 @@
 
 			<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>
+				<ui-input v-if="$root.isMobile" v-model="mobileHomeProfile">{{ $t('@._settings.home-profile') }}</ui-input>
+				<ui-input v-else v-model="homeProfile">{{ $t('@._settings.home-profile') }}</ui-input>
 				<ui-input v-model="deckProfile">{{ $t('@._settings.deck-profile') }}</ui-input>
 			</section>
 
diff --git a/src/client/app/common/views/deck/deck.column.vue b/src/client/app/common/views/deck/deck.column.vue
index b09fdfbfee..b5c0896bba 100644
--- a/src/client/app/common/views/deck/deck.column.vue
+++ b/src/client/app/common/views/deck/deck.column.vue
@@ -180,50 +180,50 @@ export default Vue.extend({
 						}
 					}).then(({ canceled, result: name }) => {
 						if (canceled) return;
-						this.$store.commit('device/renameDeckColumn', { id: this.column.id, name });
+						this.$store.commit('renameDeckColumn', { id: this.column.id, name });
 					});
 				}
 			}, null, {
 				icon: 'arrow-left',
 				text: this.$t('swap-left'),
 				action: () => {
-					this.$store.commit('device/swapLeftDeckColumn', this.column.id);
+					this.$store.commit('swapLeftDeckColumn', this.column.id);
 				}
 			}, {
 				icon: 'arrow-right',
 				text: this.$t('swap-right'),
 				action: () => {
-					this.$store.commit('device/swapRightDeckColumn', this.column.id);
+					this.$store.commit('swapRightDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faArrowUp,
 				text: this.$t('swap-up'),
 				action: () => {
-					this.$store.commit('device/swapUpDeckColumn', this.column.id);
+					this.$store.commit('swapUpDeckColumn', this.column.id);
 				}
 			} : undefined, this.isStacked ? {
 				icon: faArrowDown,
 				text: this.$t('swap-down'),
 				action: () => {
-					this.$store.commit('device/swapDownDeckColumn', this.column.id);
+					this.$store.commit('swapDownDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
 				icon: ['far', 'window-restore'],
 				text: this.$t('stack-left'),
 				action: () => {
-					this.$store.commit('device/stackLeftDeckColumn', this.column.id);
+					this.$store.commit('stackLeftDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faWindowMaximize,
 				text: this.$t('pop-right'),
 				action: () => {
-					this.$store.commit('device/popRightDeckColumn', this.column.id);
+					this.$store.commit('popRightDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
 				icon: ['far', 'trash-alt'],
 				text: this.$t('remove'),
 				action: () => {
-					this.$store.commit('device/removeDeckColumn', this.column.id);
+					this.$store.commit('removeDeckColumn', this.column.id);
 				}
 			}];
 
@@ -307,7 +307,7 @@ export default Vue.extend({
 
 			const id = e.dataTransfer.getData('mk-deck-column');
 			if (id != null && id != '') {
-				this.$store.commit('device/swapDeckColumn', {
+				this.$store.commit('swapDeckColumn', {
 					a: this.column.id,
 					b: id
 				});
diff --git a/src/client/app/common/views/deck/deck.tl-column.vue b/src/client/app/common/views/deck/deck.tl-column.vue
index 5ab8ccb12f..cad140ed5f 100644
--- a/src/client/app/common/views/deck/deck.tl-column.vue
+++ b/src/client/app/common/views/deck/deck.tl-column.vue
@@ -90,7 +90,7 @@ export default Vue.extend({
 
 	methods: {
 		onChangeSettings(v) {
-			this.$store.commit('device/updateDeckColumn', this.column);
+			this.$store.commit('updateDeckColumn', this.column);
 		},
 
 		focus() {
diff --git a/src/client/app/common/views/deck/deck.vue b/src/client/app/common/views/deck/deck.vue
index e07e504ed6..070312d839 100644
--- a/src/client/app/common/views/deck/deck.vue
+++ b/src/client/app/common/views/deck/deck.vue
@@ -32,11 +32,7 @@ export default Vue.extend({
 
 	computed: {
 		deck() {
-			if (this.$store.state.device.deckProfile) {
-				return this.$store.state.settings.deckProfiles[this.$store.state.device.deckProfile] || this.$store.state.device.deck;
-			} else {
-				return this.$store.state.device.deck;
-			}
+			return this.$store.getters.deck;
 		},
 
 		columns(): any[] {
@@ -115,14 +111,6 @@ export default Vue.extend({
 				value: deck
 			});
 		}
-
-		if (this.$store.state.device.deckProfile) {
-			this.$watch('$store.state.device.deck', () => {
-				this.$store.dispatch('settings/updateDeckProfile');
-			}, {
-				deep: true
-			});
-		}
 	},
 
 	mounted() {
@@ -146,7 +134,7 @@ export default Vue.extend({
 					icon: 'home',
 					text: this.$t('@deck.home'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'home'
 						});
@@ -155,7 +143,7 @@ export default Vue.extend({
 					icon: ['far', 'comments'],
 					text: this.$t('@deck.local'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'local'
 						});
@@ -164,7 +152,7 @@ export default Vue.extend({
 					icon: 'share-alt',
 					text: this.$t('@deck.hybrid'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'hybrid'
 						});
@@ -173,7 +161,7 @@ export default Vue.extend({
 					icon: 'globe',
 					text: this.$t('@deck.global'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'global'
 						});
@@ -182,7 +170,7 @@ export default Vue.extend({
 					icon: 'at',
 					text: this.$t('@deck.mentions'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'mentions'
 						});
@@ -191,7 +179,7 @@ export default Vue.extend({
 					icon: ['far', 'envelope'],
 					text: this.$t('@deck.direct'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'direct'
 						});
@@ -212,7 +200,7 @@ export default Vue.extend({
 							showCancelButton: true
 						});
 						if (canceled) return;
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'list',
 							list: lists.find(l => l.id === listId)
@@ -227,7 +215,7 @@ export default Vue.extend({
 							input: true
 						}).then(({ canceled, result: title }) => {
 							if (canceled) return;
-							this.$store.commit('device/addDeckColumn', {
+							this.$store.commit('addDeckColumn', {
 								id: uuid(),
 								type: 'hashtag',
 								tagTlId: this.$store.state.settings.tagTimelines.find(x => x.title == title).id
@@ -238,7 +226,7 @@ export default Vue.extend({
 					icon: ['far', 'bell'],
 					text: this.$t('@deck.notifications'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'notifications'
 						});
@@ -247,7 +235,7 @@ export default Vue.extend({
 					icon: 'calculator',
 					text: this.$t('@deck.widgets'),
 					action: () => {
-						this.$store.commit('device/addDeckColumn', {
+						this.$store.commit('addDeckColumn', {
 							id: uuid(),
 							type: 'widgets',
 							widgets: []
diff --git a/src/client/app/common/views/deck/deck.widgets-column.vue b/src/client/app/common/views/deck/deck.widgets-column.vue
index f2385c8a48..dd28a3a8b3 100644
--- a/src/client/app/common/views/deck/deck.widgets-column.vue
+++ b/src/client/app/common/views/deck/deck.widgets-column.vue
@@ -110,7 +110,7 @@ export default Vue.extend({
 		},
 
 		addWidget() {
-			this.$store.commit('device/addDeckWidget', {
+			this.$store.commit('addDeckWidget', {
 				id: this.column.id,
 				widget: {
 					name: this.widgetAdderSelected,
@@ -123,14 +123,14 @@ export default Vue.extend({
 		},
 
 		removeWidget(widget) {
-			this.$store.commit('device/removeDeckWidget', {
+			this.$store.commit('removeDeckWidget', {
 				id: this.column.id,
 				widget
 			});
 		},
 
 		saveWidgets() {
-			this.$store.commit('device/updateDeckColumn', this.column);
+			this.$store.commit('updateDeckColumn', this.column);
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/home/home.vue b/src/client/app/desktop/views/home/home.vue
index 49ac4c2407..3d05bee48d 100644
--- a/src/client/app/desktop/views/home/home.vue
+++ b/src/client/app/desktop/views/home/home.vue
@@ -84,6 +84,7 @@ import XWelcome from '../pages/welcome.vue';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/home.vue'),
+
 	components: {
 		XDraggable,
 		XWelcome
@@ -102,11 +103,7 @@ 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 || [];
-				}
+				return this.$store.getters.home || [];
 			} else {
 				return [{
 					name: 'instance',
@@ -142,7 +139,9 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (this.$store.getters.isSignedIn) {
+		if (!this.$store.getters.isSignedIn) return;
+
+		if (this.$store.getters.home == null) {
 			const defaultDesktopHomeWidgets = {
 				left: [
 					'profile',
@@ -187,17 +186,7 @@ export default Vue.extend({
 			}
 			//#endregion
 
-			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
-				});
-			}
+			this.$store.commit('setHome', _defaultDesktopHomeWidgets);
 		}
 	},
 
@@ -235,7 +224,7 @@ export default Vue.extend({
 		},
 
 		addWidget() {
-			this.$store.commit('device/addHomeWidget', {
+			this.$store.commit('addHomeWidget', {
 				name: this.widgetAdderSelected,
 				id: uuid(),
 				place: 'left',
@@ -246,7 +235,7 @@ export default Vue.extend({
 		saveHome() {
 			const left = this.widgets.left;
 			const right = this.widgets.right;
-			this.$store.commit('device/setHome', left.concat(right));
+			this.$store.commit('setHome', left.concat(right));
 			for (const w of left) w.place = 'left';
 			for (const w of right) w.place = 'right';
 		},
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index 7f0ef678de..c012de1314 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -72,17 +72,13 @@ 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;
-			}
+			return this.$store.getters.mobileHome || [];
 		}
 	},
 
 	created() {
 		if (this.widgets.length == 0) {
-			this.$store.commit('device/setMobileHome', [{
+			this.$store.commit('setMobileHome', [{
 				name: 'calendar',
 				id: 'a', data: {}
 			}, {
@@ -103,13 +99,11 @@ export default Vue.extend({
 			}]);
 		}
 
-		if (this.$store.state.device.mobileHomeProfile) {
-			this.$watch('$store.state.device.mobileHome', () => {
-				this.$store.dispatch('settings/updateMobileHomeProfile');
-			}, {
-				deep: true
-			});
-		}
+		this.$watch('$store.getters.mobileHome', () => {
+			this.$store.dispatch('settings/updateMobileHomeProfile');
+		}, {
+			deep: true
+		});
 	},
 
 	mounted() {
@@ -134,7 +128,7 @@ export default Vue.extend({
 		},
 
 		addWidget() {
-			this.$store.commit('device/addMobileHomeWidget', {
+			this.$store.commit('addMobileHomeWidget', {
 				name: this.widgetAdderSelected,
 				id: uuid(),
 				data: {}
@@ -142,11 +136,11 @@ export default Vue.extend({
 		},
 
 		removeWidget(widget) {
-			this.$store.commit('device/removeMobileHomeWidget', widget);
+			this.$store.commit('removeMobileHomeWidget', widget);
 		},
 
 		saveHome() {
-			this.$store.commit('device/setMobileHome', this.widgets);
+			this.$store.commit('setMobileHome', this.widgets);
 		}
 	}
 });
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 4a6e1a610c..b06edb1ed9 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import Vuex from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
 import * as nestedProperty from 'nested-property';
@@ -40,12 +41,9 @@ const defaultSettings = {
 };
 
 const defaultDeviceSettings = {
-	home: null,
-	homeProfile: null,
-	mobileHomeProfile: null,
-	mobileHome: [],
-	deck: null,
-	deckProfile: null,
+	homeProfile: 'Default',
+	mobileHomeProfile: 'Default',
+	deckProfile: 'Default',
 	deckMode: false,
 	deckColumnAlign: 'center',
 	deckColumnWidth: 'normal',
@@ -88,7 +86,13 @@ export default (os: MiOS) => new Vuex.Store({
 	},
 
 	getters: {
-		isSignedIn: state => state.i != null
+		isSignedIn: state => state.i != null,
+
+		home: state => state.settings.homeProfiles[state.device.homeProfile],
+
+		mobileHome: state => state.settings.mobileHomeProfiles[state.device.mobileHomeProfile],
+
+		deck: state => state.settings.deckProfiles[state.device.deckProfile],
 	},
 
 	mutations: {
@@ -118,6 +122,211 @@ export default (os: MiOS) => new Vuex.Store({
 		clearBehindNotes(state) {
 			state.behindNotes = [];
 			document.title = os.instanceName;
+		},
+
+		setHome(state, data) {
+			Vue.set(state.settings.homeProfiles, state.device.homeProfile, data);
+			os.store.dispatch('settings/updateHomeProfile');
+		},
+
+		addHomeWidget(state, widget) {
+			state.settings.homeProfiles[state.device.homeProfile].unshift(widget);
+			os.store.dispatch('settings/updateHomeProfile');
+		},
+
+		setMobileHome(state, data) {
+			Vue.set(state.settings.mobileHomeProfiles, state.device.mobileHomeProfile, data);
+			os.store.dispatch('settings/updateMobileHomeProfile');
+		},
+
+		updateWidget(state, x) {
+			let w;
+
+			//#region Desktop home
+			const home = state.settings.homeProfiles[state.device.homeProfile];
+			if (home) {
+				w = home.find(w => w.id == x.id);
+				if (w) {
+					w.data = x.data;
+					os.store.dispatch('settings/updateHomeProfile');
+				}
+			}
+			//#endregion
+
+			//#region Mobile home
+			const mobileHome = state.settings.mobileHomeProfiles[state.device.mobileHomeProfile];
+			if (mobileHome) {
+				w = mobileHome.find(w => w.id == x.id);
+				if (w) {
+					w.data = x.data;
+					os.store.dispatch('settings/updateMobileHomeProfile');
+				}
+			}
+			//#endregion
+		},
+
+		addMobileHomeWidget(state, widget) {
+			state.settings.mobileHomeProfiles[state.device.mobileHomeProfile].unshift(widget);
+			os.store.dispatch('settings/updateMobileHomeProfile');
+		},
+
+		removeMobileHomeWidget(state, widget) {
+			Vue.set('state.settings.mobileHomeProfiles', state.device.mobileHomeProfile, state.settings.mobileHomeProfiles[state.device.mobileHomeProfile].filter(w => w.id != widget.id));
+			os.store.dispatch('settings/updateMobileHomeProfile');
+		},
+
+		addDeckColumn(state, column) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			if (column.name == undefined) column.name = null;
+			deck.columns.push(column);
+			deck.layout.push([column.id]);
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		removeDeckColumn(state, id) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			deck.columns = deck.columns.filter(c => c.id != id);
+			deck.layout = deck.layout.map(ids => erase(id, ids));
+			deck.layout = deck.layout.filter(ids => ids.length > 0);
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		swapDeckColumn(state, x) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const a = x.a;
+			const b = x.b;
+			const aX = deck.layout.findIndex(ids => ids.indexOf(a) != -1);
+			const aY = deck.layout[aX].findIndex(id => id == a);
+			const bX = deck.layout.findIndex(ids => ids.indexOf(b) != -1);
+			const bY = deck.layout[bX].findIndex(id => id == b);
+			deck.layout[aX][aY] = b;
+			deck.layout[bX][bY] = a;
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		swapLeftDeckColumn(state, id) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			deck.layout.some((ids, i) => {
+				if (ids.indexOf(id) != -1) {
+					const left = deck.layout[i - 1];
+					if (left) {
+						// https://vuejs.org/v2/guide/list.html#Caveats
+						//state.deck.layout[i - 1] = state.deck.layout[i];
+						//state.deck.layout[i] = left;
+						deck.layout.splice(i - 1, 1, deck.layout[i]);
+						deck.layout.splice(i, 1, left);
+					}
+					return true;
+				}
+			});
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		swapRightDeckColumn(state, id) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			deck.layout.some((ids, i) => {
+				if (ids.indexOf(id) != -1) {
+					const right = deck.layout[i + 1];
+					if (right) {
+						// https://vuejs.org/v2/guide/list.html#Caveats
+						//state.deck.layout[i + 1] = state.deck.layout[i];
+						//state.deck.layout[i] = right;
+						deck.layout.splice(i + 1, 1, deck.layout[i]);
+						deck.layout.splice(i, 1, right);
+					}
+					return true;
+				}
+			});
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		swapUpDeckColumn(state, id) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const ids = deck.layout.find(ids => ids.indexOf(id) != -1);
+			ids.some((x, i) => {
+				if (x == id) {
+					const up = ids[i - 1];
+					if (up) {
+						// https://vuejs.org/v2/guide/list.html#Caveats
+						//ids[i - 1] = id;
+						//ids[i] = up;
+						ids.splice(i - 1, 1, id);
+						ids.splice(i, 1, up);
+					}
+					return true;
+				}
+			});
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		swapDownDeckColumn(state, id) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const ids = deck.layout.find(ids => ids.indexOf(id) != -1);
+			ids.some((x, i) => {
+				if (x == id) {
+					const down = ids[i + 1];
+					if (down) {
+						// https://vuejs.org/v2/guide/list.html#Caveats
+						//ids[i + 1] = id;
+						//ids[i] = down;
+						ids.splice(i + 1, 1, id);
+						ids.splice(i, 1, down);
+					}
+					return true;
+				}
+			});
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		stackLeftDeckColumn(state, id) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const i = deck.layout.findIndex(ids => ids.indexOf(id) != -1);
+			deck.layout = deck.layout.map(ids => erase(id, ids));
+			const left = deck.layout[i - 1];
+			if (left) deck.layout[i - 1].push(id);
+			deck.layout = deck.layout.filter(ids => ids.length > 0);
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		popRightDeckColumn(state, id) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const i = deck.layout.findIndex(ids => ids.indexOf(id) != -1);
+			deck.layout = deck.layout.map(ids => erase(id, ids));
+			deck.layout.splice(i + 1, 0, [id]);
+			deck.layout = deck.layout.filter(ids => ids.length > 0);
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		addDeckWidget(state, x) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const column = deck.columns.find(c => c.id == x.id);
+			if (column == null) return;
+			column.widgets.unshift(x.widget);
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		removeDeckWidget(state, x) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const column = deck.columns.find(c => c.id == x.id);
+			if (column == null) return;
+			column.widgets = column.widgets.filter(w => w.id != x.widget.id);
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		renameDeckColumn(state, x) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			const column = deck.columns.find(c => c.id == x.id);
+			if (column == null) return;
+			column.name = x.name;
+			os.store.dispatch('settings/updateDeckProfile');
+		},
+
+		updateDeckColumn(state, x) {
+			const deck = state.settings.deckProfiles[state.device.deckProfile];
+			let column = deck.columns.find(c => c.id == x.id);
+			if (column == null) return;
+			column = x;
+			os.store.dispatch('settings/updateDeckProfile');
 		}
 	},
 
@@ -165,176 +374,6 @@ export default (os: MiOS) => new Vuex.Store({
 				setVisibility(state, visibility) {
 					state.visibility = visibility;
 				},
-
-				setHome(state, data) {
-					state.home = data;
-				},
-
-				addHomeWidget(state, widget) {
-					state.home.unshift(widget);
-				},
-
-				setMobileHome(state, data) {
-					state.mobileHome = data;
-				},
-
-				updateWidget(state, x) {
-					let w;
-
-					//#region Desktop home
-					if (state.home) {
-						w = state.home.find(w => w.id == x.id);
-						if (w) {
-							w.data = x.data;
-						}
-					}
-					//#endregion
-
-					//#region Mobile home
-					if (state.mobileHome) {
-						w = state.mobileHome.find(w => w.id == x.id);
-						if (w) {
-							w.data = x.data;
-						}
-					}
-					//#endregion
-				},
-
-				addMobileHomeWidget(state, widget) {
-					state.mobileHome.unshift(widget);
-				},
-
-				removeMobileHomeWidget(state, widget) {
-					state.mobileHome = state.mobileHome.filter(w => w.id != widget.id);
-				},
-
-				addDeckColumn(state, column) {
-					if (column.name == undefined) column.name = null;
-					state.deck.columns.push(column);
-					state.deck.layout.push([column.id]);
-				},
-
-				removeDeckColumn(state, id) {
-					state.deck.columns = state.deck.columns.filter(c => c.id != id);
-					state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
-					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
-				},
-
-				swapDeckColumn(state, x) {
-					const a = x.a;
-					const b = x.b;
-					const aX = state.deck.layout.findIndex(ids => ids.indexOf(a) != -1);
-					const aY = state.deck.layout[aX].findIndex(id => id == a);
-					const bX = state.deck.layout.findIndex(ids => ids.indexOf(b) != -1);
-					const bY = state.deck.layout[bX].findIndex(id => id == b);
-					state.deck.layout[aX][aY] = b;
-					state.deck.layout[bX][bY] = a;
-				},
-
-				swapLeftDeckColumn(state, id) {
-					state.deck.layout.some((ids, i) => {
-						if (ids.indexOf(id) != -1) {
-							const left = state.deck.layout[i - 1];
-							if (left) {
-								// https://vuejs.org/v2/guide/list.html#Caveats
-								//state.deck.layout[i - 1] = state.deck.layout[i];
-								//state.deck.layout[i] = left;
-								state.deck.layout.splice(i - 1, 1, state.deck.layout[i]);
-								state.deck.layout.splice(i, 1, left);
-							}
-							return true;
-						}
-					});
-				},
-
-				swapRightDeckColumn(state, id) {
-					state.deck.layout.some((ids, i) => {
-						if (ids.indexOf(id) != -1) {
-							const right = state.deck.layout[i + 1];
-							if (right) {
-								// https://vuejs.org/v2/guide/list.html#Caveats
-								//state.deck.layout[i + 1] = state.deck.layout[i];
-								//state.deck.layout[i] = right;
-								state.deck.layout.splice(i + 1, 1, state.deck.layout[i]);
-								state.deck.layout.splice(i, 1, right);
-							}
-							return true;
-						}
-					});
-				},
-
-				swapUpDeckColumn(state, id) {
-					const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
-					ids.some((x, i) => {
-						if (x == id) {
-							const up = ids[i - 1];
-							if (up) {
-								// https://vuejs.org/v2/guide/list.html#Caveats
-								//ids[i - 1] = id;
-								//ids[i] = up;
-								ids.splice(i - 1, 1, id);
-								ids.splice(i, 1, up);
-							}
-							return true;
-						}
-					});
-				},
-
-				swapDownDeckColumn(state, id) {
-					const ids = state.deck.layout.find(ids => ids.indexOf(id) != -1);
-					ids.some((x, i) => {
-						if (x == id) {
-							const down = ids[i + 1];
-							if (down) {
-								// https://vuejs.org/v2/guide/list.html#Caveats
-								//ids[i + 1] = id;
-								//ids[i] = down;
-								ids.splice(i + 1, 1, id);
-								ids.splice(i, 1, down);
-							}
-							return true;
-						}
-					});
-				},
-
-				stackLeftDeckColumn(state, id) {
-					const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
-					state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
-					const left = state.deck.layout[i - 1];
-					if (left) state.deck.layout[i - 1].push(id);
-					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
-				},
-
-				popRightDeckColumn(state, id) {
-					const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
-					state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
-					state.deck.layout.splice(i + 1, 0, [id]);
-					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
-				},
-
-				addDeckWidget(state, x) {
-					const column = state.deck.columns.find(c => c.id == x.id);
-					if (column == null) return;
-					column.widgets.unshift(x.widget);
-				},
-
-				removeDeckWidget(state, x) {
-					const column = state.deck.columns.find(c => c.id == x.id);
-					if (column == null) return;
-					column.widgets = column.widgets.filter(w => w.id != x.widget.id);
-				},
-
-				renameDeckColumn(state, x) {
-					const column = state.deck.columns.find(c => c.id == x.id);
-					if (column == null) return;
-					column.name = x.name;
-				},
-
-				updateDeckColumn(state, x) {
-					let column = state.deck.columns.find(c => c.id == x.id);
-					if (column == null) return;
-					column = x;
-				}
 			}
 		},
 
@@ -370,7 +409,6 @@ 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
@@ -383,7 +421,6 @@ export default (os: MiOS) => new Vuex.Store({
 
 				updateMobileHomeProfile(ctx) {
 					const profiles = ctx.state.mobileHomeProfiles;
-					profiles[ctx.rootState.device.mobileHomeProfile] = ctx.rootState.device.mobileHome;
 					ctx.commit('set', {
 						key: 'mobileHomeProfiles',
 						value: profiles
@@ -396,7 +433,6 @@ export default (os: MiOS) => new Vuex.Store({
 
 				updateDeckProfile(ctx) {
 					const profiles = ctx.state.deckProfiles;
-					profiles[ctx.rootState.device.deckProfile] = ctx.rootState.device.deck;
 					ctx.commit('set', {
 						key: 'deckProfiles',
 						value: profiles