✨ (draft) add draft folder page in note header

Closes #1

src/components/HeaderNote.vue

@@ -3,7 +3,16 @@
     <router-link :to="{ name: 'Home' }">
       <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
     </router-link>
-    <router-link :to="{ name: 'FleetingNotes', params: { user, repo } }">
+    <router-link
+      class="special-folder"
+      :to="{ name: 'DraftNotes', params: { user, repo } }"
+    >
+      Draft
+    </router-link>
+    <router-link
+      class="special-folder"
+      :to="{ name: 'FleetingNotes', params: { user, repo } }"
+    >
       Fleeting notes
     </router-link>
   </header>
@@ -27,6 +36,14 @@ export default defineComponent({
   align-items: center;
   justify-content: space-between;
 
+  a {
+    flex: 1;
+  }
+
+  .special-folder {
+    text-align: center;
+  }
+
   img:hover {
     cursor: pointer;
   }

src/modules/note/hooks/useFolderNotes.ts

@@ -1,13 +1,15 @@
 import { useRepo } from '@/hooks/useRepo.hook'
 import { computed, Ref } from 'vue'
 
-const FLEETING_NOTES_FOLDER = 'fleeting-notes'
-
-export const useFleetingNotes = (owner: Ref<string>, repo: Ref<string>) => {
+export const useFolderNotes = (
+  folder: string,
+  owner: Ref<string>,
+  repo: Ref<string>
+) => {
   const { tree } = useRepo(owner, repo)
 
   const fleetingNotes = computed(() =>
-    tree.value.filter((file) => file.path?.startsWith(FLEETING_NOTES_FOLDER))
+    tree.value.filter((file) => file.path?.startsWith(folder))
   )
 
   const content = computed(() =>

src/router/router.ts

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

src/views/DraftNotes.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="draft-notes">
+    <flux-note :user="user" :repo="repo" :content="content">
+      <h3 class="subtitle is-3">
+        Drafts
+      </h3>
+    </flux-note>
+  </div>
+</template>
+
+<script lang="ts">
+import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
+import { defineAsyncComponent, defineComponent, toRefs } from 'vue'
+
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
+
+const DRAFT_FOLDER = 'drafts'
+
+export default defineComponent({
+  name: 'DraftNotes',
+  components: {
+    FluxNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  },
+  setup(props) {
+    const refProps = toRefs(props)
+    const { content } = useFolderNotes(
+      DRAFT_FOLDER,
+      refProps.user,
+      refProps.repo
+    )
+
+    return {
+      content
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.draft-notes {
+  display: flex;
+  flex: 1;
+
+  .subtitle {
+    text-align: center;
+  }
+}
+</style>

src/views/FleetingNotes.vue

@@ -9,11 +9,13 @@
 </template>
 
 <script lang="ts">
-import { useFleetingNotes } from '@/modules/note/hooks/useFleetingNotes'
+import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
 import { defineAsyncComponent, defineComponent, toRefs } from 'vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
+const FLEETING_NOTES_FOLDER = 'fleeting-notes'
+
 export default defineComponent({
   name: 'FleetingNotes',
   components: {
@@ -25,7 +27,11 @@ export default defineComponent({
   },
   setup(props) {
     const refProps = toRefs(props)
-    const { content } = useFleetingNotes(refProps.user, refProps.repo)
+    const { content } = useFolderNotes(
+      FLEETING_NOTES_FOLDER,
+      refProps.user,
+      refProps.repo
+    )
 
     return {
       content