Jump to Reply + other note page improvmeents

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/MkNoteDetailed.vue

@@ -15,20 +15,22 @@
 			: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">
+		<div ref="noteEl" class="article" tabindex="-1" :id="appearNote.id">
 			<MkNote
 				@contextmenu.stop="onContextmenu"
 				tabindex="-1"
 				:note="appearNote"
-				:detailedView="true"
+				detailedView
 			></MkNote>
 		</div>
 
@@ -39,6 +41,7 @@
 			:note="note"
 			class="reply"
 			:conversation="replies"
+			:detailedView="true"
 		/>
 		<MkLoading v-else-if="appearNote.repliesCount > 0" />
 	</div>
@@ -329,6 +332,9 @@ onMounted(() => {
 onUpdated(() => {
 	if (!isScrolling) {
 		noteEl?.scrollIntoView();
+		if (location.hash) {
+			location.replace(location.hash); // Jump to highlighted reply
+		}
 	}
 });
 
@@ -510,6 +516,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;

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,
@@ -138,6 +140,7 @@
 						:depth="depth"
 						:replyLevel="replyLevel + 1"
 						:parentId="appearNote.replyId"
+						:detailedView="detailedView"
 					/>
 				</template>
 				<template v-else>
@@ -150,6 +153,7 @@
 						:depth="depth + 1"
 						:replyLevel="replyLevel + 1"
 						:parentId="appearNote.replyId"
+						:detailedView="detailedView"
 					/>
 				</template>
 			</template>
@@ -212,6 +216,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 +353,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/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
 		>
@@ -60,7 +62,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
 					>

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) {
-		ev.preventDefault();
+	if (!ev.ctrlKey && props.behavior !== "browser") {
 
-		if (props.behavior === "browser") {
-			location.href = props.to;
-			return;
-		}
+		ev.preventDefault();
 
 		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,7 +27,7 @@
 								v-if="!showNext && hasNext"
 								class="load next"
 								@click="showNext = true"
-								v-tooltip="i18n.ts.loadMore"
+								v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.newer})`"
 								><i class="ph-caret-up ph-bold ph-lg"></i
 							></MkButton>
 							<div class="note _gap">
@@ -75,7 +76,7 @@
 								v-if="!showPrev && hasPrev"
 								class="load prev"
 								@click="showPrev = true"
-								v-tooltip="i18n.ts.loadMore"
+								v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.older})`"
 								><i class="ph-caret-down ph-bold ph-lg"></i
 							></MkButton>
 						</div>
@@ -219,6 +220,10 @@ definePageMetadata(
 	opacity: 0;
 }
 
+:global(html, body) {
+	scroll-behavior: smooth;
+}
+
 .fcuexfpr {
 	#calckey_app > :not(.wallpaper) & {
 		background: var(--bg);