Merge branch 'main' of github.com:lite-note/lite-note into main

src/assets/icons/loading.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise" width="24" height="24" viewBox="0 0 24 24" stroke="#3b7e70" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>

src/components/FluxNote.vue

@@ -1,5 +1,5 @@
 <template>
-  <main class="flux-note content note-container" v-if="!isLoading">
+  <main class="flux-note content note-container">
     <div class="note readme">
       <header-note class="header" :user="user" :repo="repo" />
       <div class="repo-title-breadcrumb">
@@ -18,7 +18,14 @@
         </h4>
       </div>
       <slot />
-      <div v-if="!hasContent">
+      <div v-if="isLoading" class="loading">
+        <img
+          class="is-loading"
+          src="@/assets/icons/loading.svg"
+          alt="loading..."
+        />
+      </div>
+      <div v-else-if="!hasContent">
         No content here 📝
       </div>
       <p class="note-display" v-html="renderedContent"></p>
@@ -201,6 +208,17 @@ $header-height: 40px;
       max-width: 620px;
     }
   }
+
+  .loading {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    .is-loading {
+      animation: spinAround 0.8s infinite linear;
+    }
+  }
 }
 
 @media screen and (max-width: 768px) {

src/components/HeaderNote.vue

@@ -10,13 +10,13 @@
       class="special-folder"
       :to="{ name: 'DraftNotes', params: { user, repo } }"
     >
-      Draft
+      draft
     </router-link>
     <router-link
       class="special-folder"
       :to="{ name: 'FleetingNotes', params: { user, repo } }"
     >
-      Fleeting notes
+      inbox
     </router-link>
   </header>
 </template>

src/hooks/useFocus.hook.ts

@@ -10,12 +10,12 @@ export const useFocus = () => {
   const { stackedNotes } = useQueryStackedNotes()
 
   const scrollToFocusedNote = (sha?: string, backToTop?: boolean) => {
-    if (!sha) {
+    if (backToTop) {
+      scrollToNote(0)
       return
     }
 
-    if (backToTop) {
-      scrollToNote(0)
+    if (!sha) {
       return
     }
 

src/modules/note/hooks/useFolderNotes.ts

@@ -11,11 +11,11 @@ export const useFolderNotes = (folder: string) => {
   )
 
   const content = computed(() =>
-    fleetingNotes.value?.length
+    fleetingNotes.value?.length > 0
       ? fleetingNotes.value
           .map((note) => `- [${note.path}](${note.path})`)
           .join('\n')
-      : ''
+      : null
   )
 
   return {

src/router/router.ts

@@ -27,13 +27,11 @@ const routes: Array<RouteRecordRaw> = [
     component: Home
   },
   {
-    path: '/:user/:repo/fleeting-notes',
+    path: '/:user/:repo/inbox',
     name: 'FleetingNotes',
     props: true,
     component: () =>
-      import(
-        /* webpackChunkName: "fleeting-notes" */ '@/views/FleetingNotes.vue'
-      )
+      import(/* webpackChunkName: "inbox" */ '@/views/FleetingNotes.vue')
   },
   {
     path: '/:user/:repo/draft',

src/views/FleetingNotes.vue

@@ -7,7 +7,7 @@
       key="fleeting-notes"
     >
       <h3 class="subtitle is-3">
-        Fleeting notes
+        Inbox
       </h3>
     </flux-note>
   </div>
@@ -19,7 +19,7 @@ import { defineAsyncComponent, defineComponent } from 'vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
-const FLEETING_NOTES_FOLDER = 'fleeting-notes'
+const FLEETING_NOTES_FOLDER = 'inbox'
 
 export default defineComponent({
   name: 'FleetingNotes',