tweak ui

src/client/components/global/header.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ slim: narrow, thin }" :key="key">
+<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }" @click="onClick">
 	<template v-if="info">
 		<div class="titleContainer" @click="showTabsPopup">
 			<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -26,7 +26,10 @@
 	</template>
 	<div class="buttons right">
 		<template v-if="info && info.actions && !narrow">
-			<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+			<template v-for="action in info.actions">
+				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+			</template>
 		</template>
 		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
 	</div>
@@ -35,10 +38,17 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as tinycolor from 'tinycolor2';
 import { popupMenu } from '@client/os';
 import { url } from '@client/config';
+import { scrollToTop } from '@client/scripts/scroll';
+import MkButton from '@client/components/ui/button.vue';
 
 export default defineComponent({
+	components: {
+		MkButton
+	},
+
 	props: {
 		info: {
 			required: true
@@ -54,9 +64,9 @@ export default defineComponent({
 
 	data() {
 		return {
+			bg: null,
 			narrow: false,
 			height: 0,
-			key: 0,
 		};
 	},
 
@@ -75,13 +85,12 @@ export default defineComponent({
 		}
 	},
 
-	watch: {
-		info() {
-			this.key++;
-		},
-	},
-
 	mounted() {
+		const rawBg = this.info?.bg || 'var(--bg)';
+		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+		bg.setAlpha(0.85);
+		this.bg = bg.toRgbString();
+	
 		if (this.$el.parentElement == null) return;
 		this.narrow = this.$el.parentElement.offsetWidth < 500;
 		new ResizeObserver((entries, observer) => {
@@ -136,6 +145,10 @@ export default defineComponent({
 
 		preventDrag(ev) {
 			ev.stopPropagation();
+		},
+
+		onClick(ev) {
+			scrollToTop(this.$el, { behavior: 'smooth' });
 		}
 	}
 });
@@ -145,7 +158,12 @@ export default defineComponent({
 .fdidabkb {
 	--height: 60px;
 	display: flex;
+	position: sticky;
+	top: var(--stickyTop, 0);
+	z-index: 1000;
 	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 
 	&.thin {
 		--height: 50px;
@@ -198,6 +216,12 @@ export default defineComponent({
 				color: var(--accent);
 			}
 		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
 	}
 
 	> .titleContainer {

src/client/components/index.ts

@@ -13,6 +13,7 @@ import i18n from './global/i18n';
 import loading from './global/loading.vue';
 import error from './global/error.vue';
 import ad from './global/ad.vue';
+import header from './global/header.vue';
 
 export default function(app: App) {
 	app.component('I18n', i18n);
@@ -28,4 +29,5 @@ export default function(app: App) {
 	app.component('MkLoading', loading);
 	app.component('MkError', error);
 	app.component('MkAd', ad);
+	app.component('MkHeader', header);
 }

src/client/components/modal-page-window.vue

@@ -11,7 +11,6 @@
 			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
 		<div class="body _flat_">
-			<XHeader v-if="!pageInfo?.hide" :info="pageInfo"/>
 			<keep-alive>
 				<component :is="component" v-bind="props" :ref="changePage"/>
 			</keep-alive>
@@ -23,7 +22,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkModal from '@client/components/ui/modal.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -34,7 +32,6 @@ import * as os from '@client/os';
 export default defineComponent({
 	components: {
 		MkModal,
-		XHeader,
 	},
 
 	inject: {

src/client/components/page-window.vue

@@ -9,14 +9,14 @@
 >
 	<template #header>
 		<template v-if="pageInfo">
-			{{ pageInfo.title }}
+			<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon" style="margin-right: 0.5em;"></i>
+			<span>{{ pageInfo.title }}</span>
 		</template>
 	</template>
 	<template #headerLeft>
 		<button v-if="history.length > 0" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
 	</template>
 	<div class="yrolvcoq _flat_">
-		<XHeader :info="pageInfo"/>
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </XWindow>
@@ -25,7 +25,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XWindow from '@client/components/ui/window.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -35,7 +34,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XWindow,
-		XHeader,
 	},
 
 	inject: {

src/client/pages/announcements.vue

@@ -1,17 +1,20 @@
 <template>
-<div class="_section">
+<div>
-	<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
+	<MkHeader :info="header"/>
-		<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
+	<div class="_section">
-			<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
+		<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
-			<div class="_content">
+			<section class="_card announcement _gap" v-for="(announcement, i) in items" :key="announcement.id">
-				<Mfm :text="announcement.text"/>
+				<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
-				<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+				<div class="_content">
-			</div>
+					<Mfm :text="announcement.text"/>
-			<div class="_footer" v-if="$i && !announcement.isRead">
+					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-				<MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
+				</div>
-			</div>
+				<div class="_footer" v-if="$i && !announcement.isRead">
-		</section>
+					<MkButton @click="read(items, announcement, i)" primary><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
-	</MkPagination>
+				</div>
+			</section>
+		</MkPagination>
+	</div>
 </div>
 </template>
 
@@ -35,6 +38,11 @@ export default defineComponent({
 				icon: 'fas fa-broadcast-tower',
 				bg: 'var(--bg)',
 			},
+			header: {
+				title: this.$ts.announcements,
+				icon: 'fas fa-broadcast-tower',
+				bg: 'var(--bg)',
+			},
 			pagination: {
 				endpoint: 'announcements',
 				limit: 10,

src/client/pages/antenna-timeline.vue

@@ -89,7 +89,7 @@ export default defineComponent({
 		},
 
 		top() {
-			scroll(this.$el, 0);
+			scroll(this.$el, { top: 0 });
 		},
 
 		async timetravel() {

src/client/pages/emojis.vue

@@ -1,6 +1,9 @@
 <template>
-<div :class="$style.root">
+<div>
-	<XCategory v-if="tab === 'category'"/>
+	<MkHeader :info="header"/>
+	<div :class="$style.root">
+		<XCategory v-if="tab === 'category'"/>
+	</div>
 </div>
 </template>
 
@@ -22,6 +25,11 @@ export default defineComponent({
 				icon: 'fas fa-laugh',
 				bg: 'var(--bg)',
 			})),
+			header: computed(() => ({
+				title: this.$ts.customEmojis,
+				icon: 'fas fa-laugh',
+				bg: 'var(--bg)',
+			})),
 			tab: 'category',
 		}
 	},

src/client/pages/explore.vue

@@ -1,72 +1,76 @@
 <template>
-<div class="lznhrdub _root">
+<div>
-	<div>
+	<MkHeader :info="header"/>
-		<div class="_isolated">
-			<MkInput v-model="query" :debounce="true" type="search">
-				<template #prefix><i class="fas fa-search"></i></template>
-				<template #label>{{ $ts.searchUser }}</template>
-			</MkInput>
-		</div>
 
-		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
+	<div class="lznhrdub _root">
-
+		<div>
-		<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
+			<div class="_isolated">
-			<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
+				<MkInput v-model="query" :debounce="true" type="search">
-			<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
+					<template #prefix><i class="fas fa-search"></i></template>
-		</div>
+					<template #label>{{ $ts.searchUser }}</template>
-
+				</MkInput>
-		<template v-if="tag == null">
-			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
-				<XUserList :pagination="pinnedUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsers"/>
-			</MkFolder>
-		</template>
-	</div>
-	<div>
-		<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
-			<header><span>{{ $ts.exploreFediverse }}</span></header>
-		</div>
-
-		<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
-
-			<div class="vxjfqztj">
-				<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
-				<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
 			</div>
-		</MkFolder>
 
-		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
+			<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
-			<XUserList :pagination="tagUsers"/>
-		</MkFolder>
 
-		<template v-if="tag == null">
+			<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
-			<MkFolder class="_gap">
+				<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
+				<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
-				<XUserList :pagination="popularUsersF"/>
+			</div>
+
+			<template v-if="tag == null">
+				<MkFolder class="_gap" persist-key="explore-pinned-users">
+					<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
+					<XUserList :pagination="pinnedUsers"/>
+				</MkFolder>
+				<MkFolder class="_gap" persist-key="explore-popular-users">
+					<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
+					<XUserList :pagination="popularUsers"/>
+				</MkFolder>
+				<MkFolder class="_gap" persist-key="explore-recently-updated-users">
+					<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
+					<XUserList :pagination="recentlyUpdatedUsers"/>
+				</MkFolder>
+				<MkFolder class="_gap" persist-key="explore-recently-registered-users">
+					<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
+					<XUserList :pagination="recentlyRegisteredUsers"/>
+				</MkFolder>
+			</template>
+		</div>
+		<div>
+			<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
+				<header><span>{{ $ts.exploreFediverse }}</span></header>
+			</div>
+
+			<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
+				<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
+
+				<div class="vxjfqztj">
+					<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
+					<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
+				</div>
 			</MkFolder>
-			<MkFolder class="_gap">
+
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
+			<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-				<XUserList :pagination="recentlyUpdatedUsersF"/>
+				<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+				<XUserList :pagination="tagUsers"/>
 			</MkFolder>
-			<MkFolder class="_gap">
+
-				<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
+			<template v-if="tag == null">
-				<XUserList :pagination="recentlyRegisteredUsersF"/>
+				<MkFolder class="_gap">
-			</MkFolder>
+					<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
-		</template>
+					<XUserList :pagination="popularUsersF"/>
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
+					<XUserList :pagination="recentlyUpdatedUsersF"/>
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
+					<XUserList :pagination="recentlyRegisteredUsersF"/>
+				</MkFolder>
+			</template>
+		</div>
 	</div>
 </div>
 </template>
@@ -100,6 +104,10 @@ export default defineComponent({
 				title: this.$ts.explore,
 				icon: 'fas fa-hashtag'
 			},
+			header: {
+				title: this.$ts.explore,
+				icon: 'fas fa-hashtag'
+			},
 			pinnedUsers: { endpoint: 'pinned-users' },
 			popularUsers: { endpoint: 'users', limit: 10, noPaging: true, params: {
 				state: 'alive',

src/client/pages/favorites.vue

@@ -1,7 +1,10 @@
 <template>
-<div class="jmelgwjh">
+<div>
-	<div class="body">
+	<MkHeader :info="header"/>
-		<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+	<div class="jmelgwjh">
+		<div class="body">
+			<XNotes class="notes" :pagination="pagination" :detail="true" :prop="'note'" @before="before()" @after="after()"/>
+		</div>
 	</div>
 </div>
 </template>
@@ -25,6 +28,11 @@ export default defineComponent({
 				icon: 'fas fa-star',
 				bg: 'var(--bg)',
 			},
+			header: {
+				title: this.$ts.favorites,
+				icon: 'fas fa-star',
+				bg: 'var(--bg)',
+			},
 			pagination: {
 				endpoint: 'i/favorites',
 				limit: 10,

src/client/pages/featured.vue

@@ -1,6 +1,9 @@
 <template>
-<div class="_section">
+<div>
-	<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/>
+	<MkHeader :info="header"/>
+	<div class="_section">
+		<XNotes class="_content" ref="notes" :pagination="pagination" @before="before" @after="after"/>
+	</div>
 </div>
 </template>
 
@@ -19,12 +22,18 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.featured,
-				icon: 'fas fa-fire-alt'
+				icon: 'fas fa-fire-alt',
+				bg: 'var(--bg)',
+			},
+			header: {
+				title: this.$ts.featured,
+				icon: 'fas fa-fire-alt',
+				bg: 'var(--bg)',
 			},
 			pagination: {
 				endpoint: 'notes/featured',
 				limit: 10,
-				offsetMode: true
+				offsetMode: true,
 			},
 		};
 	},

src/client/pages/federation.vue

@@ -1,95 +1,98 @@
 <template>
-<div class="taeiyria">
+<div>
-	<div class="query">
+	<MkHeader :info="header"/>
-		<MkInput v-model="host" :debounce="true" class="">
+	<div class="taeiyria">
-			<template #prefix><i class="fas fa-search"></i></template>
+		<div class="query">
-			<template #label>{{ $ts.host }}</template>
+			<MkInput v-model="host" :debounce="true" class="">
-		</MkInput>
+				<template #prefix><i class="fas fa-search"></i></template>
-		<div class="_inputSplit">
+				<template #label>{{ $ts.host }}</template>
-			<MkSelect v-model="state">
+			</MkInput>
-				<template #label>{{ $ts.state }}</template>
+			<div class="_inputSplit">
-				<option value="all">{{ $ts.all }}</option>
+				<MkSelect v-model="state">
-				<option value="federating">{{ $ts.federating }}</option>
+					<template #label>{{ $ts.state }}</template>
-				<option value="subscribing">{{ $ts.subscribing }}</option>
+					<option value="all">{{ $ts.all }}</option>
-				<option value="publishing">{{ $ts.publishing }}</option>
+					<option value="federating">{{ $ts.federating }}</option>
-				<option value="suspended">{{ $ts.suspended }}</option>
+					<option value="subscribing">{{ $ts.subscribing }}</option>
-				<option value="blocked">{{ $ts.blocked }}</option>
+					<option value="publishing">{{ $ts.publishing }}</option>
-				<option value="notResponding">{{ $ts.notResponding }}</option>
+					<option value="suspended">{{ $ts.suspended }}</option>
-			</MkSelect>
+					<option value="blocked">{{ $ts.blocked }}</option>
-			<MkSelect v-model="sort">
+					<option value="notResponding">{{ $ts.notResponding }}</option>
-				<template #label>{{ $ts.sort }}</template>
+				</MkSelect>
-				<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
+				<MkSelect v-model="sort">
-				<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
+					<template #label>{{ $ts.sort }}</template>
-				<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
+					<option value="+pubSub">{{ $ts.pubSub }} ({{ $ts.descendingOrder }})</option>
-				<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-pubSub">{{ $ts.pubSub }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
+					<option value="+notes">{{ $ts.notes }} ({{ $ts.descendingOrder }})</option>
-				<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-notes">{{ $ts.notes }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
+					<option value="+users">{{ $ts.users }} ({{ $ts.descendingOrder }})</option>
-				<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-users">{{ $ts.users }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
+					<option value="+following">{{ $ts.following }} ({{ $ts.descendingOrder }})</option>
-				<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-following">{{ $ts.following }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
+					<option value="+followers">{{ $ts.followers }} ({{ $ts.descendingOrder }})</option>
-				<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-followers">{{ $ts.followers }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
+					<option value="+caughtAt">{{ $ts.registeredAt }} ({{ $ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-caughtAt">{{ $ts.registeredAt }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
+					<option value="+lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.descendingOrder }})</option>
-				<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-lastCommunicatedAt">{{ $ts.lastCommunication }} ({{ $ts.ascendingOrder }})</option>
-				<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
+					<option value="+driveUsage">{{ $ts.driveUsage }} ({{ $ts.descendingOrder }})</option>
-				<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
+					<option value="-driveUsage">{{ $ts.driveUsage }} ({{ $ts.ascendingOrder }})</option>
-			</MkSelect>
+					<option value="+driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.descendingOrder }})</option>
+					<option value="-driveFiles">{{ $ts.driveFilesCount }} ({{ $ts.ascendingOrder }})</option>
+				</MkSelect>
+			</div>
 		</div>
-	</div>
 
-	<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
+		<MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state">
-		<div class="dqokceoi">
+			<div class="dqokceoi">
-			<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
+				<MkA class="instance" v-for="instance in items" :key="instance.id" :to="`/instance-info/${instance.host}`">
-				<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
+					<div class="host"><img :src="instance.faviconUrl">{{ instance.host }}</div>
-				<div class="table">
+					<div class="table">
-					<div class="cell">
+						<div class="cell">
-						<div class="key">{{ $ts.registeredAt }}</div>
+							<div class="key">{{ $ts.registeredAt }}</div>
-						<div class="value"><MkTime :time="instance.caughtAt"/></div>
+							<div class="value"><MkTime :time="instance.caughtAt"/></div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.software }}</div>
+							<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.version }}</div>
+							<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.users }}</div>
+							<div class="value">{{ instance.usersCount }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.notes }}</div>
+							<div class="value">{{ instance.notesCount }}</div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.sent }}</div>
+							<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
+						</div>
+						<div class="cell">
+							<div class="key">{{ $ts.received }}</div>
+							<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
+						</div>
 					</div>
-					<div class="cell">
+					<div class="footer">
-						<div class="key">{{ $ts.software }}</div>
+						<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
-						<div class="value">{{ instance.softwareName || `(${$ts.unknown})` }}</div>
+						<span class="pubSub">
+							<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
+							<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
+							<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
+							<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
+						</span>
+						<span class="right">
+							<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
+							<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
+						</span>
 					</div>
-					<div class="cell">
+				</MkA>
-						<div class="key">{{ $ts.version }}</div>
+			</div>
-						<div class="value">{{ instance.softwareVersion || `(${$ts.unknown})` }}</div>
+		</MkPagination>
-					</div>
+	</div>
-					<div class="cell">
-						<div class="key">{{ $ts.users }}</div>
-						<div class="value">{{ instance.usersCount }}</div>
-					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.notes }}</div>
-						<div class="value">{{ instance.notesCount }}</div>
-					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.sent }}</div>
-						<div class="value"><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></div>
-					</div>
-					<div class="cell">
-						<div class="key">{{ $ts.received }}</div>
-						<div class="value"><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></div>
-					</div>
-				</div>
-				<div class="footer">
-					<span class="status" :class="getStatus(instance)">{{ getStatus(instance) }}</span>
-					<span class="pubSub">
-						<span class="sub" v-if="instance.followersCount > 0"><i class="fas fa-caret-down icon"></i>Sub</span>
-						<span class="sub" v-else><i class="fas fa-caret-down icon"></i>-</span>
-						<span class="pub" v-if="instance.followingCount > 0"><i class="fas fa-caret-up icon"></i>Pub</span>
-						<span class="pub" v-else><i class="fas fa-caret-up icon"></i>-</span>
-					</span>
-					<span class="right">
-						<span class="latestStatus">{{ instance.latestStatus || '-' }}</span>
-						<span class="lastCommunicatedAt"><MkTime :time="instance.lastCommunicatedAt"/></span>
-					</span>
-				</div>
-			</MkA>
-		</div>
-	</MkPagination>
 </div>
 </template>
 
@@ -119,6 +122,11 @@ export default defineComponent({
 				icon: 'fas fa-globe',
 				bg: 'var(--bg)',
 			},
+			header: {
+				title: this.$ts.federation,
+				icon: 'fas fa-globe',
+				bg: 'var(--bg)',
+			},
 			host: '',
 			state: 'federating',
 			sort: '+pubSub',

src/client/pages/instance/ads.vue

@@ -1,43 +1,45 @@
 <template>
-<div class="uqshojas">
+<div>
-	<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+	<MkHeader :info="header"/>
-	<section class="_card _gap ads" v-for="ad in ads">
+	<div class="uqshojas">
-		<div class="_content ad">
+		<section class="_card _gap ads" v-for="ad in ads">
-			<MkAd v-if="ad.url" :specify="ad"/>
+			<div class="_content ad">
-			<MkInput v-model="ad.url" type="url">
+				<MkAd v-if="ad.url" :specify="ad"/>
-				<template #label>URL</template>
+				<MkInput v-model="ad.url" type="url">
-			</MkInput>
+					<template #label>URL</template>
-			<MkInput v-model="ad.imageUrl">
+				</MkInput>
-				<template #label>{{ $ts.imageUrl }}</template>
+				<MkInput v-model="ad.imageUrl">
-			</MkInput>
+					<template #label>{{ $ts.imageUrl }}</template>
-			<div style="margin: 32px 0;">
+				</MkInput>
-				<MkRadio v-model="ad.place" value="square">square</MkRadio>
+				<div style="margin: 32px 0;">
-				<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
+					<MkRadio v-model="ad.place" value="square">square</MkRadio>
-				<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio>
+					<MkRadio v-model="ad.place" value="horizontal">horizontal</MkRadio>
+					<MkRadio v-model="ad.place" value="horizontal-big">horizontal-big</MkRadio>
+				</div>
+				<!--
+				<div style="margin: 32px 0;">
+					{{ $ts.priority }}
+					<MkRadio v-model="ad.priority" value="high">{{ $ts.high }}</MkRadio>
+					<MkRadio v-model="ad.priority" value="middle">{{ $ts.middle }}</MkRadio>
+					<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
+				</div>
+				-->
+				<MkInput v-model="ad.ratio" type="number">
+					<template #label>{{ $ts.ratio }}</template>
+				</MkInput>
+				<MkInput v-model="ad.expiresAt" type="date">
+					<template #label>{{ $ts.expiration }}</template>
+				</MkInput>
+				<MkTextarea v-model="ad.memo">
+					<template #label>{{ $ts.memo }}</template>
+				</MkTextarea>
+				<div class="buttons">
+					<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+					<MkButton class="button" inline @click="remove(ad)" danger><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
+				</div>
 			</div>
-			<!--
+		</section>
-			<div style="margin: 32px 0;">
+	</div>
-				{{ $ts.priority }}
-				<MkRadio v-model="ad.priority" value="high">{{ $ts.high }}</MkRadio>
-				<MkRadio v-model="ad.priority" value="middle">{{ $ts.middle }}</MkRadio>
-				<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio>
-			</div>
-			-->
-			<MkInput v-model="ad.ratio" type="number">
-				<template #label>{{ $ts.ratio }}</template>
-			</MkInput>
-			<MkInput v-model="ad.expiresAt" type="date">
-				<template #label>{{ $ts.expiration }}</template>
-			</MkInput>
-			<MkTextarea v-model="ad.memo">
-				<template #label>{{ $ts.memo }}</template>
-			</MkTextarea>
-			<div class="buttons">
-				<MkButton class="button" inline @click="save(ad)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-				<MkButton class="button" inline @click="remove(ad)" danger><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
-			</div>
-		</div>
-	</section>
 </div>
 </template>
 
@@ -67,6 +69,17 @@ export default defineComponent({
 				icon: 'fas fa-audio-description',
 				bg: 'var(--bg)',
 			},
+			header: {
+				title: this.$ts.ads,
+				icon: 'fas fa-audio-description',
+				bg: 'var(--bg)',
+				actions: [{
+					asFullButton: true,
+					icon: 'fas fa-plus',
+					text: this.$ts.add,
+					handler: this.add,
+				}],
+			},
 			ads: [],
 		}
 	},

src/client/pages/instance/announcements.vue

@@ -1,24 +1,27 @@
 <template>
-<div class="ztgjmzrw">
+<div>
-	<MkButton @click="add()" primary style="margin: 0 auto 16px auto;"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+	<MkHeader :info="header"/>
-	<section class="_card _gap announcements" v-for="announcement in announcements">
+
-		<div class="_content announcement">
+	<div class="ztgjmzrw">
-			<MkInput v-model="announcement.title">
+		<section class="_card _gap announcements" v-for="announcement in announcements">
-				<template #label>{{ $ts.title }}</template>
+			<div class="_content announcement">
-			</MkInput>
+				<MkInput v-model="announcement.title">
-			<MkTextarea v-model="announcement.text">
+					<template #label>{{ $ts.title }}</template>
-				<template #label>{{ $ts.text }}</template>
+				</MkInput>
-			</MkTextarea>
+				<MkTextarea v-model="announcement.text">
-			<MkInput v-model="announcement.imageUrl">
+					<template #label>{{ $ts.text }}</template>
-				<template #label>{{ $ts.imageUrl }}</template>
+				</MkTextarea>
-			</MkInput>
+				<MkInput v-model="announcement.imageUrl">
-			<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
+					<template #label>{{ $ts.imageUrl }}</template>
-			<div class="buttons">
+				</MkInput>
-				<MkButton class="button" inline @click="save(announcement)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+				<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
-				<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
+				<div class="buttons">
+					<MkButton class="button" inline @click="save(announcement)" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+					<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
+				</div>
 			</div>
-		</div>
+		</section>
-	</section>
+	</div>
 </div>
 </template>
 
@@ -46,6 +49,17 @@ export default defineComponent({
 				icon: 'fas fa-broadcast-tower',
 				bg: 'var(--bg)',
 			},
+			header: {
+				title: this.$ts.announcements,
+				icon: 'fas fa-broadcast-tower',
+				bg: 'var(--bg)',
+				actions: [{
+					asFullButton: true,
+					icon: 'fas fa-plus',
+					text: this.$ts.add,
+					handler: this.add,
+				}],
+			},
 			announcements: [],
 		}
 	},

src/client/pages/instance/emojis.vue

@@ -1,12 +1,8 @@
 <template>
 <div class="ogwlenmc">
-	<MkTab v-model="tab">
+	<MkHeader :info="header"/>
-		<option value="local">{{ $ts.local }}</option>
-		<option value="remote">{{ $ts.remote }}</option>
-	</MkTab>
 
 	<div class="local" v-if="tab === 'local'">
-		<MkButton primary @click="add" style="margin: var(--margin) auto;"><i class="fas fa-plus"></i> {{ $ts.addEmoji }}</MkButton>
 		<MkInput v-model="query" :debounce="true" type="search" style="margin: var(--margin);">
 			<template #prefix><i class="fas fa-search"></i></template>
 			<template #label>{{ $ts.search }}</template>
@@ -79,11 +75,27 @@ export default defineComponent({
 				title: this.$ts.customEmojis,
 				icon: 'fas fa-laugh',
 				bg: 'var(--bg)',
-				action: {
-					icon: 'fas fa-plus',
-					handler: this.add
-				}
 			},
+			header: computed(() => ({
+				title: this.$ts.customEmojis,
+				icon: 'fas fa-laugh',
+				bg: 'var(--bg)',
+				actions: [{
+					asFullButton: true,
+					icon: 'fas fa-plus',
+					text: this.$ts.addEmoji,
+					handler: this.add,
+				}],
+				tabs: [{
+					active: this.tab === 'local',
+					title: this.$ts.local,
+					onClick: () => { this.tab = 'local'; },
+				}, {
+					active: this.tab === 'remote',
+					title: this.$ts.remote,
+					onClick: () => { this.tab = 'remote'; },
+				},]
+			})),
 			tab: 'local',
 			query: null,
 			queryRemote: null,

src/client/pages/instance/index.vue

@@ -79,7 +79,8 @@ export default defineComponent({
 	setup(props, context) {
 		const indexInfo = {
 			title: i18n.locale.instance,
-			icon: 'fas fa-cog'
+			icon: 'fas fa-cog',
+			bg: 'var(--bg)',
 		};
 		const INFO = ref(indexInfo);
 		const page = ref(props.initialPage);
@@ -126,7 +127,7 @@ export default defineComponent({
 			pageProps.value = {};
 
 			nextTick(() => {
-				scroll(el.value, 0);
+				scroll(el.value, { top: 0 });
 			});
 		}, { immediate: true });
 
@@ -234,7 +235,6 @@ export default defineComponent({
 		> .main {
 			flex: 1;
 			min-width: 0;
-			overflow: auto;
 			--baseContentWidth: 100%;
 		}
 	}

src/client/pages/instance/users.vue

@@ -1,9 +1,6 @@
 <template>
 <div class="lknzcolw">
-	<div class="actions">
+	<MkHeader :info="header"/>
-		<MkButton inline primary @click="addUser()"><i class="fas fa-plus"></i> {{ $ts.addUser }}</MkButton>
-		<MkButton inline primary @click="lookupUser()"><i class="fas fa-search"></i> {{ $ts.lookup }}</MkButton>
-	</div>
 
 	<div class="users">
 		<div class="inputs">
@@ -91,10 +88,26 @@ export default defineComponent({
 				title: this.$ts.users,
 				icon: 'fas fa-users',
 				bg: 'var(--bg)',
-				action: {
+			},
+			header: {
+				title: this.$ts.users,
+				icon: 'fas fa-users',
+				bg: 'var(--bg)',
+				actions: [{
 					icon: 'fas fa-search',
+					text: this.$ts.search,
 					handler: this.searchUser
-				}
+				}, {
+					asFullButton: true,
+					icon: 'fas fa-plus',
+					text: this.$ts.addUser,
+					handler: this.addUser
+				}, {
+					asFullButton: true,
+					icon: 'fas fa-search',
+					text: this.$ts.lookup,
+					handler: this.lookupUser
+				}]
 			},
 			sort: '+createdAt',
 			state: 'all',
@@ -173,10 +186,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .lknzcolw {
-	> .actions {
-		margin: var(--margin);
-	}
-
 	> .users {
 		margin: var(--margin);
 

src/client/pages/mentions.vue

@@ -1,6 +1,9 @@
 <template>
-<div class="_section">
+<div>
-	<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/>
+	<MkHeader :info="header"/>
+	<div class="_section">
+		<XNotes class="_content" :pagination="pagination" @before="before()" @after="after()"/>
+	</div>
 </div>
 </template>
 
@@ -19,7 +22,13 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.mentions,
-				icon: 'fas fa-at'
+				icon: 'fas fa-at',
+				bg: 'var(--bg)',
+			},
+			header: {
+				title: this.$ts.mentions,
+				icon: 'fas fa-at',
+				bg: 'var(--bg)',
 			},
 			pagination: {
 				endpoint: 'notes/mentions',

src/client/pages/messages.vue

@@ -1,6 +1,9 @@
 <template>
 <div>
-	<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	<MkHeader :info="header"/>
+	<div>
+		<XNotes :pagination="pagination" @before="before()" @after="after()"/>
+	</div>
 </div>
 </template>
 
@@ -19,7 +22,13 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.directNotes,
-				icon: 'fas fa-envelope'
+				icon: 'fas fa-envelope',
+				bg: 'var(--bg)',
+			},
+			header: {
+				title: this.$ts.directNotes,
+				icon: 'fas fa-envelope',
+				bg: 'var(--bg)',
 			},
 			pagination: {
 				endpoint: 'notes/mentions',

src/client/pages/messaging/index.vue

@@ -1,38 +1,42 @@
 <template>
-<div class="yweeujhr _root" v-size="{ max: [400] }">
+<div>
-	<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
+	<MkHeader :info="header"/>
 
-	<div class="history" v-if="messages.length > 0">
+	<div class="yweeujhr _root" v-size="{ max: [400] }">
-		<MkA v-for="(message, i) in messages"
+		<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
-			class="message _block"
+
-			:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
+		<div class="history" v-if="messages.length > 0">
-			:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
+			<MkA v-for="(message, i) in messages"
-			:data-index="i"
+				class="message _block"
-			:key="message.id"
+				:class="{ isMe: isMe(message), isRead: message.groupId ? message.reads.includes($i.id) : message.isRead }"
-			v-anim="i"
+				:to="message.groupId ? `/my/messaging/group/${message.groupId}` : `/my/messaging/${getAcct(isMe(message) ? message.recipient : message.user)}`"
-		>
+				:data-index="i"
-			<div>
+				:key="message.id"
-				<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
+				v-anim="i"
-				<header v-if="message.groupId">
+			>
-					<span class="name">{{ message.group.name }}</span>
+				<div>
-					<MkTime :time="message.createdAt" class="time"/>
+					<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/>
-				</header>
+					<header v-if="message.groupId">
-				<header v-else>
+						<span class="name">{{ message.group.name }}</span>
-					<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
+						<MkTime :time="message.createdAt" class="time"/>
-					<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
+					</header>
-					<MkTime :time="message.createdAt" class="time"/>
+					<header v-else>
-				</header>
+						<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
-				<div class="body">
+						<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
-					<p class="text"><span class="me" v-if="isMe(message)">{{ $ts.you }}:</span>{{ message.text }}</p>
+						<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>
-			</div>
+			</MkA>
-		</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>
-	<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>
 
@@ -56,6 +60,11 @@ export default defineComponent({
 				icon: 'fas fa-comments',
 				bg: 'var(--bg)',
 			},
+			header: {
+				title: this.$ts.messaging,
+				icon: 'fas fa-comments',
+				bg: 'var(--bg)',
+			},
 			fetching: true,
 			moreFetching: false,
 			messages: [],

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

@@ -284,7 +284,7 @@ const Component = defineComponent({
 		},
 
 		scrollToBottom() {
-			scroll(this.$el, this.$el.offsetHeight);
+			scroll(this.$el, { top: this.$el.offsetHeight });
 		},
 
 		onIndicatorClick() {

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

@@ -1,13 +1,16 @@
 <template>
-<div class="qkcjvfiv">
+<div>
-	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
+	<MkHeader :info="header"/>
+	<div class="qkcjvfiv">
+		<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.createList }}</MkButton>
 
-	<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
+		<MkPagination :pagination="pagination" #default="{items}" class="lists _content" ref="list">
-		<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+			<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
-			<div class="name">{{ list.name }}</div>
+				<div class="name">{{ list.name }}</div>
-			<MkAvatars :user-ids="list.userIds"/>
+				<MkAvatars :user-ids="list.userIds"/>
-		</MkA>
+			</MkA>
-	</MkPagination>
+		</MkPagination>
+	</div>
 </div>
 </template>
 
@@ -31,6 +34,12 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.manageLists,
 				icon: 'fas fa-list-ul',
+				bg: 'var(--bg)',
+			},
+			header: {
+				title: this.$ts.manageLists,
+				icon: 'fas fa-list-ul',
+				bg: 'var(--bg)',
 				action: {
 					icon: 'fas fa-plus',
 					handler: this.create

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

@@ -1,34 +1,37 @@
 <template>
-<div class="mk-list-page">
+<div>
-	<transition name="zoom" mode="out-in">
+	<MkHeader v-if="header" :info="header"/>
-		<div v-if="list" class="_section">
+	<div class="mk-list-page">
-			<div class="_content">
+		<transition name="zoom" mode="out-in">
-				<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
+			<div v-if="list" class="_section">
-				<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
+				<div class="_content">
-				<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
+					<MkButton inline @click="addUser()">{{ $ts.addUser }}</MkButton>
+					<MkButton inline @click="renameList()">{{ $ts.rename }}</MkButton>
+					<MkButton inline @click="deleteList()">{{ $ts.delete }}</MkButton>
+				</div>
 			</div>
-		</div>
+		</transition>
-	</transition>
 
-	<transition name="zoom" mode="out-in">
+		<transition name="zoom" mode="out-in">
-		<div v-if="list" class="_section members _gap">
+			<div v-if="list" class="_section members _gap">
-			<div class="_title">{{ $ts.members }}</div>
+				<div class="_title">{{ $ts.members }}</div>
-			<div class="_content">
+				<div class="_content">
-				<div class="users">
+					<div class="users">
-					<div class="user _panel" v-for="user in users" :key="user.id">
+						<div class="user _panel" v-for="user in users" :key="user.id">
-						<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+							<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-						<div class="body">
+							<div class="body">
-							<MkUserName :user="user" class="name"/>
+								<MkUserName :user="user" class="name"/>
-							<MkAcct :user="user" class="acct"/>
+								<MkAcct :user="user" class="acct"/>
-						</div>
+							</div>
-						<div class="action">
+							<div class="action">
-							<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+								<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-		</div>
+		</transition>
-	</transition>
+	</div>
 </div>
 </template>
 
@@ -50,6 +53,10 @@ export default defineComponent({
 				title: this.list.name,
 				icon: 'fas fa-list-ul',
 			} : null),
+			header: computed(() => this.list ? {
+				title: this.list.name,
+				icon: 'fas fa-list-ul',
+			} : null),
 			list: null,
 			users: [],
 		};

src/client/pages/notifications.vue

@@ -1,6 +1,9 @@
 <template>
-<div class="clupoqwt" v-size="{ min: [800] }">
+<div>
-	<XNotifications class="notifications" @before="before" @after="after" page/>
+	<MkHeader :info="header"/>
+	<div class="clupoqwt" v-size="{ min: [800] }">
+		<XNotifications class="notifications" @before="before" @after="after" page/>
+	</div>
 </div>
 </template>
 
@@ -22,6 +25,11 @@ export default defineComponent({
 				title: this.$ts.notifications,
 				icon: 'fas fa-bell',
 				bg: 'var(--bg)',
+			},
+			header: {
+				title: this.$ts.notifications,
+				icon: 'fas fa-bell',
+				bg: 'var(--bg)',
 				actions: [{
 					text: this.$ts.markAllAsRead,
 					icon: 'fas fa-check',

src/client/pages/pages.vue

@@ -1,5 +1,8 @@
 <template>
 <div>
+	<MkHeader :info="header"/>
+
+	<!-- TODO: MkHeaderに統合 -->
 	<MkTab v-model="tab" v-if="$i">
 		<option value="featured"><i class="fas fa-fire-alt"></i> {{ $ts._pages.featured }}</option>
 		<option value="my"><i class="fas fa-edit"></i> {{ $ts._pages.my }}</option>
@@ -46,11 +49,17 @@ export default defineComponent({
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.pages,
 				icon: 'fas fa-sticky-note',
+				bg: 'var(--bg)',
+			},
+			header: {
+				title: this.$ts.pages,
+				icon: 'fas fa-sticky-note',
+				bg: 'var(--bg)',
 				actions: [{
 					icon: 'fas fa-plus',
 					text: this.$ts.create,
-					handler: this.create
+					handler: this.create,
-				}]
+				}],
 			},
 			tab: 'featured',
 			featuredPagesPagination: {

src/client/pages/search.vue

@@ -1,7 +1,10 @@
 <template>
-<div class="_section">
+<div>
-	<div class="_content">
+	<MkHeader :info="header"/>
-		<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+	<div class="_section">
+		<div class="_content">
+			<XNotes ref="notes" :pagination="pagination" @before="before" @after="after"/>
+		</div>
 	</div>
 </div>
 </template>
@@ -21,7 +24,11 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
-				icon: 'fas fa-search'
+				icon: 'fas fa-search',
+			},
+			header: {
+				title: computed(() => this.$t('searchWith', { q: this.$route.query.q })),
+				icon: 'fas fa-search',
 			},
 			pagination: {
 				endpoint: 'notes/search',

src/client/pages/settings/index.vue

@@ -39,7 +39,7 @@
 		</div>
 	</div>
 	<div class="main">
-		<component :is="component" :key="page" @info="onInfo" v-bind="pageProps"/>
+		<component :is="component" :key="page" v-bind="pageProps"/>
 	</div>
 </div>
 </template>
@@ -74,16 +74,13 @@ export default defineComponent({
 			title: i18n.locale.settings,
 			icon: 'fas fa-cog',
 			bg: 'var(--bg)',
-			hide: true,
 		};
 		const INFO = ref(indexInfo);
 		const page = ref(props.initialPage);
 		const narrow = ref(false);
 		const view = ref(null);
 		const el = ref(null);
-		const onInfo = (viewInfo) => {
+
-			INFO.value = viewInfo;
-		};
 		const pageProps = ref({});
 		const component = computed(() => {
 			if (page.value == null) return null;
@@ -146,7 +143,7 @@ export default defineComponent({
 			}
 
 			nextTick(() => {
-				scroll(el.value, 0);
+				scroll(el.value, { top: 0 });
 			});
 		}, { immediate: true });
 
@@ -176,7 +173,6 @@ export default defineComponent({
 			narrow,
 			view,
 			el,
-			onInfo,
 			pageProps,
 			component,
 			emailNotConfigured,

src/client/pages/settings/profile.vue

@@ -78,7 +78,6 @@ export default defineComponent({
 				title: this.$ts.profile,
 				icon: 'fas fa-user',
 				bg: 'var(--bg)',
-				hide: true,
 			},
 			host,
 			langs,

src/client/pages/timeline.vue

@@ -1,18 +1,21 @@
 <template>
-<div class="cmuxhskf" v-hotkey.global="keymap" v-size="{ min: [800] }">
+<div v-hotkey.global="keymap">
-	<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>
+	<MkHeader :info="header"/>
-	<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _block" fixed/>
+	<div class="cmuxhskf" v-size="{ min: [800] }">
+		<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="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+		<div class="new" v-if="queue > 0"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-	<div class="tl _block">
+		<div class="tl _block">
-		<XTimeline ref="tl" class="tl"
+			<XTimeline ref="tl" class="tl"
-			:key="src"
+				:key="src"
-			:src="src"
+				:src="src"
-			:sound="true"
+				:sound="true"
-			@before="before()"
+				@before="before()"
-			@after="after()"
+				@after="after()"
-			@queue="queueUpdated"
+				@queue="queueUpdated"
-		/>
+			/>
+		</div>
 	</div>
 </div>
 </template>
@@ -43,6 +46,11 @@ export default defineComponent({
 				title: this.$ts.timeline,
 				icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
 				bg: 'var(--bg)',
+			})),
+			header: computed(() => ({
+				title: this.$ts.timeline,
+				icon: this.src === 'local' ? 'fas fa-comments' : this.src === 'social' ? 'fas fa-share-alt' : this.src === 'global' ? 'fas fa-globe' : 'fas fa-home',
+				bg: 'var(--bg)',
 				actions: [{
 					icon: 'fas fa-list-ul',
 					text: this.$ts.lists,
@@ -129,7 +137,7 @@ export default defineComponent({
 		},
 
 		top() {
-			scroll(this.$el, 0);
+			scroll(this.$el, { top: 0 });
 		},
 
 		async chooseList(ev) {

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

@@ -89,7 +89,7 @@ export default defineComponent({
 		},
 
 		top() {
-			scroll(this.$el, 0);
+			scroll(this.$el, { top: 0 });
 		},
 
 		settings() {

src/client/pages/user/index.vue

@@ -1,98 +1,117 @@
 <template>
-<transition name="fade" mode="out-in">
+<div>
-	<div class="ftskorzw wide" v-if="user && narrow === false">
+	<MkHeader :info="header"/>
-		<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
+	<transition name="fade" mode="out-in">
+		<div class="ftskorzw wide" v-if="user && narrow === false">
+			<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
 
-		<div class="banner-container" :style="style">
+			<div class="banner-container" :style="style">
-			<div class="banner" ref="banner" :style="style"></div>
+				<div class="banner" ref="banner" :style="style"></div>
-		</div>
-		<div class="contents">
-			<div class="side _forceContainerFull_">
-				<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-				<div class="name">
-					<MkUserName :user="user" :nowrap="false" class="name"/>
-					<MkAcct :user="user" :detail="true" class="acct"/>
-				</div>
-				<div class="followed" v-if="$i && $i.id != user.id && user.isFollowed"><span>{{ $ts.followsYou }}</span></div>
-				<div class="status">
-					<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
-						<b>{{ number(user.notesCount) }}</b>
-						<span>{{ $ts.notes }}</span>
-					</MkA>
-					<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
-						<b>{{ number(user.followingCount) }}</b>
-						<span>{{ $ts.following }}</span>
-					</MkA>
-					<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
-						<b>{{ number(user.followersCount) }}</b>
-						<span>{{ $ts.followers }}</span>
-					</MkA>
-				</div>
-				<div class="description">
-					<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-					<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
-				</div>
-				<div class="fields system">
-					<dl class="field" v-if="user.location">
-						<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
-						<dd class="value">{{ user.location }}</dd>
-					</dl>
-					<dl class="field" v-if="user.birthday">
-						<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
-						<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-					</dl>
-					<dl class="field">
-						<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
-						<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-					</dl>
-				</div>
-				<div class="fields" v-if="user.fields.length > 0">
-					<dl class="field" v-for="(field, i) in user.fields" :key="i">
-						<dt class="name">
-							<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
-						</dt>
-						<dd class="value">
-							<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
-						</dd>
-					</dl>
-				</div>
-				<XActivity :user="user" :key="user.id" class="_gap"/>
-				<XPhotos :user="user" :key="user.id" class="_gap"/>
 			</div>
-			<div class="main">
+			<div class="contents">
-				<div class="actions">
+				<div class="side _forceContainerFull_">
-					<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-					<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+					<div class="name">
+						<MkUserName :user="user" :nowrap="false" class="name"/>
+						<MkAcct :user="user" :detail="true" class="acct"/>
+					</div>
+					<div class="followed" v-if="$i && $i.id != user.id && user.isFollowed"><span>{{ $ts.followsYou }}</span></div>
+					<div class="status">
+						<MkA :to="userPage(user)" :class="{ active: page === 'index' }">
+							<b>{{ number(user.notesCount) }}</b>
+							<span>{{ $ts.notes }}</span>
+						</MkA>
+						<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+							<b>{{ number(user.followingCount) }}</b>
+							<span>{{ $ts.following }}</span>
+						</MkA>
+						<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+							<b>{{ number(user.followersCount) }}</b>
+							<span>{{ $ts.followers }}</span>
+						</MkA>
+					</div>
+					<div class="description">
+						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+						<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
+					</div>
+					<div class="fields system">
+						<dl class="field" v-if="user.location">
+							<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
+							<dd class="value">{{ user.location }}</dd>
+						</dl>
+						<dl class="field" v-if="user.birthday">
+							<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
+							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+						</dl>
+						<dl class="field">
+							<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
+							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
+						</dl>
+					</div>
+					<div class="fields" v-if="user.fields.length > 0">
+						<dl class="field" v-for="(field, i) in user.fields" :key="i">
+							<dt class="name">
+								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+							</dt>
+							<dd class="value">
+								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
+							</dd>
+						</dl>
+					</div>
+					<XActivity :user="user" :key="user.id" class="_gap"/>
+					<XPhotos :user="user" :key="user.id" class="_gap"/>
 				</div>
-				<template v-if="page === 'index'">
+				<div class="main">
-					<div v-if="user.pinnedNotes.length > 0" class="_gap">
+					<div class="actions">
-						<XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+						<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+						<MkFollowButton v-if="!$i || $i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
 					</div>
-					<div class="_gap">
+					<template v-if="page === 'index'">
-						<XUserTimeline :user="user"/>
+						<div v-if="user.pinnedNotes.length > 0" class="_gap">
-					</div>
+							<XNote v-for="note in user.pinnedNotes" class="note _gap" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
-				</template>
+						</div>
-				<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_gap"/>
+						<div class="_gap">
-				<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_gap"/>
+							<XUserTimeline :user="user"/>
-				<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
+						</div>
-				<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
+					</template>
+					<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>
+		<div class="ftskorzw narrow _root" 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 -->
-		<!-- TODO -->
+			<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
-		<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSuspended }}</div> -->
+			<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
-		<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ $ts.userSilenced }}</div> -->
 
-		<div class="profile">
+			<div class="profile">
-			<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
+				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
 
-			<div class="_block main" :key="user.id">
+				<div class="_block main" :key="user.id">
-				<div class="banner-container" :style="style">
+					<div class="banner-container" :style="style">
-					<div class="banner" ref="banner" :style="style"></div>
+						<div class="banner" ref="banner" :style="style"></div>
-					<div class="fade"></div>
+						<div class="fade"></div>
+						<div class="title">
+							<MkUserName class="name" :user="user" :nowrap="true"/>
+							<div class="bottom">
+								<span class="username"><MkAcct :user="user" :detail="true" /></span>
+								<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+								<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+								<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+								<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+							</div>
+						</div>
+						<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
+						<div class="actions" v-if="$i">
+							<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+						</div>
+					</div>
+					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 					<div class="title">
-						<MkUserName class="name" :user="user" :nowrap="true"/>
+						<MkUserName :user="user" :nowrap="false" class="name"/>
 						<div class="bottom">
 							<span class="username"><MkAcct :user="user" :detail="true" /></span>
 							<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
@@ -101,92 +120,76 @@
 							<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
 						</div>
 					</div>
-					<span class="followed" v-if="$i && $i.id != user.id && user.isFollowed">{{ $ts.followsYou }}</span>
+					<div class="description">
-					<div class="actions" v-if="$i">
+						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-						<button @click="menu" class="menu _button"><i class="fas fa-ellipsis-h"></i></button>
+						<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
-						<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 					</div>
-				</div>
+					<div class="fields system">
-				<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
+						<dl class="field" v-if="user.location">
-				<div class="title">
+							<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
-					<MkUserName :user="user" :nowrap="false" class="name"/>
+							<dd class="value">{{ user.location }}</dd>
-					<div class="bottom">
+						</dl>
-						<span class="username"><MkAcct :user="user" :detail="true" /></span>
+						<dl class="field" v-if="user.birthday">
-						<span v-if="user.isAdmin" :title="$ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
+							<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
-						<span v-if="!user.isAdmin && user.isModerator" :title="$ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-						<span v-if="user.isLocked" :title="$ts.isLocked"><i class="fas fa-lock"></i></span>
+						</dl>
-						<span v-if="user.isBot" :title="$ts.isBot"><i class="fas fa-robot"></i></span>
+						<dl class="field">
+							<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
+							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
+						</dl>
+					</div>
+					<div class="fields" v-if="user.fields.length > 0">
+						<dl class="field" v-for="(field, i) in user.fields" :key="i">
+							<dt class="name">
+								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+							</dt>
+							<dd class="value">
+								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
+							</dd>
+						</dl>
+					</div>
+					<div class="status">
+						<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
+							<b>{{ number(user.notesCount) }}</b>
+							<span>{{ $ts.notes }}</span>
+						</MkA>
+						<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
+							<b>{{ number(user.followingCount) }}</b>
+							<span>{{ $ts.following }}</span>
+						</MkA>
+						<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
+							<b>{{ number(user.followersCount) }}</b>
+							<span>{{ $ts.followers }}</span>
+						</MkA>
 					</div>
-				</div>
-				<div class="description">
-					<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-					<p v-else class="empty">{{ $ts.noAccountDescription }}</p>
-				</div>
-				<div class="fields system">
-					<dl class="field" v-if="user.location">
-						<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ $ts.location }}</dt>
-						<dd class="value">{{ user.location }}</dd>
-					</dl>
-					<dl class="field" v-if="user.birthday">
-						<dt class="name"><i class="fas fa-birthday-cake fa-fw"></i> {{ $ts.birthday }}</dt>
-						<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-					</dl>
-					<dl class="field">
-						<dt class="name"><i class="fas fa-calendar-alt fa-fw"></i> {{ $ts.registeredDate }}</dt>
-						<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-					</dl>
-				</div>
-				<div class="fields" v-if="user.fields.length > 0">
-					<dl class="field" v-for="(field, i) in user.fields" :key="i">
-						<dt class="name">
-							<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
-						</dt>
-						<dd class="value">
-							<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
-						</dd>
-					</dl>
-				</div>
-				<div class="status">
-					<MkA :to="userPage(user)" :class="{ active: page === 'index' }" v-click-anime>
-						<b>{{ number(user.notesCount) }}</b>
-						<span>{{ $ts.notes }}</span>
-					</MkA>
-					<MkA :to="userPage(user, 'following')" :class="{ active: page === 'following' }" v-click-anime>
-						<b>{{ number(user.followingCount) }}</b>
-						<span>{{ $ts.following }}</span>
-					</MkA>
-					<MkA :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }" v-click-anime>
-						<b>{{ number(user.followersCount) }}</b>
-						<span>{{ $ts.followers }}</span>
-					</MkA>
 				</div>
 			</div>
-		</div>
 
-		<div class="contents">
+			<div class="contents">
-			<template v-if="page === 'index'">
+				<template v-if="page === 'index'">
-				<div>
+					<div>
-					<div v-if="user.pinnedNotes.length > 0" class="_gap">
+						<div v-if="user.pinnedNotes.length > 0" class="_gap">
-						<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+							<XNote v-for="note in user.pinnedNotes" class="note _block" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
+						</div>
+						<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
+						<XPhotos :user="user" :key="user.id"/>
+						<XActivity :user="user" :key="user.id"/>
 					</div>
-					<MkInfo v-else-if="$i && $i.id === user.id">{{ $ts.userPagePinTip }}</MkInfo>
+					<div>
-					<XPhotos :user="user" :key="user.id"/>
+						<XUserTimeline :user="user"/>
-					<XActivity :user="user" :key="user.id"/>
+					</div>
-				</div>
+				</template>
-				<div>
+				<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
-					<XUserTimeline :user="user"/>
+				<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
-				</div>
+				<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
-			</template>
+				<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
-			<XFollowList v-else-if="page === 'following'" type="following" :user="user" class="_content _gap"/>
+				<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
-			<XFollowList v-else-if="page === 'followers'" type="followers" :user="user" class="_content _gap"/>
+			</div>
-			<XClips v-else-if="page === 'clips'" :user="user" class="_gap"/>
-			<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
-			<XGallery v-else-if="page === 'gallery'" :user="user" class="_gap"/>
 		</div>
-	</div>
+		<MkError v-else-if="error" @retry="fetch()"/>
-	<MkError v-else-if="error" @retry="fetch()"/>
+		<MkLoading v-else/>
-	<MkLoading v-else/>
+	</transition>
-</transition>
+</div>
 </template>
 
 <script lang="ts">
@@ -242,6 +245,15 @@ export default defineComponent({
 	data() {
 		return {
 			[symbols.PAGE_INFO]: computed(() => this.user ? {
+				icon: 'fas fa-user',
+				title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
+				path: `/@${this.user.username}`,
+				share: {
+					title: this.user.name,
+				},
+				bg: 'var(--bg)',
+			} : null),
+			header: computed(() => this.user ? {
 				title: this.user.name ? `${this.user.name} (@${this.user.username})` : `@${this.user.username}`,
 				subtitle: `@${getAcct(this.user)}`,
 				userName: this.user,

src/client/scripts/scroll.ts

@@ -1,3 +1,5 @@
+type ScrollBehavior = 'auto' | 'smooth' | 'instant';
+
 export function getScrollContainer(el: Element | null): Element | null {
 	if (el == null || el.tagName === 'BODY') return null;
 	const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
@@ -45,21 +47,25 @@ export function onScrollBottom(el: Element, cb) {
 	container.addEventListener('scroll', onScroll, { passive: true });
 }
 
-export function scroll(el: Element, top: number) {
+export function scroll(el: Element, options: {
+	top?: number;
+	left?: number;
+	behavior?: ScrollBehavior;
+}) {
 	const container = getScrollContainer(el);
 	if (container == null) {
-		window.scroll({ top: top, behavior: 'instant' });
+		window.scroll(options);
 	} else {
-		container.scrollTop = top;
+		container.scroll(options);
 	}
 }
 
-export function scrollToTop(el: Element) {
+export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
-	scroll(el, 0);
+	scroll(el, { top: 0, ...options });
 }
 
-export function scrollToBottom(el: Element) {
+export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
-	scroll(el, 99999); // TODO: ちゃんと計算する
+	scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する
 }
 
 export function isBottom(el: Element, asobi = 0) {

src/client/ui/chat/index.vue

@@ -74,7 +74,7 @@
 
 	<main class="main" @contextmenu.stop="onContextmenu">
 		<header class="header">
-			<XHeader class="header" :info="pageInfo" :menu="menu" :center="false" @click="onHeaderClick"/>
+			<MkHeader class="header" :info="pageInfo" :menu="menu" :center="false" @click="onHeaderClick"/>
 		</header>
 		<router-view v-slot="{ Component }">
 			<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@@ -101,7 +101,6 @@ import XSidebar from '@client/ui/_common_/sidebar.vue';
 import XWidgets from './widgets.vue';
 import XCommon from '../_common_/common.vue';
 import XSide from './side.vue';
-import XHeader from '../_common_/header.vue';
 import XHeaderClock from './header-clock.vue';
 import * as os from '@client/os';
 import { router } from '@client/router';
@@ -117,7 +116,6 @@ export default defineComponent({
 		XSidebar,
 		XWidgets,
 		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
-		XHeader,
 		XHeaderClock,
 	},
 

src/client/ui/chat/side.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mrajymqm _narrow_" v-if="component">
 	<header class="header" @contextmenu.prevent.stop="onContextmenu">
-		<XHeader class="title" :info="pageInfo" :center="false"/>
+		<MkHeader class="title" :info="pageInfo" :center="false"/>
 	</header>
 	<component :is="component" v-bind="props" :ref="changePage" class="body _flat_"/>
 </div>
@@ -9,7 +9,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XHeader from '../_common_/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -18,7 +17,6 @@ import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
-		XHeader
 	},
 
 	provide() {

src/client/ui/deck/main-column.vue

@@ -6,7 +6,6 @@
 		</template>
 	</template>
 
-	<XHeader :info="pageInfo"/>
 	<router-view v-slot="{ Component }" class="_flat_">
 		<transition>
 			<keep-alive :include="['timeline']">
@@ -21,7 +20,6 @@
 import { defineComponent } from 'vue';
 import XColumn from './column.vue';
 import XNotes from '@client/components/notes.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { deckStore } from '@client/ui/deck/deck-store';
 import * as os from '@client/os';
 import * as symbols from '@client/symbols';
@@ -29,7 +27,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XColumn,
-		XHeader,
 		XNotes
 	},
 

src/client/ui/default.side.vue

@@ -7,7 +7,7 @@
 			<span class="title">{{ pageInfo.title }}</span>
 			<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
 		</header>
-		<XHeader class="pageHeader" :info="pageInfo"/>
+		<MkHeader class="pageHeader" :info="pageInfo"/>
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </div>
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import XHeader from './_common_/header.vue';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -23,10 +22,6 @@ import { url } from '@client/config';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
-	components: {
-		XHeader
-	},
-
 	provide() {
 		return {
 			navHook: (path) => {

src/client/ui/default.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--headerHeight:` + headerHeight + 'px'">
+<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
-	<XHeaderMenu v-if="showMenuOnTop"/>
+	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
 
 	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
 		<template v-if="!isMobile">
@@ -13,9 +13,6 @@
 		</template>
 
 		<main class="main" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-			<header class="header" @click="onHeaderClick">
-				<XHeader :info="pageInfo" v-get-size="(w, h) => headerHeight = h" :thin="true"/>
-			</header>
 			<div class="content" :class="{ _flat_: !fullView }">
 				<router-view v-slot="{ Component }">
 					<transition :name="$store.state.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@@ -67,7 +64,6 @@ import { StickySidebar } from '@client/scripts/sticky-sidebar';
 import XSidebar from './default.sidebar.vue';
 import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
 import XCommon from './_common_/common.vue';
-import XHeader from './_common_/header.vue';
 import * as os from '@client/os';
 import { menuDef } from '@client/menu';
 import * as symbols from '@client/symbols';
@@ -80,7 +76,6 @@ export default defineComponent({
 		XCommon,
 		XSidebar,
 		XDrawerSidebar,
-		XHeader,
 		XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
 		XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
 	},
@@ -88,8 +83,8 @@ export default defineComponent({
 	data() {
 		return {
 			pageInfo: null,
-			headerHeight: 0,
 			menuDef: menuDef,
+			globalHeaderHeight: 0,
 			isMobile: window.innerWidth <= MOBILE_THRESHOLD,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			widgetsShowing: false,
@@ -194,10 +189,6 @@ export default defineComponent({
 			if (window._scroll) window._scroll();
 		},
 
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
 		onContextmenu(e) {
 			const isLink = (el: HTMLElement) => {
 				if (el.tagName === 'A') return true;
@@ -282,10 +273,6 @@ export default defineComponent({
 				border: none;
 				width: 100%;
 				border-radius: 0;
-
-				> .header {
-					width: 100%;
-				}
 			}
 		}
 	}
@@ -325,29 +312,6 @@ export default defineComponent({
 			border-radius: 0;
 			overflow: clip;
 			--margin: 12px;
-
-			> .header {
-				position: sticky;
-				z-index: 1000;
-				top: var(--globalHeaderHeight, 0px);
-				-webkit-backdrop-filter: var(--blur, blur(32px));
-				backdrop-filter: var(--blur, blur(32px));
-				background-color: var(--header);
-				border-bottom: solid 0.5px var(--divider);
-			}
-
-			> .content {
-				--stickyTop: calc(var(--globalHeaderHeight, 0px) + var(--headerHeight));
-			}
-
-			@media (max-width: 850px) {
-				padding-top: var(--headerHeight);
-
-				> .header {
-					position: fixed;
-					width: calc(100% - #{$nav-icon-only-width});
-				}
-			}
 		}
 
 		> .widgets {
@@ -369,12 +333,11 @@ export default defineComponent({
 		}
 
 		&.withGlobalHeader {
-			--globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
-
 			> .main {
 				margin-top: 0;
 				border: solid 1px var(--divider);
 				border-radius: var(--radius);
+				--stickyTop: var(--globalHeaderHeight);
 			}
 
 			> .widgets {

src/client/ui/universal.vue

@@ -1,11 +1,8 @@
 <template>
-<div class="mk-app" :class="{ wallpaper }" :style="`--headerHeight:` + headerHeight + 'px'">
+<div class="mk-app" :class="{ wallpaper }">
 	<XSidebar ref="nav" class="sidebar"/>
 
 	<div class="contents" ref="contents" @contextmenu.stop="onContextmenu" :style="{ background: pageInfo?.bg }">
-		<header class="header" ref="header" @click="onHeaderClick" :style="{ background: pageInfo?.bg }">
-			<XHeader v-if="!pageInfo?.hide" :info="pageInfo" v-get-size="(w, h) => headerHeight = h"/>
-		</header>
 		<main ref="main">
 			<div class="content">
 				<router-view v-slot="{ Component }">
@@ -58,7 +55,6 @@ import { instanceName } from '@client/config';
 import { StickySidebar } from '@client/scripts/sticky-sidebar';
 import XSidebar from '@client/ui/_common_/sidebar.vue';
 import XCommon from './_common_/common.vue';
-import XHeader from './_common_/header.vue';
 import XSide from './default.side.vue';
 import * as os from '@client/os';
 import { menuDef } from '@client/menu';
@@ -70,7 +66,6 @@ export default defineComponent({
 	components: {
 		XCommon,
 		XSidebar,
-		XHeader,
 		XWidgets: defineAsyncComponent(() => import('./universal.widgets.vue')),
 		XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
 	},
@@ -86,7 +81,6 @@ export default defineComponent({
 	data() {
 		return {
 			pageInfo: null,
-			headerHeight: 0,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			menuDef: menuDef,
 			navHidden: false,
@@ -152,9 +146,6 @@ export default defineComponent({
 		adjustUI() {
 			const navWidth = this.$refs.nav.$el.offsetWidth;
 			this.navHidden = navWidth === 0;
-			if (this.$refs.contents == null) return;
-			const width = this.$refs.contents.offsetWidth;
-			if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
 		},
 
 		showNav() {
@@ -184,10 +175,6 @@ export default defineComponent({
 			if (window._scroll) window._scroll();
 		},
 
-		onHeaderClick() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
 		onContextmenu(e) {
 			const isLink = (el: HTMLElement) => {
 				if (el.tagName === 'A') return true;
@@ -263,22 +250,8 @@ export default defineComponent({
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		--stickyTop: var(--headerHeight);
-		padding-top: var(--headerHeight);
 		background: var(--panel);
 
-		> .header {
-			position: fixed;
-			z-index: 1000;
-			top: 0;
-			//background-color: var(--panel);
-			-webkit-backdrop-filter: var(--blur, blur(32px));
-			backdrop-filter: var(--blur, blur(32px));
-			background-color: var(--header);
-			border-bottom: solid 0.5px var(--divider);
-			user-select: none;
-		}
-
 		> main {
 			min-width: 0;
 

src/client/ui/zen.vue

@@ -2,7 +2,7 @@
 <div class="mk-app">
 	<div class="contents">
 		<header class="header">
-			<XHeader :info="pageInfo"/>
+			<MkHeader :info="pageInfo"/>
 		</header>
 		<main ref="main">
 			<div class="content">
@@ -24,14 +24,12 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { host } from '@client/config';
-import XHeader from './_common_/header.vue';
 import XCommon from './_common_/common.vue';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
 		XCommon,
-		XHeader,
 	},
 
 	data() {