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