Merge branch 'develop' into sw-notification-action

src/client/pages/_error_.vue

@@ -14,6 +14,7 @@
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -21,7 +22,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.error,
 				icon: faExclamationTriangle
 			},

src/client/pages/about-misskey.vue

@@ -1,5 +1,5 @@
 <template>
-<div style="overflow: hidden;">
+<div style="overflow: clip;">
 	<FormBase class="znqjceqz">
 		<div id="debug"></div>
 		<section class="_formItem about">
@@ -64,6 +64,7 @@ import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import MkLink from '@client/components/link.vue';
 import { physics } from '@client/scripts/physics.ts';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 const patrons = [
 	'Satsuki Yanagi',
@@ -115,7 +116,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.aboutMisskey,
 				icon: null
 			},

src/client/pages/about.vue

@@ -48,6 +48,7 @@ import FormGroup from '@client/components/form/group.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -59,7 +60,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.instanceInfo,
 				icon: faInfoCircle
 			},

src/client/pages/advanced-theme-editor.vue

@@ -12,7 +12,7 @@
 		</div>
 	</section>
 	<section class="_section">
-		<div class="_content _card _vMargin">
+		<div class="_content _card _gap">
 			<div class="_content">
 				<MkInput v-model:value="name" required><span>{{ $ts.name }}</span></MkInput>
 				<MkInput v-model:value="author" required><span>{{ $ts.author }}</span></MkInput>
@@ -24,7 +24,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="_content _card _vMargin">
+		<div class="_content _card _gap">
 			<div class="list-view _content">
 				<div class="item" v-for="([ k, v ], i) in theme" :key="k">
 					<div class="_inputs">
@@ -94,7 +94,7 @@
 import { defineComponent } from 'vue';
 import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import { toUnicode } from 'punycode';
+import { toUnicode } from 'punycode/';
 
 import MkRadio from '@client/components/ui/radio.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -109,6 +109,7 @@ import { host } from '@client/config';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { addTheme } from '@client/theme-store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -122,7 +123,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.themeEditor,
 				icon: faPalette,
 			},

src/client/pages/announcements.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_section">
 	<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
-		<section class="_card announcement _vMargin" v-for="(announcement, i) in items" :key="announcement.id">
+		<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
 			<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
 			<div class="_content">
 				<Mfm :text="announcement.text"/>
@@ -21,6 +21,7 @@ import { faCheck, faBroadcastTower } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -30,7 +31,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.announcements,
 				icon: faBroadcastTower
 			},

src/client/pages/api-console.vue

@@ -1,25 +1,25 @@
 <template>
-<div>
-<section class="_section">
-	<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
-		<span>Endpoint</span>
-	</MkInput>
-	<MkTextarea v-model:value="body" code>
-		<span>Params (JSON or JSON5)</span>
-	</MkTextarea>
-	<MkSwitch v-model:value="withCredential">
-		With credential
-	</MkSwitch>
-	<MkButton primary full @click="send" :disabled="sending">
-		<template v-if="sending"><MkEllipsis/></template>
-		<template v-else><Fa :icon="faPaperPlane"/> Send</template>
-	</MkButton>
-</section>
-<section class="_section" v-if="res">
-	<MkTextarea v-model:value="res" code readonly tall>
-		<span>Response</span>
-	</MkTextarea>
-</section>
+<div class="_root">
+	<div class="_block" style="padding: 24px;">
+		<MkInput v-model:value="endpoint" :datalist="endpoints" @update:value="onEndpointChange()">
+			<span>Endpoint</span>
+		</MkInput>
+		<MkTextarea v-model:value="body" code>
+			<span>Params (JSON or JSON5)</span>
+		</MkTextarea>
+		<MkSwitch v-model:value="withCredential">
+			With credential
+		</MkSwitch>
+		<MkButton primary full @click="send" :disabled="sending">
+			<template v-if="sending"><MkEllipsis/></template>
+			<template v-else><Fa :icon="faPaperPlane"/> Send</template>
+		</MkButton>
+	</div>
+	<div v-if="res" class="_block" style="padding: 24px;">
+		<MkTextarea v-model:value="res" code readonly tall>
+			<span>Response</span>
+		</MkTextarea>
+	</div>
 </div>
 </template>
 
@@ -32,6 +32,7 @@ import MkInput from '@client/components/ui/input.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkSwitch from '@client/components/ui/switch.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -40,7 +41,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: 'API console',
 				icon: faTerminal
 			},

src/client/pages/channel-editor.vue

