Note tabs + Jump to Reply changes + other stuff (#10157)

locales/en-US.yml

@@ -57,8 +57,11 @@ sendMessage: "Send a message"
 copyUsername: "Copy username"
 searchUser: "Search for a user"
 reply: "Reply"
+jumpToReply: "Jump to Reply"
 loadMore: "Load more"
 showMore: "Show more"
+newer: "newer"
+older: "older"
 showLess: "Close"
 youGotNewFollower: "followed you"
 receiveFollowRequest: "Follow request received"

packages/client/src/components/MkButton.vue

@@ -2,7 +2,7 @@
 	<button
 		v-if="!link"
 		class="bghgjjyj _button"
-		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
 		:type="type"
 		@click="emit('click', $event)"
 		@mousedown="onMousedown"
@@ -15,7 +15,7 @@
 	<MkA
 		v-else
 		class="bghgjjyj _button"
-		:class="{ inline, primary, gradate, danger, rounded, full }"
+		:class="{ inline, primary, gradate, danger, rounded, full, mini }"
 		:to="to"
 		@mousedown="onMousedown"
 	>
@@ -41,6 +41,7 @@ const props = defineProps<{
 	wait?: boolean;
 	danger?: boolean;
 	full?: boolean;
+	mini: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -190,6 +191,12 @@ function onMousedown(evt: MouseEvent): void {
 		}
 	}
 
+	&.mini {
+		padding: 4px 8px;
+		font-size: .9em;
+		border-radius: 100px;
+	}
+
 	&:disabled {
 		opacity: 0.7;
 	}

packages/client/src/components/MkNote.vue

@@ -5,7 +5,7 @@
 		ref="el"
 		v-hotkey="keymap"
 		v-size="{ max: [500, 450, 350, 300] }"
-		class="tkcbzcuz"
+		class="tkcbzcuz note-container"
 		:tabindex="!isDeleted ? '-1' : null"
 		:class="{ renote: isRenote }"
 	>
@@ -104,6 +104,11 @@
 							/>
 						</div>
 					</div>
+				</div>
+				<div v-if="detailedView" class="info">
+					<MkA class="created-at" :to="notePage(appearNote)">
+						<MkTime :time="appearNote.createdAt" mode="absolute" />
+					</MkA>
 					<MkA
 						v-if="appearNote.channel && !inChannel"
 						class="channel"
@@ -113,11 +118,6 @@
 						{{ appearNote.channel.name }}</MkA
 					>
 				</div>
-				<div v-if="detailedView" class="info">
-					<MkA class="created-at" :to="notePage(appearNote)">
-						<MkTime :time="appearNote.createdAt" mode="absolute" />
-					</MkA>
-				</div>
 				<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
 					<XReactionsViewer
 						v-if="enableEmojiReactions"
@@ -130,7 +130,7 @@
 						@click="reply()"
 					>
 						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
-						<template v-if="appearNote.repliesCount > 0">
+						<template v-if="appearNote.repliesCount > 0 && !detailedView">
 							<p class="count">{{ appearNote.repliesCount }}</p>
 						</template>
 					</button>
@@ -139,6 +139,7 @@
 						class="button"
 						:note="appearNote"
 						:count="appearNote.renoteCount"
+						:detailedView="detailedView"
 					/>
 					<XStarButtonNoEmoji
 						v-if="!enableEmojiReactions"
@@ -450,6 +451,10 @@ function focusAfter() {
 	focusNext(el.value);
 }
 
+function scrollIntoView() {
+	el.value.scrollIntoView();
+}
+
 function noteClick(e) {
 	if (document.getSelection().type === "Range" || props.detailedView) {
 		e.stopPropagation();
@@ -464,6 +469,12 @@ function readPromo() {
 	});
 	isDeleted.value = true;
 }
+
+defineExpose({
+	focus,
+	blur,
+	scrollIntoView,
+});
 </script>
 
 <style lang="scss" scoped>
@@ -656,14 +667,13 @@ function readPromo() {
 						}
 					}
 				}
