From 32f60f9969047413f850c80403daedf80e7adb69 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 3 Jan 2024 11:37:50 +0100
Subject: [PATCH 1/6] Bring renote indicator closer to note (like Firefish)

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

diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index b98e20bad6..fdf11c4f56 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -894,7 +894,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	position: relative;
 	display: flex;
 	align-items: center;
-	padding: 24px 32px 16px calc(32px + var(--avatar) + 14px);
+	padding: 24px 32px 0 calc(32px + var(--avatar) + 14px);
 	line-height: 28px;
 	white-space: pre;
 	color: var(--renote);

From 43b3b5a34b164bda15c178cd0b39a5d073a2d5a9 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 3 Jan 2024 13:52:46 +0100
Subject: [PATCH 2/6] Ported Firefish's note focus behavior

---
 packages/frontend/src/components/SkNote.vue   | 12 +++-
 .../src/components/SkNoteDetailed.vue         | 58 +++++++++++++++++--
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index fdf11c4f56..b5b23386e7 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -776,6 +776,10 @@ function focusAfter() {
 	focusNext(el.value);
 }
 
+function scrollIntoView() {
+	el.value.scrollIntoView();
+}
+
 function readPromo() {
 	os.api('promo/read', {
 		noteId: appearNote.value.id,
@@ -790,6 +794,12 @@ function emitUpdReaction(emoji: string, delta: number) {
 		emit('reaction', emoji);
 	}
 }
+
+defineExpose({
+	focus,
+	blur,
+	scrollIntoView,
+});
 </script>
 
 <style lang="scss" module>
@@ -824,7 +834,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 			margin: auto;
 			width: calc(100% - 8px);
 			height: calc(100% - 8px);
-			border: dashed 1px var(--focus);
+			border: solid 1px var(--focus);
 			border-radius: var(--radius);
 			box-sizing: border-box;
 		}
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index ca3e8ca3f7..3087eee164 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
 	</template>
 	<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
-	<article :class="$style.note" @contextmenu.stop="onContextmenu">
+	<article ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
 			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
 			<div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;">
@@ -228,7 +228,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, provide, ref, shallowRef, watch } from 'vue';
+import { computed, inject, onMounted, onUnmounted, onUpdated, provide, ref, shallowRef, watch } from 'vue';
 import * as mfm from '@sharkey/sfm-js';
 import * as Misskey from 'misskey-js';
 import SkNoteSub from '@/components/SkNoteSub.vue';
@@ -301,6 +301,7 @@ const isRenote = (
 );
 
 const el = shallowRef<HTMLElement>();
+const noteEl = shallowRef<HTMLElement>();
 const menuButton = shallowRef<HTMLElement>();
 const menuVersionsButton = shallowRef<HTMLElement>();
 const renoteButton = shallowRef<HTMLElement>();
@@ -731,11 +732,11 @@ function showRenoteMenu(viaKeyboard = false): void {
 }
 
 function focus() {
-	el.value.focus();
+	noteEl.value?.focus();
 }
 
 function blur() {
-	el.value.blur();
+	noteEl.value?.blur();
 }
 
 const repliesLoaded = ref(false);
@@ -776,6 +777,7 @@ function loadConversation() {
 		noteId: appearNote.value.replyId,
 	}).then(res => {
 		conversation.value = res.reverse();
+		focus();
 	});
 }
 
@@ -792,6 +794,31 @@ function animatedMFM() {
 		}).then((res) => { if (!res.canceled) allowAnim.value = true; });
 	}
 }
+
+let isScrolling = false;
+
+function setScrolling() {
+	isScrolling = true;
+}
+
+onMounted(() => {
+	document.addEventListener('wheel', setScrolling);
+	isScrolling = false;
+	noteEl.value?.scrollIntoView({ block: 'center' });
+});
+
+onUpdated(() => {
+	if (!isScrolling) {
+		noteEl.value?.scrollIntoView({ block: 'center' });
+		if (location.hash) {
+			location.replace(location.hash); // Jump to highlighted reply
+		}
+	}
+});
+
+onUnmounted(() => {
+	document.removeEventListener('wheel', setScrolling);
+});
 </script>
 
 <style lang="scss" module>
