From 23342ead0e59a920bdf7defe73e243ef8f412f3b Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 28 Mar 2021 10:44:56 +0200
Subject: [PATCH 1/2] :sparkles: (new version) display button if there is a new
 version.

---
 src/bus/busEvent.ts                          |  3 --
 src/bus/{noteBusEvent.ts => noteEventBus.ts} |  0
 src/bus/serviceWorkerEventBus.ts             |  3 ++
 src/components/NewVersion.vue                | 32 ++++++++++++++++++++
 src/hooks/useLinks.hook.ts                   |  2 +-
 src/hooks/useNote.hook.ts                    |  2 +-
 src/registerServiceWorker.ts                 |  5 ++-
 src/views/Home.vue                           | 11 ++++++-
 8 files changed, 49 insertions(+), 9 deletions(-)
 delete mode 100644 src/bus/busEvent.ts
 rename src/bus/{noteBusEvent.ts => noteEventBus.ts} (100%)
 create mode 100644 src/bus/serviceWorkerEventBus.ts
 create mode 100644 src/components/NewVersion.vue

diff --git a/src/bus/busEvent.ts b/src/bus/busEvent.ts
deleted file mode 100644
index 8fd5f14..0000000
--- a/src/bus/busEvent.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum BusEvent {
-  NEW_VERSION = 'NEW_VERSION'
-}
diff --git a/src/bus/noteBusEvent.ts b/src/bus/noteEventBus.ts
similarity index 100%
rename from src/bus/noteBusEvent.ts
rename to src/bus/noteEventBus.ts
diff --git a/src/bus/serviceWorkerEventBus.ts b/src/bus/serviceWorkerEventBus.ts
new file mode 100644
index 0000000..b514a48
--- /dev/null
+++ b/src/bus/serviceWorkerEventBus.ts
@@ -0,0 +1,3 @@
+import { createEventBus } from 'retrobus'
+
+export const serviceWorkerBusEvent = createEventBus<void>('new-version')
diff --git a/src/components/NewVersion.vue b/src/components/NewVersion.vue
new file mode 100644
index 0000000..552fce2
--- /dev/null
+++ b/src/components/NewVersion.vue
@@ -0,0 +1,32 @@
+<template>
+  <aside class="new-version" v-if="hasNewVersion">
+    <button class="button is-primary" @click="reload">
+      new version available
+    </button>
+  </aside>
+</template>
+
+<script lang="ts">
+import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
+import { defineComponent, onMounted, ref } from 'vue'
+
+export default defineComponent({
+  name: 'NewVersion',
+  setup() {
+    const hasNewVersion = ref(false)
+    onMounted(() => {
+      serviceWorkerBusEvent.addEventBusListener(
+        () => {
+          hasNewVersion.value = true
+        },
+        {
+          once: true,
+          retro: true
+        }
+      )
+    })
+
+    return { hasNewVersion, reload: () => location.reload() }
+  }
+})
+</script>
diff --git a/src/hooks/useLinks.hook.ts b/src/hooks/useLinks.hook.ts
index 1f09a42..5322473 100644
--- a/src/hooks/useLinks.hook.ts
+++ b/src/hooks/useLinks.hook.ts
@@ -1,4 +1,4 @@
-import { noteEventBus } from '@/bus/noteBusEvent'
+import { noteEventBus } from '@/bus/noteEventBus'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { onUnmounted } from '@vue/runtime-core'
 
diff --git a/src/hooks/useNote.hook.ts b/src/hooks/useNote.hook.ts
index 3163d7b..64948c9 100644
--- a/src/hooks/useNote.hook.ts
+++ b/src/hooks/useNote.hook.ts
@@ -1,7 +1,7 @@
 import { computed, onMounted, onUnmounted, watch } from '@vue/runtime-core'
 
 import { NOTE_WIDTH } from '@/constants/note-width'
-import { noteEventBus } from '@/bus/noteBusEvent'
+import { noteEventBus } from '@/bus/noteEventBus'
 import { useFocus } from '@/hooks/useFocus.hook'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
diff --git a/src/registerServiceWorker.ts b/src/registerServiceWorker.ts
index bf3be9a..c5ae87f 100644
--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@@ -1,8 +1,7 @@
 /* eslint-disable no-console */
 
+import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
 import { register } from 'register-service-worker'
-import { emit } from 'retrobus'
-import { BusEvent } from '@/bus/busEvent'
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
@@ -23,7 +22,7 @@ if (process.env.NODE_ENV === 'production') {
     },
     updated() {
       console.log('New content is available; please refresh.')
-      emit(BusEvent.NEW_VERSION)
+      serviceWorkerBusEvent.emit()
     },
     offline() {
       console.log(
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a02130f..9b12707 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="home content" v-if="!user || !repo">
+    <new-version class="new-version" />
     <welcome-world />
   </div>
   <flux-note :user="user" :repo="repo" :key="routeKey" v-else />
@@ -8,6 +9,7 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import NewVersion from '@/components/NewVersion.vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
@@ -19,7 +21,8 @@ export default defineComponent({
   name: 'Home',
   components: {
     WelcomeWorld,
-    FluxNote
+    FluxNote,
+    NewVersion
   },
   props: {
     user: { type: String, required: false, default: '' },
@@ -40,5 +43,11 @@ export default defineComponent({
 .home {
   display: flex;
   flex: 1;
+  flex-direction: column;
+  align-items: center;
+
+  .new-version {
+    margin-top: 1rem;
+  }
 }
 </style>

From 4d3cdfd5bc35d6aeec3e2746b6f38ccd1ba56252 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 28 Mar 2021 11:02:18 +0200
Subject: [PATCH 2/2] :iphone: (stacked note title) reduce font size to title
 to fit

---
 src/components/StackedNote.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index 0ef9182..bc97f3e 100644
--- a/src/components/StackedNote.vue
+++ b/src/components/StackedNote.vue
@@ -89,6 +89,7 @@ $border-color: rgba(18, 19, 58, 0.2);
   background-color: var(--background-color);
   position: sticky;
   top: 0;
+  font-size: 0.8em;
 
   a {
     color: var(--font-color);