From db38eaf6391e948c352d6e8759605d017471a640 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Wed, 19 Jul 2023 17:25:44 +0200
Subject: [PATCH 1/6] scope use links

---
 src/components/StackedNote.vue | 2 +-
 src/hooks/useLinks.hook.ts     | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 79f959c..1142d84 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -24,8 +24,8 @@ const props = defineProps<{
 
 const { scrollToFocusedNote } = useQueryStackedNotes()
 const { content } = useFile(props.sha)
-const { listenToClick } = useLinks('stacked-note', props.sha)
 const className = computed(() => `stacked-note-${props.index}`)
+const { listenToClick } = useLinks(className.value, props.sha)
 const titleClassName = computed(() => `title-${className.value}`)
 useTitleNotes(props.repo)
 
diff --git a/src/hooks/useLinks.hook.ts b/src/hooks/useLinks.hook.ts
index d3b2b50..d21fde4 100644
--- a/src/hooks/useLinks.hook.ts
+++ b/src/hooks/useLinks.hook.ts
@@ -1,9 +1,12 @@
 import { noteEventBus } from '@/bus/noteEventBus'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { isExternalLink } from '@/utils/link'
-import { onUnmounted } from 'vue'
+import { ComputedRef, onUnmounted, toValue } from 'vue'
 
-export const useLinks = (className: string, sha?: string) => {
+export const useLinks = (
+  className: ComputedRef<string> | string,
+  sha?: string
+) => {
   const store = useUserRepoStore()
 
   const linkNote: EventListener = (event) => {
@@ -34,7 +37,7 @@ export const useLinks = (className: string, sha?: string) => {
     })
   }
 
-  const selector = `.${className} a`
+  const selector = `.${toValue(className)} a`
 
   const removeListeners = () => {
     const elements = document.querySelectorAll(selector)

From c45629a4089e987db2bbaa11b69f20210ce15d52 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 20 Jul 2023 09:27:38 +0200
Subject: [PATCH 2/6] Update app.scss

---
 src/styles/app.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 28da44a..32338af 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&family=Domine&family=Amiri&display=swap&family=Montagu+Slab&family=Gowun+Batang&family=Cormorant+Garamond&family=forum');
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&family=Domine&family=Amiri&display=swap&family=Montagu+Slab&family=Gowun+Batang&family=Cormorant+Garamond&family=Forum');
 
 /**
   font-family: 'Courgette', cursive;
@@ -113,4 +113,4 @@ pre {
 
 code {
   font-family: var(--font-family);
-}
\ No newline at end of file
+}

From 06257476380632020f53d39e980b033a2fe10f88 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 20 Jul 2023 10:31:41 +0200
Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=F0=9F=90=9B=20note?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

set the right padding to see the scroll indicator and no titles with
justified text
---
 src/components/FluxNote.vue    | 10 +++++++++-
 src/components/StackedNote.vue |  4 +++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index 9edd194..e677fe5 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -184,7 +184,11 @@ $header-height: 40px;
 
     .repo-title {
       margin-top: 1rem;
-      text-align: center;
+
+      .title,
+      .subtitle {
+        text-align: center;
+      }
     }
   }
 
@@ -203,6 +207,10 @@ $header-height: 40px;
     &:not(:first-child) {
       border-top: 1px solid rgba(18, 19, 58, 0.2);
     }
+
+    .title {
+      text-align: left;
+    }
   }
 
   @media screen and (min-width: 769px) {
diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 1142d84..beb466a 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -125,7 +125,7 @@ $border-color: rgba(18, 19, 58, 0.2);
 
 @media screen and (max-width: 768px) {
   .stacked-note {
-    padding: 0 1.5rem;
+    padding: 0 0.5rem 1rem;
 
     .title-stacked-note {
       padding: 0.5rem 0 0;
@@ -137,6 +137,8 @@ $border-color: rgba(18, 19, 58, 0.2);
     }
 
     .note-content {
+      padding: 0 1.5rem;
+
       .table {
         overflow-x: auto;
       }

From 793a45e3df10d21848f65a28fb00276569cd6e17 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 20 Jul 2023 12:51:00 +0200
Subject: [PATCH 4/6] extract loading in a component

---
 src/components/FluxNote.vue    | 20 ++------------------
 src/components/LiteLoading.vue | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 src/components/LiteLoading.vue

diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue
index e677fe5..1657b62 100644
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import LiteLoading from '@/components/LiteLoading.vue'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNote } from '@/hooks/useNote.hook'
@@ -111,13 +112,7 @@ const focus = () => scrollToFocusedNote(undefined, true)
         </h4>
       </div>
       <slot />
-      <div v-if="isLoading" class="loading">
-        <img
-          class="is-loading"
-          src="@/assets/icons/loading.svg"
-          alt="loading..."
-        />
-      </div>
+      <lite-loading v-if="isLoading" />
       <div v-else-if="!hasContent">No content here 📝</div>
       <p
         v-else-if="withContent"
@@ -232,17 +227,6 @@ $header-height: 40px;
       max-width: var(--note-width);
     }
   }
-
-  .loading {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    .is-loading {
-      animation: spinAround 0.8s infinite linear;
-    }
-  }
 }
 
 @media print, screen and (max-width: 768px) {
diff --git a/src/components/LiteLoading.vue b/src/components/LiteLoading.vue
new file mode 100644
index 0000000..d90a74a
--- /dev/null
+++ b/src/components/LiteLoading.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="lite-loading">
+    <img class="is-loading" src="@/assets/icons/loading.svg" alt="loading..." />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.lite-loading {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  .is-loading {
+    animation: spinAround 0.8s infinite linear;
+  }
+}
+</style>

From bd4cfc1edaa426d469eead390c123b45e16bc273 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 20 Jul 2023 12:51:08 +0200
Subject: [PATCH 5/6] display loading when reloading

---
 src/components/NewVersion.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/NewVersion.vue b/src/components/NewVersion.vue
index 5b8b963..39e547c 100644
--- a/src/components/NewVersion.vue
+++ b/src/components/NewVersion.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import LiteLoading from '@/components/LiteLoading.vue'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 import { ref } from 'vue'
 
 const devMode = ref(import.meta.env.DEV)
+const isLoading = ref(false)
 const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
 
 const close = async () => {
@@ -10,6 +12,11 @@ const close = async () => {
   needRefresh.value = false
   devMode.value = false
 }
+
+const reload = () => {
+  isLoading.value = true
+  updateServiceWorker()
+}
 </script>
 
 <template>
@@ -25,12 +32,9 @@ const close = async () => {
       </span>
     </div>
     <div class="buttons">
-      <button
-        class="button is-primary"
-        v-if="needRefresh"
-        @click="updateServiceWorker()"
-      >
-        Reload
+      <button class="button is-primary" v-if="needRefresh" @click="reload">
+        <LiteLoading v-if="isLoading" />
+        <span v-else>Reload</span>
       </button>
       <button class="button" @click="close">Close</button>
     </div>

From a741c7e1ebfa339059f102463007da0947075163 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 21 Jul 2023 18:28:48 +0200
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20stacked=20notes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

remove top padding
---
 src/components/StackedNote.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index beb466a..9457460 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -81,7 +81,7 @@ const focus = () => scrollToFocusedNote(props.sha)
 $border-color: rgba(18, 19, 58, 0.2);
 
 .stacked-note {
-  padding: 1rem 1.5rem;
+  padding: 0 1.5rem 1rem;
   background-color: var(--background-color);
 
   transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;