Add follow button to header

packages/client/src/components/global/MkPageHeader.vue

@@ -85,6 +85,18 @@
 			</nav>
 		</template>
 		<div class="buttons right">
+			<template v-if="metadata.avatar">
+				<MkFollowButton
+					v-if="narrow"
+					:user="metadata.avatar"
+					:full="false"
+				></MkFollowButton>
+				<MkFollowButton
+					v-else
+					:user="metadata.avatar"
+					:full="true"
+				></MkFollowButton>
+			</template>
 			<template v-for="action in actions">
 				<button
 					v-tooltip.noDelay="action.text"
@@ -113,6 +125,7 @@ import {
 	reactive,
 } from "vue";
 import tinycolor from "tinycolor2";
+import MkFollowButton from "@/components/MkFollowButton.vue";
 import { popupMenu } from "@/os";
 import { scrollToTop } from "@/scripts/scroll";
 import { globalEvents } from "@/events";
@@ -379,6 +392,9 @@ onUnmounted(() => {
 
 		&.right {
 			margin-left: auto;
+			:deep(.follow-button) {
+				margin-right: 6px;
+			}
 		}
 
 		&:empty {

packages/client/src/pages/note.vue

@@ -27,11 +27,10 @@
 								v-if="!showNext && hasNext"
 								class="load next"
 								@click="showNext = true"
-								v-tooltip="
+							>
-									`${i18n.ts.loadMore} (${i18n.ts.newer})`
+								<i class="ph-caret-up ph-bold ph-lg"></i>
-								"
+								{{ `${i18n.ts.loadMore} (${i18n.ts.newer})` }}
-								><i class="ph-caret-up ph-bold ph-lg"></i
+							</MkButton>
-							></MkButton>
 							<div class="note _gap">
 								<MkRemoteCaution
 									v-if="note.user.host != null"
@@ -47,11 +46,10 @@
 								v-if="!showPrev && hasPrev"
 								class="load prev"
 								@click="showPrev = true"
-								v-tooltip="
+							>
-									`${i18n.ts.loadMore} (${i18n.ts.older})`
+								<i class="ph-caret-down ph-bold ph-lg"></i>
-								"
+								{{ `${i18n.ts.loadMore} (${i18n.ts.older})` }}
-								><i class="ph-caret-down ph-bold ph-lg"></i
+							</MkButton>
-							></MkButton>
 						</div>
 
 						<div v-if="showPrev" class="_gap">