モバイル版のウィジェット復活

src/client/app/common/scripts/streaming/home.ts

@@ -48,6 +48,17 @@ export class HomeStream extends Stream {
 			}
 		});
 
+		this.on('mobile_home_updated', x => {
+			if (x.home) {
+				os.store.commit('settings/setMobileHome', x.home);
+			} else {
+				os.store.commit('settings/setMobileHomeWidget', {
+					id: x.id,
+					data: x.data
+				});
+			}
+		});
+
 		// トークンが再生成されたとき
 		// このままではMisskeyが利用できないので強制的にサインアウトさせる
 		this.on('my_token_regenerated', () => {

src/client/app/mobile/script.ts

@@ -23,6 +23,7 @@ import MkUser from './views/pages/user.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
 import MkDrive from './views/pages/drive.vue';
 import MkNotifications from './views/pages/notifications.vue';
+import MkWidgets from './views/pages/widgets.vue';
 import MkMessaging from './views/pages/messaging.vue';
 import MkMessagingRoom from './views/pages/messaging-room.vue';
 import MkNote from './views/pages/note.vue';
@@ -56,6 +57,7 @@ init((launch) => {
 			{ path: '/i/settings', component: MkSettings },
 			{ path: '/i/settings/profile', component: MkProfileSetting },
 			{ path: '/i/notifications', name: 'notifications', component: MkNotifications },
+			{ path: '/i/widgets', name: 'widgets', component: MkWidgets },
 			{ path: '/i/messaging', name: 'messaging', component: MkMessaging },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
 			{ path: '/i/drive', name: 'drive', component: MkDrive },

src/client/app/mobile/views/components/ui.nav.vue

@@ -21,6 +21,7 @@
 					<li><router-link to="/othello" :data-active="$route.name == 'othello'">%fa:gamepad%ゲーム<template v-if="hasGameInvitations">%fa:circle%</template>%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
+					<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:quidditch%%i18n:@widgets%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>

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

@@ -40,7 +40,7 @@
 			</x-draggable>
 		</template>
 		<template v-else>
-			<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true" @chosen="warp"/>
+			<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :is-mobile="true"/>
 		</template>
 	</main>
 </mk-ui>
@@ -55,17 +55,24 @@ export default Vue.extend({
 	components: {
 		XDraggable
 	},
+
 	data() {
 		return {
 			showNav: false,
-			widgets: [],
 			customizing: false,
 			widgetAdderSelected: null
 		};
 	},
+
+	computed: {
+		widgets(): any[] {
+			return this.$store.state.settings.data.mobileHome;
+		}
+	},
+
 	created() {
-		if ((this as any).clientSettings.mobileHome == null) {
+		if (this.widgets.length == 0) {
-			Vue.set((this as any).clientSettings, 'mobileHome', [{
+			this.widgets = [{
 				name: 'calendar',
 				id: 'a', data: {}
 			}, {
@@ -86,18 +93,9 @@ export default Vue.extend({
 			}, {
 				name: 'version',
 				id: 'g', data: {}
-			}]);
+			}];
-			this.widgets = (this as any).clientSettings.mobileHome;
 			this.saveHome();
-		} else {
-			this.widgets = (this as any).clientSettings.mobileHome;
 		}
-
-		this.$watch('clientSettings', i => {
-			this.widgets = (this as any).clientSettings.mobileHome;
-		}, {
-			deep: true
-		});
 	},
 
 	mounted() {
@@ -105,46 +103,33 @@ export default Vue.extend({
 	},
 
 	methods: {
-		onHomeUpdated(data) {
-			if (data.home) {
-				(this as any).clientSettings.mobileHome = data.home;
-				this.widgets = data.home;
-			} else {
-				const w = (this as any).clientSettings.mobileHome.find(w => w.id == data.id);
-				if (w != null) {
-					w.data = data.data;
-					this.$refs[w.id][0].preventSave = true;
-					this.$refs[w.id][0].props = w.data;
-					this.widgets = (this as any).clientSettings.mobileHome;
-				}
-			}
-		},
 		hint() {
 			alert('ウィジェットを追加/削除したり並べ替えたりできます。ウィジェットを移動するには「三」をドラッグします。ウィジェットを削除するには「x」をタップします。いくつかのウィジェットはタップすることで表示を変更できます。');
 		},
+
 		widgetFunc(id) {
 			const w = this.$refs[id][0];
 			if (w.func) w.func();
 		},
+
 		onWidgetSort() {
 			this.saveHome();
 		},
+
 		addWidget() {
-			const widget = {
+			this.$store.dispatch('settings/addMobileHomeWidget', {
 				name: this.widgetAdderSelected,
 				id: uuid(),
 				data: {}
-			};
+			});
+		},
 
-			this.widgets.unshift(widget);
-			this.saveHome();
-		},
 		removeWidget(widget) {
-			this.widgets = this.widgets.filter(w => w.id != widget.id);
+			this.$store.dispatch('settings/removeMobileHomeWidget', widget);
-			this.saveHome();
 		},
+
 		saveHome() {
-			(this as any).clientSettings.mobileHome = this.widgets;
+			this.$store.commit('settings/setMobileHome', this.widgets);
 			(this as any).api('i/update_mobile_home', {
 				home: this.widgets
 			});

src/client/app/store.ts

@@ -3,6 +3,7 @@ import MiOS from './mios';
 
 const defaultSettings = {
 	home: [],
+	mobileHome: [],
 	fetchOnScroll: true,
 	showMaps: true,
 	showPostFormOnTopOfTl: false,
@@ -58,6 +59,25 @@ export default (os: MiOS) => new Vuex.Store({
 
 				addHomeWidget(state, widget) {
 					state.data.home.unshift(widget);
+				},
+
+				setMobileHome(state, data) {
+					state.data.mobileHome = data;
+				},
+
+				setMobileHomeWidget(state, x) {
+					const w = state.data.mobileHome.find(w => w.id == x.id);
+					if (w) {
+						w.data = x.data;
+					}
+				},
+
+				addMobileHomeWidget(state, widget) {
+					state.data.mobileHome.unshift(widget);
+				},
+
+				removeMobileHomeWidget(state, widget) {
+					state.data.mobileHome = state.data.mobileHome.filter(w => w.id != widget.id);
 				}
 			},
 
@@ -85,6 +105,22 @@ export default (os: MiOS) => new Vuex.Store({
 					os.api('i/update_home', {
 						home: ctx.state.data.home
 					});
+				},
+
+				addMobileHomeWidget(ctx, widget) {
+					ctx.commit('addMobileHomeWidget', widget);
+
+					os.api('i/update_mobile_home', {
+						home: ctx.state.data.mobileHome
+					});
+				},
+
+				removeMobileHomeWidget(ctx, widget) {
+					ctx.commit('removeMobileHomeWidget', widget);
+
+					os.api('i/update_mobile_home', {
+						home: ctx.state.data.mobileHome.filter(w => w.id != widget.id)
+					});
 				}
 			}
 		}