#2930 (#2933)

* wip

* wip

* Clean up

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* 🎨

* wip

* wip

src/client/app/desktop/views/components/note-detail.vue

@@ -91,7 +91,7 @@ import MkPostFormWindow from './post-form-window.vue';
 import MkRenoteFormWindow from './renote-form-window.vue';
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
-import XSub from './notes.note.sub.vue';
+import XSub from './note.sub.vue';
 import { sum } from '../../../../../prelude/array';
 import noteSubscriber from '../../../common/scripts/note-subscriber';
 

src/client/app/desktop/views/components/note.sub.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="tkfdzaxtkdeianobciwadajxzbddorql" :title="title">
+<div class="tkfdzaxtkdeianobciwadajxzbddorql" :class="{ mini }" :title="title">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<mk-note-header class="header" :note="note"/>
@@ -24,6 +24,11 @@ export default Vue.extend({
 		note: {
 			type: Object,
 			required: true
+		},
+		mini: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 
@@ -44,11 +49,19 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .tkfdzaxtkdeianobciwadajxzbddorql
 	display flex
-	margin 0
 	padding 16px 32px
 	font-size 0.9em
 	background var(--subNoteBg)
 
+	&.mini
+		padding 16px
+		font-size 10px
+
+		> .avatar
+			margin 0 8px 0 0
+			width 38px
+			height 38px
+
 	> .avatar
 		flex-shrink 0
 		display block

src/client/app/desktop/views/components/note.vue

@@ -1,7 +1,17 @@
 <template>
-<div class="note" v-show="appearNote.deletedAt == null" :tabindex="appearNote.deletedAt == null ? '-1' : null" v-hotkey="keymap" :title="title">
+<div
+	class="note"
+	:class="{ mini }"
+	v-show="appearNote.deletedAt == null"
+	:tabindex="appearNote.deletedAt == null ? '-1' : null"
+	v-hotkey="keymap"
+	:title="title"
+>
+	<div class="conversation" v-if="detail && conversation.length > 0">
+		<x-sub v-for="note in conversation" :key="note.id" :note="note" :mini="mini"/>
+	</div>
 	<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
-		<x-sub :note="appearNote.reply"/>
+		<x-sub :note="appearNote.reply" :mini="mini"/>
 	</div>
 	<div class="renote" v-if="isRenote">
 		<mk-avatar class="avatar" :user="note.user"/>
@@ -32,8 +42,8 @@
 					</div>
 					<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
 					<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
-					<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
-					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+					<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini"/>
 				</div>
 			</div>
 			<footer>
@@ -55,15 +65,16 @@
 			</footer>
 		</div>
 	</article>
+	<div class="replies" v-if="detail && replies.length > 0">
+		<x-sub v-for="note in replies" :key="note.id" :note="note" :mini="mini"/>
+	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 
-import MkPostFormWindow from './post-form-window.vue';
-import MkRenoteFormWindow from './renote-form-window.vue';
-import XSub from './notes.note.sub.vue';
+import XSub from './note.sub.vue';
 import noteMixin from '../../../common/scripts/note-mixin';
 import noteSubscriber from '../../../common/scripts/note-subscriber';
 
@@ -81,6 +92,40 @@ export default Vue.extend({
 		note: {
 			type: Object,
 			required: true
+		},
+		detail: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		mini: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			conversation: [],
+			replies: []
+		};
+	},
+
+	created() {
+		if (this.detail) {
+			(this as any).api('notes/replies', {
+				noteId: this.appearNote.id,
+				limit: 8
+			}).then(replies => {
+				this.replies = replies;
+			});
+
+			(this as any).api('notes/conversation', {
+				noteId: this.appearNote.replyId
+			}).then(conversation => {
+				this.conversation = conversation.reverse();
+			});
 		}
 	}
 });
