Merge pull request 'Tweak note tabs + add follow button to header + other minor stuff' (#10172) from Freeplay/calckey:notes into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10172

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"

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;
 	}
 

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 {

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;
@@ -632,7 +626,7 @@ onUnmounted(() => {
 		}
 
 		> :deep(.note-container) {
-			padding: 6px 0 0 0;
+			padding: 12px 0 0 0;
 			> .header > .body {
 				padding-left: 10px;
 			}
@@ -642,7 +636,7 @@ onUnmounted(() => {
 		> :deep(.reacted-users > *) {
 			padding-inline: 16px !important;
 		}
-		> .chips {
+		> :deep(.underline) {
 			padding-left: 16px !important;
 		}
 	}

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>

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
 					>

packages/client/src/components/MkTab.vue

@@ -86,6 +86,10 @@ export default defineComponent({
 		> .icon {
 			margin-right: 6px;
 		}
+
+		&:empty {
+			display: none !important;
+		}
 	}
 
 	&.chips, &.underline {
@@ -124,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;

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
-							></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">

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"