@@ -863,6 +890,7 @@ function animatedMFM() {
 }
 
 .note {
+	position: relative;
 	padding: 32px;
 	font-size: 1.2em;
 	overflow: hidden;
@@ -870,6 +898,28 @@ function animatedMFM() {
 	&:hover > .main > .footer > .button {
 		opacity: 1;
 	}
+
+	&:focus-visible {
+		outline: none;
+
+		&:after {
+			content: "";
+			pointer-events: none;
+			display: block;
+			position: absolute;
+			z-index: 10;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+			border: solid 1px var(--focus);
+			border-radius: var(--radius);
+			box-sizing: border-box;
+		}
+	}
 }
 
 .noteHeader {

From 1ca0cd727e3fc14e88f4cc2c60472a2616bf9efa Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 3 Jan 2024 14:42:51 +0100
Subject: [PATCH 3/6] Hover effect for conversation notes (like Firefish)

---
 .../src/components/SkNoteDetailed.vue         |  2 +-
 .../frontend/src/components/SkNoteSub.vue     | 21 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 3087eee164..4a06e8f56a 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<SkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
 	</template>
 	<SkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
-	<article ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
+	<article :id="appearNote.id" ref="noteEl" :class="$style.note" tabindex="-1" @contextmenu.stop="onContextmenu">
 		<header :class="$style.noteHeader">
 			<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
 			<div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;">
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 79e171f34c..c0c50670d1 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -461,7 +461,26 @@ if (props.detail) {
 }
 
 .main {
-	display: flex;
+	position: relative;
+	display:  flex;
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: -12px;
+		right: -12px;
+		left: -12px;
+		bottom: -12px;
+		background: var(--panelHighlight);
+		border-radius: var(--radius);
+		opacity: 0;
+		transition: opacity .2s, background .2s;
+		z-index: -1;
+	}
+	
+	&:hover::after {
+		opacity: 1;
+	}
 }
 
 .colorBar {

From 96df8c25defce6314066709452708c35062bf85a Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 3 Jan 2024 16:22:36 +0100
Subject: [PATCH 4/6] Show conversation note hover effect on focus

---
 packages/frontend/src/components/SkNoteSub.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index c0c50670d1..8b3ced3761 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -478,7 +478,8 @@ if (props.detail) {
 		z-index: -1;
 	}
 	
-	&:hover::after {
+	&:hover::after,
+	&:focus-within::after {
 		opacity: 1;
 	}
 }

From 8e9bf67d9a755703837040209990b178bb4c3c68 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 3 Jan 2024 16:23:02 +0100
Subject: [PATCH 5/6] Restore scroll position on navigation

---
 packages/frontend/src/nirax.ts  |  4 ++--
 packages/frontend/src/router.ts | 37 +++++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
index 9755bdcb18..9564a754f0 100644
--- a/packages/frontend/src/nirax.ts
+++ b/packages/frontend/src/nirax.ts
@@ -78,7 +78,7 @@ export class Router extends EventEmitter<{
 	public current: Resolved;
 	public currentRef: ShallowRef<Resolved> = shallowRef();
 	public currentRoute: ShallowRef<RouteDef> = shallowRef();
-	private currentPath: string;
+	private currentPath = '';
 	private isLoggedIn: boolean;
 	private notFoundPageComponent: Component;
 	private currentKey = Date.now().toString();
@@ -89,7 +89,7 @@ export class Router extends EventEmitter<{
 		super();
 
 		this.routes = routes;
-		this.currentPath = currentPath;
+		//this.currentPath = currentPath;
 		this.isLoggedIn = isLoggedIn;
 		this.notFoundPageComponent = notFoundPageComponent;
 		this.navigate(currentPath, null, false);
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index b861afa9a3..5c01a79a27 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -545,12 +545,49 @@ export const mainRouter = new Router(routes, location.pathname + location.search
 
 window.history.replaceState({ key: mainRouter.getCurrentKey() }, '', location.href);
 
+const scrollPosStore = new Map<string, number>();
+let restoring = false;
+
+window.setInterval(() => {
+	if (!restoring) {
+		console.log('#########', window.history.state);
+		scrollPosStore.set(window.history.state?.key, window.scrollY);
+	}
+}, 1000);
+
 mainRouter.addListener('push', ctx => {
 	window.history.pushState({ key: ctx.key }, '', ctx.path);
+
+	restoring = true;
+	const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
+	window.scroll({ top: scrollPos, behavior: 'instant' });
+
+	if (scrollPos !== 0) {
+		window.setTimeout(() => {
+			// 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+			window.scroll({ top: scrollPos, behavior: 'instant' });
+		}, 100);
+		restoring = false;
+	} else {
+		restoring = false;
+	}
+});
+
+mainRouter.addListener('same', () => {
+	window.scroll({ top: 0, behavior: 'smooth' });
 });
 
 window.addEventListener('popstate', (event) => {
 	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key);
+
+	restoring = true;
+	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
+	window.scroll({ top: scrollPos, behavior: 'instant' });
+	window.setTimeout(() => {
+		// 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+		window.scroll({ top: scrollPos, behavior: 'instant' });
+		restoring = false;
+	}, 100);
 });
 
 export function useRouter(): Router {

From 9e089da2ed809e1f268606d13c065c4f41d76792 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 3 Jan 2024 16:26:38 +0100
Subject: [PATCH 6/6] Remove leftover console.log

---
 packages/frontend/src/router.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index 5c01a79a27..f12f7bde79 100644
--- a/packages/frontend/src/router.ts
+++ b/packages/frontend/src/router.ts
@@ -550,7 +550,6 @@ let restoring = false;
 
 window.setInterval(() => {
 	if (!restoring) {
-		console.log('#########', window.history.state);
 		scrollPosStore.set(window.history.state?.key, window.scrollY);
 	}
 }, 1000);