@@ -30,6 +30,7 @@ import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import { selectFile } from '@client/scripts/select-file';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -45,7 +46,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.channelId ? {
+			[symbols.PAGE_INFO]: computed(() => this.channelId ? {
 				title: this.$ts._channel.edit,
 				icon: faSatelliteDish,
 			} : {

src/client/pages/channel.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-if="channel" class="_section">
-	<div class="wpgynlbz _content _panel _vMargin" :class="{ hide: !showBanner }">
+	<div class="wpgynlbz _content _panel _gap" :class="{ hide: !showBanner }">
 		<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
 		<button class="_button toggle" @click="() => showBanner = !showBanner">
 			<template v-if="showBanner"><Fa :icon="faAngleUp"/></template>
@@ -20,9 +20,9 @@
 		</div>
 	</div>
 
-	<XPostForm :channel="channel" class="post-form _content _panel _vMargin" fixed v-if="$i"/>
+	<XPostForm :channel="channel" class="post-form _content _panel _gap" fixed v-if="$i"/>
 
-	<XTimeline class="_content _vMargin _noGap_" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
+	<XTimeline class="_content _gap _noGap_" src="channel" :key="channelId" :channel="channelId" @before="before" @after="after"/>
 </div>
 </template>
 
@@ -35,6 +35,7 @@ import XPostForm from '@client/components/post-form.vue';
 import XTimeline from '@client/components/timeline.vue';
 import XChannelFollowButton from '@client/components/channel-follow-button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -53,7 +54,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.channel ? {
+			[symbols.PAGE_INFO]: computed(() => this.channel ? {
 				title: this.channel.name,
 				icon: faSatelliteDish,
 			} : null),

src/client/pages/channels.vue

@@ -11,20 +11,20 @@
 	<div class="_section">
 		<div class="_content grwlizim featured" v-if="tab === 'featured'">
 			<MkPagination :pagination="featuredPagination" #default="{items}">
-				<MkChannelPreview v-for="channel in items" class="_vMargin" :channel="channel" :key="channel.id"/>
+				<MkChannelPreview v-for="channel in items" class="_gap" :channel="channel" :key="channel.id"/>
 			</MkPagination>
 		</div>
 
 		<div class="_content grwlizim following" v-if="tab === 'following'">
 			<MkPagination :pagination="followingPagination" #default="{items}">
-				<MkChannelPreview v-for="channel in items" class="_vMargin" :channel="channel" :key="channel.id"/>
+				<MkChannelPreview v-for="channel in items" class="_gap" :channel="channel" :key="channel.id"/>
 			</MkPagination>
 		</div>
 
 		<div class="_content grwlizim owned" v-if="tab === 'owned'">
 			<MkButton class="new" @click="create()"><Fa :icon="faPlus"/></MkButton>
 			<MkPagination :pagination="ownedPagination" #default="{items}">
-				<MkChannelPreview v-for="channel in items" class="_vMargin" :channel="channel" :key="channel.id"/>
+				<MkChannelPreview v-for="channel in items" class="_gap" :channel="channel" :key="channel.id"/>
 			</MkPagination>
 		</div>
 	</div>
@@ -39,6 +39,7 @@ import MkChannelPreview from '@client/components/channel-preview.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkTab from '@client/components/tab.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -46,7 +47,7 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.channel,
 				icon: faSatelliteDish,
 				action: {

src/client/pages/clip.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-if="clip" class="_section">
-	<div class="okzinsic _content _panel _vMargin">
+	<div class="okzinsic _content _panel _gap">
 		<div class="description" v-if="clip.description">
 			<Mfm :text="clip.description" :is-note="false" :i="$i"/>
 		</div>
@@ -9,7 +9,7 @@
 		</div>
 	</div>
 
-	<XNotes class="_content _vMargin" :pagination="pagination" :detail="true"/>
+	<XNotes class="_content _gap" :pagination="pagination" :detail="true"/>
 </div>
 </template>
 
@@ -20,6 +20,7 @@ import MkContainer from '@client/components/ui/container.vue';
 import XPostForm from '@client/components/post-form.vue';
 import XNotes from '@client/components/notes.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -37,7 +38,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.clip ? {
+			[symbols.PAGE_INFO]: computed(() => this.clip ? {
 				title: this.clip.name,
 				icon: faPaperclip,
 				action: {
@@ -142,7 +143,7 @@ export default defineComponent({
 	> .user {
 		$height: 32px;
 		padding: 16px;
-		border-top: solid 1px var(--divider);
+		border-top: solid 0.5px var(--divider);
 		line-height: $height;
 
 		> .avatar {

src/client/pages/doc.vue

@@ -15,6 +15,7 @@ import MarkdownIt from 'markdown-it';
 import MarkdownItAnchor from 'markdown-it-anchor';
 import { url, lang } from '@client/config';
 import MkLink from '@client/components/link.vue';
+import * as symbols from '@client/symbols';
 
 const markdown = MarkdownIt({
 	html: true
@@ -38,7 +39,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.title ? {
+			[symbols.PAGE_INFO]: computed(() => this.title ? {
 				title: this.title,
 				icon: faQuestionCircle,
 			} : null),
@@ -150,7 +151,7 @@ export default defineComponent({
 			font-size: 1.25em;
 			padding: 0 0 0.5em 0;
 			margin: 1.5em 0 1em 0;
-			border-bottom: solid 1px var(--divider);
+			border-bottom: solid 0.5px var(--divider);
 		}
 
 		::v-deep(table) {
@@ -170,7 +171,7 @@ export default defineComponent({
 		::v-deep(kbd.key) {
 			display: inline-block;
 			padding: 6px 8px;
-			border: solid 1px var(--divider);
+			border: solid 0.5px var(--divider);
 			border-radius: 4px;
 			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 		}

src/client/pages/docs.vue

@@ -16,11 +16,12 @@
 import { defineComponent } from 'vue';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 import { url, lang } from '@client/config';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.help,
 				icon: faQuestionCircle
 			},

src/client/pages/drive.vue

@@ -6,9 +6,10 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import { faCloud, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { faCloud } from '@fortawesome/free-solid-svg-icons';
 import XDrive from '@client/components/drive.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -17,22 +18,13 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: computed(() => this.folder ? this.folder.name : this.$ts.drive),
 				icon: faCloud,
-				action: {
-					icon: faEllipsisH,
-					handler: this.menu
-				}
+				menu: () => this.$refs.drive.getMenu()
 			},
 			folder: null,
 		};
 	},
-
-	methods: {
-		menu(ev) {
-			os.modalMenu(this.$refs.drive.getMenu(), ev.currentTarget || ev.target);
-		}
-	}
 });
 </script>

src/client/pages/explore.vue

@@ -1,40 +1,40 @@
 <template>
-<div class="lznhrdub">
+<div class="lznhrdub _root">
 	<div class="_section">
 		<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput>
 
-		<XUserList v-if="query" class="_vMargin" :pagination="searchPagination" ref="search"/>
+		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
 
-		<div class="localfedi7 _panel _vMargin" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
+		<div class="localfedi7 _panel _gap" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 			<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
 			<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
 		</div>
 
 		<template v-if="tag == null">
-			<MkFolder class="_vMargin" persist-key="explore-pinned-users">
+			<MkFolder class="_gap" persist-key="explore-pinned-users">
 				<template #header><Fa :icon="faBookmark" fixed-width style="margin-right: 0.5em;"/>{{ $ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
-			<MkFolder class="_vMargin" persist-key="explore-popular-users">
+			<MkFolder class="_gap" persist-key="explore-popular-users">
 				<template #header><Fa :icon="faChartLine" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsers"/>
 			</MkFolder>
-			<MkFolder class="_vMargin" persist-key="explore-recently-updated-users">
+			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
 				<template #header><Fa :icon="faCommentAlt" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
-			<MkFolder class="_vMargin" persist-key="explore-recently-registered-users">
+			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
 				<template #header><Fa :icon="faPlus" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
 		</template>
 	</div>
 	<div class="_section">
-		<div class="localfedi7 _panel _vMargin" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
+		<div class="localfedi7 _panel _gap" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
 			<header><span>{{ $ts.exploreFediverse }}</span></header>
 		</div>
 
-		<MkFolder :body-togglable="true" :expanded="false" ref="tags" class="_vMargin">
+		<MkFolder :body-togglable="true" :expanded="false" ref="tags" class="_gap">
 			<template #header><Fa :icon="faHashtag" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
@@ -43,21 +43,21 @@
 			</div>
 		</MkFolder>
 
-		<MkFolder v-if="tag != null" :key="`${tag}`" class="_vMargin">
+		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
 			<template #header><Fa :icon="faHashtag" fixed-width style="margin-right: 0.5em;"/>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
 		<template v-if="tag == null">
-			<MkFolder class="_vMargin">
+			<MkFolder class="_gap">
 				<template #header><Fa :icon="faChartLine" fixed-width style="margin-right: 0.5em;"/>{{ $ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsersF"/>
 			</MkFolder>
-			<MkFolder class="_vMargin">
+			<MkFolder class="_gap">
 				<template #header><Fa :icon="faCommentAlt" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsersF"/>
 			</MkFolder>
-			<MkFolder class="_vMargin">
+			<MkFolder class="_gap">
 				<template #header><Fa :icon="faRocket" fixed-width style="margin-right: 0.5em;"/>{{ $ts.recentlyDiscoveredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsersF"/>
 			</MkFolder>
@@ -75,6 +75,7 @@ import MkFolder from '@client/components/ui/folder.vue';
 import MkInput from '@client/components/ui/input.vue';
 import number from '@client/filters/number';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -92,7 +93,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.explore,
 				icon: faHashtag
 			},

src/client/pages/favorites.vue

@@ -10,6 +10,7 @@ import { faStar } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -18,7 +19,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.favorites,
 				icon: faStar
 			},

src/client/pages/featured.vue

@@ -9,6 +9,7 @@ import { defineComponent } from 'vue';
 import { faFireAlt } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -17,7 +18,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.featured,
 				icon: faFireAlt
 			},

src/client/pages/follow-requests.vue

@@ -35,6 +35,7 @@ import { faUserClock, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons
 import MkPagination from '@client/components/ui/pagination.vue';
 import { userPage, acct } from '../filters/user';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -43,7 +44,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.followRequests,
 				icon: faUserClock,
 			},

src/client/pages/instance/abuses.vue

@@ -34,7 +34,7 @@
 			-->
 
 			<MkPagination :pagination="pagination" #default="{items}" ref="reports" style="margin-top: var(--margin);">
-				<div class="bcekxzvu _card _vMargin" v-for="report in items" :key="report.id">
+				<div class="bcekxzvu _card _gap" v-for="report in items" :key="report.id">
 					<div class="_content target">
 						<MkAvatar class="avatar" :user="report.targetUser"/>
 						<div class="info">
@@ -72,6 +72,7 @@ import MkSelect from '@client/components/ui/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import { acct } from '../../filters/user';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -83,7 +84,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.abuseReports,
 				icon: faExclamationCircle
 			},

src/client/pages/instance/announcements.vue

@@ -3,7 +3,7 @@
 	<div class="_section">
 		<div class="_content">
 			<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
-			<section class="_card _vMargin announcements" v-for="announcement in announcements">
+			<section class="_card _gap announcements" v-for="announcement in announcements">
 				<div class="_content announcement">
 					<MkInput v-model:value="announcement.title">
 						<span>{{ $ts.title }}</span>
@@ -34,6 +34,7 @@ import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -44,7 +45,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.announcements,
 				icon: faBroadcastTower
 			},

src/client/pages/instance/emojis.vue

@@ -59,6 +59,7 @@ import MkPagination from '@client/components/ui/pagination.vue';
 import MkTab from '@client/components/tab.vue';
 import { selectFile } from '@client/scripts/select-file';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -70,7 +71,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.customEmojis,
 				icon: faLaugh,
 				action: {

src/client/pages/instance/federation.vue

@@ -67,6 +67,7 @@ import MkSelect from '@client/components/ui/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkInstanceInfo from './instance.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -78,7 +79,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.federation,
 				icon: faGlobe
 			},

src/client/pages/instance/files.vue

@@ -35,7 +35,7 @@
 				</MkInput>
 			</div>
 			<MkPagination :pagination="pagination" #default="{items}" class="urempief" ref="files">
-				<button class="file _panel _button _vMargin" v-for="file in items" :key="file.id" @click="show(file, $event)">
+				<button class="file _panel _button _gap" v-for="file in items" :key="file.id" @click="show(file, $event)">
 					<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
 					<div class="body">
 						<div>
@@ -71,6 +71,7 @@ import MkPagination from '@client/components/ui/pagination.vue';
 import MkDriveFileThumbnail from '@client/components/drive-file-thumbnail.vue';
 import bytes from '@client/filters/bytes';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -83,7 +84,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.files,
 				icon: faCloud
 			},

src/client/pages/instance/index.metrics.vue

@@ -4,7 +4,7 @@
 		<template #header><Fa :icon="faHeartbeat"/> {{ $ts.metrics }}</template>
 		<div class="_section" style="padding: 0 var(--margin);">
 			<div class="_content">
-				<MkContainer :body-togglable="false" class="_vMargin">
+				<MkContainer :body-togglable="false" class="_gap">
 					<template #header><Fa :icon="faMicrochip"/>{{ $ts.cpuAndMemory }}</template>
 					<!--
 					<template #func>
@@ -27,7 +27,7 @@
 					</div>
 				</MkContainer>
 
-				<MkContainer :body-togglable="false" class="_vMargin">
+				<MkContainer :body-togglable="false" class="_gap">
 					<template #header><Fa :icon="faHdd"/> {{ $ts.disk }}</template>
 					<!--
 					<template #func>
@@ -50,7 +50,7 @@
 					</div>
 				</MkContainer>
 
-				<MkContainer :body-togglable="false" class="_vMargin">
+				<MkContainer :body-togglable="false" class="_gap">
 					<template #header><Fa :icon="faExchangeAlt"/> {{ $ts.network }}</template>
 					<!--
 					<template #func>

src/client/pages/instance/index.vue

@@ -4,9 +4,9 @@
 		<template #header><Fa :icon="faTachometerAlt"/> {{ $ts.overview }}</template>
 
 		<div class="sboqnrfi" :style="{ gridTemplateRows: overviewHeight }">
-			<MkInstanceStats :chart-limit="300" :detailed="true" class="_vMargin" ref="stats"/>
+			<MkInstanceStats :chart-limit="300" :detailed="true" class="_gap" ref="stats"/>
 
-			<MkContainer :body-togglable="true" class="_vMargin">
+			<MkContainer :body-togglable="true" class="_gap">
 				<template #header><Fa :icon="faInfoCircle"/>{{ $ts.instanceInfo }}</template>
 
 				<div class="_content">
@@ -19,7 +19,7 @@
 				</div>
 			</MkContainer>
 			
-			<MkContainer :body-togglable="true" :scrollable="true" class="_vMargin" style="height: 300px;">
+			<MkContainer :body-togglable="true" :scrollable="true" class="_gap" style="height: 300px;">
 				<template #header><Fa :icon="faDatabase"/>{{ $ts.database }}</template>
 
 				<div class="_content" v-if="dbInfo">
@@ -70,6 +70,7 @@ import number from '../../filters/number';
 import MkInstanceInfo from './instance.vue';
 import XMetrics from './index.metrics.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -85,7 +86,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				tabs: [{
 					id: 'index',
 					title: null,

src/client/pages/instance/instance.vue

@@ -500,12 +500,12 @@ export default defineComponent({
 		}
 
 		&:not(:first-child) {
-			border-top: solid 1px var(--divider);
+			border-top: solid 0.5px var(--divider);
 		}
 	}
 
 	> .chart {
-		border-top: solid 1px var(--divider);
+		border-top: solid 0.5px var(--divider);
 		padding: 16px 0 12px 0;
 
 		> .header {

src/client/pages/instance/logs.vue

@@ -37,6 +37,7 @@ import MkInput from '@client/components/ui/input.vue';
 import MkSelect from '@client/components/ui/select.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -48,7 +49,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.serverLogs,
 				icon: faStream
 			},

src/client/pages/instance/queue.vue

@@ -21,6 +21,7 @@ import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import XQueue from './queue.chart.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -30,7 +31,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.jobQueue,
 				icon: faExchangeAlt,
 			},

src/client/pages/instance/relays.vue

@@ -28,6 +28,7 @@ import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -37,7 +38,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.relays,
 				icon: faProjectDiagram,
 			},

src/client/pages/instance/settings.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-if="meta" class="_section">
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faInfoCircle"/> {{ $ts.basicInfo }}</div>
 		<div class="_content">
 			<MkInput v-model:value="name">{{ $ts.instanceName }}</MkInput>
@@ -20,7 +20,7 @@
 
 	<MkInput v-model:value="pinnedClipId">{{ $ts.pinnedClipId }}</MkInput>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_content">
 			<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $ts.maxNoteTextLength }}</MkInput>
 		</div>
@@ -34,7 +34,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faUser"/> {{ $ts.registration }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableRegistration" @update:value="save()">{{ $ts.enableRegistration }}</MkSwitch>
@@ -42,7 +42,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faShieldAlt"/> {{ $ts.hcaptcha }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableHcaptcha">{{ $ts.enableHcaptcha }}</MkSwitch>
@@ -60,7 +60,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faShieldAlt"/> {{ $ts.recaptcha }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableRecaptcha" ref="enableRecaptcha">{{ $ts.enableRecaptcha }}</MkSwitch>
@@ -78,7 +78,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faEnvelope" /> {{ $ts.emailConfig }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableEmail" @update:value="save()">{{ $ts.enableEmail }}<template #desc>{{ $ts.emailConfigInfo }}</template></MkSwitch>
@@ -101,7 +101,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faBolt"/> {{ $ts.serviceworker }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="enableServiceWorker">{{ $ts.enableServiceworker }}<template #desc>{{ $ts.serviceworkerInfo }}</template></MkSwitch>
@@ -117,7 +117,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faThumbtack"/> {{ $ts.pinnedUsers }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="pinnedUsers">
@@ -129,7 +129,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faThumbtack"/> {{ $ts.pinnedPages }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="pinnedPages">
@@ -141,7 +141,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faCloud"/> {{ $ts.files }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="cacheRemoteFiles">{{ $ts.cacheRemoteFiles }}<template #desc>{{ $ts.cacheRemoteFilesDescription }}</template></MkSwitch>
@@ -154,7 +154,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faCloud"/> {{ $ts.objectStorage }}</div>
 		<div class="_content">
 			<MkSwitch v-model:value="useObjectStorage">{{ $ts.useObjectStorage }}</MkSwitch>
@@ -183,7 +183,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faGhost"/> {{ $ts.proxyAccount }}</div>
 		<div class="_content">
 			<MkInput :value="proxyAccount ? proxyAccount.username : null" disabled><template #prefix>@</template>{{ $ts.proxyAccount }}<template #desc>{{ $ts.proxyAccountDescription }}</template></MkInput>
@@ -191,7 +191,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faBan"/> {{ $ts.blockedInstances }}</div>
 		<div class="_content">
 			<MkTextarea v-model:value="blockedHosts">
@@ -203,7 +203,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faShareAlt"/> {{ $ts.integration }}</div>
 		<div class="_content">
 			<header><Fa :icon="faTwitter"/> Twitter</header>
@@ -237,7 +237,7 @@
 		</div>
 	</section>
 
-	<section class="_card _vMargin">
+	<section class="_card _gap">
 		<div class="_title"><Fa :icon="faArchway" /> Summaly Proxy</div>
 		<div class="_content">
 			<MkInput v-model:value="summalyProxy">URL</MkInput>
@@ -261,6 +261,7 @@ import { url } from '@client/config';
 import getAcct from '@/misc/acct/render';
 import * as os from '@client/os';
 import { fetchInstance } from '@client/instance';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -274,7 +275,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.instance,
 				icon: faCog,
 			},

src/client/pages/instance/users.vue

@@ -53,7 +53,7 @@
 			</div>
 
 			<MkPagination :pagination="pagination" #default="{items}" class="users" ref="users">
-				<button class="user _panel _button _vMargin" v-for="user in items" :key="user.id" @click="show(user)">
+				<button class="user _panel _button _gap" v-for="user in items" :key="user.id" @click="show(user)">
 					<MkAvatar class="avatar" :user="user" :disable-link="true"/>
 					<div class="body">
 						<header>
@@ -89,6 +89,7 @@ import MkSelect from '@client/components/ui/select.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import { acct } from '../../filters/user';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -100,7 +101,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.users,
 				icon: faUsers,
 				action: {

src/client/pages/mentions.vue

@@ -9,6 +9,7 @@ import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -17,7 +18,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.mentions,
 				icon: faAt
 			},

src/client/pages/messages.vue

@@ -9,6 +9,7 @@ import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -17,7 +18,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.directNotes,
 				icon: faEnvelope
 			},

src/client/pages/messaging/index.vue

@@ -1,40 +1,38 @@
 <template>
-<div class="_section">
-	<div class="mk-messaging _content" v-size="{ max: [400] }">
-		<MkButton @click="start" primary class="start"><Fa :icon="faPlus"/> {{ $ts.startMessaging }}</MkButton>
+<div class="yweeujhr _root" v-size="{ max: [400] }">
+	<MkButton @click="start" primary class="start"><Fa :icon="faPlus"/> {{ $ts.startMessaging }}</MkButton>
 
-		<div class="history" v-if="messages.length > 0">
-			<MkA v-for="(message, i) in messages"
-				class="message _panel"
-				:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
-				:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
-				:data-index="i"
-				:key="message.id"
-				v-anim="i"
-			>
-				<div>
-					<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
-					<header v-if="message.groupId">
-						<span class="name">{{ message.group.name }}</span>
-						<MkTime :time="message.createdAt" class="time"/>
-					</header>
-					<header v-else>
-						<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-						<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-						<MkTime :time="message.createdAt" class="time"/>
-					</header>
-					<div class="body">
-						<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
-					</div>
+	<div class="history" v-if="messages.length > 0">
+		<MkA v-for="(message, i) in messages"
+			class="message _block"
+			:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
+			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
+			:data-index="i"
+			:key="message.id"
+			v-anim="i"
+		>
+			<div>
+				<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user"/>
+				<header v-if="message.groupId">
+					<span class="name">{{ message.group.name }}</span>
+					<MkTime :time="message.createdAt" class="time"/>
+				</header>
+				<header v-else>
+					<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
+					<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+					<MkTime :time="message.createdAt" class="time"/>
+				</header>
+				<div class="body">
+					<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
 				</div>
-			</MkA>
-		</div>
-		<div class="_fullinfo" v-if="!fetching && messages.length == 0">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ $ts.noHistory }}</div>
-		</div>
-		<MkLoading v-if="fetching"/>
+			</div>
+		</MkA>
 	</div>
