feat: scroll to main on breadcrumb link

src/components/FluxNote.vue

@@ -52,7 +52,7 @@ useUserSettings()
 const { visitRepo } = useVisitRepo({ user: user, repo: repo })
 const { toHTML } = useMarkdown(repo)
 const { listenToClick } = useLinks("note-display")
-const { stackedNotes } = useRouteQueryStackedNotes()
+const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()
 
 const { titles } = useNoteView("note-container")
 
@@ -96,7 +96,11 @@ onUnmounted(() => {
     <div class="note readme">
       <header-note v-if="withHeader" class="header" :user="user" :repo="repo" />
       <div class="repo-title-breadcrumb">
-        {{ repo }}
+        <a
+          class="title-stacked-note-link"
+          @click.prevent="scrollToFocusedNote()"
+          >{{ repo }}</a
+        >
       </div>
       <div class="repo-title">
         <div class="repo-header">

src/components/StackedNote.vue

@@ -266,18 +266,6 @@ $border-color: rgba(18, 19, 58, 0.2);
   right: 1rem;
 }
 
-a.title-stacked-note-link {
-  color: var(--color-base-content);
-  display: block;
-  text-decoration: none;
-  position: sticky;
-  top: 0;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
 .title-stacked-note {
   background-color: var(--color-base-100);
   color: var(--color-base-content);

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -20,20 +20,28 @@ export const useRouteQueryStackedNotes = () => {
   const { scrollToNote, isMobile } = useOverlay(false)
 
   const scrollToFocusedNote = (
-    sha: string,
+    sha: string | null = null,
     notes: string[] = stackedNotes.value,
   ) => {
     nextTick(() => {
-      const index = notes.findIndex((noteSHA) => noteSHA === sha)
+      const index = sha ? notes.findIndex((noteSHA) => noteSHA === sha) : 0
 
       if (isMobile.value) {
-        const element = document.querySelector(`.note-${sha}`) as HTMLElement
+        if (sha) {
-        const top = (index + 1) * (element?.clientHeight ?? height.value)
+          const element = document.querySelector(`.note-${sha}`) as HTMLElement
-        scrollToNote(top)
+          const top = (index + 1) * (element?.clientHeight ?? height.value)
+          scrollToNote(top)
+        } else {
+          scrollToNote(0)
+        }
       } else {
-        const margin = index * 44
+        if (sha) {
-        const left = (index + 1) * NOTE_WIDTH - margin
+          const margin = index * 44
-        scrollToNote(left)
+          const left = (index + 1) * NOTE_WIDTH - margin
+          scrollToNote(left)
+        } else {
+          scrollToNote(0)
+        }
       }
     })
   }

src/styles/app.css

@@ -91,6 +91,18 @@ a {
   }
 }
 
+a.title-stacked-note-link {
+  color: var(--color-base-content);
+  display: block;
+  text-decoration: none;
+  position: sticky;
+  top: 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .notyf__toast {
   border-radius: revert-layer;
   border: none;