feat(notes): scroll to the last stacked note on page load
All checks were successful
CI / verify (push) Successful in 1m5s
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:
@@ -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()
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user