✨ (fleeting notes) init fleeting notes

src/views/About.vue

@@ -9,7 +9,7 @@
         <li>header note for quick actions ⏳</li>
         <li>offline notes</li>
         <li>full path resolver between notes</li>
-        <li>draft & "note on the fly" folders</li>
+        <li>draft & fleeting notes folders</li>
         <li>login with GitHub "Personal Access Token" tutorial</li>
         <li>private & public notes tutorial</li>
         <li>

src/views/FleetingNotes.vue

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

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home content" v-if="!user || !repo">
     <welcome-world />
   </div>
-  <flux-note class="home" :user="user" :repo="repo" :key="routeKey" v-else />
+  <flux-note :user="user" :repo="repo" :key="routeKey" v-else />
 </template>
 
 <script lang="ts">