display if readme is from cache or network

src/assets/icons/offline.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-wifi-off" width="30" height="30" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M12 18l.01 0" />
+  <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
+  <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
+  <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
+  <path d="M3 3l18 18" />
+</svg>

src/components/FluxNote.vue

@@ -106,6 +106,11 @@ const focus = () => scrollToFocusedNote(undefined, true)
             @click="resetStackedNotes"
             >{{ repo }}</router-link
           >]
+          <img
+            v-if="store.isReadmeOffline"
+            src="@/assets/icons/offline.svg"
+            alt="ofline"
+          />
         </h1>
         <h4 class="subtitle is-4">
           <em>{{ user }}</em>
@@ -184,6 +189,13 @@ $header-height: 40px;
       .subtitle {
         text-align: center;
       }
+
+      .title {
+        img {
+          position: absolute;
+          right: 0;
+        }
+      }
     }
   }
 

src/modules/repo/store/userRepo.store.ts

@@ -13,6 +13,7 @@ interface State {
   user: string
   repo: string
   files: RepoFile[]
+  isReadmeOffline: boolean
   readme?: string | null
   userSettings?: UserSettings | null
   needToLogin: boolean
@@ -24,12 +25,14 @@ export const useUserRepoStore = defineStore({
     user: '',
     repo: '',
     files: [],
+    isReadmeOffline: true,
     readme: undefined,
     userSettings: undefined,
     needToLogin: false
   }),
   actions: {
     async setUserRepo(newUser: string, newRepo: string) {
+      this.isReadmeOffline = true
       this.user = newUser
       this.repo = newRepo
       try {
@@ -37,17 +40,15 @@ export const useUserRepoStore = defineStore({
       } catch (error) {
         console.warn('impossible to refresh token')
       }
-      const [cachedReadme] = await Promise.all([
-        getCachedMainReadme(newUser, newRepo)
-      ])
 
-      this.readme = cachedReadme
+      this.readme = await getCachedMainReadme(newUser, newRepo)
 
       const [readme, files] = await Promise.all([
         getMainReadme(newUser, newRepo),
         getFiles(newUser, newRepo)
       ])
       this.readme = readme
+      this.isReadmeOffline = false
       this.files = files
 
       this.userSettings = await getUserSettingsContent(newUser, newRepo, files)