クライアントの設定コンポーネントを整理

* デスクトップとモバイルで統一
* いくつかの設定を廃止

25 files changed, 632 insertions, 1037 deletions

diff --git a/src/client/app/desktop/views/components/settings.2fa.vue b/src/client/app/common/views/components/settings/2fa.vue
index 636c3270ee..07a1493151 100644
--- a/src/client/app/desktop/views/components/settings.2fa.vue
+++ b/src/client/app/common/views/components/settings/2fa.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/settings.2fa.vue'),
diff --git a/src/client/app/common/views/components/api-settings.vue b/src/client/app/common/views/components/settings/api.vue
index 8877e1f3cb..4f1b755857 100644
--- a/src/client/app/common/views/components/api-settings.vue
+++ b/src/client/app/common/views/components/settings/api.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 import * as JSON5 from 'json5';
 
 export default Vue.extend({
diff --git a/src/client/app/desktop/views/components/settings.apps.vue b/src/client/app/common/views/components/settings/apps.vue
index 2760a81466..c5beaa1fe2 100644
--- a/src/client/app/desktop/views/components/settings.apps.vue
+++ b/src/client/app/common/views/components/settings/apps.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/settings.apps.vue'),
 	data() {
diff --git a/src/client/app/common/views/components/drive-settings.vue b/src/client/app/common/views/components/settings/drive.vue
index 0541c2b3d2..850f95d3f4 100644
--- a/src/client/app/common/views/components/drive-settings.vue
+++ b/src/client/app/common/views/components/settings/drive.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 import * as tinycolor from 'tinycolor2';
 import ApexCharts from 'apexcharts';
 
diff --git a/src/client/app/common/views/components/integration-settings.vue b/src/client/app/common/views/components/settings/integration.vue
index 8862fa86d5..b91880679f 100644
--- a/src/client/app/common/views/components/integration-settings.vue
+++ b/src/client/app/common/views/components/settings/integration.vue
@@ -27,8 +27,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { apiUrl } from '../../../config';
+import i18n from '../../../../i18n';
+import { apiUrl } from '../../../../config';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/integration-settings.vue'),
diff --git a/src/client/app/common/views/components/language-settings.vue b/src/client/app/common/views/components/settings/language.vue
index 0d9a5e1608..f81775f09b 100644
--- a/src/client/app/common/views/components/language-settings.vue
+++ b/src/client/app/common/views/components/settings/language.vue
@@ -20,8 +20,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { langs } from '../../../config';
+import i18n from '../../../../i18n';
+import { langs } from '../../../../config';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/language-settings.vue'),
diff --git a/src/client/app/common/views/components/mute-and-block.vue b/src/client/app/common/views/components/settings/mute-and-block.vue
index 4a7f5be67d..33b19582b7 100644
--- a/src/client/app/common/views/components/mute-and-block.vue
+++ b/src/client/app/common/views/components/settings/mute-and-block.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/mute-and-block.vue'),
diff --git a/src/client/app/common/views/components/notification-settings.vue b/src/client/app/common/views/components/settings/notification.vue
index fe7475027e..b689544d69 100644
--- a/src/client/app/common/views/components/notification-settings.vue
+++ b/src/client/app/common/views/components/settings/notification.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/notification-settings.vue'),
diff --git a/src/client/app/common/views/components/password-settings.vue b/src/client/app/common/views/components/settings/password.vue
index eb511d6213..c867561518 100644
--- a/src/client/app/common/views/components/password-settings.vue
+++ b/src/client/app/common/views/components/settings/password.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/password-settings.vue'),
diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/settings/profile.vue
index 91f6e91b33..61d273cfaf 100644
--- a/src/client/app/common/views/components/profile-editor.vue
+++ b/src/client/app/common/views/components/settings/profile.vue
@@ -61,7 +61,7 @@
 		<div>
 			<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
 			<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
-			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>
+			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@._settings.always-mark-nsfw') }}</ui-switch>
 		</div>
 	</section>
 
@@ -113,11 +113,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { apiUrl, host } from '../../../config';
+import i18n from '../../../../i18n';
+import { apiUrl, host } from '../../../../config';
 import { toUnicode } from 'punycode';
 import langmap from 'langmap';
-import { unique } from '../../../../../prelude/array';
+import { unique } from '../../../../../../prelude/array';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
new file mode 100644
index 0000000000..87b93574a5
--- /dev/null
+++ b/src/client/app/common/views/components/settings/settings.vue
@@ -0,0 +1,565 @@
+<template>
+<div class="nqfhvmnl">
+	<template v-if="page == null || page == 'profile'">
+		<x-profile/>
+		<x-integration/>
+	</template>
+
+	<template v-if="page == null || page == 'appearance'">
+		<x-theme/>
+
+		<ui-card>
+			<template #title><fa icon="desktop"/> {{ $t('@._settings.appearance') }}</template>
+
+			<section v-if="!$root.isMobile">
+				<ui-switch v-model="showPostFormOnTopOfTl">{{ $t('@._settings.post-form-on-timeline') }}</ui-switch>
+				<ui-button @click="customizeHome">{{ $t('@.customize-home') }}</ui-button>
+			</section>
+			<section v-if="!$root.isMobile">
+				<header>{{ $t('@._settings.wallpaper') }}</header>
+				<ui-horizon-group class="fit-bottom">
+					<ui-button @click="updateWallpaper">{{ $t('@._settings.choose-wallpaper') }}</ui-button>
+					<ui-button @click="deleteWallpaper">{{ $t('@._settings.delete-wallpaper') }}</ui-button>
+				</ui-horizon-group>
+			</section>
+			<section v-if="!$root.isMobile">
+				<header>{{ $t('@._settings.navbar-position') }}</header>
+				<ui-radio v-model="navbar" value="top">{{ $t('@._settings.navbar-position-top') }}</ui-radio>
+				<ui-radio v-model="navbar" value="left">{{ $t('@._settings.navbar-position-left') }}</ui-radio>
+				<ui-radio v-model="navbar" value="right">{{ $t('@._settings.navbar-position-right') }}</ui-radio>
+			</section>
+			<section>
+				<ui-switch v-model="darkmode">{{ $t('@.dark-mode') }}</ui-switch>
+				<ui-switch v-model="useShadow">{{ $t('@._settings.use-shadow') }}</ui-switch>
+				<ui-switch v-model="roundedCorners">{{ $t('@._settings.rounded-corners') }}</ui-switch>
+				<ui-switch v-model="circleIcons">{{ $t('@._settings.circle-icons') }}</ui-switch>
+				<ui-switch v-model="reduceMotion">{{ $t('@._settings.reduce-motion') }}</ui-switch>
+				<ui-switch v-model="contrastedAcct">{{ $t('@._settings.contrasted-acct') }}</ui-switch>
+				<ui-switch v-model="showFullAcct">{{ $t('@._settings.show-full-acct') }}</ui-switch>
+				<ui-switch v-model="showVia">{{ $t('@._settings.show-via') }}</ui-switch>
+				<ui-switch v-model="useOsDefaultEmojis">{{ $t('@._settings.use-os-default-emojis') }}</ui-switch>
+				<ui-switch v-model="iLikeSushi">{{ $t('@._settings.i-like-sushi') }}</ui-switch>
+			</section>
+			<section>
+				<ui-switch v-model="suggestRecentHashtags">{{ $t('@._settings.suggest-recent-hashtags') }}</ui-switch>
+				<ui-switch v-model="showClockOnHeader" v-if="!$root.isMobile">{{ $t('@._settings.show-clock-on-header') }}</ui-switch>
+				<ui-switch v-model="alwaysShowNsfw">{{ $t('@._settings.always-show-nsfw') }}</ui-switch>
+				<ui-switch v-model="showReplyTarget">{{ $t('@._settings.show-reply-target') }}</ui-switch>
+				<ui-switch v-model="disableAnimatedMfm">{{ $t('@._settings.disable-animated-mfm') }}</ui-switch>
+				<ui-switch v-model="disableShowingAnimatedImages">{{ $t('@._settings.disable-showing-animated-images') }}</ui-switch>
+				<ui-switch v-model="remainDeletedNote">{{ $t('@._settings.remain-deleted-note') }}</ui-switch>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.line-width') }}</header>
+				<ui-radio v-model="lineWidth" :value="0.5">{{ $t('@._settings.line-width-thin') }}</ui-radio>
+				<ui-radio v-model="lineWidth" :value="1">{{ $t('@._settings.line-width-normal') }}</ui-radio>
+				<ui-radio v-model="lineWidth" :value="2">{{ $t('@._settings.line-width-thick') }}</ui-radio>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.font-size') }}</header>
+				<ui-radio v-model="fontSize" :value="-2">{{ $t('@._settings.font-size-x-small') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="-1">{{ $t('@._settings.font-size-small') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="0">{{ $t('@._settings.font-size-medium') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="1">{{ $t('@._settings.font-size-large') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="2">{{ $t('@._settings.font-size-x-large') }}</ui-radio>
+			</section>
+			<section v-if="$root.isMobile">
+				<header>{{ $t('@._settings.post-style') }}</header>
+				<ui-radio v-model="postStyle" value="standard">{{ $t('@._settings.post-style-standard') }}</ui-radio>
+				<ui-radio v-model="postStyle" value="smart">{{ $t('@._settings.post-style-smart') }}</ui-radio>
+			</section>
+			<section v-if="$root.isMobile">
+				<header>{{ $t('@._settings.notification-position') }}</header>
+				<ui-radio v-model="mobileNotificationPosition" value="bottom">{{ $t('@._settings.notification-position-bottom') }}</ui-radio>
+				<ui-radio v-model="mobileNotificationPosition" value="top">{{ $t('@._settings.notification-position-top') }}</ui-radio>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.deck-column-align') }}</header>
+				<ui-radio v-model="deckColumnAlign" value="center">{{ $t('@._settings.deck-column-align-center') }}</ui-radio>
+				<ui-radio v-model="deckColumnAlign" value="left">{{ $t('@._settings.deck-column-align-left') }}</ui-radio>
+				<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('@._settings.deck-column-align-flexible') }}</ui-radio>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.deck-column-width') }}</header>
+				<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('@._settings.deck-column-width-narrow') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('@._settings.deck-column-width-narrower') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('@._settings.deck-column-width-normal') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('@._settings.deck-column-width-wider') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('@._settings.deck-column-width-wide') }}</ui-radio>
+			</section>
+			<section>
+				<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@._settings.show-reversi-board-labels') }}</ui-switch>
+				<ui-switch v-model="games_reversi_useAvatarStones">{{ $t('@._settings.use-avatar-reversi-stones') }}</ui-switch>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'behavior'">
+		<ui-card>
+			<template #title><fa icon="sliders-h"/> {{ $t('@._settings.behavior') }}</template>
+
+			<section>
+				<ui-switch v-model="fetchOnScroll">{{ $t('@._settings.fetch-on-scroll') }}
+					<template #desc>{{ $t('@._settings.fetch-on-scroll-desc') }}</template>
+				</ui-switch>
+				<ui-switch v-model="keepCw">{{ $t('@._settings.keep-cw') }}
+					<template #desc>{{ $t('@._settings.keep-cw-desc') }}</template>
+				</ui-switch>
+				<ui-switch v-if="$root.isMobile" v-model="disableViaMobile">{{ $t('@._settings.disable-via-mobile') }}</ui-switch>
+			</section>
+
+			<section>
+				<header>{{ $t('@._settings.timeline') }}</header>
+				<ui-switch v-model="showMyRenotes">{{ $t('@._settings.show-my-renotes') }}</ui-switch>
+				<ui-switch v-model="showRenotedMyNotes">{{ $t('@._settings.show-renoted-my-notes') }}</ui-switch>
+				<ui-switch v-model="showLocalRenotes">{{ $t('@._settings.show-local-renotes') }}</ui-switch>
+			</section>
+
+			<section>
+				<header>{{ $t('@._settings.note-visibility') }}</header>
+				<ui-switch v-model="rememberNoteVisibility">{{ $t('@._settings.remember-note-visibility') }}</ui-switch>
+				<section>
+					<header>{{ $t('@._settings.default-note-visibility') }}</header>
+					<ui-select v-model="defaultNoteVisibility">
+						<option value="public">{{ $t('@.note-visibility.public') }}</option>
+						<option value="home">{{ $t('@.note-visibility.home') }}</option>
+						<option value="followers">{{ $t('@.note-visibility.followers') }}</option>
+						<option value="specified">{{ $t('@.note-visibility.specified') }}</option>
+						<option value="local-public">{{ $t('@.note-visibility.local-public') }}</option>
+						<option value="local-home">{{ $t('@.note-visibility.local-home') }}</option>
+						<option value="local-followers">{{ $t('@.note-visibility.local-followers') }}</option>
+					</ui-select>
+				</section>
+			</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>
+			</section>
+		</ui-card>
+
+		<ui-card>
+			<template #title><fa icon="volume-up"/> {{ $t('@._settings.sound') }}</template>
+
+			<section>
+				<ui-switch v-model="enableSounds">{{ $t('@._settings.enable-sounds') }}
+					<template #desc>{{ $t('@._settings.enable-sounds-desc') }}</template>
+				</ui-switch>
+				<label>{{ $t('@._settings.volume') }}</label>
+				<input type="range"
+					v-model="soundVolume"
+					:disabled="!enableSounds"
+					max="1"
+					step="0.1"
+				/>
+				<ui-button @click="soundTest"><fa icon="volume-up"/> {{ $t('@._settings.test') }}</ui-button>
+			</section>
+		</ui-card>
+
+		<x-language/>
+	</template>
+
+	<template v-if="page == null || page == 'notification'">
+		<x-notification v-show="page == 'notification'"/>
+	</template>
+
+	<template v-if="page == null || page == 'drive'">
+		<x-drive/>
+	</template>
+
+	<template v-if="page == null || page == 'hashtags'">
+		<ui-card>
+			<template #title><fa icon="hashtag"/> {{ $t('@._settings.tags') }}</template>
+			<section>
+				<x-tags/>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'muteAndBlock'">
+		<x-mute-and-block/>
+	</template>
+
+	<template v-if="page == null || page == 'apps'">
+		<ui-card>
+			<template #title><fa icon="puzzle-piece"/> {{ $t('@._settings.apps') }}</template>
+			<section>
+				<x-apps/>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'security'">
+		<ui-card>
+			<template #title><fa icon="unlock-alt"/> {{ $t('@._settings.password') }}</template>
+			<section>
+				<x-password/>
+			</section>
+		</ui-card>
+
+		<ui-card v-if="!$root.isMobile">
+			<template #title><fa icon="mobile-alt"/> {{ $t('@.2fa') }}</template>
+			<section>
+				<x-2fa/>
+			</section>
+		</ui-card>
+
+		<ui-card>
+			<template #title><fa icon="sign-in-alt"/> {{ $t('@._settings.signin') }}</template>
+			<section>
+				<x-signins/>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'api'">
+		<x-api/>
+	</template>
+
+	<template v-if="page == null || page == 'other'">
+		<ui-card>
+			<template #title><fa icon="sync-alt"/> {{ $t('@._settings.update') }}</template>
+			<section>
+				<p>
+					<span>{{ $t('@._settings.version') }} <i>{{ version }}</i></span>
+					<template v-if="latestVersion !== undefined">
+						<br>
+						<span>{{ $t('@._settings.latest-version') }} <i>{{ latestVersion ? latestVersion : version }}</i></span>
+					</template>
+				</p>
+				<ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
+					<template v-if="checkingForUpdate">{{ $t('@._settings.update-checking') }}<mk-ellipsis/></template>
+					<template v-else>{{ $t('@._settings.do-update') }}</template>
+				</ui-button>
+			</section>
+		</ui-card>
+
+		<ui-card>
+			<template #title><fa icon="cogs"/> {{ $t('@._settings.advanced-settings') }}</template>
+			<section>
+				<ui-switch v-model="debug">
+					{{ $t('@._settings.debug-mode') }}<template #desc>{{ $t('@._settings.debug-mode-desc') }}</template>
+				</ui-switch>
+			</section>
+		</ui-card>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import X2fa from './2fa.vue';
+import XApps from './apps.vue';
+import XSignins from './signins.vue';
+import XTags from './tags.vue';
+import XIntegration from './integration.vue';
+import XTheme from './theme.vue';
+import XDrive from './drive.vue';
+import XMuteAndBlock from './mute-and-block.vue';
+import XPassword from './password.vue';
+import XProfile from './profile.vue';
+import XApi from './api.vue';
+import XLanguage from './language.vue';
+import XNotification from './notification.vue';
+
+import { url, version } from '../../../../config';
+import checkForUpdate from '../../../scripts/check-for-update';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		X2fa,
+		XApps,
+		XSignins,
+		XTags,
+		XIntegration,
+		XTheme,
+		XDrive,
+		XMuteAndBlock,
+		XPassword,
+		XProfile,
+		XApi,
+		XLanguage,
+		XNotification,
+	},
+	props: {
+		page: {
+			type: String,
+			required: false,
+			default: null
+		}
+	},
+	data() {
+		return {
+			meta: null,
+			version,
+			latestVersion: undefined,
+			checkingForUpdate: false
+		};
+	},
+	computed: {
+		useOsDefaultEmojis: {
+			get() { return this.$store.state.device.useOsDefaultEmojis; },
+			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
+		},
+
+		reduceMotion: {
+			get() { return this.$store.state.device.reduceMotion; },
+			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
+		},
+
+		keepCw: {
+			get() { return this.$store.state.settings.keepCw; },
+			set(value) { this.$store.commit('settings/set', { key: 'keepCw', value }); }
+		},
+
+		darkmode: {
+			get() { return this.$store.state.device.darkmode; },
+			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
+		},
+
+		navbar: {
+			get() { return this.$store.state.device.navbar; },
+			set(value) { this.$store.commit('device/set', { key: 'navbar', value }); }
+		},
+
+		deckColumnAlign: {
+			get() { return this.$store.state.device.deckColumnAlign; },
+			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
+		},
+
+		deckColumnWidth: {
+			get() { return this.$store.state.device.deckColumnWidth; },
+			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
+		},
+
+		enableSounds: {
+			get() { return this.$store.state.device.enableSounds; },
+			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
+		},
+
+		soundVolume: {
+			get() { return this.$store.state.device.soundVolume; },
+			set(value) { this.$store.commit('device/set', { key: 'soundVolume', value }); }
+		},
+
+		debug: {
+			get() { return this.$store.state.device.debug; },
+			set(value) { this.$store.commit('device/set', { key: 'debug', value }); }
+		},
+
+		alwaysShowNsfw: {
+			get() { return this.$store.state.device.alwaysShowNsfw; },
+			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
+		},
+
+		postStyle: {
+			get() { return this.$store.state.device.postStyle; },
+			set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); }
+		},
+
+		disableViaMobile: {
+			get() { return this.$store.state.settings.disableViaMobile; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
+		},
+
+		useShadow: {
+			get() { return this.$store.state.device.useShadow; },
+			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
+		},
+
+		roundedCorners: {
+			get() { return this.$store.state.device.roundedCorners; },
+			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
+		},
+
+		lineWidth: {
+			get() { return this.$store.state.device.lineWidth; },
+			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
+		},
+
+		fontSize: {
+			get() { return this.$store.state.device.fontSize; },
+			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
+		},
+
+		fetchOnScroll: {
+			get() { return this.$store.state.settings.fetchOnScroll; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
+		},
+
+		rememberNoteVisibility: {
+			get() { return this.$store.state.settings.rememberNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
+		},
+
+		defaultNoteVisibility: {
+			get() { return this.$store.state.settings.defaultNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
+		},
+
+		webSearchEngine: {
+			get() { return this.$store.state.settings.webSearchEngine; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
+		},
+
+		showReplyTarget: {
+			get() { return this.$store.state.settings.showReplyTarget; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
+		},
+
+		showMyRenotes: {
+			get() { return this.$store.state.settings.showMyRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
+		},
+
+		showRenotedMyNotes: {
+			get() { return this.$store.state.settings.showRenotedMyNotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
+		},
+
+		showLocalRenotes: {
+			get() { return this.$store.state.settings.showLocalRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
+		},
+
+		showPostFormOnTopOfTl: {
+			get() { return this.$store.state.settings.showPostFormOnTopOfTl; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showPostFormOnTopOfTl', value }); }
+		},
+
+		suggestRecentHashtags: {
+			get() { return this.$store.state.settings.suggestRecentHashtags; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'suggestRecentHashtags', value }); }
+		},
+
+		showClockOnHeader: {
+			get() { return this.$store.state.settings.showClockOnHeader; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showClockOnHeader', value }); }
+		},
+
+		circleIcons: {
+			get() { return this.$store.state.settings.circleIcons; },
+			set(value) {
+				this.$store.dispatch('settings/set', { key: 'circleIcons', value });
+				this.reload();
+			}
+		},
+
+		contrastedAcct: {
+			get() { return this.$store.state.settings.contrastedAcct; },
+			set(value) {
+				this.$store.dispatch('settings/set', { key: 'contrastedAcct', value });
+				this.reload();
+			}
+		},
+
+		showFullAcct: {
+			get() { return this.$store.state.settings.showFullAcct; },
+			set(value) {
+				this.$store.dispatch('settings/set', { key: 'showFullAcct', value });
+				this.reload();
+			}
+		},
+
+		showVia: {
+			get() { return this.$store.state.settings.showVia; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showVia', value }); }
+		},
+
+		iLikeSushi: {
+			get() { return this.$store.state.settings.iLikeSushi; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
+		},
+
+		games_reversi_showBoardLabels: {
+			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
+		},
+
+		games_reversi_useAvatarStones: {
+			get() { return this.$store.state.settings.games.reversi.useAvatarStones; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useAvatarStones', value }); }
+		},
+
+		disableAnimatedMfm: {
+			get() { return this.$store.state.settings.disableAnimatedMfm; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
+		},
+
+		disableShowingAnimatedImages: {
+			get() { return this.$store.state.device.disableShowingAnimatedImages; },
+			set(value) { this.$store.commit('device/set', { key: 'disableShowingAnimatedImages', value }); }
+		},
+
+		remainDeletedNote: {
+			get() { return this.$store.state.settings.remainDeletedNote; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'remainDeletedNote', value }); }
+		},
+
+		mobileNotificationPosition: {
+			get() { return this.$store.state.device.mobileNotificationPosition; },
+			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
+		},
+	},
+	created() {
+		this.$root.getMeta().then(meta => {
+			this.meta = meta;
+		});
+	},
+	methods: {
+		reload() {
+			this.$root.dialog({
+				type: 'warning',
+				text: this.$t('@.reload-to-apply-the-setting'),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (!canceled) {
+					location.reload();
+				}
+			});
+		},
+		customizeHome() {
+			location.href = '/?customize';
+		},
+		updateWallpaper() {
+			this.$chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.$root.api('i/update', {
+					wallpaperId: file.id
+				});
+			});
+		},
+		deleteWallpaper() {
+			this.$root.api('i/update', {
+				wallpaperId: null
+			});
+		},
+		checkForUpdate() {
+			this.checkingForUpdate = true;
+			checkForUpdate(this.$root, true, true).then(newer => {
+				this.checkingForUpdate = false;
+				this.latestVersion = newer;
+				if (newer == null) {
+					this.$root.dialog({
+						title: this.$t('no-updates'),
+						text: this.$t('no-updates-desc')
+					});
+				} else {
+					this.$root.dialog({
+						title: this.$t('update-available'),
+						text: this.$t('update-available-desc')
+					});
+				}
+			});
+		},
+		soundTest() {
+			const sound = new Audio(`${url}/assets/message.mp3`);
+			sound.volume = this.$store.state.device.soundVolume;
+			sound.play();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/settings.signins.vue b/src/client/app/common/views/components/settings/signins.vue
index 048fa2fc5b..048fa2fc5b 100644
--- a/src/client/app/desktop/views/components/settings.signins.vue
+++ b/src/client/app/common/views/components/settings/signins.vue
diff --git a/src/client/app/desktop/views/components/settings.tags.vue b/src/client/app/common/views/components/settings/tags.vue
index 3df4a6e64b..05034c9461 100644
--- a/src/client/app/desktop/views/components/settings.tags.vue
+++ b/src/client/app/common/views/components/settings/tags.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 import * as uuid from 'uuid';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/settings/theme.vue
index 54162e2c61..7d419e3bdd 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/settings/theme.vue
@@ -103,8 +103,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
+import i18n from '../../../../i18n';
+import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../../theme';
 import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
 import * as tinycolor from 'tinycolor2';
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index 7018c20b9d..a83013f5d0 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -62,4 +62,8 @@ export default Vue.extend({
 		> section
 			margin 16px 0
 
+			> header
+				font-weight bold
+				color var(--text)
+
 </style>
diff --git a/src/client/app/common/views/deck/deck.favorites-column.vue b/src/client/app/common/views/deck/deck.favorites-column.vue
index 67610f8b9f..238938594f 100644
--- a/src/client/app/common/views/deck/deck.favorites-column.vue
+++ b/src/client/app/common/views/deck/deck.favorites-column.vue
@@ -1,7 +1,7 @@
 <template>
 <x-column>
 	<template #header>
-		<fa :icon="['fa', 'star']"/>{{ $t('favorites') }}
+		<fa :icon="['fa', 'star']"/>{{ $t('@.favorites') }}
 	</template>
 
 	<div>
diff --git a/src/client/app/desktop/views/components/settings-window.vue b/src/client/app/desktop/views/components/settings-window.vue
index 8e7635429c..9bfd5a14c7 100644
--- a/src/client/app/desktop/views/components/settings-window.vue
+++ b/src/client/app/desktop/views/components/settings-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
-	<template #header :class="$style.header"><fa icon="cog"/>{{ $t('settings') }}</template>
+	<template #header :class="$style.header"><fa icon="cog"/>{{ $t('@.settings') }}</template>
 	<x-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
 </template>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index da5489ec4e..ace967b973 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -1,267 +1,20 @@
 <template>
 <div class="mk-settings">
 	<div class="nav" :class="{ inWindow }">
-		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>{{ $t('profile') }}</p>
-		<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'"><fa icon="palette" fixed-width/>{{ $t('theme') }}</p>
-		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'"><fa icon="desktop" fixed-width/>Web</p>
-		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'"><fa :icon="['far', 'bell']" fixed-width/>{{ $t('notification') }}</p>
+		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>{{ $t('@._settings.profile') }}</p>
+		<p :class="{ active: page == 'appearance' }" @mousedown="page = 'appearance'"><fa icon="palette" fixed-width/>{{ $t('@._settings.appearance') }}</p>
+		<p :class="{ active: page == 'behavior' }" @mousedown="page = 'behavior'"><fa icon="desktop" fixed-width/>{{ $t('@._settings.behavior') }}</p>
+		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'"><fa :icon="['far', 'bell']" fixed-width/>{{ $t('@._settings.notification') }}</p>
 		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'"><fa icon="cloud" fixed-width/>{{ $t('@.drive') }}</p>
-		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'"><fa icon="hashtag" fixed-width/>{{ $t('tags') }}</p>
-		<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'"><fa icon="ban" fixed-width/>{{ $t('mute-and-block') }}</p>
-		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'"><fa icon="puzzle-piece" fixed-width/>{{ $t('apps') }}</p>
-		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'"><fa icon="unlock-alt" fixed-width/>{{ $t('security') }}</p>
+		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'"><fa icon="hashtag" fixed-width/>{{ $t('@._settings.tags') }}</p>
+		<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'"><fa icon="ban" fixed-width/>{{ $t('@._settings.mute-and-block') }}</p>
+		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'"><fa icon="puzzle-piece" fixed-width/>{{ $t('@._settings.apps') }}</p>
+		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'"><fa icon="unlock-alt" fixed-width/>{{ $t('@._settings.security') }}</p>
 		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'"><fa icon="key" fixed-width/>API</p>
-		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'"><fa icon="cogs" fixed-width/>{{ $t('other') }}</p>
+		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'"><fa icon="cogs" fixed-width/>{{ $t('@._settings.other') }}</p>
 	</div>
 	<div class="pages">
-		<div class="profile" v-show="page == 'profile'">
-			<x-profile-editor/>
-			<x-integration-settings/>
-		</div>
-
-		<x-theme class="theme" v-show="page == 'theme'"/>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa icon="sliders-h"/> {{ $t('behaviour') }}</template>
-
-			<section>
-				<ui-switch v-model="fetchOnScroll">{{ $t('fetch-on-scroll') }}
-					<template #desc>{{ $t('fetch-on-scroll-desc') }}</template>
-				</ui-switch>
-				<ui-switch v-model="autoPopout">{{ $t('auto-popout') }}
-					<template #desc>{{ $t('auto-popout-desc') }}</template>
-				</ui-switch>
-				<ui-switch v-model="keepCw">{{ $t('keep-cw') }}
-					<template #desc>{{ $t('keep-cw-desc') }}</template>
-				</ui-switch>
-			</section>
-
-			<section>
-				<header>{{ $t('timeline') }}</header>
-				<ui-switch v-model="showMyRenotes">{{ $t('show-my-renotes') }}</ui-switch>
-				<ui-switch v-model="showRenotedMyNotes">{{ $t('show-renoted-my-notes') }}</ui-switch>
-				<ui-switch v-model="showLocalRenotes">{{ $t('show-local-renotes') }}</ui-switch>
-			</section>
-
-			<section>
-				<header>{{ $t('note-visibility') }}</header>
-				<ui-switch v-model="rememberNoteVisibility">{{ $t('remember-note-visibility') }}</ui-switch>
-				<section>
-					<header>{{ $t('default-note-visibility') }}</header>
-					<ui-select v-model="defaultNoteVisibility">
-						<option value="public">{{ $t('@.note-visibility.public') }}</option>
-						<option value="home">{{ $t('@.note-visibility.home') }}</option>
-						<option value="followers">{{ $t('@.note-visibility.followers') }}</option>
-						<option value="specified">{{ $t('@.note-visibility.specified') }}</option>
-						<option value="local-public">{{ $t('@.note-visibility.local-public') }}</option>
-						<option value="local-home">{{ $t('@.note-visibility.local-home') }}</option>
-						<option value="local-followers">{{ $t('@.note-visibility.local-followers') }}</option>
-					</ui-select>
-				</section>
-			</section>
-
-			<section>
-				<header>{{ $t('web-search-engine') }}</header>
-				<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<template #desc>{{ $t('web-search-engine-desc') }}</template></ui-input>
-			</section>
-		</ui-card>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa icon="desktop"/> {{ $t('display') }}</template>
-
-			<section>
-				<ui-switch v-model="showPostFormOnTopOfTl">{{ $t('post-form-on-timeline') }}</ui-switch>
-				<ui-button @click="customizeHome">{{ $t('@.customize-home') }}</ui-button>
-			</section>
-			<section>
-				<header>{{ $t('wallpaper') }}</header>
-				<ui-horizon-group class="fit-bottom">
-					<ui-button @click="updateWallpaper">{{ $t('choose-wallpaper') }}</ui-button>
-					<ui-button @click="deleteWallpaper">{{ $t('delete-wallpaper') }}</ui-button>
-				</ui-horizon-group>
-			</section>
-			<section>
-				<header>{{ $t('navbar-position') }}</header>
-				<ui-radio v-model="navbar" value="top">{{ $t('navbar-position-top') }}</ui-radio>
-				<ui-radio v-model="navbar" value="left">{{ $t('navbar-position-left') }}</ui-radio>
-				<ui-radio v-model="navbar" value="right">{{ $t('navbar-position-right') }}</ui-radio>
-			</section>
-			<section>
-				<ui-switch v-model="darkmode">{{ $t('@.dark-mode') }}</ui-switch>
-				<ui-switch v-model="useShadow">{{ $t('@.use-shadow') }}</ui-switch>
-				<ui-switch v-model="roundedCorners">{{ $t('@.rounded-corners') }}</ui-switch>
-				<ui-switch v-model="circleIcons">{{ $t('@.circle-icons') }}</ui-switch>
-				<section>
-					<header>{{ $t('@.line-width') }}</header>
-					<ui-radio v-model="lineWidth" :value="0.5">{{ $t('@.line-width-thin') }}</ui-radio>
-					<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio>
-					<ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
-				</section>
-				<section>
-					<header>{{ $t('@.font-size') }}</header>
-					<ui-radio v-model="fontSize" :value="-2">{{ $t('@.font-size-x-small') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="-1">{{ $t('@.font-size-small') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="0">{{ $t('@.font-size-medium') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="1">{{ $t('@.font-size-large') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="2">{{ $t('@.font-size-x-large') }}</ui-radio>
-				</section>
-				<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
-				<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
-				<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
-				<ui-switch v-model="showVia">{{ $t('@.show-via') }}</ui-switch>
-				<ui-switch v-model="useOsDefaultEmojis">{{ $t('@.use-os-default-emojis') }}</ui-switch>
-				<ui-switch v-model="iLikeSushi">{{ $t('@.i-like-sushi') }}</ui-switch>
-			</section>
-			<section>
-				<ui-switch v-model="suggestRecentHashtags">{{ $t('@.suggest-recent-hashtags') }}</ui-switch>
-				<ui-switch v-model="showClockOnHeader">{{ $t('show-clock-on-header') }}</ui-switch>
-				<ui-switch v-model="alwaysShowNsfw">{{ $t('@.always-show-nsfw') }}</ui-switch>
-				<ui-switch v-model="showReplyTarget">{{ $t('show-reply-target') }}</ui-switch>
-				<ui-switch v-model="showMaps">{{ $t('show-maps') }}</ui-switch>
-				<ui-switch v-model="disableAnimatedMfm">{{ $t('@.disable-animated-mfm') }}</ui-switch>
-				<ui-switch v-model="disableShowingAnimatedImages">{{ $t('@.disable-showing-animated-images') }}</ui-switch>
-				<ui-switch v-model="remainDeletedNote">{{ $t('remain-deleted-note') }}</ui-switch>
-			</section>
-			<section>
-				<header>{{ $t('@.deck-column-align') }}</header>
-				<ui-radio v-model="deckColumnAlign" value="center">{{ $t('@.deck-column-align-center') }}</ui-radio>
-				<ui-radio v-model="deckColumnAlign" value="left">{{ $t('@.deck-column-align-left') }}</ui-radio>
-				<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('@.deck-column-align-flexible') }}</ui-radio>
-			</section>
-			<section>
-				<header>{{ $t('@.deck-column-width') }}</header>
-				<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('@.deck-column-width-narrow') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('@.deck-column-width-narrower') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('@.deck-column-width-normal') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('@.deck-column-width-wider') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('@.deck-column-width-wide') }}</ui-radio>
-			</section>
-			<section>
-				<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch>
-				<ui-switch v-model="games_reversi_useAvatarStones">{{ $t('@.use-avatar-reversi-stones') }}</ui-switch>
-			</section>
-		</ui-card>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa icon="volume-up"/> {{ $t('sound') }}</template>
-
-			<section>
-				<ui-switch v-model="enableSounds">{{ $t('enable-sounds') }}
-					<template #desc>{{ $t('enable-sounds-desc') }}</template>
-				</ui-switch>
-				<label>{{ $t('volume') }}</label>
-				<input type="range"
-					v-model="soundVolume"
-					:disabled="!enableSounds"
-					max="1"
-					step="0.1"
-				/>
-				<ui-button @click="soundTest"><fa icon="volume-up"/> {{ $t('test') }}</ui-button>
-			</section>
-		</ui-card>
-
-		<x-language-settings v-show="page == 'web'"/>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa :icon="['far', 'trash-alt']"/> {{ $t('cache') }}</template>
-			<section>
-				<ui-button @click="clean">{{ $t('clean-cache') }}</ui-button>
-				<div class="none ui info warn">
-					<p><fa icon="exclamation-triangle"/>{{ $t('cache-warn') }}</p>
-				</div>
-			</section>
-		</ui-card>
-
-		<x-notification-settings v-show="page == 'notification'"/>
-
-		<div class="drive" v-if="page == 'drive'">
-			<x-drive-settings/>
-		</div>
-
-		<ui-card class="hashtags" v-show="page == 'hashtags'">
-			<template #title><fa icon="hashtag"/> {{ $t('tags') }}</template>
-			<section>
-				<x-tags/>
-			</section>
-		</ui-card>
-
-		<div class="muteAndBlock" v-show="page == 'muteAndBlock'">
-			<x-mute-and-block/>
-		</div>
-
-		<ui-card class="apps" v-show="page == 'apps'">
-			<template #title><fa icon="puzzle-piece"/> {{ $t('apps') }}</template>
-			<section>
-				<x-apps/>
-			</section>
-		</ui-card>
-
-		<ui-card class="password" v-show="page == 'security'">
-			<template #title><fa icon="unlock-alt"/> {{ $t('password') }}</template>
-			<section>
-				<x-password-settings/>
-			</section>
-		</ui-card>
-
-		<ui-card class="2fa" v-show="page == 'security'">
-			<template #title><fa icon="mobile-alt"/> {{ $t('@.2fa') }}</template>
-			<section>
-				<x-2fa/>
-			</section>
-		</ui-card>
-
-		<ui-card class="signin" v-show="page == 'security'">
-			<template #title><fa icon="sign-in-alt"/> {{ $t('signin') }}</template>
-			<section>
-				<x-signins/>
-			</section>
-		</ui-card>
-
-		<div class="api" v-show="page == 'api'">
-			<x-api-settings/>
-		</div>
-
-		<ui-card class="other" v-show="page == 'other'">
-			<template #title><fa icon="info-circle"/> {{ $t('about') }}</template>
-			<section>
-				<p v-if="meta">{{ $t('operator') }}: <i><a :href="'mailto:' + meta.maintainer.email" target="_blank">{{ meta.maintainer.name }}</a></i></p>
-			</section>
-		</ui-card>
-
-		<ui-card class="other" v-show="page == 'other'">
-			<template #title><fa icon="sync-alt"/> {{ $t('update') }}</template>
-			<section>
-				<p>
-					<span>{{ $t('version') }} <i>{{ version }}</i></span>
-					<template v-if="latestVersion !== undefined">
-						<br>
-						<span>{{ $t('latest-version') }} <i>{{ latestVersion ? latestVersion : version }}</i></span>
-					</template>
-				</p>
-				<button class="ui button block" @click="checkForUpdate" :disabled="checkingForUpdate">
-					<template v-if="checkingForUpdate">{{ $t('update-checking') }}<mk-ellipsis/></template>
-					<template v-else>{{ $t('do-update') }}</template>
-				</button>
-				<details>
-					<summary>{{ $t('update-settings') }}</summary>
-					<ui-switch v-model="preventUpdate">
-						{{ $t('prevent-update') }}<template #desc>{{ $t('prevent-update-desc') }}</template>
-					</ui-switch>
-				</details>
-			</section>
-		</ui-card>
-
-		<ui-card class="other" v-show="page == 'other'">
-			<template #title><fa icon="cogs"/> {{ $t('advanced-settings') }}</template>
-			<section>
-				<ui-switch v-model="debug">
-					{{ $t('debug-mode') }}<template #desc>{{ $t('debug-mode-desc') }}</template>
-				</ui-switch>
-				<ui-switch v-model="enableExperimentalFeatures">
-					{{ $t('experimental') }}<template #desc>{{ $t('experimental-desc') }}</template>
-				</ui-switch>
-			</section>
-		</ui-card>
+		<x-settings :page="page"/>
 	</div>
 </div>
 </template>
@@ -269,39 +22,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import X2fa from './settings.2fa.vue';
-import XApps from './settings.apps.vue';
-import XSignins from './settings.signins.vue';
-import XTags from './settings.tags.vue';
-import XIntegrationSettings from '../../../common/views/components/integration-settings.vue';
-import XTheme from '../../../common/views/components/theme.vue';
-import XDriveSettings from '../../../common/views/components/drive-settings.vue';
-import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
-import XPasswordSettings from '../../../common/views/components/password-settings.vue';
-import XProfileEditor from '../../../common/views/components/profile-editor.vue';
-import XApiSettings from '../../../common/views/components/api-settings.vue';
-import XLanguageSettings from '../../../common/views/components/language-settings.vue';
-import XNotificationSettings from '../../../common/views/components/notification-settings.vue';
-
-import { url, version } from '../../../config';
-import checkForUpdate from '../../../common/scripts/check-for-update';
+import XSettings from '../../../common/views/components/settings/settings.vue';
 
 export default Vue.extend({
-	i18n: i18n('desktop/views/components/settings.vue'),
+	i18n: i18n(),
 	components: {
-		X2fa,
-		XApps,
-		XSignins,
-		XTags,
-		XIntegrationSettings,
-		XTheme,
-		XDriveSettings,
-		XMuteAndBlock,
-		XPasswordSettings,
-		XProfileEditor,
-		XApiSettings,
-		XLanguageSettings,
-		XNotificationSettings,
+		XSettings,
 	},
 	props: {
 		initialPage: {
@@ -317,287 +43,8 @@ export default Vue.extend({
 	data() {
 		return {
 			page: this.initialPage || 'profile',
-			meta: null,
-			version,
-			latestVersion: undefined,
-			checkingForUpdate: false
 		};
 	},
-	computed: {
-		useOsDefaultEmojis: {
-			get() { return this.$store.state.device.useOsDefaultEmojis; },
-			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
-		},
-
-		reduceMotion: {
-			get() { return this.$store.state.device.reduceMotion; },
-			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
-		},
-
-		autoPopout: {
-			get() { return this.$store.state.device.autoPopout; },
-			set(value) { this.$store.commit('device/set', { key: 'autoPopout', value }); }
-		},
-
-		keepCw: {
-			get() { return this.$store.state.settings.keepCw; },
-			set(value) { this.$store.commit('settings/set', { key: 'keepCw', value }); }
-		},
-
-		darkmode: {
-			get() { return this.$store.state.device.darkmode; },
-			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
-		},
-
-		navbar: {
-			get() { return this.$store.state.device.navbar; },
-			set(value) { this.$store.commit('device/set', { key: 'navbar', value }); }
-		},
-
-		deckColumnAlign: {
-			get() { return this.$store.state.device.deckColumnAlign; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
-		},
-
-		deckColumnWidth: {
-			get() { return this.$store.state.device.deckColumnWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
-		},
-
-		enableSounds: {
-			get() { return this.$store.state.device.enableSounds; },
-			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
-		},
-
-		soundVolume: {
-			get() { return this.$store.state.device.soundVolume; },
-			set(value) { this.$store.commit('device/set', { key: 'soundVolume', value }); }
-		},
-
-		preventUpdate: {
-			get() { return this.$store.state.device.preventUpdate; },
-			set(value) { this.$store.commit('device/set', { key: 'preventUpdate', value }); }
-		},
-
-		debug: {
-			get() { return this.$store.state.device.debug; },
-			set(value) { this.$store.commit('device/set', { key: 'debug', value }); }
-		},
-
-		enableExperimentalFeatures: {
-			get() { return this.$store.state.device.enableExperimentalFeatures; },
-			set(value) { this.$store.commit('device/set', { key: 'enableExperimentalFeatures', value }); }
-		},
-
-		alwaysShowNsfw: {
-			get() { return this.$store.state.device.alwaysShowNsfw; },
-			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
-		},
-
-		useShadow: {
-			get() { return this.$store.state.device.useShadow; },
-			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
-		},
-
-		roundedCorners: {
-			get() { return this.$store.state.device.roundedCorners; },
-			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
-		},
-
-		lineWidth: {
-			get() { return this.$store.state.device.lineWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
-		},
-
-		fontSize: {
-			get() { return this.$store.state.device.fontSize; },
-			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
-		},
-
-		fetchOnScroll: {
-			get() { return this.$store.state.settings.fetchOnScroll; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
-		},
-
-		rememberNoteVisibility: {
-			get() { return this.$store.state.settings.rememberNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
-		},
-
-		defaultNoteVisibility: {
-			get() { return this.$store.state.settings.defaultNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
-		},
-
-		webSearchEngine: {
-			get() { return this.$store.state.settings.webSearchEngine; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
-		},
-
-		showReplyTarget: {
-			get() { return this.$store.state.settings.showReplyTarget; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
-		},
-
-		showMyRenotes: {
-			get() { return this.$store.state.settings.showMyRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
-		},
-
-		showRenotedMyNotes: {
-			get() { return this.$store.state.settings.showRenotedMyNotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
-		},
-
-		showLocalRenotes: {
-			get() { return this.$store.state.settings.showLocalRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
-		},
-
-		showPostFormOnTopOfTl: {
-			get() { return this.$store.state.settings.showPostFormOnTopOfTl; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showPostFormOnTopOfTl', value }); }
-		},
-
-		suggestRecentHashtags: {
-			get() { return this.$store.state.settings.suggestRecentHashtags; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'suggestRecentHashtags', value }); }
-		},
-
-		showClockOnHeader: {
-			get() { return this.$store.state.settings.showClockOnHeader; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showClockOnHeader', value }); }
-		},
-
-		showMaps: {
-			get() { return this.$store.state.settings.showMaps; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showMaps', value }); }
-		},
-
-		circleIcons: {
-			get() { return this.$store.state.settings.circleIcons; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'circleIcons', value });
-				this.reload();
-			}
-		},
-
-		contrastedAcct: {
-			get() { return this.$store.state.settings.contrastedAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'contrastedAcct', value });
-				this.reload();
-			}
-		},
-
-		showFullAcct: {
-			get() { return this.$store.state.settings.showFullAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'showFullAcct', value });
-				this.reload();
-			}
-		},
-
-		showVia: {
-			get() { return this.$store.state.settings.showVia; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showVia', value }); }
-		},
-
-		iLikeSushi: {
-			get() { return this.$store.state.settings.iLikeSushi; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
-		},
-
-		games_reversi_showBoardLabels: {
-			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
-		},
-
-		games_reversi_useAvatarStones: {
-			get() { return this.$store.state.settings.games.reversi.useAvatarStones; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useAvatarStones', value }); }
-		},
-
-		disableAnimatedMfm: {
-			get() { return this.$store.state.settings.disableAnimatedMfm; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
-		},
-
-		disableShowingAnimatedImages: {
-			get() { return this.$store.state.device.disableShowingAnimatedImages; },
-			set(value) { this.$store.commit('device/set', { key: 'disableShowingAnimatedImages', value }); }
-		},
-
-		remainDeletedNote: {
-			get() { return this.$store.state.settings.remainDeletedNote; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'remainDeletedNote', value }); }
-		}
-	},
-	created() {
-		this.$root.getMeta().then(meta => {
-			this.meta = meta;
-		});
-	},
-	methods: {
-		reload() {
-			this.$root.dialog({
-				type: 'warning',
-				text: this.$t('@.reload-to-apply-the-setting'),
-				showCancelButton: true
-			}).then(({ canceled }) => {
-				if (!canceled) {
-					location.reload();
-				}
-			});
-		},
-		customizeHome() {
-			location.href = '/?customize';
-		},
-		updateWallpaper() {
-			this.$chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.$root.api('i/update', {
-					wallpaperId: file.id
-				});
-			});
-		},
-		deleteWallpaper() {
-			this.$root.api('i/update', {
-				wallpaperId: null
-			});
-		},
-		checkForUpdate() {
-			this.checkingForUpdate = true;
-			checkForUpdate(this.$root, true, true).then(newer => {
-				this.checkingForUpdate = false;
-				this.latestVersion = newer;
-				if (newer == null) {
-					this.$root.dialog({
-						title: this.$t('no-updates'),
-						text: this.$t('no-updates-desc')
-					});
-				} else {
-					this.$root.dialog({
-						title: this.$t('update-available'),
-						text: this.$t('update-available-desc')
-					});
-				}
-			});
-		},
-		clean() {
-			localStorage.clear();
-			this.$root.dialog({
-				title: this.$t('cache-cleared'),
-				text: this.$t('cache-cleared-desc')
-			});
-		},
-		soundTest() {
-			const sound = new Audio(`${url}/assets/message.mp3`);
-			sound.volume = this.$store.state.device.soundVolume;
-			sound.play();
-		}
-	}
 });
 </script>
 
@@ -642,8 +89,4 @@ export default Vue.extend({
 		overflow auto
 		background var(--bg)
 
-		> section
-			margin 32px
-			color var(--text)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 5c93dcdcaf..effd0ef0fd 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -24,7 +24,7 @@
 				<li>
 					<router-link to="/i/favorites">
 						<i><fa icon="star"/></i>
-						<span>{{ $t('favorites') }}</span>
+						<span>{{ $t('@.favorites') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
@@ -47,7 +47,7 @@
 				<li>
 					<router-link to="/i/settings">
 						<i><fa icon="cog"/></i>
-						<span>{{ $t('settings') }}</span>
+						<span>{{ $t('@.settings') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index da5fe44ac9..23ccf28862 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -89,12 +89,6 @@ export default Vue.extend({
 		}
 	},
 
-	data() {
-		return {
-			preventMount: false
-		};
-	},
-
 	computed: {
 		isFlexible(): boolean {
 			return this.height == 'auto';
@@ -105,21 +99,11 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (this.$store.state.device.autoPopout && this.popoutUrl) {
-			this.popout();
-			this.preventMount = true;
-		} else {
-			// ウィンドウをウィンドウシステムに登録
-			this.$root.os.windows.add(this);
-		}
+		// ウィンドウをウィンドウシステムに登録
+		this.$root.os.windows.add(this);
 	},
 
 	mounted() {
-		if (this.preventMount) {
-			this.destroyDom();
-			return;
-		}
-
 		this.$nextTick(() => {
 			const main = this.$refs.main as any;
 			main.style.top = '15%';
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index d13861080c..e85a249476 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -474,12 +474,9 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
 			app.$mount('#app');
 
 			//#region 更新チェック
-			const preventUpdate = os.store.state.device.preventUpdate;
-			if (!preventUpdate) {
-				setTimeout(() => {
-					checkForUpdate(app);
-				}, 3000);
-			}
+			setTimeout(() => {
+				checkForUpdate(app);
+			}, 3000);
 			//#endregion
 
 			return [app, os] as [Vue, MiOS];
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index e92c404a28..169c7fc07d 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -26,13 +26,13 @@
 					</ul>
 					<ul>
 						<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'"><i><fa :icon="['far', 'calendar-alt']" fixed-width/></i>{{ $t('widgets') }}<i><fa icon="angle-right"/></i></router-link></li>
-						<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'"><i><fa icon="star" fixed-width/></i>{{ $t('favorites') }}<i><fa icon="angle-right"/></i></router-link></li>
+						<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'"><i><fa icon="star" fixed-width/></i>{{ $t('@.favorites') }}<i><fa icon="angle-right"/></i></router-link></li>
 						<li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'"><i><fa icon="list" fixed-width/></i>{{ $t('user-lists') }}<i><fa icon="angle-right"/></i></router-link></li>
 						<li><router-link to="/i/drive" :data-active="$route.name == 'drive'"><i><fa icon="cloud" fixed-width/></i>{{ $t('@.drive') }}<i><fa icon="angle-right"/></i></router-link></li>
 					</ul>
 					<ul>
 						<li><a @click="search"><i><fa icon="search" fixed-width/></i>{{ $t('search') }}<i><fa icon="angle-right"/></i></a></li>
-						<li><router-link to="/i/settings" :data-active="$route.name == 'settings'"><i><fa icon="cog" fixed-width/></i>{{ $t('settings') }}<i><fa icon="angle-right"/></i></router-link></li>
+						<li><router-link to="/i/settings" :data-active="$route.name == 'settings'"><i><fa icon="cog" fixed-width/></i>{{ $t('@.settings') }}<i><fa icon="angle-right"/></i></router-link></li>
 						<li v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)"><a href="/admin"><i><fa icon="terminal" fixed-width/></i><span>{{ $t('admin') }}</span><i><fa icon="angle-right"/></i></a></li>
 					</ul>
 					<ul>
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index e8e7ee9ab5..196bd4b93c 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<template #header><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</template>
+	<template #header><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('@.favorites') }}</template>
 
 	<main>
 		<sequential-entrance animation="entranceFromTop" delay="25">
@@ -19,7 +19,7 @@ import i18n from '../../../i18n';
 import Progress from '../../../common/scripts/loading';
 
 export default Vue.extend({
-	i18n: i18n('mobile/views/pages/favorites.vue'),
+	i18n: i18n(),
 	data() {
 		return {
 			fetching: true,
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 6f5d0ec486..da01ef6221 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -1,171 +1,14 @@
 <template>
 <mk-ui>
-	<template #header><span style="margin-right:4px;"><fa icon="cog"/></span>{{ $t('settings') }}</template>
+	<template #header><span style="margin-right:4px;"><fa icon="cog"/></span>{{ $t('@.settings') }}</template>
 	<main>
-		<div class="signed-in-as">
+		<div class="signed-in-as" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
 			<mfm :text="$t('signed-in-as').replace('{}', name)" :should-break="false" :plain-text="true" :custom-emojis="$store.state.i.emojis"/>
 		</div>
-		<div>
-			<x-profile-editor/>
 
-			<x-theme/>
+		<x-settings/>
 
-			<ui-card>
-				<template #title><fa icon="poll-h"/> {{ $t('design') }}</template>
-
-				<section>
-					<ui-switch v-model="darkmode">{{ $t('@.dark-mode') }}</ui-switch>
-					<ui-switch v-model="useShadow">{{ $t('@.use-shadow') }}</ui-switch>
-					<ui-switch v-model="roundedCorners">{{ $t('@.rounded-corners') }}</ui-switch>
-					<ui-switch v-model="circleIcons">{{ $t('@.circle-icons') }}</ui-switch>
-					<section>
-						<header>{{ $t('@.line-width') }}</header>
-						<ui-radio v-model="lineWidth" :value="0.5">{{ $t('@.line-width-thin') }}</ui-radio>
-						<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio>
-						<ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
-					</section>
-					<section>
-						<header>{{ $t('@.font-size') }}</header>
-						<ui-radio v-model="fontSize" :value="-2">{{ $t('@.font-size-x-small') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="-1">{{ $t('@.font-size-small') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="0">{{ $t('@.font-size-medium') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="1">{{ $t('@.font-size-large') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="2">{{ $t('@.font-size-x-large') }}</ui-radio>
-					</section>
-					<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
-					<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
-					<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
-					<ui-switch v-model="showVia">{{ $t('@.show-via') }}</ui-switch>
-					<ui-switch v-model="useOsDefaultEmojis">{{ $t('@.use-os-default-emojis') }}</ui-switch>
-					<ui-switch v-model="iLikeSushi">{{ $t('@.i-like-sushi') }}</ui-switch>
-					<ui-switch v-model="disableAnimatedMfm">{{ $t('@.disable-animated-mfm') }}</ui-switch>
-					<ui-switch v-model="disableShowingAnimatedImages">{{ $t('@.disable-showing-animated-images') }}</ui-switch>
-					<ui-switch v-model="suggestRecentHashtags">{{ $t('@.suggest-recent-hashtags') }}</ui-switch>
-					<ui-switch v-model="alwaysShowNsfw">{{ $t('@.always-show-nsfw') }} ({{ $t('@.this-setting-is-this-device-only') }})</ui-switch>
-				</section>
-
-				<section>
-					<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch>
-					<ui-switch v-model="games_reversi_useAvatarStones">{{ $t('@.use-avatar-reversi-stones') }}</ui-switch>
-				</section>
-
-				<section>
-					<header>{{ $t('timeline') }}</header>
-					<div>
-						<ui-switch v-model="showReplyTarget">{{ $t('show-reply-target') }}</ui-switch>
-						<ui-switch v-model="showMyRenotes">{{ $t('show-my-renotes') }}</ui-switch>
-						<ui-switch v-model="showRenotedMyNotes">{{ $t('show-renoted-my-notes') }}</ui-switch>
-						<ui-switch v-model="showLocalRenotes">{{ $t('show-local-renotes') }}</ui-switch>
-					</div>
-				</section>
-
-				<section>
-					<header>{{ $t('post-style') }}</header>
-					<ui-radio v-model="postStyle" value="standard">{{ $t('post-style-standard') }}</ui-radio>
-					<ui-radio v-model="postStyle" value="smart">{{ $t('post-style-smart') }}</ui-radio>
-				</section>
-
-				<section>
-					<header>{{ $t('notification-position') }}</header>
-					<ui-radio v-model="mobileNotificationPosition" value="bottom">{{ $t('notification-position-bottom') }}</ui-radio>
-					<ui-radio v-model="mobileNotificationPosition" value="top">{{ $t('notification-position-top') }}</ui-radio>
-				</section>
-
-				<section>
-					<header>{{ $t('@.deck-column-align') }}</header>
-					<ui-radio v-model="deckColumnAlign" value="center">{{ $t('@.deck-column-align-center') }}</ui-radio>
-					<ui-radio v-model="deckColumnAlign" value="left">{{ $t('@.deck-column-align-left') }}</ui-radio>
-					<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('@.deck-column-align-flexible') }}</ui-radio>
-				</section>
-				<section>
-					<header>{{ $t('@.deck-column-width') }}</header>
-					<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('@.deck-column-width-narrow') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('@.deck-column-width-narrower') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('@.deck-column-width-normal') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('@.deck-column-width-wider') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('@.deck-column-width-wide') }}</ui-radio>
-				</section>
-			</ui-card>
-
-			<ui-card>
-				<template #title><fa icon="sliders-h"/> {{ $t('behavior') }}</template>
-
-				<section>
-					<ui-switch v-model="fetchOnScroll">{{ $t('fetch-on-scroll') }}</ui-switch>
-					<ui-switch v-model="keepCw">{{ $t('keep-cw') }}</ui-switch>
-					<ui-switch v-model="disableViaMobile">{{ $t('disable-via-mobile') }}</ui-switch>
-					<ui-switch v-model="loadRawImages">{{ $t('load-raw-images') }}</ui-switch>
-					<ui-switch v-model="loadRemoteMedia">{{ $t('load-remote-media') }}</ui-switch>
-					<ui-switch v-model="lightmode">{{ $t('i-am-under-limited-internet') }}</ui-switch>
-				</section>
-
-				<section>
-					<header>{{ $t('note-visibility') }}</header>
-					<ui-switch v-model="rememberNoteVisibility">{{ $t('remember-note-visibility') }}</ui-switch>
-					<section>
-						<header>{{ $t('default-note-visibility') }}</header>
-						<ui-select v-model="defaultNoteVisibility">
-							<option value="public">{{ $t('@.note-visibility.public') }}</option>
-							<option value="home">{{ $t('@.note-visibility.home') }}</option>
-							<option value="followers">{{ $t('@.note-visibility.followers') }}</option>
-							<option value="specified">{{ $t('@.note-visibility.specified') }}</option>
-							<option value="local-public">{{ $t('@.note-visibility.local-public') }}</option>
-							<option value="local-home">{{ $t('@.note-visibility.local-home') }}</option>
-							<option value="local-followers">{{ $t('@.note-visibility.local-followers') }}</option>
-						</ui-select>
-					</section>
-				</section>
-
-				<section>
-					<header>{{ $t('web-search-engine') }}</header>
-					<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<template #desc>{{ $t('web-search-engine-desc') }}</template></ui-input>
-				</section>
-			</ui-card>
-
-			<x-notification-settings/>
-
-			<x-drive-settings/>
-
-			<x-mute-and-block/>
-
-			<ui-card>
-				<template #title><fa icon="volume-up"/> {{ $t('sound') }}</template>
-
-				<section>
-					<ui-switch v-model="enableSounds">{{ $t('enable-sounds') }}</ui-switch>
-				</section>
-			</ui-card>
-
-			<x-language-settings/>
-
-			<x-integration-settings/>
-
-			<x-api-settings />
-
-			<ui-card>
-				<template #title><fa icon="unlock-alt"/> {{ $t('password') }}</template>
-				<section>
-					<x-password-settings/>
-				</section>
-			</ui-card>
-
-			<ui-card>
-				<template #title><fa icon="sync-alt"/> {{ $t('update') }}</template>
-
-				<section>
-					<div>{{ $t('version') }} <i>{{ version }}</i></div>
-					<template v-if="latestVersion !== undefined">
-						<div>{{ $t('latest-version') }} <i>{{ latestVersion ? latestVersion : version }}</i></div>
-					</template>
-					<ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
-						<template v-if="checkingForUpdate">{{ $t('update-checking') }}<mk-ellipsis/></template>
-						<template v-else>{{ $t('check-for-updates') }}</template>
-					</ui-button>
-				</section>
-			</ui-card>
-		</div>
-
-		<div class="signout" @click="signout">{{ $t('@.signout') }}</div>
+		<div class="signout" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" @click="signout">{{ $t('@.signout') }}</div>
 
 		<footer>
 			<small>ver {{ version }} ({{ codename }})</small>
@@ -177,277 +20,29 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { apiUrl, version, codename } from '../../../config';
-import checkForUpdate from '../../../common/scripts/check-for-update';
-import XTheme from '../../../common/views/components/theme.vue';
-import XDriveSettings from '../../../common/views/components/drive-settings.vue';
-import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
-import XPasswordSettings from '../../../common/views/components/password-settings.vue';
-import XProfileEditor from '../../../common/views/components/profile-editor.vue';
-import XApiSettings from '../../../common/views/components/api-settings.vue';
-import XLanguageSettings from '../../../common/views/components/language-settings.vue';
-import XIntegrationSettings from '../../../common/views/components/integration-settings.vue';
-import XNotificationSettings from '../../../common/views/components/notification-settings.vue';
+import XSettings from '../../../common/views/components/settings/settings.vue';
+import { version, codename } from '../../../config';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/settings.vue'),
-
 	components: {
-		XTheme,
-		XDriveSettings,
-		XMuteAndBlock,
-		XPasswordSettings,
-		XProfileEditor,
-		XApiSettings,
-		XLanguageSettings,
-		XIntegrationSettings,
-		XNotificationSettings,
+		XSettings,
 	},
-
 	data() {
 		return {
-			apiUrl,
 			version,
 			codename,
-			latestVersion: undefined,
-			checkingForUpdate: false
 		};
 	},
-
 	computed: {
 		name(): string {
 			return Vue.filter('userName')(this.$store.state.i);
 		},
-
-		darkmode: {
-			get() { return this.$store.state.device.darkmode; },
-			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
-		},
-
-		useShadow: {
-			get() { return this.$store.state.device.useShadow; },
-			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
-		},
-
-		roundedCorners: {
-			get() { return this.$store.state.device.roundedCorners; },
-			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
-		},
-
-		useOsDefaultEmojis: {
-			get() { return this.$store.state.device.useOsDefaultEmojis; },
-			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
-		},
-
-		reduceMotion: {
-			get() { return this.$store.state.device.reduceMotion; },
-			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
-		},
-
-		suggestRecentHashtags: {
-			get() { return this.$store.state.settings.suggestRecentHashtags; },
-			set(value) { this.$store.commit('device/set', { key: 'suggestRecentHashtags', value }); }
-		},
-
-		alwaysShowNsfw: {
-			get() { return this.$store.state.device.alwaysShowNsfw; },
-			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
-		},
-
-		postStyle: {
-			get() { return this.$store.state.device.postStyle; },
-			set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); }
-		},
-
-		mobileNotificationPosition: {
-			get() { return this.$store.state.device.mobileNotificationPosition; },
-			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
-		},
-
-		lightmode: {
-			get() { return this.$store.state.device.lightmode; },
-			set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }
-		},
-
-		loadRawImages: {
-			get() { return this.$store.state.device.loadRawImages; },
-			set(value) { this.$store.commit('device/set', { key: 'loadRawImages', value }); }
-		},
-
-		enableSounds: {
-			get() { return this.$store.state.device.enableSounds; },
-			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
-		},
-
-		deckColumnAlign: {
-			get() { return this.$store.state.device.deckColumnAlign; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
-		},
-
-		deckColumnWidth: {
-			get() { return this.$store.state.device.deckColumnWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
-		},
-
-		fetchOnScroll: {
-			get() { return this.$store.state.settings.fetchOnScroll; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
-		},
-
-		keepCw: {
-			get() { return this.$store.state.settings.keepCw; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'keepCw', value }); }
-		},
-
-		rememberNoteVisibility: {
-			get() { return this.$store.state.settings.rememberNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
-		},
-
-		disableViaMobile: {
-			get() { return this.$store.state.settings.disableViaMobile; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
-		},
-
-		loadRemoteMedia: {
-			get() { return this.$store.state.settings.loadRemoteMedia; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'loadRemoteMedia', value }); }
-		},
-
-		circleIcons: {
-			get() { return this.$store.state.settings.circleIcons; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'circleIcons', value });
-				this.reload();
-			}
-		},
-
-		lineWidth: {
-			get() { return this.$store.state.device.lineWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
-		},
-
-		fontSize: {
-			get() { return this.$store.state.device.fontSize; },
-			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
-		},
-
-		contrastedAcct: {
-			get() { return this.$store.state.settings.contrastedAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'contrastedAcct', value });
-				this.reload();
-			}
-		},
-
-		showFullAcct: {
-			get() { return this.$store.state.settings.showFullAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'showFullAcct', value });
-				this.reload();
-			}
-		},
-
-		showVia: {
-			get() { return this.$store.state.settings.showVia; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showVia', value }); }
-		},
-
-		iLikeSushi: {
-			get() { return this.$store.state.settings.iLikeSushi; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
-		},
-
-		games_reversi_showBoardLabels: {
-			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
-		},
-
-		games_reversi_useAvatarStones: {
-			get() { return this.$store.state.settings.games.reversi.useAvatarStones; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useAvatarStones', value }); }
-		},
-
-		disableAnimatedMfm: {
-			get() { return this.$store.state.settings.disableAnimatedMfm; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
-		},
-
-		disableShowingAnimatedImages: {
-			get() { return this.$store.state.device.disableShowingAnimatedImages; },
-			set(value) { this.$store.commit('device/set', { key: 'disableShowingAnimatedImages', value }); }
-		},
-
-		showReplyTarget: {
-			get() { return this.$store.state.settings.showReplyTarget; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
-		},
-
-		showMyRenotes: {
-			get() { return this.$store.state.settings.showMyRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
-		},
-
-		showRenotedMyNotes: {
-			get() { return this.$store.state.settings.showRenotedMyNotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
-		},
-
-		showLocalRenotes: {
-			get() { return this.$store.state.settings.showLocalRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
-		},
-
-		defaultNoteVisibility: {
-			get() { return this.$store.state.settings.defaultNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
-		},
-
-		webSearchEngine: {
-			get() { return this.$store.state.settings.webSearchEngine; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
-		},
 	},
-
-	mounted() {
-		document.title = this.$t('settings');
-	},
-
 	methods: {
 		signout() {
 			this.$root.signout();
 		},
-
-		reload() {
-			this.$root.dialog({
-				type: 'warning',
-				text: this.$t('@.reload-to-apply-the-setting'),
-				showCancelButton: true
-			}).then(({ canceled }) => {
-				if (!canceled) {
-					location.reload();
-				}
-			});
-		},
-
-		checkForUpdate() {
-			this.checkingForUpdate = true;
-			checkForUpdate(this.$root, true, true).then(newer => {
-				this.checkingForUpdate = false;
-				this.latestVersion = newer;
-				if (newer == null) {
-					this.$root.dialog({
-						title: this.$t('no-updates'),
-						text: this.$t('no-updates-desc')
-					});
-				} else {
-					this.$root.dialog({
-						title: this.$t('update-available'),
-						text: this.$t('update-available-desc')
-					});
-				}
-			});
-		}
 	}
 });
 </script>
@@ -461,16 +56,26 @@ main
 		text-align center
 		color var(--mobileSignedInAsFg)
 		background var(--mobileSignedInAsBg)
-		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 		font-weight bold
 
+		&.round
+			border-radius 6px
+
+		&.shadow
+			box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
 	> .signout
 		margin 16px
 		padding 16px
 		text-align center
 		color var(--mobileSignedInAsFg)
 		background var(--mobileSignedInAsBg)
-		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
+		&.round
+			border-radius 6px
+
+		&.shadow
+			box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> footer
 		margin 16px
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index b79a32b3da..8f0a74ea35 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -12,7 +12,6 @@ const defaultSettings = {
 	keepCw: false,
 	tagTimelines: [],
 	fetchOnScroll: true,
-	showMaps: true,
 	remainDeletedNote: false,
 	showPostFormOnTopOfTl: false,
 	suggestRecentHashtags: true,
@@ -49,7 +48,6 @@ const defaultDeviceSettings = {
 	useShadow: false,
 	roundedCorners: true,
 	reduceMotion: false,
-	autoPopout: false,
 	darkmode: true,
 	darkTheme: 'dark',
 	lightTheme: 'light',
@@ -60,7 +58,6 @@ const defaultDeviceSettings = {
 	soundVolume: 0.5,
 	mediaVolume: 0.5,
 	lang: null,
-	preventUpdate: false,
 	debug: false,
 	lightmode: false,
 	loadRawImages: false,