enhance(client): ヘッダー（MkPageHeader）関連 (#9869)

* MkPageHeader大改造

* ユーザーページのノート一覧をタブにするなど

* ✌️

* 🎨

* fix

* wheel

* clean up

* 🎨

* 🎨

* remove console.log

* update CHANGELOG.md

* fix

* fix

* fix

* ✌️

* header avatar clickable

* !hideTitle

* Revert "!hideTitle"

This reverts commit 19cad428c906f555b73730d602e401a1e943cdef.

* fix changelog

packages/frontend/src/pages/timeline.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch } from 'vue';
+import { defineAsyncComponent, computed, watch, provide } from 'vue';
 import XTimeline from '@/components/MkTimeline.vue';
 import MkPostForm from '@/components/MkPostForm.vue';
 import { scroll } from '@/scripts/scroll';
@@ -33,6 +33,8 @@ import { instance } from '@/instance';
 import { $i } from '@/account';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
+provide('shouldOmitHeaderTitle', true);
+
 const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
 
 const isLocalTimelineAvailable = ($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable);

packages/frontend/src/pages/user/home.vue

@@ -101,9 +101,6 @@
 					<XActivity :key="user.id" :user="user"/>
 				</template>
 			</div>
-			<div>
-				<XUserTimeline :user="user"/>
-			</div>
 		</div>
 		<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
 			<XPhotos :key="user.id" :user="user"/>
@@ -117,7 +114,6 @@
 import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
 import calcAge from 's-age';
 import * as misskey from 'misskey-js';
-import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/MkNote.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
 import MkContainer from '@/components/MkContainer.vue';

packages/frontend/src/pages/user/index.timeline.vue

@@ -1,14 +1,16 @@
 <template>
-<MkStickyContainer>
-	<template #header>
-		<MkTab v-model="include" :class="$style.tab">
-			<option :value="null">{{ i18n.ts.notes }}</option>
-			<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
-			<option value="files">{{ i18n.ts.withFiles }}</option>
-		</MkTab>
-	</template>
-	<XNotes :no-gap="true" :pagination="pagination"/>
-</MkStickyContainer>
+<MkSpacer :content-max="800" style="padding-top: 0">
+	<MkStickyContainer>
+		<template #header>
+			<MkTab v-model="include" :class="$style.tab">
+				<option :value="null">{{ i18n.ts.notes }}</option>
+				<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
+				<option value="files">{{ i18n.ts.withFiles }}</option>
+			</MkTab>
+		</template>
+		<XNotes :no-gap="true" :pagination="pagination" :class="$style.tl"/>
+	</MkStickyContainer>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
@@ -42,4 +44,10 @@ const pagination = {
 	padding: calc(var(--margin) / 2) 0;
 	background: var(--bg);
 }
+
+.tl {
+	background: var(--bg);
+    border-radius: var(--radius);
+    overflow: clip;
+}
 </style>

packages/frontend/src/pages/user/index.vue

@@ -5,7 +5,7 @@
 		<Transition name="fade" mode="out-in">
 			<div v-if="user">
 				<XHome v-if="tab === 'home'" :user="user"/>
-				<XActivity v-else-if="tab === 'activity'" :user="user"/>
+				<XTimeline v-else-if="tab === 'notes'" :user="user" />
 				<XAchievements v-else-if="tab === 'achievements'" :user="user"/>
 				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
 				<XClips v-else-if="tab === 'clips'" :user="user"/>
@@ -34,6 +34,7 @@ import { i18n } from '@/i18n';
 import { $i } from '@/account';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
+const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
 const XActivity = defineAsyncComponent(() => import('./activity.vue'));
 const XAchievements = defineAsyncComponent(() => import('./achievements.vue'));
 const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
@@ -74,6 +75,10 @@ const headerTabs = $computed(() => user ? [{
 	key: 'home',
 	title: i18n.ts.overview,
 	icon: 'ti ti-home',
+}, {
+	key: 'notes',
+	title: i18n.ts.notes,
+	icon: 'ti ti-pencil',
 }, {
 	key: 'activity',
 	title: i18n.ts.activity,