From 29eebcfe019bd4f8718fe8f09c54cafd5605a3b6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 20 May 2023 16:42:06 -0400
Subject: [PATCH 1/8] 'Jump to Reply' to 'Jump to previous'

---
 locales/en-US.yml                                   | 2 +-
 packages/client/src/components/MkSubNoteContent.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index b3944b1e5..9b2a9c010 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -57,7 +57,7 @@ sendMessage: "Send a message"
 copyUsername: "Copy username"
 searchUser: "Search for a user"
 reply: "Reply"
-jumpToReply: "Jump to Reply"
+jumpToPrevious: "Jump to previous"
 loadMore: "Load more"
 showMore: "Show more"
 newer: "newer"
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index e2672298c..5415ae984 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -17,7 +17,7 @@
 				!note.replyId
 			"
 			:to="`/notes/${note.renoteId}`"
-			v-tooltip="i18n.ts.jumpToReply"
+			v-tooltip="i18n.ts.jumpToPrevious"
 			class="reply-icon"
 			@click.stop
 		>
@@ -70,7 +70,7 @@
 						v-if="!detailed && note.replyId"
 						:to="`#${note.replyId}`"
 						behavior="browser"
-						v-tooltip="i18n.ts.jumpToReply"
+						v-tooltip="i18n.ts.jumpToPrevious"
 						class="reply-icon"
 						@click.stop
 					>

From 795c76f154f7860af746bcb271152c103e18afdd Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 20 May 2023 21:20:17 -0400
Subject: [PATCH 2/8] hide empty tabs

---
 .../client/src/components/MkNoteDetailed.vue  | 40 ++++++++-----------
 packages/client/src/components/MkTab.vue      |  4 ++
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index cf072d4ac..a7d657e3f 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -34,39 +34,29 @@
 		></MkNote>
 
 		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
-			<option value="replies">
+			<option value="replies" v-if="appearNote.repliesCount > 0">
 				<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-				<template v-if="appearNote.repliesCount > 0">
-					<span class="count">{{ appearNote.repliesCount }}</span>
-				</template>
+				<span class="count">{{ appearNote.repliesCount }}</span>
 				{{ i18n.ts._notification._types.reply }}
 			</option>
-			<option value="renotes">
+			<option value="renotes" v-if="appearNote.renoteCount > 0">
 				<i class="ph-repeat ph-bold ph-lg"></i>
-				<template v-if="appearNote.renoteCount > 0">
-					<span class="count">{{ appearNote.renoteCount }}</span>
-				</template>
+				<span class="count">{{ appearNote.renoteCount }}</span>
 				{{ i18n.ts._notification._types.renote }}
 			</option>
-			<option value="quotes">
-				<i class="ph-quotes ph-bold ph-lg"></i>
-				<template v-if="directQuotes?.length > 0">
-					<span class="count">{{ directQuotes.length }}</span>
-				</template>
-				{{ i18n.ts._notification._types.quote }}
-			</option>
-			<option value="reactions">
+			<option value="reactions" v-if="reactionsCount > 0">
 				<i class="ph-smiley ph-bold ph-lg"></i>
-				<template v-if="reactionsCount > 0">
-					<span class="count">{{ reactionsCount }}</span>
-				</template>
+				<span class="count">{{ reactionsCount }}</span>
 				{{ i18n.ts.reaction }}
 			</option>
-			<option value="clips">
+			<option value="quotes" v-if="directQuotes?.length > 0">
+				<i class="ph-quotes ph-bold ph-lg"></i>
+				<span class="count">{{ directQuotes.length }}</span>
+				{{ i18n.ts._notification._types.quote }}
+			</option>
+			<option value="clips" v-if="clips?.length > 0">
 				<i class="ph-paperclip ph-bold ph-lg"></i>
-				<template v-if="clips?.length > 0">
-					<span class="count">{{ clips.length }}</span>
-				</template>
+				<span class="count">{{ clips.length }}</span>
 				{{ i18n.ts.clips }}
 			</option>
 		</MkTab>
