✨ (historic notes) add history note page

src/components/HeaderNote.vue

@@ -6,6 +6,12 @@
     >
       <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
     </router-link>
+    <router-link
+      class="special-folder"
+      :to="{ name: 'HistoricNotes', params: { user, repo } }"
+    >
+      history
+    </router-link>
     <router-link
       class="special-folder"
       :to="{ name: 'SpacedRepetitionCard', params: { user, repo } }"

src/modules/note/hooks/useNotes.ts

@@ -0,0 +1,16 @@
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { computed } from 'vue'
+
+export const useNotes = () => {
+  const store = useUserRepoStore()
+
+  const notes = computed(() => {
+    console.log(store.files)
+
+    return store.files
+  })
+
+  return {
+    notes
+  }
+}

src/router/router.ts

@@ -41,6 +41,15 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "draft-notes" */ '@/views/DraftNotes.vue')
   },
+  {
+    path: '/:user/:repo/history',
+    name: 'HistoricNotes',
+    props: true,
+    component: () =>
+      import(
+        /* webpackChunkName: "historic-notes" */ '@/views/HistoricNotes.vue'
+      )
+  },
   {
     path: '/:user/:repo/spaced-repetition',
     name: 'SpacedRepetitionCard',

src/views/HistoricNotes.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="historic-notes">
+    <flux-note
+      key="historic-notes"
+      :user="user"
+      :repo="repo"
+      :with-content="false"
+    >
+      <h3 class="subtitle is-3">History</h3>
+      {{ notes }}
+    </flux-note>
+  </div>
+</template>
+
+<script lang="ts">
+import { useNotes } from '@/modules/note/hooks/useNotes'
+import { defineAsyncComponent, defineComponent } from 'vue'
+
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
+
+export default defineComponent({
+  name: 'HistoricNotes',
+  components: {
+    FluxNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  },
+  setup() {
+    const notes = useNotes()
+
+    return { notes }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.historic-notes {
+  display: flex;
+  flex: 1;
+
+  .subtitle {
+    text-align: center;
+  }
+}
+</style>