From c97dc7fe933f62615984dc1e1f00d89358964460 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=82=E3=81=9A=E3=81=8D=E2=AA=A5=E2=84=A2?=
 <44765629+melt-adzuki@users.noreply.github.com>
Date: Sat, 13 Aug 2022 17:41:17 +0900
Subject: [PATCH] feat: show header with current user avatar on TL (#9051)

* feat: show header with current user avatar on TL

* refactor(client): use displayMyAvatar prop instead of metadata

* refactor(client): prefer v-if to `display: none;`
---
 .../src/components/global/page-header.vue     | 21 ++++++++++++++++++-
 packages/client/src/pages/timeline.vue        |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue
index 106e216b9..ba75b2446 100644
--- a/packages/client/src/components/global/page-header.vue
+++ b/packages/client/src/components/global/page-header.vue
@@ -1,5 +1,8 @@
 <template>
 <div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
+	<div v-if="narrow" class="buttons left">
+		<MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/>
+	</div>
 	<template v-if="metadata">
 		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
 			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
@@ -41,6 +44,7 @@ import { scrollToTop } from '@/scripts/scroll';
 import { i18n } from '@/i18n';
 import { globalEvents } from '@/events';
 import { injectPageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
 
 type Tab = {
 	key?: string | null;
@@ -59,6 +63,7 @@ const props = defineProps<{
 		handler: (ev: MouseEvent) => void;
 	}[];
 	thin?: boolean;
+	displayMyAvatar?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -197,7 +202,6 @@ onUnmounted(() => {
 		> .titleContainer {
 			flex: 1;
 			margin: 0 auto;
-			margin-left: var(--height);
 
 			> *:first-child {
 				margin-left: auto;
@@ -213,9 +217,24 @@ onUnmounted(() => {
 		--margin: 8px;
 		display: flex;
     align-items: center;
+		min-width: var(--height);
 		height: var(--height);
 		margin: 0 var(--margin);
 
+		&.left {
+			margin-right: auto;
+
+			> .avatar {
+				$size: 32px;
+				display: inline-block;
+				width: $size;
+				height: $size;
+				vertical-align: bottom;
+				margin: 0 8px;
+				pointer-events: none;
+			}
+		}
+
 		&.right {
 			margin-left: auto;
 		}
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index f62ab95b5..1c62964a5 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
 	<MkSpacer :content-max="800">
 		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
 			<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _block"/>