Remember container state on user page (#4361)

* Remember container state on user page

* remove unnecessary code

src/client/app/desktop/views/components/ui-container.vue

@@ -3,7 +3,7 @@
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
-		<button v-if="bodyTogglable" @click="() => showBody = !showBody">
+		<button v-if="bodyTogglable" @click="toggleContent(!showBody)">
 			<template v-if="showBody"><fa icon="angle-up"/></template>
 			<template v-else><fa icon="angle-down"/></template>
 		</button>
@@ -48,6 +48,7 @@ export default Vue.extend({
 	methods: {
 		toggleContent(show: boolean) {
 			this.showBody = show;
+			this.$emit('toggle', show);
 		}
 	}
 });

src/client/app/desktop/views/deck/deck.user-column.home.vue

@@ -6,7 +6,9 @@
 			<x-note v-for="n in user.pinnedNotes" :key="n.id" :note="n" :mini="true"/>
 		</div>
 	</ui-container>
-	<ui-container v-if="images.length > 0" :body-togglable="true">
+	<ui-container v-if="images.length > 0" :body-togglable="true"
+		:expanded="$store.state.device.expandUsersPhotos"
+		@toggle="expanded => $store.commit('device/set', { key: 'expandUsersPhotos', value: expanded })">
 		<template #header><fa :icon="['far', 'images']"/> {{ $t('images') }}</template>
 		<div class="sainvnaq">
 			<router-link v-for="image in images"
@@ -17,7 +19,9 @@
 			></router-link>
 		</div>
 	</ui-container>
-	<ui-container :body-togglable="true">
+	<ui-container :body-togglable="true"
+		:expanded="$store.state.device.expandUsersActivity"
+		@toggle="expanded => $store.commit('device/set', { key: 'expandUsersActivity', value: expanded })">
 		<template #header><fa :icon="['far', 'chart-bar']"/> {{ $t('activity') }}</template>
 		<div>
 			<div ref="chart"></div>

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

@@ -3,7 +3,9 @@
 	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
 	<!--<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>-->
 	<div class="activity">
-		<ui-container :body-togglable="true">
+		<ui-container :body-togglable="true"
+			:expanded="$store.state.device.expandUsersActivity"
+			@toggle="expanded => $store.commit('device/set', { key: 'expandUsersActivity', value: expanded })">
 			<template #header><fa icon="chart-bar"/>{{ $t('activity') }}</template>
 			<x-activity :user="user" :limit="35" style="padding: 16px;"/>
 		</ui-container>

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

@@ -1,5 +1,7 @@
 <template>
-<ui-container :body-togglable="true">
+<ui-container :body-togglable="true"
+	:expanded="$store.state.device.expandUsersPhotos"
+	@toggle="expanded => $store.commit('device/set', { key: 'expandUsersPhotos', value: expanded })">
 	<template #header><fa icon="camera"/> {{ $t('title') }}</template>
 
 	<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">

src/client/app/store.ts

@@ -68,7 +68,9 @@ const defaultDeviceSettings = {
 	mobileNotificationPosition: 'bottom',
 	deckMode: false,
 	useOsDefaultEmojis: false,
-	disableShowingAnimatedImages: false
+	disableShowingAnimatedImages: false,
+	expandUsersPhotos: true,
+	expandUsersActivity: true,
 };
 
 export default (os: MiOS) => new Vuex.Store({