From 178d80a87234b3f9e3b97b6f9cff907ccfc56769 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Wed, 9 Jul 2025 23:24:52 +0200
Subject: [PATCH] feat: scroll to main on breadcrumb link

---
 src/components/FluxNote.vue                 |  8 +++++--
 src/components/StackedNote.vue              | 12 -----------
 src/hooks/useRouteQueryStackedNotes.hook.ts | 24 ++++++++++++++-------
 src/styles/app.css                          | 12 +++++++++++
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 78d8e42..924c156 100644
--- a/src/components/FluxNote.vue
+++ b/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">
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index e60f7cf..c583a88 100644
--- a/src/components/StackedNote.vue
+++ b/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);
diff --git a/src/hooks/useRouteQueryStackedNotes.hook.ts b/src/hooks/useRouteQueryStackedNotes.hook.ts
index af6c4ff..848272e 100644
--- a/src/hooks/useRouteQueryStackedNotes.hook.ts
+++ b/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
-        const top = (index + 1) * (element?.clientHeight ?? height.value)
-        scrollToNote(top)
+        if (sha) {
+          const element = document.querySelector(`.note-${sha}`) as HTMLElement
+          const top = (index + 1) * (element?.clientHeight ?? height.value)
+          scrollToNote(top)
+        } else {
+          scrollToNote(0)
+        }
       } else {
-        const margin = index * 44
-        const left = (index + 1) * NOTE_WIDTH - margin
-        scrollToNote(left)
+        if (sha) {
+          const margin = index * 44
+          const left = (index + 1) * NOTE_WIDTH - margin
+          scrollToNote(left)
+        } else {
+          scrollToNote(0)
+        }
       }
     })
   }
diff --git a/src/styles/app.css b/src/styles/app.css
index 781b653..a3db204 100644
--- a/src/styles/app.css
+++ b/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;