From f2c36336ec0dcee8691d8b86507871b2ee371985 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Thu, 25 Mar 2021 21:24:31 +0100
Subject: [PATCH] =?UTF-8?q?:lipstick:=20(repo=20title)=20display=20repo=20?=
 =?UTF-8?q?title=20in=20breadcru=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FluxNote.vue | 23 +++++++++++++++++++++++
 src/hooks/useFocus.hook.ts  |  2 ++
 2 files changed, 25 insertions(+)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 6a232ec..bac433b 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -2,6 +2,9 @@
   <div class="flux-note content note-container">
     <div class="note readme">
       <header-note class="header" :user="user" :repo="repo" />
+      <div class="repo-title-breadcrumb">
+        <a @click.prevent="focus">{{ repo }}</a>
+      </div>
       <div class="repo-title">
         <h1 class="title is-1">
           [<router-link
@@ -48,6 +51,7 @@ import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
+import { useFocus } from '@/hooks/useFocus.hook'
 
 const StackedNote = defineAsyncComponent(() =>
   import('@/components/StackedNote.vue')
@@ -71,6 +75,7 @@ export default defineComponent({
     const { renderString } = useMarkdown()
     const { listenToClick } = useLinks('note-display')
     const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
+    const { scrollToFocusedNote } = useFocus()
 
     const { ...noteProps } = useNote('note-container')
 
@@ -108,6 +113,7 @@ export default defineComponent({
       stackedNotes,
       resetStackedNotes,
       userSettings: computed(() => store.userSettings),
+      focus: () => scrollToFocusedNote(),
       ...noteProps
     }
   }
@@ -156,6 +162,18 @@ $header-height: 40px;
   }
 
   @media screen and (min-width: 769px) {
+    .repo-title-breadcrumb {
+      padding: 0 1rem;
+      transform-origin: 0 0;
+      transform: rotate(90deg);
+
+      a {
+        color: #363636;
+        display: block;
+        text-align: center;
+      }
+    }
+
     .note {
       min-width: 620px;
       max-width: 620px;
@@ -171,5 +189,10 @@ $header-height: 40px;
       width: 100vw;
     }
   }
+
+  .repo-title-breadcrumb {
+    display: none;
+    visibility: hidden;
+  }
 }
 </style>
diff --git a/src/hooks/useFocus.hook.ts b/src/hooks/useFocus.hook.ts
index f51deb3..6099971 100644
--- a/src/hooks/useFocus.hook.ts
+++ b/src/hooks/useFocus.hook.ts
@@ -11,8 +11,10 @@ export const useFocus = () => {
 
   const scrollToFocusedNote = (sha?: string) => {
     if (!sha) {
+      scrollToNote(0)
       return
     }
+
     nextTick(() => {
       const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha)