wip

src/client/components/global/header.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="fdidabkb" :class="{ slim: narrow, thin }" :style="{ background: bg }">
+<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>
@@ -35,9 +35,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import * as tinycolor from 'tinycolor2';
 import { popupMenu } from '@client/os';
 import { url } from '@client/config';
-import * as tinycolor from 'tinycolor2';
+import { scrollToTop } from '@client/scripts/scroll';
 
 export default defineComponent({
 	props: {
@@ -77,7 +78,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		const rawBg = this.info.bg || 'var(--bg)';
+		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();
@@ -136,6 +137,10 @@ export default defineComponent({
 
 		preventDrag(ev) {
 			ev.stopPropagation();
+		},
+
+		onClick(ev) {
+			scrollToTop(this.$el, { behavior: 'smooth' });
 		}
 	}
 });
@@ -146,7 +151,7 @@ export default defineComponent({
 	--height: 60px;
 	display: flex;
 	position: sticky;
-	top: 0;
+	top: var(--stickyTop, 0);
 	z-index: 1000;
 	width: 100%;
 	-webkit-backdrop-filter: var(--blur, blur(15px));

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_">
-			<MkHeader v-if="!pageInfo?.hide" :info="pageInfo"/>
 			<keep-alive>
 				<component :is="component" v-bind="props" :ref="changePage"/>
 			</keep-alive>

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_">
-		<MkHeader :info="pageInfo"/>
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </XWindow>

src/client/pages/announcements.vue

@@ -1,5 +1,7 @@
 <template>
-<div class="_section">
+<div>
+	<MkHeader :info="header"/>
+	<div class="_section">
 		<MkPagination :pagination="pagination" #default="{items}" class="ruryvtyk _content">
 			<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>
@@ -12,6 +14,7 @@
 				</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>
+	<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/favorites.vue

@@ -1,8 +1,11 @@
 <template>
-<div class="jmelgwjh">
+<div>
+	<MkHeader :info="header"/>
+	<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>
+	<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,5 +1,7 @@
 <template>
-<div class="taeiyria">
+<div>
+	<MkHeader :info="header"/>
+	<div class="taeiyria">
 		<div class="query">
 			<MkInput v-model="host" :debounce="true" class="">
 				<template #prefix><i class="fas fa-search"></i></template>
@@ -90,6 +92,7 @@
 				</MkA>
 			</div>
 		</MkPagination>
+	</div>
 </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/index.vue

@@ -127,7 +127,7 @@ export default defineComponent({
 			pageProps.value = {};
 
 			nextTick(() => {
-				scroll(el.value, 0);
+				scroll(el.value, { top: 0 });
 			});
 		}, { immediate: true });
 

src/client/pages/mentions.vue

@@ -1,6 +1,9 @@
 <template>
-<div class="_section">
+<div>
+	<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>
+	<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,5 +1,8 @@
 <template>
-<div class="yweeujhr _root" v-size="{ max: [400] }">
+<div>
+	<MkHeader :info="header"/>
+
+	<div class="yweeujhr _root" v-size="{ max: [400] }">
 		<MkButton @click="start" primary class="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
 		<div class="history" v-if="messages.length > 0">
@@ -33,6 +36,7 @@
 			<div>{{ $ts.noHistory }}</div>
 		</div>
 		<MkLoading v-if="fetching"/>
+	</div>
 </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,5 +1,7 @@
 <template>
-<div class="qkcjvfiv">
+<div>
+	<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">
@@ -8,6 +10,7 @@
 				<MkAvatars :user-ids="list.userIds"/>
 			</MkA>
 		</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,5 +1,7 @@
 <template>
-<div class="mk-list-page">
+<div>
+	<MkHeader v-if="header" :info="header"/>
+	<div class="mk-list-page">
 		<transition name="zoom" mode="out-in">
 			<div v-if="list" class="_section">
 				<div class="_content">
@@ -29,6 +31,7 @@
 				</div>
 			</div>
 		</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/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,8 +1,11 @@
 <template>
-<div class="_section">
+<div>
+	<MkHeader :info="header"/>
+	<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

@@ -143,7 +143,7 @@ export default defineComponent({
 			}
 
 			nextTick(() => {
-				scroll(el.value, 0);
+				scroll(el.value, { top: 0 });
 			});
 		}, { immediate: true });
 

src/client/pages/timeline.vue

@@ -137,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,5 +1,7 @@
 <template>
-<transition name="fade" mode="out-in">
+<div>
+	<MkHeader :info="header"/>
+	<transition name="fade" mode="out-in">
 		<div class="ftskorzw wide" v-if="user && narrow === false">
 			<MkRemoteCaution v-if="user.host != null" :href="user.url"/>
 
@@ -186,7 +188,8 @@
 		</div>
 		<MkError v-else-if="error" @retry="fetch()"/>
 		<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) {
-	scroll(el, 0);
+export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
+	scroll(el, { top: 0, ...options });
 }
 
-export function scrollToBottom(el: Element) {
-	scroll(el, 99999); // TODO: ちゃんと計算する
+export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
+	scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する
 }
 
 export function isBottom(el: Element, asobi = 0) {

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

@@ -6,7 +6,6 @@
 		</template>
 	</template>
 
-	<MkHeader :info="pageInfo"/>
 	<router-view v-slot="{ Component }" class="_flat_">
 		<transition>
 			<keep-alive :include="['timeline']">

src/client/ui/default.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--headerHeight:` + headerHeight + 'px'">
-	<XHeaderMenu v-if="showMenuOnTop"/>
+<div class="mk-app" :class="{ wallpaper, isMobile }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
+	<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">
-				<MkHeader :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">
@@ -86,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,
@@ -192,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;
@@ -280,10 +273,6 @@ export default defineComponent({
 				border: none;
 				width: 100%;
 				border-radius: 0;
-
-				> .header {
-					width: 100%;
-				}
 			}
 		}
 	}
@@ -323,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 {
@@ -367,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

@@ -252,18 +252,6 @@ export default defineComponent({
 		min-width: 0;
 		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;