@@ -518,6 +508,10 @@ onUnmounted(() => {
 		overflow: clip;
 		outline: none;
 		scroll-margin-top: calc(var(--stickyTop) + 20vh);
+		&:not(:last-child) {
+			border-bottom: 1px solid var(--divider);
+			margin-bottom: 4px;
+		}
 		.article {
 			cursor: unset;
 			padding-bottom: 0;
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 29c943547..76887a247 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -86,6 +86,10 @@ export default defineComponent({
 		> .icon {
 			margin-right: 6px;
 		}
+
+		&:empty {
+			display: none !important;
+		}
 	}
 
 	&.chips, &.underline {

From a4573c6639027b7439bfcfbe286b846ba0bc4a2b Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 20 May 2023 21:46:33 -0400
Subject: [PATCH 3/8] tab fix

---
 packages/client/src/components/MkNoteDetailed.vue | 2 +-
 packages/client/src/components/MkTab.vue          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index a7d657e3f..80202f279 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -636,7 +636,7 @@ onUnmounted(() => {
 		> :deep(.reacted-users > *) {
 			padding-inline: 16px !important;
 		}
-		> .chips {
+		> :deep(.underline) {
 			padding-left: 16px !important;
 		}
 	}
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 76887a247..5f7cd084f 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -128,6 +128,7 @@ export default defineComponent({
 	&.underline {
 		padding-block: 0 !important;
 		margin-bottom: -1px;
+		border-radius: 0;
 		button {
 			background: none !important;
 			border-radius: 0 !important;

From a39cc89ac7a417c74faf99f140f433fdef9a538a Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 21 May 2023 13:10:27 -0400
Subject: [PATCH 4/8] Accessible follow button

---
 .../client/src/components/MkFollowButton.vue  | 33 +++++++++++--------
 packages/client/src/pages/user/home.vue       |  1 -
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 12491f6ad..0ef5868bd 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -1,6 +1,7 @@
 <template>
 	<button
-		class="kpoogebi _button"
+		v-if="$i != null && $i.id != user.id"
+		class="kpoogebi _button follow-button"
 		:class="{
 			wait,
 			active: isFollowing || hasPendingFollowRequestFromYou,
@@ -10,40 +11,41 @@
 		}"
 		:disabled="wait"
 		@click="onClick"
+		:aria-label=" `${state} ${user.name || user.username}` "
 	>
 		<template v-if="!wait">
 			<template v-if="isBlocking">
-				<span v-if="full">{{ i18n.ts.blocked }}</span
+				<span v-if="full">{{ state = i18n.ts.blocked }}</span
 				><i class="ph-prohibit ph-bold ph-lg"></i>
 			</template>
 			<template
 				v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
 			>
-				<span v-if="full">{{ i18n.ts.followRequestPending }}</span
+				<span v-if="full">{{ state = i18n.ts.followRequestPending }}</span
 				><i class="ph-hourglass-medium ph-bold ph-lg"></i>
 			</template>
 			<template
 				v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
 			>
 				<!-- つまりリモートフォローの場合。 -->
-				<span v-if="full">{{ i18n.ts.processing }}</span
+				<span v-if="full">{{ state = i18n.ts.processing }}</span
 				><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
 			</template>
 			<template v-else-if="isFollowing">
-				<span v-if="full">{{ i18n.ts.unfollow }}</span
+				<span v-if="full">{{ state = i18n.ts.unfollow }}</span
 				><i class="ph-minus ph-bold ph-lg"></i>
 			</template>
 			<template v-else-if="!isFollowing && user.isLocked">
-				<span v-if="full">{{ i18n.ts.followRequest }}</span
+				<span v-if="full">{{ state = i18n.ts.followRequest }}</span
 				><i class="ph-plus ph-bold ph-lg"></i>
 			</template>
 			<template v-else-if="!isFollowing && !user.isLocked">
-				<span v-if="full">{{ i18n.ts.follow }}</span
+				<span v-if="full">{{ state = i18n.ts.follow }}</span
 				><i class="ph-plus ph-bold ph-lg"></i>
 			</template>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ i18n.ts.processing }}</span
+			<span v-if="full">{{ state = i18n.ts.processing }}</span
 			><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
 		</template>
 	</button>
@@ -55,6 +57,7 @@ import type * as Misskey from "calckey-js";
 import * as os from "@/os";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
+import { $i } from "@/account";
 
 const emit = defineEmits(["refresh"]);
 const props = withDefaults(
@@ -71,6 +74,8 @@ const props = withDefaults(
 
 const isBlocking = computed(() => props.user.isBlocking);
 
+let state = $ref(i18n.ts.processing);
+
 let isFollowing = $ref(props.user.isFollowing);
 let hasPendingFollowRequestFromYou = $ref(
 	props.user.hasPendingFollowRequestFromYou
@@ -155,7 +160,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
-.kpoogebi {
+.follow-button {
 	position: relative;
 	display: inline-flex;
 	align-items: center;
@@ -164,13 +169,15 @@ onBeforeUnmount(() => {
 	color: var(--accent);
 	border: solid 1px var(--accent);
 	padding: 0;
-	height: 31px;
 	font-size: 16px;
-	border-radius: 32px;
+	width: 2em;
+	height: 2em;
+	border-radius: 100px;
 	background: var(--bg);
 
 	&.full {
-		padding: 0 8px 0 12px;
+		padding: 0.2em .7em;
+		width: auto;
 		font-size: 14px;
 	}
 
@@ -207,7 +214,7 @@ onBeforeUnmount(() => {
 	}
 
 	&.active {
-		color: #fff;
+		color: var(--fgOnAccent);
 		background: var(--accent);
 
 		&:hover {
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index af3a38431..5de9b28d6 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -135,7 +135,6 @@
 						<div class="follow-container">
 							<div class="actions">
 								<MkFollowButton
-									v-if="$i != null && $i.id != user.id"
 									:user="user"
 									@refresh="emit('refresh')"
 									:inline="true"

From 20556ad3b13de855faaa23095023a4a373dce2b6 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 21 May 2023 14:11:45 -0400
Subject: [PATCH 5/8] Set minimum size for buttons

---
 packages/client/src/components/MkButton.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 140b8ddb0..8a7fe6851 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -111,11 +111,12 @@ function onMousedown(evt: MouseEvent): void {
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
 	min-width: 100px;
+	min-height: 35px;
 	width: max-content;
 	padding: 8px 16px;
 	text-align: center;
 	font-weight: normal;
-	font-size: 1em;
+	font-size: max(12px, 1em);
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
@@ -193,7 +194,7 @@ function onMousedown(evt: MouseEvent): void {
 
 	&.mini {
 		padding: 4px 8px;
-		font-size: 0.9em;
+		font-size: max(12px, .9em);
 		border-radius: 100px;
 	}
 

From 1f01910f7485bd1a83a0724e064a57148038ffda Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 21 May 2023 16:30:35 -0400
Subject: [PATCH 6/8] Add follow button to header

---
 .../src/components/global/MkPageHeader.vue     | 16 ++++++++++++++++
 packages/client/src/pages/note.vue             | 18 ++++++++----------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index eb4abf316..8300cc4af 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/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 {
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 8dc944213..5b408bdaf 100644
--- a/packages/client/src/pages/note.vue
+++ b/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
-							></MkButton>
+							>
+								<i class="ph-caret-up ph-bold ph-lg"></i>
+								{{ `${i18n.ts.loadMore} (${i18n.ts.newer})` }}
+							</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
-							></MkButton>
+							>
+								<i class="ph-caret-down ph-bold ph-lg"></i>
+								{{ `${i18n.ts.loadMore} (${i18n.ts.older})` }}
+							</MkButton>
 						</div>
 
 						<div v-if="showPrev" class="_gap">

From dee942330d1a2aba51efe28efbfab707fee030c7 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 21 May 2023 16:48:25 -0400
Subject: [PATCH 7/8] padding fix

---
 packages/client/src/components/MkNoteDetailed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 80202f279..892bcb183 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -626,7 +626,7 @@ onUnmounted(() => {
 		}
 
 		> :deep(.note-container) {
-			padding: 6px 0 0 0;
+			padding: 12px 0 0 0;
 			> .header > .body {
 				padding-left: 10px;
 			}

From 2c5762185e1ada8cb632dc019f9ddd9f6c3c889f Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 21 May 2023 18:23:17 -0400
Subject: [PATCH 8/8] Give article semantic to subnote

---
 packages/client/src/components/MkNoteSub.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 1a50e6f5f..d0aae4168 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -1,5 +1,5 @@
 <template>
-	<div
+	<article
 		v-if="!muted.muted || muted.what === 'reply'"
 		ref="el"
 		v-size="{ max: [450, 500] }"
@@ -150,7 +150,7 @@
 				></MkA>
 			</div>
 		</template>
-	</div>
+	</article>
 	<div v-else class="muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
 			<template #name>