+	<div class="_fullinfo" v-if="!fetching && messages.length == 0">
+		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+		<div>{{ $ts.noHistory }}</div>
+	</div>
+	<MkLoading v-if="fetching"/>
 </div>
 </template>
 
@@ -45,6 +43,7 @@ import getAcct from '@/misc/acct/render';
 import MkButton from '@client/components/ui/button.vue';
 import { acct } from '../../filters/user';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -53,7 +52,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.messaging,
 				icon: faComments
 			},
@@ -167,10 +166,10 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mk-messaging {
+.yweeujhr {
 
 	> .start {
-		margin: 0 auto var(--margin) auto;
+		margin: var(--margin) auto var(--margin) auto;
 	}
 
 	> .history {

src/client/pages/messaging/messaging-room.form.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging-form _panel"
+<div class="pemppnzi _block"
 	@dragover.stop="onDragover"
 	@drop.stop="onDrop"
 >
@@ -230,7 +230,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mk-messaging-form {
+.pemppnzi {
 	position: relative;
 
 	> textarea {

src/client/pages/messaging/messaging-room.vue

@@ -47,6 +47,7 @@ import { isBottom, onScrollBottom, scroll } from '@client/scripts/scroll';
 import * as os from '@client/os';
 import { popout } from '@client/scripts/popout';
 import * as sound from '@client/scripts/sound';
+import * as symbols from '@client/symbols';
 
 const Component = defineComponent({
 	components: {
@@ -70,7 +71,7 @@ const Component = defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => !this.fetching ? this.user ? {
+			[symbols.PAGE_INFO]: computed(() => !this.fetching ? this.user ? {
 				userName: this.user,
 				avatar: this.user,
 				action: {

src/client/pages/mfm-cheat-sheet.vue

@@ -272,6 +272,7 @@
 import { defineComponent } from 'vue';
 import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
 import MkTextarea from '@client/components/ui/textarea.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -280,7 +281,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts._mfm.cheatSheet,
 				icon: faQuestionCircle,
 			},

src/client/pages/my-antennas/index.vue

@@ -18,6 +18,7 @@ import { faSatellite, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import XAntenna from './index.antenna.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -28,7 +29,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.manageAntennas,
 				icon: faSatellite,
 				action: {

src/client/pages/my-clips/index.vue

@@ -4,7 +4,7 @@
 
 	<div class="_content">
 		<MkPagination :pagination="pagination" #default="{items}" ref="list" class="list">
-			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _vMargin">
+			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
 				<b>{{ item.name }}</b>
 				<div v-if="item.description" class="description">{{ item.description }}</div>
 			</MkA>
@@ -19,6 +19,7 @@ import { faPlus, faPaperclip } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -28,7 +29,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.clip,
 				icon: faPaperclip,
 				action: {
@@ -96,7 +97,7 @@ export default defineComponent({
 				> .description {
 					margin-top: 8px;
 					padding-top: 8px;
-					border-top: solid 1px var(--divider);
+					border-top: solid 0.5px var(--divider);
 				}
 			}
 		}

src/client/pages/my-groups/group.vue

@@ -12,7 +12,7 @@
 	</transition>
 
 	<transition name="zoom" mode="out-in">
-		<div v-if="group" class="_section members _vMargin">
+		<div v-if="group" class="_section members _gap">
 			<div class="_title">{{ $ts.members }}</div>
 			<div class="_content">
 				<div class="users">
@@ -39,6 +39,7 @@ import { faTimes, faUsers } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -54,7 +55,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.group ? {
+			[symbols.PAGE_INFO]: computed(() => this.group ? {
 				title: this.group.name,
 				icon: faUsers,
 			} : null),

src/client/pages/my-groups/index.vue

@@ -54,6 +54,7 @@ import MkContainer from '@client/components/ui/container.vue';
 import MkAvatars from '@client/components/avatars.vue';
 import MkTab from '@client/components/tab.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -66,7 +67,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.groups,
 				icon: faUsers
 			},

src/client/pages/my-lists/index.vue

@@ -16,6 +16,7 @@ import { faListUl, faPlus } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -25,7 +26,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.manageLists,
 				icon: faListUl,
 				action: {

src/client/pages/my-lists/list.vue

@@ -11,7 +11,7 @@
 	</transition>
 
 	<transition name="zoom" mode="out-in">
-		<div v-if="list" class="_section members _vMargin">
+		<div v-if="list" class="_section members _gap">
 			<div class="_title">{{ $ts.members }}</div>
 			<div class="_content">
 				<div class="users">
@@ -38,6 +38,7 @@ import { faTimes, faListUl } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -46,7 +47,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.list ? {
+			[symbols.PAGE_INFO]: computed(() => this.list ? {
 				title: this.list.name,
 				icon: faListUl,
 			} : null),

src/client/pages/not-found.vue

@@ -11,11 +11,12 @@
 import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.notFound,
 				icon: faExclamationTriangle
 			},

src/client/pages/note.vue

@@ -1,19 +1,19 @@
 <template>
-<div class="fcuexfpr">
+<div class="fcuexfpr _root">
 	<div v-if="note" class="note" v-anim>
-		<div class="_section" v-if="showNext">
+		<div class="_gap" v-if="showNext">
 			<XNotes class="_content _noGap_" :pagination="next"/>
 		</div>
 
-		<div class="_section main">
-			<MkButton v-if="!showNext && hasNext" class="load next _content" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
-			<div class="_content _vMargin">
-				<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_vMargin"/>
-				<XNoteDetailed v-model:note="note" :key="note.id" class="_vMargin"/>
+		<div class="main _gap">
+			<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
+			<div class="_content _gap">
+				<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
+				<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
 			</div>
-			<div class="_content clips _vMargin" v-if="clips && clips.length > 0">
+			<div class="_content clips _gap" v-if="clips && clips.length > 0">
 				<div class="title">{{ $ts.clip }}</div>
-				<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _vMargin">
+				<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
 					<b>{{ item.name }}</b>
 					<div v-if="item.description" class="description">{{ item.description }}</div>
 					<div class="user">
@@ -21,10 +21,10 @@
 					</div>
 				</MkA>
 			</div>
-			<MkButton v-if="!showPrev && hasPrev" class="load prev _content" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
+			<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
 		</div>
 
-		<div class="_section" v-if="showPrev">
+		<div class="_gap" v-if="showPrev">
 			<XNotes class="_content _noGap_" :pagination="prev"/>
 		</div>
 	</div>
@@ -44,6 +44,7 @@ import XNotes from '@client/components/notes.vue';
 import MkRemoteCaution from '@client/components/remote-caution.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -61,9 +62,14 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			INFO: computed(() => this.note ? {
+			[symbols.PAGE_INFO]: computed(() => this.note ? {
 				title: this.$ts.note,
 				avatar: this.note.user,
+				path: `/notes/${this.note.id}`,
+				share: {
+					title: this.$t('noteOf', { user: this.note.user.name }),
+					text: this.note.text,
+				},
 			} : null),
 			note: null,
 			clips: null,
@@ -137,6 +143,7 @@ export default defineComponent({
 		> .main {
 			> .load {
 				min-width: 0;
+				margin: 0 auto;
 				border-radius: 999px;
 
 				&.next {
@@ -165,7 +172,7 @@ export default defineComponent({
 					> .user {
 						$height: 32px;
 						padding-top: 16px;
-						border-top: solid 1px var(--divider);
+						border-top: solid 0.5px var(--divider);
 						line-height: $height;
 
 						> .avatar {

src/client/pages/notifications.vue

@@ -1,17 +1,16 @@
 <template>
-<div>
-	<div class="_section">
-		<XNotifications class="_content" @before="before" @after="after" page/>
-	</div>
+<div class="_root">
+	<XNotifications class="_content" @before="before" @after="after" page/>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faBell } from '@fortawesome/free-solid-svg-icons';
+import { faBell, faCheck } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotifications from '@client/components/notifications.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -20,9 +19,16 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.notifications,
-				icon: faBell
+				icon: faBell,
+				actions: [{
+					text: this.$ts.markAllAsRead,
+					icon: faCheck,
+					handler: () => {
+						os.apiWithDialog('notifications/mark-all-as-read');
+					}
+				}]
 			},
 		};
 	},

src/client/pages/page-editor/page-editor.vue

@@ -1,87 +1,85 @@
 <template>
-<div class="_section">
-	<div class="_content">
-		<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts._pages.viewPage }}</MkA>
+<div class="_root">
+	<MkA class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><Fa :icon="faExternalLinkSquareAlt"/> {{ $ts._pages.viewPage }}</MkA>
 
-		<div class="buttons" style="margin: 16px 0;">
-			<MkButton inline @click="save" primary class="save" v-if="!readonly"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
-			<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><Fa :icon="faCopy"/> {{ $ts.duplicate }}</MkButton>
-			<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
-		</div>
+	<div class="buttons" style="margin: 16px;">
+		<MkButton inline @click="save" primary class="save" v-if="!readonly"><Fa :icon="faSave"/> {{ $ts.save }}</MkButton>
+		<MkButton inline @click="duplicate" class="duplicate" v-if="pageId"><Fa :icon="faCopy"/> {{ $ts.duplicate }}</MkButton>
+		<MkButton inline @click="del" class="delete" v-if="pageId && !readonly"><Fa :icon="faTrashAlt"/> {{ $ts.delete }}</MkButton>
+	</div>
 
-		<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
-			<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
-			<div class="_section">
-				<MkInput v-model:value="title">
-					<span>{{ $ts._pages.title }}</span>
-				</MkInput>
+	<MkContainer :body-togglable="true" :expanded="true" class="_gap">
+		<template #header><Fa :icon="faCog"/> {{ $ts._pages.pageSetting }}</template>
+		<div style="padding: 16px;">
+			<MkInput v-model:value="title">
+				<span>{{ $ts._pages.title }}</span>
+			</MkInput>
 
-				<MkInput v-model:value="summary">
-					<span>{{ $ts._pages.summary }}</span>
-				</MkInput>
+			<MkInput v-model:value="summary">
+				<span>{{ $ts._pages.summary }}</span>
+			</MkInput>
 
-				<MkInput v-model:value="name">
-					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<span>{{ $ts._pages.url }}</span>
-				</MkInput>
+			<MkInput v-model:value="name">
+				<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
+				<span>{{ $ts._pages.url }}</span>
+			</MkInput>
 
-				<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
+			<MkSwitch v-model:value="alignCenter">{{ $ts._pages.alignCenter }}</MkSwitch>
 
-				<MkSelect v-model:value="font">
-					<template #label>{{ $ts._pages.font }}</template>
-					<option value="serif">{{ $ts._pages.fontSerif }}</option>
-					<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
-				</MkSelect>
+			<MkSelect v-model:value="font">
+				<template #label>{{ $ts._pages.font }}</template>
+				<option value="serif">{{ $ts._pages.fontSerif }}</option>
+				<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
+			</MkSelect>
 
-				<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+			<MkSwitch v-model:value="hideTitleWhenPinned">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
-				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><Fa :icon="faPlus"/> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
-					<div v-else-if="eyeCatchingImage">
-						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-						<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
-					</div>
+			<div class="eyeCatch">
+				<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><Fa :icon="faPlus"/> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+				<div v-else-if="eyeCatchingImage">
+					<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
+					<MkButton @click="removeEyeCatchingImage()" v-if="!readonly"><Fa :icon="faTrashAlt"/> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
 				</div>
 			</div>
-		</MkContainer>
+		</div>
+	</MkContainer>
 
-		<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
-			<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
-			<div class="_section">
-				<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
+	<MkContainer :body-togglable="true" :expanded="true" class="_gap">
+		<template #header><Fa :icon="faStickyNote"/> {{ $ts._pages.contents }}</template>
+		<div style="padding: 16px;">
+			<XBlocks class="content" v-model:value="content" :hpml="hpml"/>
 
-				<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
-			</div>
-		</MkContainer>
+			<MkButton @click="add()" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
+		</div>
+	</MkContainer>
 
-		<MkContainer :body-togglable="true" class="_vMargin">
-			<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
-			<div class="qmuvgica">
-				<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
-					<template #item="{element}">
-						<XVariable
-							:value="element"
-							:removable="true"
-							@remove="() => removeVariable(element)"
-							:hpml="hpml"
-							:name="element.name"
-							:title="element.name"
-							:draggable="true"
-						/>
-					</template>
-				</XDraggable>
+	<MkContainer :body-togglable="true" class="_gap">
+		<template #header><Fa :icon="faMagic"/> {{ $ts._pages.variables }}</template>
+		<div class="qmuvgica">
+			<XDraggable tag="div" class="variables" v-show="variables.length > 0" v-model="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
+				<template #item="{element}">
+					<XVariable
+						:value="element"
+						:removable="true"
+						@remove="() => removeVariable(element)"
+						:hpml="hpml"
+						:name="element.name"
+						:title="element.name"
+						:draggable="true"
+					/>
+				</template>
+			</XDraggable>
 
-				<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
-			</div>
-		</MkContainer>
+			<MkButton @click="addVariable()" class="add" v-if="!readonly"><Fa :icon="faPlus"/></MkButton>
+		</div>
+	</MkContainer>
 
-		<MkContainer :body-togglable="true" :expanded="true" class="_vMargin">
-			<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
-			<div>
-				<MkTextarea class="_code" v-model:value="script"/>
-			</div>
-		</MkContainer>
-	</div>
+	<MkContainer :body-togglable="true" :expanded="true" class="_gap">
+		<template #header><Fa :icon="faCode"/> {{ $ts.script }}</template>
+		<div>
+			<MkTextarea class="_code" v-model:value="script"/>
+		</div>
+	</MkContainer>
 </div>
 </template>
 
@@ -110,6 +108,7 @@ import { url } from '@client/config';
 import { collectPageVars } from '@client/scripts/collect-page-vars';
 import * as os from '@client/os';
 import { selectFile } from '@client/scripts/select-file';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -134,7 +133,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => {
+			[symbols.PAGE_INFO]: computed(() => {
 				let title = this.$ts._pages.newPage;
 				if (this.initPageId) {
 					title = this.$ts._pages.editPage;

src/client/pages/page.vue

@@ -1,25 +1,25 @@
 <template>
-<div class="xcukqgmh" v-if="page" :key="page.id">
-	<div class="_section main">
-		<div class="_content">
-			<div class="banner">
-				<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
-			</div>
-			<div>
-				<XPage :page="page"/>
-				<small style="display: block; opacity: 0.7; margin-top: 1em;">@{{ page.user.username }}</small>
-			</div>
+<div class="xcukqgmh _root" v-if="page" :key="page.id" v-size="{ max: [450] }">
+	<div class="_magnet"></div>
+
+	<div class="_block main">
+		<!--
+		<div class="header">
+			<h1>{{ page.title }}</h1>
 		</div>
-	</div>
-	<div class="_section like">
-		<div class="_content">
-			<button class="_button" @click="unlike()" v-if="page.isLiked" :title="$ts._pages.unlike"><Fa :icon="faHeartS"/></button>
-			<button class="_button" @click="like()" v-else :title="$ts._pages.like"><Fa :icon="faHeartR"/></button>
-			<span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span>
+		-->
+		<div class="banner">
+			<img :src="page.eyeCatchingImage.url" v-if="page.eyeCatchingImageId"/>
 		</div>
-	</div>
-	<div class="_section links">
-		<div class="_content">
+		<div class="content">
+			<XPage :page="page"/>
+			<small style="display: block; opacity: 0.7; margin-top: 1em;">@{{ page.user.username }}</small>
+		</div>
+		<div class="like">
+			<MkButton class="button" @click="unlike()" v-if="page.isLiked" v-tooltip="$ts._pages.unlike" primary><Fa :icon="faHeartS"/><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+			<MkButton class="button" @click="like()" v-else v-tooltip="$ts._pages.like"><Fa :icon="faHeartR"/><span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span></MkButton>
+		</div>
+		<div class="links">
 			<MkA :to="`/@${username}/pages/${pageName}/view-source`" class="link">{{ $ts._pages.viewSource }}</MkA>
 			<template v-if="$i && $i.id === page.userId">
 				<MkA :to="`/pages/edit/${page.id}`" class="link">{{ $ts._pages.editThisPage }}</MkA>
@@ -28,19 +28,26 @@
 			</template>
 		</div>
 	</div>
+	<div class="footer">
+		<div><Fa :icon="faClock"/> {{ $ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+		<div v-if="page.createdAt != page.updatedAt"><Fa :icon="faClock"/> {{ $ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
+	</div>
 </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
-import { faHeart as faHeartR } from '@fortawesome/free-regular-svg-icons';
+import { faHeart as faHeartR, faClock } from '@fortawesome/free-regular-svg-icons';
 import XPage from '@client/components/page/page.vue';
+import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		XPage
+		XPage,
+		MkButton,
 	},
 
 	props: {
@@ -56,12 +63,17 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.page ? {
+			[symbols.PAGE_INFO]: computed(() => this.page ? {
 				title: computed(() => this.page.title || this.page.name),
 				avatar: this.page.user,
+				path: `/@${this.page.user.username}/pages/${this.page.name}`,
+				share: {
+					title: this.page.title || this.page.name,
+					text: this.page.summary,
+				},
 			} : null),
 			page: null,
-			faHeartS, faHeartR
+			faHeartS, faHeartR, faClock,
 		};
 	},
 
@@ -92,7 +104,7 @@ export default defineComponent({
 		},
 
 		like() {
-			os.api('pages/like', {
+			os.apiWithDialog('pages/like', {
 				pageId: this.page.id,
 			}).then(() => {
 				this.page.isLiked = true;
@@ -100,8 +112,14 @@ export default defineComponent({
 			});
 		},
 
-		unlike() {
-			os.api('pages/unlike', {
+		async unlike() {
+			const confirm = await os.dialog({
+				type: 'warning',
+				showCancelButton: true,
+				text: this.$ts.unlikeConfirm,
+			});
+			if (confirm.canceled) return;
+			os.apiWithDialog('pages/unlike', {
 				pageId: this.page.id,
 			}).then(() => {
 				this.page.isLiked = false;
@@ -120,25 +138,64 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xcukqgmh {
+	--padding: 32px;
+
+	&.max-width_450px {
+		--padding: 16px;
+	}
+
 	> .main {
-		> ._content {
-			> .banner {
-				> img {
-					display: block;
-					width: 100%;
-					height: 120px;
-					object-fit: cover;
+		> .header {
+			padding: 16px;
+
+			> h1 {
+				margin: 0;
+			}
+		}
+
+		> .banner {
+			> img {
+				display: block;
+				width: 100%;
+				height: 120px;
+				object-fit: cover;
+			}
+		}
+
+		> .content {
+			padding: var(--padding);
+		}
+
+		> .like {
+			padding: var(--padding);
+			border-top: solid 0.5px var(--divider);
+
+			> .button {
+				--accent: rgb(216 71 106);
+				--X8: rgb(241 92 128);
+				--buttonBg: rgb(216 71 106 / 5%);
+				--buttonHoverBg: rgb(216 71 106 / 10%);
+
+				::v-deep(.count) {
+					margin-left: 0.5em;
 				}
 			}
 		}
-	}
 
-	> .links {
-		> ._content {
+		> .links {
+			padding: var(--padding);
+			border-top: solid 0.5px var(--divider);
+
 			> .link {
 				margin-right: 0.75em;
 			}
 		}
 	}
+
+	> .footer {
+		margin: var(--padding);
+		font-size: 85%;
+		opacity: 0.75;
+	}
 }
 </style>

src/client/pages/pages.vue

@@ -37,6 +37,7 @@ import MkPagePreview from '@client/components/page-preview.vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkTab from '@client/components/tab.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -44,13 +45,14 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.pages,
 				icon: faStickyNote,
-				action: {
+				actions: [{
 					icon: faPlus,
+					text: this.$ts.create,
 					handler: this.create
-				}
+				}]
 			},
 			tab: 'featured',
 			featuredPagesPagination: {

src/client/pages/preview.vue

@@ -8,6 +8,7 @@
 import { defineComponent } from 'vue';
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import MkSample from '@client/components/sample.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -16,7 +17,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.preview,
 				icon: faEye,
 			},

src/client/pages/reversi/game.vue

@@ -10,6 +10,7 @@ import GameSetting from './game.setting.vue';
 import GameBoard from './game.board.vue';
 import * as os from '@client/os';
 import { faGamepad } from '@fortawesome/free-solid-svg-icons';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -26,7 +27,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts._reversi.reversi,
 				icon: faGamepad
 			},

src/client/pages/reversi/index.vue

@@ -65,6 +65,7 @@ import * as os from '@client/os';
 import MkButton from '@client/components/ui/button.vue';
 import MkFolder from '@client/components/ui/folder.vue';
 import { faGamepad } from '@fortawesome/free-solid-svg-icons';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -75,7 +76,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts._reversi.reversi,
 				icon: faGamepad
 			},
@@ -259,7 +260,7 @@ export default defineComponent({
 		> footer {
 			display: flex;
 			align-items: baseline;
-			border-top: solid 1px var(--divider);
+			border-top: solid 0.5px var(--divider);
 			padding: 6px 8px;
 			font-size: 0.9em;
 

src/client/pages/room/room.vue

@@ -63,6 +63,7 @@ import MkSelect from '@client/components/ui/select.vue';
 import { selectFile } from '@client/scripts/select-file';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
+import * as symbols from '@client/symbols';
 
 let room: Room;
 
@@ -82,7 +83,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.user ? {
+			[symbols.PAGE_INFO]: computed(() => this.user ? {
 				title: this.$ts.room,
 				avatar: this.user,
 			} : null),

src/client/pages/scratchpad.vue

@@ -1,18 +1,18 @@
 <template>
 <div class="iltifgqe">
-	<div class="editor _panel _vMargin">
+	<div class="editor _panel _gap">
 		<PrismEditor class="_code code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
 		<MkButton style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><Fa :icon="faPlay"/></MkButton>
 	</div>
 
-	<MkContainer :body-togglable="true" class="_vMargin">
+	<MkContainer :body-togglable="true" class="_gap">
 		<template #header><Fa fixed-width/>{{ $ts.output }}</template>
 		<div class="bepmlvbi">
 			<div v-for="log in logs" class="log" :key="log.id" :class="{ print: log.print }">{{ log.text }}</div>
 		</div>
 	</MkContainer>
 
-	<div class="_vMargin">
+	<div class="_gap">
 		{{ $ts.scratchpadDescription }}
 	</div>
 </div>
@@ -33,6 +33,7 @@ import MkContainer from '@client/components/ui/container.vue';
 import MkButton from '@client/components/ui/button.vue';
 import { createAiScriptEnv } from '@client/scripts/aiscript/api';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -43,7 +44,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.scratchpad,
 				icon: faTerminal,
 			},

src/client/pages/search.vue

@@ -11,6 +11,7 @@ import { computed, defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -19,7 +20,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
 				icon: faSearch
 			},

src/client/pages/settings/2fa.vue

@@ -79,6 +79,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -90,7 +91,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.twoStepAuthentication,
 				icon: faLock
 			},

src/client/pages/settings/account-info.vue

@@ -143,6 +143,7 @@ import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
 import bytes from '@client/filters/bytes';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -159,7 +160,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.accountInfo,
 				icon: faInfoCircle
 			},
@@ -168,7 +169,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 
 		os.api('users/stats', {
 			userId: this.$i.id

src/client/pages/settings/api.vue

@@ -16,6 +16,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -28,7 +29,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: 'API',
 				icon: faKey
 			},
@@ -37,7 +38,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/apps.vue

@@ -47,6 +47,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -58,7 +59,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.installedApps,
 				icon: faPlug,
 			},
@@ -74,7 +75,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/deck.vue

@@ -41,6 +41,7 @@ import FormGroup from '@client/components/form/group.vue';
 import { deckStore } from '@client/ui/deck/deck-store';
 import * as os from '@client/os';
 import { unisonReload } from '@client/scripts/unison-reload';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -56,7 +57,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.deck,
 				icon: faColumns
 			},
@@ -87,7 +88,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/drive.vue

@@ -44,6 +44,7 @@ import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import FormBase from '@client/components/form/base.vue';
 import * as os from '@client/os';
 import bytes from '@client/filters/bytes';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -57,7 +58,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.drive,
 				icon: faCloud
 			},
@@ -100,7 +101,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/email-address.vue

@@ -20,6 +20,7 @@ import FormInput from '@client/components/form/input.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -33,7 +34,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailAddress,
 				icon: faEnvelope
 			},
@@ -48,7 +49,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/email-notification.vue

@@ -32,6 +32,8 @@ import FormSwitch from '@client/components/form/switch.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -45,7 +47,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.emailNotification,
 				icon: faEnvelope
 			},
@@ -69,7 +71,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/email.vue

@@ -30,6 +30,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -44,7 +45,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.email,
 				icon: faEnvelope
 			},
@@ -53,7 +54,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/experimental-features.vue

@@ -15,6 +15,7 @@ import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -31,7 +32,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.experimentalFeatures,
 				icon: faFlask
 			},
@@ -40,7 +41,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/general.vue

@@ -98,6 +98,7 @@ import { defaultStore } from '@client/store';
 import { ColdDeviceStorage } from '@client/store';
 import * as os from '@client/os';
 import { unisonReload } from '@client/scripts/unison-reload';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -115,7 +116,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.general,
 				icon: faCogs
 			},
@@ -191,7 +192,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/import-export.vue

@@ -34,6 +34,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import * as os from '@client/os';
 import { selectFile } from '@client/scripts/select-file';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -46,7 +47,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.importAndExport,
 				icon: faBoxes
 			},
@@ -55,7 +56,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/index.vue

@@ -1,40 +1,42 @@
 <template>
 <div class="vvcocwet" :class="{ wide: !narrow }" ref="el">
-	<FormBase class="nav" v-if="!narrow || page == null" :force-wide="!narrow">
-		<FormGroup>
-			<template #label>{{ $ts.basicSettings }}</template>
-			<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><Fa :icon="faUser"/></template>{{ $ts.profile }}</FormLink>
-			<FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><Fa :icon="faLockOpen"/></template>{{ $ts.privacy }}</FormLink>
-			<FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><Fa :icon="faLaugh"/></template>{{ $ts.reaction }}</FormLink>
-			<FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><Fa :icon="faCloud"/></template>{{ $ts.drive }}</FormLink>
-			<FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><Fa :icon="faBell"/></template>{{ $ts.notifications }}</FormLink>
-			<FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.email }}</FormLink>
-			<FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><Fa :icon="faShareAlt"/></template>{{ $ts.integration }}</FormLink>
-			<FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><Fa :icon="faLock"/></template>{{ $ts.security }}</FormLink>
-		</FormGroup>
-		<FormGroup>
-			<template #label>{{ $ts.clientSettings }}</template>
-			<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><Fa :icon="faCogs"/></template>{{ $ts.general }}</FormLink>
-			<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><Fa :icon="faPalette"/></template>{{ $ts.theme }}</FormLink>
-			<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><Fa :icon="faListUl"/></template>{{ $ts.sidebar }}</FormLink>
-			<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><Fa :icon="faMusic"/></template>{{ $ts.sounds }}</FormLink>
-			<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><Fa :icon="faPlug"/></template>{{ $ts.plugins }}</FormLink>
-		</FormGroup>
-		<FormGroup>
-			<template #label>{{ $ts.otherSettings }}</template>
-			<FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><Fa :icon="faBoxes"/></template>{{ $ts.importAndExport }}</FormLink>
-			<FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><Fa :icon="faBan"/></template>{{ $ts.muteAndBlock }}</FormLink>
-			<FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><Fa :icon="faCommentSlash"/></template>{{ $ts.wordMute }}</FormLink>
-			<FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><Fa :icon="faKey"/></template>API</FormLink>
-			<FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><Fa :icon="faEllipsisH"/></template>{{ $ts.other }}</FormLink>
-		</FormGroup>
-		<FormGroup>
-			<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
-		</FormGroup>
-		<FormGroup>
-			<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
-		</FormGroup>
-	</FormBase>
+	<div class="nav" v-if="!narrow || page == null">
+		<FormBase>
+			<FormGroup>
+				<template #label>{{ $ts.basicSettings }}</template>
+				<FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><Fa :icon="faUser"/></template>{{ $ts.profile }}</FormLink>
+				<FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><Fa :icon="faLockOpen"/></template>{{ $ts.privacy }}</FormLink>
+				<FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><Fa :icon="faLaugh"/></template>{{ $ts.reaction }}</FormLink>
+				<FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><Fa :icon="faCloud"/></template>{{ $ts.drive }}</FormLink>
+				<FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><Fa :icon="faBell"/></template>{{ $ts.notifications }}</FormLink>
+				<FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.email }}</FormLink>
+				<FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><Fa :icon="faShareAlt"/></template>{{ $ts.integration }}</FormLink>
+				<FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><Fa :icon="faLock"/></template>{{ $ts.security }}</FormLink>
+			</FormGroup>
+			<FormGroup>
+				<template #label>{{ $ts.clientSettings }}</template>
+				<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><Fa :icon="faCogs"/></template>{{ $ts.general }}</FormLink>
+				<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><Fa :icon="faPalette"/></template>{{ $ts.theme }}</FormLink>
+				<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><Fa :icon="faListUl"/></template>{{ $ts.sidebar }}</FormLink>
+				<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><Fa :icon="faMusic"/></template>{{ $ts.sounds }}</FormLink>
+				<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><Fa :icon="faPlug"/></template>{{ $ts.plugins }}</FormLink>
+			</FormGroup>
+			<FormGroup>
+				<template #label>{{ $ts.otherSettings }}</template>
+				<FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><Fa :icon="faBoxes"/></template>{{ $ts.importAndExport }}</FormLink>
+				<FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><Fa :icon="faBan"/></template>{{ $ts.muteAndBlock }}</FormLink>
+				<FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><Fa :icon="faCommentSlash"/></template>{{ $ts.wordMute }}</FormLink>
+				<FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><Fa :icon="faKey"/></template>API</FormLink>
+				<FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><Fa :icon="faEllipsisH"/></template>{{ $ts.other }}</FormLink>
+			</FormGroup>
+			<FormGroup>
+				<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
+			</FormGroup>
+			<FormGroup>
+				<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
+			</FormGroup>
+		</FormBase>
+	</div>
 	<div class="main">
 		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
 	</div>
@@ -53,6 +55,7 @@ import FormButton from '@client/components/form/button.vue';
 import { scroll } from '@client/scripts/scroll';
 import { signout } from '@client/account';
 import { unisonReload } from '@client/scripts/unison-reload';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -63,17 +66,19 @@ export default defineComponent({
 	},
 
 	props: {
-		page: {
+		initialPage: {
 			type: String,
 			required: false
 		}
 	},
 
 	setup(props, context) {
-		const INFO = ref({
+		const indexInfo = {
 			title: i18n.locale.settings,
 			icon: faCog
-		});
+		};
+		const INFO = ref(indexInfo);
+		const page = ref(props.initialPage);
 		const narrow = ref(false);
 		const view = ref(null);
 		const el = ref(null);
@@ -82,8 +87,8 @@ export default defineComponent({
 		};
 		const pageProps = ref({});
 		const component = computed(() => {
-			if (props.page == null) return null;
-			switch (props.page) {
+			if (page.value == null) return null;
+			switch (page.value) {
 				case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
 				case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
 				case 'reaction': return defineAsyncComponent(() => import('./reaction.vue'));
@@ -116,10 +121,10 @@ export default defineComponent({
 				case 'registry': return defineAsyncComponent(() => import('./registry.vue'));
 				case 'experimental-features': return defineAsyncComponent(() => import('./experimental-features.vue'));
 			}
-			if (props.page.startsWith('registry/keys/system/')) {
+			if (page.value.startsWith('registry/keys/system/')) {
 				return defineAsyncComponent(() => import('./registry.keys.vue'));
 			}
-			if (props.page.startsWith('registry/value/system/')) {
+			if (page.value.startsWith('registry/value/system/')) {
 				return defineAsyncComponent(() => import('./registry.value.vue'));
 			}
 		});
@@ -127,12 +132,12 @@ export default defineComponent({
 		watch(component, () => {
 			pageProps.value = {};
 
-			if (props.page) {
-				if (props.page.startsWith('registry/keys/system/')) {
-					pageProps.value.scope = props.page.replace('registry/keys/system/', '').split('/');
+			if (page.value) {
+				if (page.value.startsWith('registry/keys/system/')) {
+					pageProps.value.scope = page.value.replace('registry/keys/system/', '').split('/');
 				}
-				if (props.page.startsWith('registry/value/system/')) {
-					const path = props.page.replace('registry/value/system/', '').split('/');
+				if (page.value.startsWith('registry/value/system/')) {
+					const path = page.value.replace('registry/value/system/', '').split('/');
 					pageProps.value.xKey = path.pop();
 					pageProps.value.scope = path;
 				}
@@ -143,12 +148,27 @@ export default defineComponent({
 			});
 		}, { immediate: true });
 
+		watch(() => props.initialPage, () => {
+			if (props.initialPage == null && !narrow.value) {
+				page.value = 'profile';
+			} else {
+				page.value = props.initialPage;
+				if (props.initialPage == null) {
+					INFO.value = indexInfo;
+				}
+			}
+		});
+
 		onMounted(() => {
-			narrow.value = el.value.offsetWidth < 1025;
+			narrow.value = el.value.offsetWidth < 800;
+			if (!narrow.value) {
+				page.value = 'profile';
+			}
 		});
 
 		return {
-			INFO,
+			[symbols.PAGE_INFO]: INFO,
+			page,
 			narrow,
 			view,
 			el,
@@ -175,25 +195,20 @@ export default defineComponent({
 		display: flex;
 		max-width: 1100px;
 		margin: 0 auto;
+		height: 100%;
 
 		> .nav {
 			width: 32%;
 			box-sizing: border-box;
 			border-right: solid 0.5px var(--divider);
+			overflow: auto;
 		}
 
 		> .main {
 			flex: 1;
 			min-width: 0;
+			overflow: auto;
 			--baseContentWidth: 100%;
-
-			::v-deep(._section) {
-				padding: 0 0 32px 0;
-
-				& + ._section {
-					padding-top: 32px;
-				}
-			}
 		}
 	}
 }

src/client/pages/settings/integration.vue

@@ -37,6 +37,7 @@ import { apiUrl } from '@client/config';
 import FormBase from '@client/components/form/base.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -48,7 +49,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.integration,
 				icon: faShareAlt
 			},
@@ -80,7 +81,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 
 		document.cookie = `igi=${this.$i.token}; path=/;` +
 			` max-age=31536000;` +

src/client/pages/settings/mute-block.vue

@@ -6,7 +6,7 @@
 	</MkTab>
 	<div v-if="tab === 'mute'">
 		<MkPagination :pagination="mutingPagination" class="muting">
-			<template #empty><MkInfo>{{ $ts.noUsers }}</MkInfo></template>
+			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
 			<template #default="{items}">
 				<FormGroup>
 					<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
@@ -18,7 +18,7 @@
 	</div>
 	<div v-if="tab === 'block'">
 		<MkPagination :pagination="blockingPagination" class="blocking">
-			<template #empty><MkInfo>{{ $ts.noUsers }}</MkInfo></template>
+			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
 			<template #default="{items}">
 				<FormGroup>
 					<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
@@ -36,18 +36,19 @@ import { defineComponent } from 'vue';
 import { faBan } from '@fortawesome/free-solid-svg-icons';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkTab from '@client/components/tab.vue';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import { userPage } from '@client/filters/user';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
 		MkPagination,
 		MkTab,
-		MkInfo,
+		FormInfo,
 		FormBase,
 		FormGroup,
 		FormLink,
@@ -57,7 +58,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.muteAndBlock,
 				icon: faBan
 			},
@@ -74,7 +75,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/notifications.vue

@@ -19,6 +19,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import { notificationTypes } from '../../../types';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -32,7 +33,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.notifications,
 				icon: faBell
 			},
@@ -41,7 +42,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/other.vue

@@ -44,6 +44,7 @@ import { debug } from '@client/config';
 import { defaultStore } from '@client/store';
 import { signout } from '@client/account';
 import { unisonReload } from '@client/scripts/unison-reload';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -59,7 +60,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.other,
 				icon: faEllipsisH
 			},
@@ -73,7 +74,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/plugin.install.vue

@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<MkInfo warn>{{ $ts._plugin.installWarn }}</MkInfo>
+	<FormInfo warn>{{ $ts._plugin.installWarn }}</FormInfo>
 
 	<FormGroup>
 		<FormTextarea v-model:value="code" tall>
@@ -25,10 +25,11 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormButton from '@client/components/form/button.vue';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { unisonReload } from '@client/scripts/unison-reload';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -39,14 +40,14 @@ export default defineComponent({
 		FormGroup,
 		FormLink,
 		FormButton,
-		MkInfo,
+		FormInfo,
 	},
 
 	emits: ['info'],
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts._plugin.install,
 				icon: faDownload
 			},
@@ -56,7 +57,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/plugin.manage.vue

@@ -36,19 +36,18 @@ import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fo
 import MkButton from '@client/components/ui/button.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkSelect from '@client/components/ui/select.vue';
-import MkInfo from '@client/components/ui/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
 		MkButton,
 		MkTextarea,
 		MkSelect,
-		MkInfo,
 		FormSwitch,
 		FormBase,
 		FormGroup,
@@ -58,7 +57,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts._plugin.manage,
 				icon: faPlug
 			},
@@ -68,7 +67,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/plugin.vue

@@ -13,6 +13,7 @@ import FormGroup from '@client/components/form/group.vue';
 import FormLink from '@client/components/form/link.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -24,7 +25,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.plugins,
 				icon: faPlug
 			},
@@ -34,7 +35,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 });
 </script>

src/client/pages/settings/privacy.vue

@@ -36,6 +36,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import * as os from '@client/os';
 import { defaultStore } from '@client/store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -49,7 +50,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.privacy,
 				icon: faLockOpen
 			},
@@ -74,7 +75,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/profile.vue

@@ -59,6 +59,7 @@ import FormGroup from '@client/components/form/group.vue';
 import { host, langs } from '@client/config';
 import { selectFile } from '@client/scripts/select-file';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -75,7 +76,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.profile,
 				icon: faUser
 			},
@@ -136,7 +137,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/reaction.vue

@@ -45,6 +45,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormButton from '@client/components/form/button.vue';
 import * as os from '@client/os';
 import { defaultStore } from '@client/store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -59,7 +60,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.reaction,
 				icon: faLaugh,
 				action: {
@@ -87,7 +88,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/registry.keys.vue

@@ -24,7 +24,6 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkInfo from '@client/components/ui/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -33,10 +32,10 @@ import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		MkInfo,
 		FormBase,
 		FormSelect,
 		FormSwitch,
@@ -56,7 +55,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
 				icon: faCogs
 			},
@@ -71,7 +70,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 		this.fetch();
 	},
 

src/client/pages/settings/registry.value.vue

@@ -1,6 +1,6 @@
 <template>
 <FormBase>
-	<MkInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</MkInfo>
+	<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>
 
 	<template v-if="value">
 		<FormGroup>
@@ -39,7 +39,7 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { faCogs, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormTextarea from '@client/components/form/textarea.vue';
@@ -48,10 +48,11 @@ import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		MkInfo,
+		FormInfo,
 		FormBase,
 		FormSelect,
 		FormSwitch,
@@ -74,7 +75,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
 				icon: faCogs
 			},
@@ -91,7 +92,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 		this.fetch();
 	},
 

src/client/pages/settings/registry.vue

@@ -12,7 +12,6 @@
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkInfo from '@client/components/ui/info.vue';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
 import FormLink from '@client/components/form/link.vue';
@@ -21,10 +20,10 @@ import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		MkInfo,
 		FormBase,
 		FormSelect,
 		FormSwitch,
@@ -38,7 +37,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.registry,
 				icon: faCogs
 			},
@@ -51,7 +50,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/security.vue

@@ -32,6 +32,7 @@ import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormPagination from '@client/components/form/pagination.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -46,7 +47,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.security,
 				icon: faLock
 			},
@@ -59,7 +60,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/sidebar.vue

@@ -29,6 +29,7 @@ import FormButton from '@client/components/form/button.vue';
 import * as os from '@client/os';
 import { sidebarDef } from '@client/sidebar';
 import { defaultStore } from '@client/store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -42,7 +43,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.sidebar,
 				icon: faListUl
 			},
@@ -65,7 +66,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/sounds.vue

@@ -28,6 +28,7 @@ import FormGroup from '@client/components/form/group.vue';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { playFile } from '@client/scripts/sound';
+import * as symbols from '@client/symbols';
 
 const soundsTypes = [
 	null,
@@ -68,7 +69,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.sounds,
 				icon: faMusic
 			},
@@ -100,7 +101,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/theme.install.vue

@@ -26,6 +26,7 @@ import { applyTheme, validateTheme } from '@client/scripts/theme';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { addTheme, getThemes } from '@client/theme-store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -42,7 +43,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts._theme.install,
 				icon: faDownload
 			},
@@ -52,7 +53,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/theme.manage.vue

@@ -38,6 +38,7 @@ import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { getThemes, removeTheme } from '@client/theme-store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -54,7 +55,7 @@ export default defineComponent({
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts._theme.manage,
 				icon: faFolderOpen
 			},
@@ -82,7 +83,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/settings/theme.vue

@@ -1,24 +1,5 @@
 <template>
 <FormBase>
-	<FormSelect v-model:value="lightTheme" v-if="!darkMode">
-		<template #label>{{ $ts.themeForLightMode }}</template>
-		<optgroup :label="$ts.lightThemes">
-			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="$ts.darkThemes">
-			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-	<FormSelect v-model:value="darkTheme" v-else>
-		<template #label>{{ $ts.themeForDarkMode }}</template>
-		<optgroup :label="$ts.darkThemes">
-			<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="$ts.lightThemes">
-			<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-
 	<FormGroup>
 		<div class="rfqxtzch _formItem _formPanel">
 			<div class="darkMode">
@@ -45,6 +26,47 @@
 		<FormSwitch v-model:value="syncDeviceDarkMode">{{ $ts.syncDeviceDarkMode }}</FormSwitch>
 	</FormGroup>
 
+	<template v-if="darkMode">
+		<FormSelect v-model:value="darkThemeId">
+			<template #label>{{ $ts.themeForDarkMode }}</template>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+		<FormSelect v-model:value="lightThemeId">
+			<template #label>{{ $ts.themeForLightMode }}</template>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+	</template>
+	<template v-else>
+		<FormSelect v-model:value="lightThemeId">
+			<template #label>{{ $ts.themeForLightMode }}</template>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+		<FormSelect v-model:value="darkThemeId">
+			<template #label>{{ $ts.themeForDarkMode }}</template>
+			<optgroup :label="$ts.darkThemes">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="$ts.lightThemes">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+	</template>
+
 	<FormButton primary v-if="wallpaper == null" @click="setWallpaper">{{ $ts.setWallpaper }}</FormButton>
 	<FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton>
 
@@ -55,7 +77,7 @@
 
 	<FormGroup>
 		<FormLink to="/theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }}</FormLink>
-		<FormLink to="/advanced-theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>
+		<!--<FormLink to="/advanced-theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>-->
 	</FormGroup>
 
 	<FormLink to="/settings/theme/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
@@ -63,7 +85,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue';
 import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye, faGlobe, faPaintRoller } from '@fortawesome/free-solid-svg-icons';
 import FormSwitch from '@client/components/form/switch.vue';
 import FormSelect from '@client/components/form/select.vue';
@@ -71,13 +93,14 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormLink from '@client/components/form/link.vue';
 import FormButton from '@client/components/form/button.vue';
-import { builtinThemes, applyTheme } from '@client/scripts/theme';
+import { builtinThemes } from '@client/scripts/theme';
 import { selectFile } from '@client/scripts/select-file';
 import { isDeviceDarkmode } from '@client/scripts/is-device-darkmode';
 import { ColdDeviceStorage } from '@client/store';
 import { i18n } from '@client/i18n';
 import { defaultStore } from '@client/store';
 import { fetchThemes, getThemes } from '@client/theme-store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -101,25 +124,29 @@ export default defineComponent({
 		const themes = computed(() => builtinThemes.concat(installedThemes.value));
 		const darkThemes = computed(() => themes.value.filter(t => t.base == 'dark' || t.kind == 'dark'));
 		const lightThemes = computed(() => themes.value.filter(t => t.base == 'light' || t.kind == 'light'));
-		const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
-		const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
+		const darkTheme = ColdDeviceStorage.ref('darkTheme');
+		const darkThemeId = computed({
+			get() {
+				return darkTheme.value.id;
+			},
+			set(id) {
+				ColdDeviceStorage.set('darkTheme', themes.value.find(x => x.id === id))
+			}
+		});
+		const lightTheme = ColdDeviceStorage.ref('lightTheme');
+		const lightThemeId = computed({
+			get() {
+				return lightTheme.value.id;
+			},
+			set(id) {
+				ColdDeviceStorage.set('lightTheme', themes.value.find(x => x.id === id))
+			}
+		});
 		const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
 		const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
 		const wallpaper = ref(localStorage.getItem('wallpaper'));
 		const themesCount = installedThemes.value.length;
 
-		watch(darkTheme, () => {
-			if (defaultStore.state.darkMode) {
-				applyTheme(themes.value.find(x => x.id === darkTheme.value));
-			}
-		});
-
-		watch(lightTheme, () => {
-			if (!defaultStore.state.darkMode) {
-				applyTheme(themes.value.find(x => x.id === lightTheme.value));
-			}
-		});
-
 		watch(syncDeviceDarkMode, () => {
 			if (syncDeviceDarkMode) {
 				defaultStore.set('darkMode', isDeviceDarkmode());
@@ -139,16 +166,22 @@ export default defineComponent({
 			emit('info', INFO);
 		});
 
+		onActivated(() => {
+			fetchThemes().then(() => {
+				installedThemes.value = getThemes();
+			});
+		});
+
 		fetchThemes().then(() => {
 			installedThemes.value = getThemes();
 		});
 
 		return {
-			INFO,
+			[symbols.PAGE_INFO]: INFO,
 			darkThemes,
 			lightThemes,
-			darkTheme,
-			lightTheme,
+			darkThemeId,
+			lightThemeId,
 			darkMode,
 			syncDeviceDarkMode,
 			themesCount,

src/client/pages/settings/update.vue

@@ -1,8 +1,8 @@
 <template>
 <FormBase>
 	<template v-if="meta">
-		<MkInfo v-if="version === meta.version">{{ $ts.youAreRunningUpToDateClient }}</MkInfo>
-		<MkInfo v-else warn>{{ $ts.newVersionOfClientAvailable }}</MkInfo>
+		<FormInfo v-if="version === meta.version">{{ $ts.youAreRunningUpToDateClient }}</FormInfo>
+		<FormInfo v-else warn>{{ $ts.newVersionOfClientAvailable }}</FormInfo>
 	</template>
 	<FormGroup>
 		<template #label>{{ instanceName }}</template>
@@ -38,9 +38,10 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
-import MkInfo from '@client/components/ui/info.vue';
+import FormInfo from '@client/components/form/info.vue';
 import * as os from '@client/os';
 import { version, instanceName } from '@client/config';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -51,14 +52,14 @@ export default defineComponent({
 		FormLink,
 		FormGroup,
 		FormKeyValueView,
-		MkInfo,
+		FormInfo,
 	},
 
 	emits: ['info'],
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: 'Misskey Update',
 				icon: faSyncAlt
 			},
@@ -70,7 +71,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 
 		os.api('meta', {
 			detail: false

src/client/pages/settings/word-mute.vue

@@ -7,14 +7,14 @@
 	<FormBase>
 		<div class="_formItem">
 			<div v-show="tab === 'soft'">
-				<MkInfo>{{ $ts._wordMute.softDescription }}</MkInfo>
+				<FormInfo>{{ $ts._wordMute.softDescription }}</FormInfo>
 				<FormTextarea v-model:value="softMutedWords">
 					<span>{{ $ts._wordMute.muteWords }}</span>
 					<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
 				</FormTextarea>
 			</div>
 			<div v-show="tab === 'hard'">
-				<MkInfo>{{ $ts._wordMute.hardDescription }}</MkInfo>
+				<FormInfo>{{ $ts._wordMute.hardDescription }}</FormInfo>
 				<FormTextarea v-model:value="hardMutedWords">
 					<span>{{ $ts._wordMute.muteWords }}</span>
 					<template #desc>{{ $ts._wordMute.muteWordsDescription }}<br>{{ $ts._wordMute.muteWordsDescription2 }}</template>
@@ -37,10 +37,11 @@ import FormTextarea from '@client/components/form/textarea.vue';
 import FormBase from '@client/components/form/base.vue';
 import FormKeyValueView from '@client/components/form/key-value-view.vue';
 import FormButton from '@client/components/form/button.vue';
+import FormInfo from '@client/components/form/info.vue';
 import MkTab from '@client/components/tab.vue';
-import MkInfo from '@client/components/ui/info.vue';
 import * as os from '@client/os';
 import number from '@client/filters/number';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -49,14 +50,14 @@ export default defineComponent({
 		FormTextarea,
 		FormKeyValueView,
 		MkTab,
-		MkInfo,
+		FormInfo,
 	},
 
 	emits: ['info'],
 	
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.wordMute,
 				icon: faCommentSlash
 			},
@@ -92,7 +93,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this.INFO);
+		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
 
 	methods: {

src/client/pages/share.vue

@@ -33,6 +33,7 @@ import XPostForm from '@client/components/post-form.vue';
 import * as os from '@client/os';
 import { noteVisibilities } from '@/types';
 import parseAcct from '@/misc/acct/parse';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -42,7 +43,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.share,
 				icon: faShareAlt
 			},

src/client/pages/tag.vue

@@ -9,6 +9,7 @@ import { defineComponent } from 'vue';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import Progress from '@client/scripts/loading';
 import XNotes from '@client/components/notes.vue';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -24,7 +25,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.tag,
 				icon: faHashtag
 			},

src/client/pages/test.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_section">
 	<div class="_content">
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">Dialog</div>
 			<div class="_content">
 				<MkInput v-model:value="dialogTitle">
@@ -30,7 +30,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">Form</div>
 			<div class="_content">
 				<MkInput v-model:value="formTitle">
@@ -46,7 +46,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">MFM</div>
 			<div class="_content">
 				<MkTextarea v-model:value="mfm">
@@ -58,7 +58,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">selectDriveFile</div>
 			<div class="_content">
 				<MkSwitch v-model:value="selectDriveFileMultiple">
@@ -71,7 +71,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">selectDriveFolder</div>
 			<div class="_content">
 				<MkSwitch v-model:value="selectDriveFolderMultiple">
@@ -84,7 +84,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">selectUser</div>
 			<div class="_content">
 				<MkButton @click="selectUser()">selectUser</MkButton>
@@ -94,7 +94,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">Notification</div>
 			<div class="_content">
 				<MkInput v-model:value="notificationIconUrl">
@@ -110,7 +110,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">Waiting dialog</div>
 			<div class="_content">
 				<MkButton inline @click="openWaitingDialog()">icon only</MkButton>
@@ -118,7 +118,7 @@
 			</div>
 		</div>
 
-		<div class="_card _vMargin">
+		<div class="_card _gap">
 			<div class="_title">Messaging window</div>
 			<div class="_content">
 				<MkButton @click="messagingWindowOpen()">open</MkButton>
@@ -139,6 +139,7 @@ import MkSwitch from '@client/components/ui/switch.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkRadio from '@client/components/ui/radio.vue';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -151,7 +152,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: 'TEST',
 				icon: faExclamationTriangle
 			},

src/client/pages/theme-editor.vue

@@ -52,7 +52,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faPalette, faSave, faEye, faCode } from '@fortawesome/free-solid-svg-icons';
-import { toUnicode } from 'punycode';
+import { toUnicode } from 'punycode/';
 import * as tinycolor from 'tinycolor2';
 import { v4 as uuid} from 'uuid';
 import * as JSON5 from 'json5';
@@ -67,6 +67,7 @@ import { host } from '@client/config';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 import { addTheme } from '@client/theme-store';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -78,7 +79,7 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: this.$ts.themeEditor,
 				icon: faPalette,
 			},
@@ -220,9 +221,9 @@ export default defineComponent({
 			addTheme(this.theme);
 			applyTheme(this.theme);
 			if (this.$store.state.darkMode) {
-				ColdDeviceStorage.set('darkTheme', this.theme.id);
+				ColdDeviceStorage.set('darkTheme', this.theme);
 			} else {
-				ColdDeviceStorage.set('lightTheme', this.theme.id);
+				ColdDeviceStorage.set('lightTheme', this.theme);
 			}
 			this.changed = false;
 			os.dialog({

src/client/pages/timeline.vue

@@ -1,51 +1,51 @@
 <template>
-<div class="cmuxhskf" v-hotkey.global="keymap">
+<div class="cmuxhskf _root" v-hotkey.global="keymap">
 	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 
-	<div class="_section">
-		<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _content _vMargin"/>
-		<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _panel _content _vMargin" fixed/>
-		<div class="tabs _panel _vMargin">
-			<div class="left">
-				<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
-				<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
-				<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
-				<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
-				<span class="divider"></span>
-				<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
-				<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
-			</div>
-			<div class="right">
-				<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
-				<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
-				<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
-			</div>
+	<div class="_magnet"></div>
+	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+	<div class="tabs _block">
+		<div class="left">
+			<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
+			<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
+			<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
+			<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
+			<span class="divider"></span>
+			<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
+			<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
+		</div>
+		<div class="right">
+			<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
+			<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
+			<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
 		</div>
-		<XTimeline ref="tl"
-			class="_content _vMargin"
-			:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
-			:src="src"
-			:list="list ? list.id : null"
-			:antenna="antenna ? antenna.id : null"
-			:channel="channel ? channel.id : null"
-			:sound="true"
-			@before="before()"
-			@after="after()"
-			@queue="queueUpdated"
-		/>
 	</div>
+	<XTimeline ref="tl"
+		class="_gap"
+		:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
+		:src="src"
+		:list="list ? list.id : null"
+		:antenna="antenna ? antenna.id : null"
+		:channel="channel ? channel.id : null"
+		:sound="true"
+		@before="before()"
+		@after="after()"
+		@queue="queueUpdated"
+	/>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
 import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faPencilAlt, faAt } from '@fortawesome/free-solid-svg-icons';
-import { faComments, faEnvelope } from '@fortawesome/free-regular-svg-icons';
+import { faComments, faEnvelope, faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
 import Progress from '@client/scripts/loading';
 import XTimeline from '@client/components/timeline.vue';
 import XPostForm from '@client/components/post-form.vue';
 import { scroll } from '@client/scripts/scroll';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	name: 'timeline',
@@ -65,13 +65,14 @@ export default defineComponent({
 			menuOpened: false,
 			queue: 0,
 			width: 0,
-			INFO: computed(() => ({
+			[symbols.PAGE_INFO]: computed(() => ({
 				title: this.$ts.timeline,
 				icon: this.src === 'local' ? faComments : this.src === 'social' ? faShareAlt : this.src === 'global' ? faGlobe : faHome,
-				action: {
-					icon: faPencilAlt,
-					handler: () => os.post()
-				}
+				actions: [{
+					icon: faCalendarAlt,
+					text: this.$ts.jumpToSpecifiedDate,
+					handler: this.timetravel
+				}]
 			})),
 			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faAt, faEnvelope,
 		};
@@ -200,6 +201,18 @@ export default defineComponent({
 			});
 		},
 
+		async timetravel() {
+			const { canceled, result: date } = await os.dialog({
+				title: this.$ts.date,
+				input: {
+					type: 'date'
+				}
+			});
+			if (canceled) return;
+
+			this.$refs.tl.timetravel(new Date(date));
+		},
+
 		focus() {
 			(this.$refs.tl as any).focus();
 		}
@@ -221,70 +234,65 @@ export default defineComponent({
 		}
 	}
 
-	> ._section {
-		> .tabs {
-			display: flex;
-			box-sizing: border-box;
-			padding: 0 8px;
-			max-width: var(--baseContentWidth);
+	> .tabs {
+		display: flex;
+		box-sizing: border-box;
+		padding: 0 8px;
+		white-space: nowrap;
+		overflow: auto;
+
+		// 影の都合上
+		position: relative;
+
+		> .right {
 			margin-left: auto;
-			margin-right: auto;
-			white-space: nowrap;
-			overflow: auto;
+		}
 
-			// 影の都合上
-			position: relative;
+		> .left, > .right {
+			> .tab {
+				position: relative;
+				height: 50px;
+				padding: 0 12px;
 
-			> .right {
-				margin-left: auto;
+				&:hover {
+					color: var(--fgHighlighted);
+				}
+
+				&.active {
+					color: var(--fgHighlighted);
+
+					&:after {
+						content: "";
+						display: block;
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						right: 0;
+						margin: 0 auto;
+						width: calc(100% - 16px);
+						height: 4px;
+						background: var(--accent);
+						border-radius: 8px 8px 0 0;
+					}
+				}
+
+				> .i {
+					position: absolute;
+					top: 16px;
+					right: 8px;
+					color: var(--indicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
+				}
 			}
 
-			> .left, > .right {
-				> .tab {
-					position: relative;
-					height: 50px;
-					padding: 0 12px;
-
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-
-					&.active {
-						color: var(--fgHighlighted);
-
-						&:after {
-							content: "";
-							display: block;
-							position: absolute;
-							bottom: 0;
-							left: 0;
-							right: 0;
-							margin: 0 auto;
-							width: calc(100% - 16px);
-							height: 4px;
-							background: var(--accent);
-							border-radius: 8px 8px 0 0;
-						}
-					}
-
-					> .i {
-						position: absolute;
-						top: 16px;
-						right: 8px;
-						color: var(--indicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
-					}
-				}
-
-				> .divider {
-					display: inline-block;
-					width: 1px;
-					height: 28px;
-					vertical-align: middle;
-					margin: 0 8px;
-					background: var(--divider);
-				}
+			> .divider {
+				display: inline-block;
+				width: 1px;
+				height: 28px;
+				vertical-align: middle;
+				margin: 0 8px;
+				background: var(--divider);
 			}
 		}
 	}

src/client/pages/user/clips.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<MkPagination :pagination="pagination" #default="{items}" ref="list">
-		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _vMargin">
+		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
 			<b>{{ item.name }}</b>
 			<div v-if="item.description" class="description">{{ item.description }}</div>
 		</MkA>

src/client/pages/user/follow-list.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
-	<MkPagination :pagination="pagination" #default="{items}" class="mk-following-or-followers _content" ref="list">
-		<div class="users">
+	<MkPagination :pagination="pagination" #default="{items}" class="mk-following-or-followers" ref="list">
+		<div class="users _isolated">
 			<MkUserInfo class="user" v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :user="user" :key="user.id"/>
 		</div>
 	</MkPagination>

src/client/pages/user/index.timeline.vue

@@ -1,11 +1,11 @@
 <template>
 <div>
-	<MkTab v-model:value="with_" class="_vMargin">
+	<MkTab v-model:value="with_" class="_gap _section">
 		<option :value="null">{{ $ts.notes }}</option>
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
 	</MkTab>
-	<XNotes ref="timeline" class="_vMargin" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+	<XNotes ref="timeline" class="_section _noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
 </div>
 </template>
 

src/client/pages/user/index.vue

@@ -1,9 +1,9 @@
 <template>
 <div>
 	<div class="ftskorzw wide _section" v-if="user && narrow === false">
-		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_vMargin"/>
+		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
 
-		<div class="banner-container _vMargin" :style="style">
+		<div class="banner-container _gap" :style="style">
 			<div class="banner" ref="banner" :style="style"></div>
 		</div>
 		<div class="contents">
@@ -56,11 +56,11 @@
 						</dd>
 					</dl>
 				</div>
-				<XActivity :user="user" :key="user.id" class="_vMargin"/>
-				<XPhotos :user="user" :key="user.id" class="_vMargin"/>
+				<XActivity :user="user" :key="user.id" class="_gap"/>
+				<XPhotos :user="user" :key="user.id" class="_gap"/>
 			</div>
 			<div class="main">
-				<div class="nav _vMargin">
+				<div class="nav _gap">
 					<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
 						<Fa :icon="faCommentAlt" class="icon"/>
 						<span>{{ $ts.notes }}</span>
@@ -79,29 +79,29 @@
 					</div>
 				</div>
 				<template v-if="page === 'index'">
-					<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
-						<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+					<div v-if="user.pinnedNotes.length > 0" class="_gap">
+						<XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
 					</div>
-					<div class="_vMargin">
+					<div class="_gap">
 						<XUserTimeline :user="user"/>
 					</div>
 				</template>
-				<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_vMargin"/>
-				<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_vMargin"/>
-				<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
-				<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
+				<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_gap"/>
+				<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_gap"/>
+				<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
+				<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
 			</div>
 		</div>
 	</div>
-	<div class="ftskorzw narrow _section" v-else-if="user && narrow === true" v-size="{ max: [500] }">
+	<div class="ftskorzw narrow _root" v-else-if="user && narrow === true" v-size="{ max: [500] }">
 		<!-- TODO -->
 		<!-- <div class="punished" v-if="user.isSuspended"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSuspended }}</div> -->
 		<!-- <div class="punished" v-if="user.isSilenced"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/> {{ $ts.userSilenced }}</div> -->
 
-		<div class="profile _content _vMargin">
-			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_vMargin"/>
+		<div class="profile">
+			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
 
-			<div class="_vMargin _panel main" :key="user.id">
+			<div class="_block main" :key="user.id">
 				<div class="banner-container" :style="style">
 					<div class="banner" ref="banner" :style="style"></div>
 					<div class="fade"></div>
@@ -177,37 +177,39 @@
 			</div>
 		</div>
 
-		<div class="nav _vMargin">
-			<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
-				<Fa :icon="faCommentAlt" class="icon"/>
-				<span>{{ $ts.notes }}</span>
-			</MkA>
-			<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
-				<Fa :icon="faPaperclip" class="icon"/>
-				<span>{{ $ts.clips }}</span>
-			</MkA>
-			<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
-				<Fa :icon="faFileAlt" class="icon"/>
-				<span>{{ $ts.pages }}</span>
-			</MkA>
-		</div>
+		<div class="contents">
+			<div class="nav _gap">
+				<MkA :to="userPage(user)" :class="{ active: page === 'index' }" class="link">
+					<Fa :icon="faCommentAlt" class="icon"/>
+					<span>{{ $ts.notes }}</span>
+				</MkA>
+				<MkA :to="userPage(user, 'clips')" :class="{ active: page === 'clips' }" class="link">
+					<Fa :icon="faPaperclip" class="icon"/>
+					<span>{{ $ts.clips }}</span>
+				</MkA>
+				<MkA :to="userPage(user, 'pages')" :class="{ active: page === 'pages' }" class="link">
+					<Fa :icon="faFileAlt" class="icon"/>
+					<span>{{ $ts.pages }}</span>
+				</MkA>
+			</div>
 
-		<template v-if="page === 'index'">
-			<div class="_content _vMargin">
-				<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
-					<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+			<template v-if="page === 'index'">
+				<div>
+					<div v-if="user.pinnedNotes.length > 0">
+						<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+					</div>
+					<XPhotos :user="user" :key="user.id"/>
+					<XActivity :user="user" :key="user.id"/>
 				</div>
-				<XPhotos :user="user" :key="user.id" class="_vMargin"/>
-				<XActivity :user="user" :key="user.id" class="_vMargin"/>
-			</div>
-			<div class="_content _vMargin">
-				<XUserTimeline :user="user" class="_content"/>
-			</div>
-		</template>
-		<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _vMargin"/>
-		<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _vMargin"/>
-		<XClips v-else-if="page === 'clips'" :user="user" class="_vMargin"/>
-		<XPages v-else-if="page === 'pages'" :user="user" class="_vMargin"/>
+				<div>
+					<XUserTimeline :user="user"/>
+				</div>
+			</template>
+			<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
+			<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
+			<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
+			<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
+		</div>
 	</div>
 	<div v-else-if="error">
 		<MkError @retry="fetch()"/>
@@ -234,6 +236,7 @@ import { getUserMenu } from '@client/scripts/get-user-menu';
 import number from '../../filters/number';
 import { userPage, acct as getAcct } from '../../filters/user';
 import * as os from '@client/os';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
@@ -265,13 +268,14 @@ export default defineComponent({
 
 	data() {
 		return {
-			INFO: computed(() => this.user ? {
+			[symbols.PAGE_INFO]: computed(() => this.user ? {
+				title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
 				userName: this.user,
 				avatar: this.user,
-				action: {
-					icon: faEllipsisH,
-					handler: this.menu
-				}
+				path: `/@${this.user.username}`,
+				share: {
+					title: this.user.name,
+				},
 			} : null),
 			user: null,
 			error: null,
@@ -304,7 +308,7 @@ export default defineComponent({
 
 	mounted() {
 		window.requestAnimationFrame(this.parallaxLoop);
-		this.narrow = this.$el.clientWidth < 1000;
+		this.narrow = true; //this.$el.clientWidth < 1000;
 	},
 
 	beforeUnmount() {
@@ -415,7 +419,7 @@ export default defineComponent({
 					font-size: 80%;
 					padding: 8px 12px;
 					margin-bottom: 20px;
-					border: solid 1px var(--divider);
+					border: solid 0.5px var(--divider);
 					border-radius: 999px;
 				}
 			}
@@ -423,7 +427,7 @@ export default defineComponent({
 			> .status {
 				display: flex;
 				padding: 20px 16px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 				font-size: 90%;
 
 				> a {
@@ -451,13 +455,13 @@ export default defineComponent({
 
 			> .description {
 				padding: 20px 16px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 				font-size: 90%;
 			}
 
 			> .fields {
 				padding: 20px 16px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 				font-size: 90%;
 
 				> .field {
@@ -540,9 +544,8 @@ export default defineComponent({
 }
 
 .ftskorzw.narrow {
-	max-width: 100vw;
 	box-sizing: border-box;
-	overflow: hidden;
+	overflow: clip;
 
 	> .punished {
 		font-size: 0.8em;
@@ -654,7 +657,7 @@ export default defineComponent({
 				text-align: center;
 				padding: 50px 8px 16px 8px;
 				font-weight: bold;
-				border-bottom: solid 1px var(--divider);
+				border-bottom: solid 0.5px var(--divider);
 
 				> .bottom {
 					> * {
@@ -689,7 +692,7 @@ export default defineComponent({
 			> .fields {
 				padding: 24px;
 				font-size: 0.9em;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 
 				> .field {
 					display: flex;
@@ -726,7 +729,7 @@ export default defineComponent({
 			> .status {
 				display: flex;
 				padding: 24px;
-				border-top: solid 1px var(--divider);
+				border-top: solid 0.5px var(--divider);
 
 				> a {
 					flex: 1;
@@ -753,41 +756,42 @@ export default defineComponent({
 		}
 	}
 
-	> .nav {
-		display: flex;
-		align-items: center;
-		margin-top: var(--margin);
-		//font-size: 120%;
-		font-weight: bold;
+	> .contents {
+		> .nav {
+			display: flex;
+			align-items: center;
+			//font-size: 120%;
+			font-weight: bold;
 
-		> .link {
-			flex: 1;
-			display: inline-block;
-			padding: 16px;
-			text-align: center;
-			border-bottom: solid 3px transparent;
+			> .link {
+				flex: 1;
+				display: inline-block;
+				padding: 16px;
+				text-align: center;
+				border-bottom: solid 3px transparent;
 
-			&:hover {
-				text-decoration: none;
-			}
+				&:hover {
+					text-decoration: none;
+				}
 
-			&.active {
-				color: var(--accent);
-				border-bottom-color: var(--accent);
-			}
+				&.active {
+					color: var(--accent);
+					border-bottom-color: var(--accent);
+				}
 
-			&:not(.active):hover {
-				color: var(--fgHighlighted);
-			}
+				&:not(.active):hover {
+					color: var(--fgHighlighted);
+				}
 
-			> .icon {
-				margin-right: 6px;
+				> .icon {
+					margin-right: 6px;
+				}
 			}
 		}
-	}
 
-	> .content {
-		margin-bottom: var(--margin);
+		> .content {
+			margin-bottom: var(--margin);
+		}
 	}
 
 	&.max-width_500px {
@@ -831,8 +835,22 @@ export default defineComponent({
 			}
 		}
 
-		> .nav {
-			font-size: 80%;
+		> .contents {
+			> .nav {
+				font-size: 80%;
+			}
+		}
+	}
+}
+
+._flat_ .ftskorzw.narrow {
+	> .profile {
+		> .warn {
+			margin: 0;
+		}
+
+		> .main {
+			margin-top: 0;
 		}
 	}
 }

src/client/pages/user/pages.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<MkPagination :pagination="pagination" #default="{items}" ref="list">
-		<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_vMargin"/>
+		<MkPagePreview v-for="page in items" :page="page" :key="page.id" class="_gap"/>
 	</MkPagination>
 </div>
 </template>

src/client/pages/v.vue

@@ -14,11 +14,12 @@
 import { defineComponent } from 'vue';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { version } from '@client/config';
+import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	data() {
 		return {
-			INFO: {
+			[symbols.PAGE_INFO]: {
 				title: 'Misskey',
 				icon: null
 			},

src/client/pages/welcome.entrance.a.vue

@@ -53,7 +53,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faEllipsisH, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import { toUnicode } from 'punycode';
+import { toUnicode } from 'punycode/';
 import XSigninDialog from '@client/components/signin-dialog.vue';
 import XSignupDialog from '@client/components/signup-dialog.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -283,7 +283,7 @@ export default defineComponent({
 				}
 
 				> .status {
-					border-top: solid 1px var(--divider);
+					border-top: solid 0.5px var(--divider);
 					padding: 32px;
 					font-size: 90%;
 
@@ -291,7 +291,7 @@ export default defineComponent({
 						> span:not(:last-child) {
 							padding-right: 1em;
 							margin-right: 1em;
-							border-right: solid 1px var(--divider);
+							border-right: solid 0.5px var(--divider);
 						}
 					}