@@ -93,14 +138,23 @@ export default Vue.extend({
 	background var(--face)
 	border-bottom solid 1px var(--faceDivider)
 
-	&[data-round]
-		&:first-child
-			border-top-left-radius 6px
-			border-top-right-radius 6px
+	&.mini
+		font-size 13px
 
-			> .renote
-				border-top-left-radius 6px
-				border-top-right-radius 6px
+		> .renote
+			padding 8px 16px 0 16px
+
+			.avatar
+				width 20px
+				height 20px
+
+		> article
+			padding 16px 16px 4px
+
+			> .avatar
+				margin 0 10px 8px 0
+				width 42px
+				height 42px
 
 	&:last-of-type
 		border-bottom none
@@ -129,6 +183,7 @@ export default Vue.extend({
 		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		.avatar
+			flex-shrink 0
 			display inline-block
 			width 28px
 			height 28px
@@ -273,6 +328,9 @@ export default Vue.extend({
 					border none
 					cursor pointer
 
+					&:last-child
+						margin-right 0
+
 					&:hover
 						color var(--noteActionsHover)
 

src/client/app/desktop/views/components/notes.vue

@@ -40,7 +40,7 @@ import Vue from 'vue';
 import * as config from '../../../config';
 import getNoteSummary from '../../../../../misc/get-note-summary';
 
-import XNote from './notes.note.vue';
+import XNote from './note.vue';
 
 const displayLimit = 30;
 

src/client/app/desktop/views/components/settings.2fa.vue

@@ -2,10 +2,10 @@
 <div class="2fa">
 	<p>%i18n:@intro%<a href="%i18n:@url%" target="_blank">%i18n:@detail%</a></p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
-	<p v-if="!data && !$store.state.i.twoFactorEnabled"><button @click="register" class="ui primary">%i18n:@register%</button></p>
+	<p v-if="!data && !$store.state.i.twoFactorEnabled"><ui-button @click="register">%i18n:@register%</ui-button></p>
 	<template v-if="$store.state.i.twoFactorEnabled">
 		<p>%i18n:@already-registered%</p>
-		<button @click="unregister" class="ui">%i18n:@unregister%</button>
+		<ui-button @click="unregister">%i18n:@unregister%</ui-button>
 	</template>
 	<div v-if="data">
 		<ol>
@@ -13,7 +13,7 @@
 			<li>%i18n:@scan%<br><img :src="data.qr"></li>
 			<li>%i18n:@done%<br>
 				<input type="number" v-model="token" class="ui">
-				<button @click="submit" class="ui primary">%i18n:@submit%</button>
+				<ui-button primary @click="submit">%i18n:@submit%</ui-button>
 			</li>
 		</ol>
 		<div class="ui info"><p>%fa:info-circle%%i18n:@info%</p></div>

src/client/app/desktop/views/components/settings.api.vue

@@ -1,10 +1,12 @@
 <template>
 <div class="root api">
-	<p>%i18n:@token% <code>{{ $store.state.i.token }}</code></p>
+	<ui-input :value="$store.state.i.token" readonly>
+		<span>%i18n:@token%</span>
+	</ui-input>
 	<p>%i18n:@intro%</p>
 	<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
 	<p>%i18n:@regeneration-of-token%</p>
-	<button class="ui" @click="regenerateToken">%i18n:@regenerate-token%</button>
+	<ui-button @click="regenerateToken">%i18n:@regenerate-token%</ui-button>
 </div>
 </template>
 

src/client/app/desktop/views/components/settings.password.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-	<button @click="reset" class="ui primary">%i18n:@reset%</button>
+	<ui-button @click="reset">%i18n:@reset%</ui-button>
 </div>
 </template>
 

src/client/app/desktop/views/components/settings.profile.vue

@@ -1,106 +0,0 @@
-<template>
-<div class="profile">
-	<label class="avatar ui from group">
-		<p>%i18n:@avatar%</p>
-		<img class="avatar" :src="$store.state.i.avatarUrl" alt="avatar"/>
-		<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
-	</label>
-	<label class="ui from group">
-		<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
-	</label>
-	<label class="ui from group">
-		<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
-	</label>
-	<label class="ui from group">
-		<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
-	</label>
-	<label class="ui from group">
-		<p>%i18n:@birthday%</p>
-		<input type="date" v-model="birthday"/>
-	</label>
-	<ui-button primary @click="save">%i18n:@save%</ui-button>
-	<section>
-		<h2>%i18n:@locked-account%</h2>
-		<ui-switch v-model="isLocked" @change="save(false)">%i18n:@is-locked%</ui-switch>
-		<ui-switch v-model="carefulBot" @change="save(false)">%i18n:@careful-bot%</ui-switch>
-	</section>
-	<section>
-		<h2>%i18n:@other%</h2>
-		<ui-switch v-model="isBot" @change="save(false)">%i18n:@is-bot%</ui-switch>
-		<ui-switch v-model="isCat" @change="save(false)">%i18n:@is-cat%</ui-switch>
-		<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
-	</section>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	data() {
-		return {
-			name: null,
-			location: null,
-			description: null,
-			birthday: null,
-			isBot: false,
-			isCat: false,
-			isLocked: false,
-			carefulBot: false,
-		};
-	},
-	computed: {
-		alwaysMarkNsfw: {
-			get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
-			set(value) { (this as any).api('i/update', { alwaysMarkNsfw: value }); }
-		},
-	},
-	created() {
-		this.name = this.$store.state.i.name || '';
-		this.location = this.$store.state.i.profile.location;
-		this.description = this.$store.state.i.description;
-		this.birthday = this.$store.state.i.profile.birthday;
-		this.isCat = this.$store.state.i.isCat;
-		this.isBot = this.$store.state.i.isBot;
-		this.isLocked = this.$store.state.i.isLocked;
-		this.carefulBot = this.$store.state.i.carefulBot;
-	},
-	methods: {
-		updateAvatar() {
-			(this as any).apis.updateAvatar();
-		},
-		save(notify) {
-			(this as any).api('i/update', {
-				name: this.name || null,
-				location: this.location || null,
-				description: this.description || null,
-				birthday: this.birthday || null,
-				isCat: this.isCat,
-				isBot: this.isBot,
-				isLocked: this.isLocked,
-				carefulBot: this.carefulBot
-			}).then(() => {
-				if (notify) {
-					(this as any).apis.notify('%i18n:@profile-updated%');
-				}
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.profile
-	> .avatar
-		> img
-			display inline-block
-			vertical-align top
-			width 64px
-			height 64px
-			border-radius 4px
-
-		> button
-			margin-left 8px
-
-</style>
-

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

@@ -2,38 +2,59 @@
 <div class="mk-settings">
 	<div class="nav">
 		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'">%fa:user .fw%%i18n:@profile%</p>
+		<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'">%fa:palette .fw%%i18n:@theme%</p>
 		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
 		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
 		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:@drive%</p>
 		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
 		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:@mute%</p>
 		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
-		<p :class="{ active: page == 'twitter' }" @mousedown="page = 'twitter'">%fa:B twitter .fw%Twitter</p>
 		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:@security%</p>
 		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
 		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'">%fa:cogs .fw%%i18n:@other%</p>
 	</div>
 	<div class="pages">
-		<section class="profile" v-show="page == 'profile'">
-			<h1>%i18n:@profile%</h1>
-			<x-profile/>
-		</section>
+		<div class="profile" v-show="page == 'profile'">
+			<mk-profile-editor/>
 
-		<section class="web" v-show="page == 'web'">
-			<h1>%i18n:@theme%</h1>
-			<mk-theme/>
-		</section>
+			<ui-card>
+				<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
+				<section>
+					<mk-twitter-setting/>
+				</section>
+			</ui-card>
+		</div>
 
-		<section class="web" v-show="page == 'web'">
-			<h1>%i18n:@behaviour%</h1>
-			<ui-switch v-model="fetchOnScroll">
-				%i18n:@fetch-on-scroll%
-				<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
-			</ui-switch>
-			<ui-switch v-model="autoPopout">
-				%i18n:@auto-popout%
-				<span slot="desc">%i18n:@auto-popout-desc%</span>
-			</ui-switch>
+		<ui-card class="theme" v-show="page == 'theme'">
+			<div slot="title">%fa:palette% %i18n:@theme%</div>
+
+			<section>
+				<mk-theme/>
+			</section>
+		</ui-card>
+
+		<ui-card class="web" v-show="page == 'web'">
+			<div slot="title">%fa:sliders-h% %i18n:@behaviour%</div>
+
+			<section>
+				<ui-switch v-model="fetchOnScroll">
+					%i18n:@fetch-on-scroll%
+					<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
+				</ui-switch>
+				<ui-switch v-model="autoPopout">
+					%i18n:@auto-popout%
+					<span slot="desc">%i18n:@auto-popout-desc%</span>
+				</ui-switch>
+				<ui-switch v-model="deckNav">%i18n:@deck-nav%<span slot="desc">%i18n:@deck-nav-desc%</span></ui-switch>
+
+				<details>
+					<summary>%i18n:@advanced%</summary>
+					<ui-switch v-model="apiViaStream">
+						%i18n:@api-via-stream%
+						<span slot="desc">%i18n:@api-via-stream-desc%</span>
+					</ui-switch>
+				</details>
+			</section>
 
 			<section>
 				<header>%i18n:@note-visibility%</header>
@@ -49,24 +70,26 @@
 					</ui-select>
 				</section>
 			</section>
+		</ui-card>
 
-			<details>
-				<summary>%i18n:@advanced%</summary>
-				<ui-switch v-model="apiViaStream">
-					%i18n:@api-via-stream%
-					<span slot="desc">%i18n:@api-via-stream-desc%</span>
-				</ui-switch>
-			</details>
-		</section>
+		<ui-card class="web" v-show="page == 'web'">
+			<div slot="title">%fa:desktop% %i18n:@display%</div>
 
-		<section class="web" v-show="page == 'web'">
-			<h1>%i18n:@display%</h1>
-			<div class="div">
-				<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">%i18n:@customize%</button>
-			</div>
-			<div class="div">
-				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
-				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
+			<section>
+				<ui-button @click="customizeHome">%i18n:@customize%</ui-button>
+			</section>
+			<section>
+				<header>%i18n:@wallpaper%</header>
+				<ui-button @click="updateWallpaper">%i18n:@choose-wallpaper%</ui-button>
+				<ui-button @click="deleteWallpaper">%i18n:@delete-wallpaper%</ui-button>
+			</section>
+			<section>
+				<header>%i18n:@navbar-position%</header>
+				<ui-radio v-model="navbar" value="top">%i18n:@navbar-position-top%</ui-radio>
+				<ui-radio v-model="navbar" value="left">%i18n:@navbar-position-left%</ui-radio>
+				<ui-radio v-model="navbar" value="right">%i18n:@navbar-position-right%</ui-radio>
+			</section>
+			<section>
 				<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 				<ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
 				<ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
@@ -75,171 +98,186 @@
 				<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 				<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
 				<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
-			</div>
-			<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
-			<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
-			<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
-			<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
-			<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
-			<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
-			<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
-			<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
-			<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
-			<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
-			<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
-			<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
+			</section>
+			<section>
+				<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
+				<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
+				<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
+				<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
+				<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
+				<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
+				<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
+				<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
+				<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
+				<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
+				<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
+				<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
+			</section>
+		</ui-card>
+
+		<ui-card class="web" v-show="page == 'web'">
+			<div slot="title">%fa:volume-up% %i18n:@sound%</div>
 
 			<section>
-				<header>%i18n:@navbar-position%</header>
-				<ui-radio v-model="navbar" value="top">%i18n:@navbar-position-top%</ui-radio>
-				<ui-radio v-model="navbar" value="left">%i18n:@navbar-position-left%</ui-radio>
-				<ui-radio v-model="navbar" value="right">%i18n:@navbar-position-right%</ui-radio>
-			</section>
-		</section>
-
-		<section class="web" v-show="page == 'web'">
-			<h1>%i18n:@sound%</h1>
-			<ui-switch v-model="enableSounds">
-				%i18n:@enable-sounds%
-				<span slot="desc">%i18n:@enable-sounds-desc%</span>
-			</ui-switch>
-			<label>%i18n:@volume%</label>
-			<input type="range"
-				v-model="soundVolume"
-				:disabled="!enableSounds"
-				max="1"
-				step="0.1"
-			/>
-			<button class="ui button" @click="soundTest">%fa:volume-up% %i18n:@test%</button>
-		</section>
-
-		<section class="web" v-show="page == 'web'">
-			<h1>%i18n:@mobile%</h1>
-			<ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
-		</section>
-
-		<section class="web" v-show="page == 'web'">
-			<h1>%i18n:@language%</h1>
-			<select v-model="lang" placeholder="%i18n:@pick-language%">
-				<optgroup label="%i18n:@recommended%">
-					<option value="">%i18n:@auto%</option>
-				</optgroup>
-
-				<optgroup label="%i18n:@specify-language%">
-					<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
-				</optgroup>
-			</select>
-			<div class="none ui info">
-				<p>%fa:info-circle%%i18n:@language-desc%</p>
-			</div>
-		</section>
-
-		<section class="web" v-show="page == 'web'">
-			<h1>%i18n:@cache%</h1>
-			<button class="ui button" @click="clean">%i18n:@clean-cache%</button>
-			<div class="none ui info warn">
-				<p>%fa:exclamation-triangle%%i18n:@cache-warn%</p>
-			</div>
-		</section>
-
-		<section class="notification" v-show="page == 'notification'">
-			<h1>%i18n:@notification%</h1>
-			<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
-				%i18n:@auto-watch%
-				<span slot="desc">%i18n:@auto-watch-desc%</span>
-			</ui-switch>
-		</section>
-
-		<section class="drive" v-show="page == 'drive'">
-			<h1>%i18n:@drive%</h1>
-			<x-drive/>
-		</section>
-
-		<section class="hashtags" v-show="page == 'hashtags'">
-			<h1>%i18n:@tags%</h1>
-			<x-tags/>
-		</section>
-
-		<section class="mute" v-show="page == 'mute'">
-			<h1>%i18n:@mute%</h1>
-			<x-mute/>
-		</section>
-
-		<section class="apps" v-show="page == 'apps'">
-			<h1>%i18n:@apps%</h1>
-			<x-apps/>
-		</section>
-
-		<section class="twitter" v-show="page == 'twitter'">
-			<h1>Twitter</h1>
-			<mk-twitter-setting/>
-		</section>
-
-		<section class="password" v-show="page == 'security'">
-			<h1>%i18n:@password%</h1>
-			<x-password/>
-		</section>
-
-		<section class="2fa" v-show="page == 'security'">
-			<h1>%i18n:@2fa%</h1>
-			<x-2fa/>
-		</section>
-
-		<section class="signin" v-show="page == 'security'">
-			<h1>%i18n:@signin%</h1>
-			<x-signins/>
-		</section>
-
-		<section class="api" v-show="page == 'api'">
-			<h1>API</h1>
-			<x-api/>
-		</section>
-
-		<section class="other" v-show="page == 'other'">
-			<h1>%i18n:@about%</h1>
-			<p v-if="meta">%i18n:@operator%: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
-		</section>
-
-		<section class="other" v-show="page == 'other'">
-			<h1>%i18n:@update%</h1>
-			<p>
-				<span>%i18n:@version% <i>{{ version }}</i></span>
-				<template v-if="latestVersion !== undefined">
-					<br>
-					<span>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></span>
-				</template>
-			</p>
-			<button class="ui button block" @click="checkForUpdate" :disabled="checkingForUpdate">
-				<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
-				<template v-else>%i18n:@do-update%</template>
-			</button>
-			<details>
-				<summary>%i18n:@update-settings%</summary>
-				<ui-switch v-model="preventUpdate">
-					%i18n:@prevent-update%
-					<span slot="desc">%i18n:@prevent-update-desc%</span>
+				<ui-switch v-model="enableSounds">
+					%i18n:@enable-sounds%
+					<span slot="desc">%i18n:@enable-sounds-desc%</span>
 				</ui-switch>
-			</details>
-		</section>
+				<label>%i18n:@volume%</label>
+				<input type="range"
+					v-model="soundVolume"
+					:disabled="!enableSounds"
+					max="1"
+					step="0.1"
+				/>
+				<ui-button @click="soundTest">%fa:volume-up% %i18n:@test%</ui-button>
+			</section>
+		</ui-card>
 
-		<section class="other" v-show="page == 'other'">
-			<h1>%i18n:@advanced-settings%</h1>
-			<ui-switch v-model="debug">
-				%i18n:@debug-mode%
-				<span slot="desc">%i18n:@debug-mode-desc%</span>
-			</ui-switch>
-			<ui-switch v-model="enableExperimentalFeatures">
-				%i18n:@experimental%
-				<span slot="desc">%i18n:@experimental-desc%</span>
-			</ui-switch>
-		</section>
+		<ui-card class="web" v-show="page == 'web'">
+			<div slot="title">%fa:language% %i18n:@language%</div>
+			<section class="fit-top">
+				<ui-select v-model="lang" placeholder="%i18n:@pick-language%">
+					<optgroup label="%i18n:@recommended%">
+						<option value="">%i18n:@auto%</option>
+					</optgroup>
+
+					<optgroup label="%i18n:@specify-language%">
+						<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+					</optgroup>
+				</ui-select>
+				<div class="none ui info">
+					<p>%fa:info-circle%%i18n:@language-desc%</p>
+				</div>
+			</section>
+		</ui-card>
+
+		<ui-card class="web" v-show="page == 'web'">
+			<div slot="title">%fa:trash-alt R% %i18n:@cache%</div>
+			<section>
+				<ui-button @click="clean">%i18n:@clean-cache%</ui-button>
+				<div class="none ui info warn">
+					<p>%fa:exclamation-triangle%%i18n:@cache-warn%</p>
+				</div>
+			</section>
+		</ui-card>
+
+		<ui-card class="notification" v-show="page == 'notification'">
+			<div slot="title">%fa:bell R% %i18n:@notification%</div>
+			<section>
+				<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
+					%i18n:@auto-watch%
+					<span slot="desc">%i18n:@auto-watch-desc%</span>
+				</ui-switch>
+			</section>
+		</ui-card>
+
+		<ui-card class="drive" v-show="page == 'drive'">
+			<div slot="title">%fa:cloud% %i18n:@drive%</div>
+			<section>
+				<x-drive/>
+			</section>
+		</ui-card>
+
+		<ui-card class="hashtags" v-show="page == 'hashtags'">
+			<div slot="title">%fa:hashtag% %i18n:@tags%</div>
+			<section>
+				<x-tags/>
+			</section>
+		</ui-card>
+
+		<ui-card class="mute" v-show="page == 'mute'">
+			<div slot="title">%fa:ban% %i18n:@mute%</div>
+			<section>
+				<x-mute/>
+			</section>
+		</ui-card>
+
+		<ui-card class="apps" v-show="page == 'apps'">
+			<div slot="title">%fa:puzzle-piece% %i18n:@apps%</div>
+			<section>
+				<x-apps/>
+			</section>
+		</ui-card>
+
+		<ui-card class="password" v-show="page == 'security'">
+			<div slot="title">%fa:unlock-alt% %i18n:@password%</div>
+			<section>
+				<x-password/>
+			</section>
+		</ui-card>
+
+		<ui-card class="2fa" v-show="page == 'security'">
+			<div slot="title">%fa:mobile-alt% %i18n:@2fa%</div>
+			<section>
+				<x-2fa/>
+			</section>
+		</ui-card>
+
+		<ui-card class="signin" v-show="page == 'security'">
+			<div slot="title">%fa:sign-in-alt% %i18n:@signin%</div>
+			<section>
+				<x-signins/>
+			</section>
+		</ui-card>
+
+		<ui-card class="api" v-show="page == 'api'">
+			<div slot="title">%fa:key% API</div>
+			<section class="fit-top">
+				<x-api/>
+			</section>
+		</ui-card>
+
+		<ui-card class="other" v-show="page == 'other'">
+			<div slot="title">%fa:info-circle% %i18n:@about%</div>
+			<section>
+				<p v-if="meta">%i18n:@operator%: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
+			</section>
+		</ui-card>
+
+		<ui-card class="other" v-show="page == 'other'">
+			<div slot="title">%fa:sync-alt% %i18n:@update%</div>
+			<section>
+				<p>
+					<span>%i18n:@version% <i>{{ version }}</i></span>
+					<template v-if="latestVersion !== undefined">
+						<br>
+						<span>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></span>
+					</template>
+				</p>
+				<button class="ui button block" @click="checkForUpdate" :disabled="checkingForUpdate">
+					<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
+					<template v-else>%i18n:@do-update%</template>
+				</button>
+				<details>
+					<summary>%i18n:@update-settings%</summary>
+					<ui-switch v-model="preventUpdate">
+						%i18n:@prevent-update%
+						<span slot="desc">%i18n:@prevent-update-desc%</span>
+					</ui-switch>
+				</details>
+			</section>
+		</ui-card>
+
+		<ui-card class="other" v-show="page == 'other'">
+			<div slot="title">%fa:cogs% %i18n:@advanced-settings%</div>
+			<section>
+				<ui-switch v-model="debug">
+					%i18n:@debug-mode%
+					<span slot="desc">%i18n:@debug-mode-desc%</span>
+				</ui-switch>
+				<ui-switch v-model="enableExperimentalFeatures">
+					%i18n:@experimental%
+					<span slot="desc">%i18n:@experimental-desc%</span>
+				</ui-switch>
+			</section>
+		</ui-card>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import XProfile from './settings.profile.vue';
 import XMute from './settings.mute.vue';
 import XPassword from './settings.password.vue';
 import X2fa from './settings.2fa.vue';
@@ -253,7 +291,6 @@ import checkForUpdate from '../../../common/scripts/check-for-update';
 
 export default Vue.extend({
 	components: {
-		XProfile,
 		XMute,
 		XPassword,
 		X2fa,
@@ -295,6 +332,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'autoPopout', value }); }
 		},
 
+		deckNav: {
+			get() { return this.$store.state.settings.deckNav; },
+			set(value) { this.$store.commit('settings/set', { key: 'deckNav', value }); }
+		},
+
 		darkmode: {
 			get() { return this.$store.state.device.darkmode; },
 			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
@@ -438,11 +480,6 @@ export default Vue.extend({
 		disableAnimatedMfm: {
 			get() { return this.$store.state.settings.disableAnimatedMfm; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
-		},
-
-		disableViaMobile: {
-			get() { return this.$store.state.settings.disableViaMobile; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
 		}
 	},
 	created() {
@@ -546,34 +583,10 @@ export default Vue.extend({
 		height 100%
 		flex auto
 		overflow auto
+		background var(--bg)
 
 		> section
 			margin 32px
 			color var(--text)
 
-			> h1
-				margin 0 0 1em 0
-				padding 0 0 8px 0
-				font-size 1em
-				border-bottom solid 1px var(--faceDivider)
-
-			&, >>> *
-				.ui.button.block
-					margin 16px 0
-
-				> section
-					margin 32px 0
-
-					> h2
-						margin 0 0 1em 0
-						padding 0 0 8px 0
-						font-size 1em
-						color var(--text)
-						border-bottom solid 1px var(--faceDivider)
-
-		> .web
-			> .div
-				border-bottom solid 1px var(--faceDivider)
-				margin 16px 0
-
 </style>