feat(notes): scroll to the last stacked note on page load
All checks were successful
CI / verify (push) Successful in 1m5s

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.
This commit is contained in:
Julien Calixte
2026-07-08 00:30:56 +02:00
parent f9906cba30
commit 049ce01ab5
3 changed files with 25 additions and 5 deletions

View File

@@ -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()

View File

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

View File

@@ -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,