From 049ce01ab57d434cd0eaa5206848cad346d7177e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Wed, 8 Jul 2026 00:30:56 +0200
Subject: [PATCH] feat(notes): scroll to the last stacked note on page load
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shared links with stackedNotes landed on the readme, forcing readers to
scroll past every note to reach the one that matters — especially long
on mobile where notes stack vertically.
---
 src/components/FluxNote.vue                 |  8 ++++++--
 src/hooks/useRouteQueryStackedNotes.hook.ts | 13 ++++++++++++-
 src/views/PublicNoteView.vue                |  9 +++++++--
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index cf31bad..7a0435b 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -43,7 +43,8 @@ useUserSettings()
 const { visitRepo } = useVisitRepo({ user: user, repo: repo })
 const { toHTML } = markdownBuilder(repo)
 const { listenToClick } = useLinks("note-display")
-const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()
+const { stackedNotes, scrollToFocusedNote, scrollToLastStackedNote } =
+  useRouteQueryStackedNotes()
 
 const { titles } = useNoteView()
 const { isLogged } = useGitHubLogin()
@@ -78,7 +79,10 @@ const retryLoad = () => {
   store.setUserRepo(props.user, props.repo)
 }
 
-onMounted(() => visitRepo())
+onMounted(() => {
+  visitRepo()
+  scrollToLastStackedNote()
+})
 
 onUnmounted(() => {
   store.resetFiles()
diff --git a/src/hooks/useRouteQueryStackedNotes.hook.ts b/src/hooks/useRouteQueryStackedNotes.hook.ts
index 1bd8d18..ea7a33f 100644
--- a/src/hooks/useRouteQueryStackedNotes.hook.ts
+++ b/src/hooks/useRouteQueryStackedNotes.hook.ts
@@ -111,6 +111,16 @@ export const useRouteQueryStackedNotes = () => {
     })
   }
 
+  // Focus the deepest note when opening a shared link with stacked notes,
+  // instead of landing on the readme and forcing a manual scroll (especially
+  // long on mobile where notes stack vertically).
+  const scrollToLastStackedNote = () => {
+    const lastNote = stackedNotes.value.at(-1)
+    if (lastNote) {
+      scrollToFocusedNote({ noteId: lastNote })
+    }
+  }
+
   const addStackedNote = (
     currentSha: string,
     sha: string,
@@ -168,6 +178,7 @@ export const useRouteQueryStackedNotes = () => {
     stackedNotes: readonly(stackedNotes),
     addStackedNote,
     replaceStackedNote,
-    scrollToFocusedNote
+    scrollToFocusedNote,
+    scrollToLastStackedNote
   }
 }
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index bd5c399..0919bd5 100644
--- a/src/views/PublicNoteView.vue
+++ b/src/views/PublicNoteView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computedAsync } from "@vueuse/core"
 import { useTitle } from "@vueuse/core"
-import { computed, ref, watch } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import { useRouter } from "vue-router"
 
 import HomeButton from "@/components/HomeButton.vue"
@@ -112,10 +112,15 @@ const language = computed(() =>
 
 const mainNoteId = computed(() => `${props.shortDid}-${props.rkey}`)
 
-const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()
+const { stackedNotes, scrollToFocusedNote, scrollToLastStackedNote } =
+  useRouteQueryStackedNotes()
 const { listenToClick } = useATProtoLinks("note-display", { mainNoteId })
 useResizeContainer("note-container", stackedNotes)
 
+onMounted(() => {
+  scrollToLastStackedNote()
+})
+
 useMarkdownPostRender(content, () => ".public-note-view .note-display", {
   onReady: () => listenToClick(),
   tikz: true,