-
-				> .channel {
-					opacity: 0.7;
-					font-size: 80%;
-				}
 			}
 			> .info {
-				margin-block: 16px;
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				gap: .7em;
+				margin-top: 16px;
 				opacity: 0.7;
 				font-size: 0.9em;
 			}

packages/client/src/components/MkNoteDetailed.vue

@@ -15,32 +15,128 @@
 			:key="note.id"
 			class="reply-to"
 			:note="note"
+			:detailedView="true"
 		/>
 		<MkLoading v-else-if="appearNote.reply" mini />
 		<MkNoteSub
 			v-if="appearNote.reply"
 			:note="appearNote.reply"
 			class="reply-to"
+			:detailedView="true"
 		/>
 
-		<div ref="noteEl" class="article" tabindex="-1">
 		<MkNote
+			ref="noteEl"
 			@contextmenu.stop="onContextmenu"
 			tabindex="-1"
 			:note="appearNote"
-				:detailedView="true"
+			detailedView
 		></MkNote>
-		</div>
+
+		<MkTab 
+			v-model="tab"
+			:style="'chips'"
+			@update:modelValue="loadTab"
+		>
+			<option value="replies">
+				<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>
+				{{ i18n.ts._notification._types.reply }}
+			</option>
+			<option value="renotes">
+				<i class="ph-repeat ph-bold ph-lg"></i>
+				<template v-if="appearNote.renoteCount > 0">
+					<span class="count">{{ appearNote.renoteCount }}</span>
+				</template>
+				{{ 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="clips">
+				<i class="ph-paperclip ph-bold ph-lg"></i>
+				<template v-if="clips?.length > 0">
+					<span class="count">{{ clips.length }}</span>
+				</template>
+				{{ i18n.ts.clips }}
+			</option>
+		</MkTab>
 
 		<MkNoteSub
-			v-if="directReplies"
+			v-if="directReplies && tab === 'replies'"
 			v-for="note in directReplies"
 			:key="note.id"
 			:note="note"
 			class="reply"
 			:conversation="replies"
+			:detailedView="true"
 		/>
-		<MkLoading v-else-if="appearNote.repliesCount > 0" />
+		<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" />
+		
+		<MkNoteSub
+			v-if="directQuotes && tab === 'quotes'"
+			v-for="note in directQuotes"
+			:key="note.id"
+			:note="note"
+			class="reply"
+			:conversation="directQuotes"
+			:detailedView="true"
+		/>
+		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
+		
+		<!-- <MkPagination
+			v-if="tab === 'renotes'"
+			v-slot="{ items }"
+			ref="pagingComponent"
+			:pagination="pagination"
+		> -->
+			<MkUserCardMini
+				v-if="tab === 'renotes' && renotes"
+				v-for="item in renotes"
+				:key="item.user.id"
+				:user="item.user"
+				:with-chart="false"
+			/>
+		<!-- </MkPagination> -->
+		<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" />
+
+		<div
+			v-if="tab === 'clips' && clips.length > 0"
+			class="_content clips"
+		>
+			<MkA
+				v-for="item in clips"
+				:key="item.id"
+				:to="`/clips/${item.id}`"
+				class="item _panel"
+			>
+				<b>{{ item.name }}</b>
+				<div
+					v-if="item.description"
+					class="description"
+				>
+					{{ item.description }}
+				</div>
+				<div class="user">
+					<MkAvatar
+						:user="item.user"
+						class="avatar"
+						:show-indicator="true"
+					/>
+					<MkUserName
+						:user="item.user"
+						:nowrap="false"
+					/>
+				</div>
+			</MkA>
+		</div>
+		<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
 	</div>
 	<div v-else class="_panel muted" @click="muted.muted = false">
 		<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
@@ -70,15 +166,17 @@ import {
 	reactive,
 	ref,
 } from "vue";
-import type * as misskey from "calckey-js";
+import * as misskey from "calckey-js";
+import MkTab from "@/components/MkTab.vue";
 import MkNote from "@/components/MkNote.vue";
 import MkNoteSub from "@/components/MkNoteSub.vue";
 import XStarButton from "@/components/MkStarButton.vue";
 import XRenoteButton from "@/components/MkRenoteButton.vue";
+import MkPagination from "@/components/MkPagination.vue";
+import MkUserCardMini from "@/components/MkUserCardMini.vue";
 import { pleaseLogin } from "@/scripts/please-login";
 import { getWordSoftMute } from "@/scripts/check-word-mute";
 import { userPage } from "@/filters/user";
-import { useRouter } from "@/router";
 import * as os from "@/os";
 import { defaultStore, noteViewInterruptors } from "@/store";
 import { reactionPicker } from "@/scripts/reaction-picker";
@@ -89,12 +187,15 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
 import { deepClone } from "@/scripts/clone";
 import { stream } from "@/stream";
 import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
+import appear from "@/directives/appear";
 
 const props = defineProps<{
 	note: misskey.entities.Note;
 	pinned?: boolean;
 }>();
 
+let tab = $ref("replies");
+
 let note = $ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
@@ -143,6 +244,9 @@ const translating = ref(false);
 let conversation = $ref<null | misskey.entities.Note[]>([]);
 const replies = ref<misskey.entities.Note[]>([]);
 let directReplies = $ref<null | misskey.entities.Note[]>([]);
+let directQuotes = $ref<null | misskey.entities.Note[]>([]);
+let clips = $ref();
+let renotes = $ref();
 let isScrolling;
 
 const keymap = {
@@ -256,10 +360,14 @@ os.api("notes/children", {
 	directReplies = res
 		.filter(
 			(note) =>
-				note.replyId === appearNote.id ||
+				note.replyId === appearNote.id
-				note.renoteId === appearNote.id
 		)
 		.reverse();
+	directQuotes = res
+		.filter(
+			(note) =>
+				note.renoteId === appearNote.id
+		);
 });
 
 conversation = null;
@@ -273,6 +381,33 @@ if (appearNote.replyId) {
 	});
 }
 
+clips = null;
+os.api("notes/clips", {
+	noteId: appearNote.id,
+}).then((res) => {
+	clips = res;
+});
+
+// const pagination = {
+// 	endpoint: "notes/renotes",
+// 	noteId: appearNote.id,
+// 	limit: 10,
+// };
+
+// const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+
+renotes = null;
+function loadTab() {
+	if (tab === "renotes" && !renotes) {
+		os.api("notes/renotes", {
+			noteId: appearNote.id,
+			limit: 100,
+		}).then((res) => {
+			renotes = res;
+		})
+	}
+}
+
 async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
 	const { type, id, body } = noteData;
 
@@ -323,12 +458,15 @@ document.addEventListener("wheel", () => {
 onMounted(() => {
 	stream.on("noteUpdated", onNoteUpdated);
 	isScrolling = false;
-	noteEl?.scrollIntoView();
+	noteEl.scrollIntoView();
 });
 
 onUpdated(() => {
 	if (!isScrolling) {
-		noteEl?.scrollIntoView();
+		noteEl.scrollIntoView();
+		if (location.hash) {
+			location.replace(location.hash); // Jump to highlighted reply
+		}
 	}
 });
 
@@ -366,80 +504,36 @@ onUnmounted(() => {
 		}
 	}
 
-	&:hover > .article > .main > .footer > .button {
-		opacity: 1;
-	}
 	> .reply-to {
 		margin-bottom: -16px;
 		padding-bottom: 16px;
 	}
 
-	> .renote {
+	> :deep(.note-container) {
-		display: flex;
+		padding-block: 28px 0;
-		align-items: center;
-		padding: 16px 32px 8px 32px;
-		line-height: 28px;
-		white-space: pre;
-		color: var(--renote);
-
-		> .avatar {
-			flex-shrink: 0;
-			display: inline-block;
-			width: 28px;
-			height: 28px;
-			margin: 0 8px 0 0;
-			border-radius: 6px;
-		}
-
-		> i {
-			margin-right: 4px;
-		}
-
-		> span {
-			overflow: hidden;
-			flex-shrink: 1;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-
-			> .name {
-				font-weight: bold;
-			}
-		}
-
-		> .info {
-			margin-left: auto;
-			font-size: 0.9em;
-
-			> .time {
-				flex-shrink: 0;
-				color: inherit;
-
-				> .dropdownIcon {
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-
-	> .renote + .article {
-		padding-top: 8px;
-	}
-
-	> .article {
-		padding-block: 28px 6px;
 		padding-top: 12px;
 		font-size: 1.1rem;
 		overflow: clip;
 		outline: none;
 		scroll-margin-top: calc(var(--stickyTop) + 20vh);
-		:deep(.article) {
+		.article {
 			cursor: unset;
+			padding-bottom: 0;
 		}
 		&:first-of-type {
 			padding-top: 28px;
 		}
 	}
 
+	> :deep(.chips) {
+		padding: 6px 32px 12px;
+	}
+	> :deep(.user-card-mini) {
+		padding-inline: 32px;
+		border-top: 1px solid var(--divider);
+		border-radius: 0;
+	}
+
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 		cursor: pointer;
@@ -510,6 +604,14 @@ onUnmounted(() => {
 		// 	}
 		// }
 	}
+	:deep(.reply:target > .main),
+	:deep(.reply-to:target) {
+		z-index: 2;
+		&::before {
+			outline: auto;
+			opacity: 1;
+		}
+	}
 
 	&.max-width_500px {
 		font-size: 0.9em;
@@ -518,46 +620,20 @@ onUnmounted(() => {
 		> .reply-to:first-child {
 			padding-top: 14px;
 		}
-		> .renote {
-			padding: 8px 16px 0 16px;
-		}
 
-		> .article {
+		> :deep(.note-container) {
 			padding: 6px 0 0 0;
 			> .header > .body {
 				padding-left: 10px;
 			}
 		}
-	}
+		> .clips, > .chips, > :deep(.user-card-mini) {
-
+			padding-inline: 16px !important;
-	&.max-width_350px {
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
 		}
 	}
 
 	&.max-width_300px {
 		font-size: 0.825em;
-
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
 	}
 }
 
@@ -566,4 +642,36 @@ onUnmounted(() => {
 	text-align: center;
 	opacity: 0.7;
 }
+
+.clips { // want to redesign at some point
+	padding: 24px 32px;
+	padding-top: 0;
+	> .item {
+		display: block;
+		padding: 16px;
+		// background: var(--buttonBg);
+		border: 1px solid var(--divider);
+		margin-bottom: var(--margin);
+		transition: background .2s;
+		&:hover, &:focus-within {
+			background: var(--panelHighlight);
+		}
+
+		> .description {
+			padding: 8px 0;
+		}
+
+		> .user {
+			$height: 32px;
+			padding-top: 16px;
+			border-top: solid 0.5px var(--divider);
+			line-height: $height;
+
+			> .avatar {
+				width: $height;
+				height: $height;
+			}
+		}
+	}
+}
 </style>

packages/client/src/components/MkNoteSub.vue

@@ -4,6 +4,8 @@
 		ref="el"
 		v-size="{ max: [450, 500] }"
 		class="wrpstxzv"
+		:id="detailedView ? appearNote.id : null"
+		tabindex="-1"
 		:class="{
 			children: depth > 1,
 			singleStart: replies.length == 1,
@@ -127,32 +129,19 @@
 			</div>
 		</div>
 		<template v-if="conversation">
-			<template v-if="replyLevel < 11 && depth < 5">
-				<template v-if="replies.length == 1">
-					<MkNoteSub
-						v-for="reply in replies"
-						:key="reply.id"
-						:note="reply"
-						class="reply single"
-						:conversation="conversation"
-						:depth="depth"
-						:replyLevel="replyLevel + 1"
-						:parentId="appearNote.replyId"
-					/>
-				</template>
-				<template v-else>
 			<MkNoteSub
+				v-if="replyLevel < 11 && depth < 5"
 				v-for="reply in replies"
 				:key="reply.id"
 				:note="reply"
 				class="reply"
+				:class="{single: replies.length == 1}"
 				:conversation="conversation"
-						:depth="depth + 1"
+				:depth="replies.lenght == 1 ? depth : depth + 1"
 				:replyLevel="replyLevel + 1"
 				:parentId="appearNote.replyId"
+				:detailedView="detailedView"
 			/>
-				</template>
-			</template>
 			<div v-else-if="replies.length > 0" class="more">
 				<div class="line"></div>
 				<MkA class="text _link" :to="notePage(note)"
@@ -212,6 +201,7 @@ const props = withDefaults(
 		note: misskey.entities.Note;
 		conversation?: misskey.entities.Note[];
 		parentId?;
+		detailedView?;
 
 		// how many notes are in between this one and the note being viewed in detail
 		depth?: number;
@@ -348,6 +338,7 @@ function noteClick(e) {
 <style lang="scss" scoped>
 .wrpstxzv {
 	padding: 16px 32px;
+	outline: none;
 	&.children {
 		padding: 10px 0 0 var(--indent);
 		padding-left: var(--indent) !important;

packages/client/src/components/MkRenoteButton.vue

@@ -7,7 +7,7 @@
 		@click="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
-		<p v-if="count > 0" class="count">{{ count }}</p>
+		<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>
 	</button>
 	<button v-else class="eddddedb _button">
 		<i class="ph-prohibit ph-bold ph-lg"></i>
@@ -30,6 +30,7 @@ import { MenuItem } from "@/types/menu";
 const props = defineProps<{
 	note: misskey.entities.Note;
 	count: number;
+	detailedView?;
 }>();
 
 const buttonRef = ref<HTMLElement>();

packages/client/src/components/MkSubNoteContent.vue

@@ -2,7 +2,8 @@
 	<p v-if="note.cw != null" class="cw">
 		<MkA
 			v-if="!detailed && note.replyId"
-			:to="`/notes/${note.replyId}`"
+			:to="`#${note.replyId}`"
+			behavior="browser"
 			class="reply-icon"
 			@click.stop
 		>
@@ -16,6 +17,7 @@
 				!note.replyId
 			"
 			:to="`/notes/${note.renoteId}`"
+			v-tooltip="i18n.ts.jumpToReply"
 			class="reply-icon"
 			@click.stop
 		>
@@ -66,7 +68,9 @@
 				<template v-if="!note.cw">
 					<MkA
 						v-if="!detailed && note.replyId"
-						:to="`/notes/${note.replyId}`"
+						:to="`#${note.replyId}`"
+						behavior="browser"
+						v-tooltip="i18n.ts.jumpToReply"
 						class="reply-icon"
 						@click.stop
 					>
@@ -135,6 +139,7 @@
 		<MkButton
 			v-if="hasMfm && defaultStore.state.animatedMfm"
 			@click.stop="toggleMfm"
+			:mini="true"
 		>
 			<template v-if="disableMfm">
 				<i class="ph-play ph-bold"></i> {{ i18n.ts._mfm.play }}

packages/client/src/components/MkTab.vue

@@ -6,6 +6,9 @@ export default defineComponent({
 		modelValue: {
 			required: true,
 		},
+		style: {
+			required: false,
+		},
 	},
 	render() {
 		const options = this.$slots.default();
@@ -13,22 +16,21 @@ export default defineComponent({
 		return h(
 			"div",
 			{
-				class: "pxhvhrfw",
+				class: [
+					"pxhvhrfw",
+					{ chips: this.style === "chips" },
+				],
+				role: "tablist",
 			},
 			options.map((option) =>
 				withDirectives(
 					h(
 						"button",
 						{
-							class: [
+							class: "_button",
-								"_button",
+							role: "tab",
-								{
-									active:
-										this.modelValue === option.props?.value,
-								},
-							],
 							key: option.key,
-							disabled: this.modelValue === option.props?.value,
+							'aria-selected': this.modelValue === option.props?.value ? "true" : "false",
 							onClick: () => {
 								this.$emit(
 									"update:modelValue",
@@ -64,12 +66,12 @@ export default defineComponent({
 			cursor: default;
 		}
 
-		&.active {
+		&[aria-selected="true"] {
 			color: var(--accent);
-			background: var(--accentedBg);
+			background: var(--accentedBg) !important;
 		}
 
-		&:not(.active):hover {
+		&:not([aria-selected="true"]):hover {
 			color: var(--fgHighlighted);
 			background: var(--panelHighlight);
 		}
@@ -83,6 +85,26 @@ export default defineComponent({
 		}
 	}
 
+	&.chips {
+		padding: 12px 32px;
+		font-size: .85em;
+		overflow-x: auto;
+		> button {
+			display: flex;
+			gap: 6px;
+			align-items: center;
+			flex: unset;
+			margin: 0;
+			margin-right: 8px;
+			padding: .5em 1em;
+			border-radius: 100px;
+			background: var(--buttonBg);
+			> i {
+				margin-top: -.1em;
+			}
+		}
+	}
+
 	&.max-width_500px {
 		font-size: 80%;
 

packages/client/src/components/MkUserCardMini.vue

@@ -1,9 +1,11 @@
 <template>
-	<div
+	<MkA
+		class="user-card-mini"
 		:class="[
 			$style.root,
 			{ yellow: user.isSilenced, red: user.isSuspended, gray: false },
 		]"
+		:to="userPage(user)"
 	>
 		<MkAvatar
 			class="avatar"
@@ -18,30 +20,37 @@
 			>
 		</div>
 		<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
-	</div>
+	</MkA>
 </template>
 
 <script lang="ts" setup>
 import * as misskey from "calckey-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
-import { acct } from "@/filters/user";
+import { acct, userPage } from "@/filters/user";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 		user: misskey.entities.User;
-}>();
+		withChart?: boolean;
+	}>(),
+	{
+		withChart: true,
+	}
+);
 
 let chartValues = $ref<number[] | null>(null);
 
-os.apiGet("charts/user/notes", {
+if (props.withChart) {
+	os.apiGet("charts/user/notes", {
 		userId: props.user.id,
 		limit: 16 + 1,
 		span: "day",
-}).then((res) => {
+	}).then((res) => {
 		// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 		res.inc.splice(0, 1);
 		chartValues = res.inc;
-});
+	});
+}
 </script>
 
 <style lang="scss" module>
@@ -54,6 +63,7 @@ os.apiGet("charts/user/notes", {
 	padding: 16px;
 	background: var(--panel);
 	border-radius: 8px;
+	transition: background .2s;
 
 	> :global(.avatar) {
 		display: block;
@@ -94,6 +104,10 @@ os.apiGet("charts/user/notes", {
 		height: 30px;
 	}
 
+	&:hover, &:focus {
+		background: var(--panelHighlight);
+	}
+
 	&:global(.yellow) {
 		--c: rgb(255 196 0 / 15%);
 		background-image: linear-gradient(

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

@@ -2,9 +2,8 @@
 	<a
 		:href="to"
 		:class="active ? activeClass : null"
-		@click="nav"
 		@contextmenu.prevent.stop="onContextmenu"
-		@click.stop
+		@click.stop="nav"
 	>
 		<slot></slot>
 	</a>
@@ -99,13 +98,9 @@ function popout() {
 }
 
 function nav(ev: MouseEvent) {
-	if (!ev.ctrlKey) {
+	if (!ev.ctrlKey && props.behavior !== "browser") {
-		ev.preventDefault();
 
-		if (props.behavior === "browser") {
+		ev.preventDefault();
-			location.href = props.to;
-			return;
-		}
 
 		if (props.behavior) {
 			if (props.behavior === "window") {

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

@@ -139,6 +139,7 @@ const props = defineProps<{
 	thin?: boolean;
 	displayMyAvatar?: boolean;
 	displayBackButton?: boolean;
+	to?: string;
 }>();
 
 const emit = defineEmits<{
@@ -193,7 +194,11 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
+	if (props.to) {
+		location.href = props.to;
+	} else {
 		scrollToTop(el, { behavior: "smooth" });
+	}
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {

packages/client/src/pages/note.vue

@@ -5,6 +5,7 @@
 				:actions="headerActions"
 				:tabs="headerTabs"
 				:display-back-button="true"
+				:to="`#${noteId}`"
 		/></template>
 		<MkSpacer :content-max="800" :marginMin="6">
 			<div class="fcuexfpr">
@@ -26,6 +27,7 @@
 								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>
 							<div class="note _gap">
@@ -39,41 +41,11 @@
 									class="note"
 								/>
 							</div>
-							<div
-								v-if="clips && clips.length > 0"
-								class="_content clips _gap"
-							>
-								<div class="title">{{ i18n.ts.clip }}</div>
-								<MkA
-									v-for="item in clips"
-									:key="item.id"
-									:to="`/clips/${item.id}`"
-									class="item _panel _gap"
-								>
-									<b>{{ item.name }}</b>
-									<div
-										v-if="item.description"
-										class="description"
-									>
-										{{ item.description }}
-									</div>
-									<div class="user">
-										<MkAvatar
-											:user="item.user"
-											class="avatar"
-											:show-indicator="true"
-										/>
-										<MkUserName
-											:user="item.user"
-											:nowrap="false"
-										/>
-									</div>
-								</MkA>
-							</div>
 							<MkButton
 								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>
 						</div>
@@ -111,7 +83,6 @@ const props = defineProps<{
 }>();
 
 let note = $ref<null | misskey.entities.Note>();
-let clips = $ref();
 let hasPrev = $ref(false);
 let hasNext = $ref(false);
 let showPrev = $ref(false);
@@ -157,9 +128,6 @@ function fetchNote() {
 		.then((res) => {
 			note = res;
 			Promise.all([
-				os.api("notes/clips", {
-					noteId: note.id,
-				}),
 				os.api("users/notes", {
 					userId: note.userId,
 					untilId: note.id,
@@ -170,8 +138,7 @@ function fetchNote() {
 					sinceId: note.id,
 					limit: 1,
 				}),
-			]).then(([_clips, prev, next]) => {
+			]).then(([prev, next]) => {
-				clips = _clips;
 				hasPrev = prev.length !== 0;
 				hasNext = next.length !== 0;
 			});
@@ -193,7 +160,7 @@ definePageMetadata(
 	computed(() =>
 		note
 			? {
-					title: i18n.ts.note,
+					title: i18n.t("noteOf", { user: note.user.name }),
 					subtitle: new Date(note.createdAt).toLocaleString(),
 					avatar: note.user,
 					path: `/notes/${note.id}`,
@@ -244,34 +211,6 @@ definePageMetadata(
 					background: var(--panel);
 				}
 			}
-
-			> .clips {
-				> .title {
-					font-weight: bold;
-					padding: 12px;
-				}
-
-				> .item {
-					display: block;
-					padding: 16px;
-
-					> .description {
-						padding: 8px 0;
-					}
-
-					> .user {
-						$height: 32px;
-						padding-top: 16px;
-						border-top: solid 0.5px var(--divider);
-						line-height: $height;
-
-						> .avatar {
-							width: $height;
-							height: $height;
-						}
-					}
-				}
-			}
 		}
 	}
 }