fix: Google Font

feat: add a todo view

src/views/DraftNotes.vue

@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue"
+
+import { useFolderNotes } from "@/modules/note/hooks/useFolderNotes"
+
+const FluxNote = defineAsyncComponent(() => import("@/components/FluxNote.vue"))
+const props = defineProps<{ user: string; repo: string }>()
+const user = computed(() => props.user)
+const repo = computed(() => props.repo)
+
+const DRAFT_FOLDER = ["drafts", "_drafts"]
+const { content } = useFolderNotes(DRAFT_FOLDER)
+</script>
+
 <template>
   <div class="draft-notes">
     <flux-note key="draft-notes" :user="user" :repo="repo" :content="content">
@@ -6,34 +20,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue'
-
-import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
-
-const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
-
-const DRAFT_FOLDER = ['drafts', '_drafts']
-
-export default defineComponent({
-  name: 'DraftNotes',
-  components: {
-    FluxNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  },
-  setup() {
-    const { content } = useFolderNotes(DRAFT_FOLDER)
-
-    return {
-      content
-    }
-  }
-})
-</script>
-
 <style scoped lang="scss">
 .draft-notes {
   display: flex;

src/views/TodoNotes.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, watch } from "vue"
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
+import { useFile } from "@/hooks/useFile.hook"
+import { computedAsync } from "@vueuse/core"
+
+const FluxNote = defineAsyncComponent(() => import("@/components/FluxNote.vue"))
+const props = defineProps<{ user: string; repo: string }>()
+const user = computed(() => props.user)
+const repo = computed(() => props.repo)
+
+const store = useUserRepoStore()
+
+const todoNote = computed(() =>
+  store.files.find((file) => file.path?.endsWith("_todo/todo.md")),
+)
+
+const content = computedAsync(() => {
+  if (!todoNote.value) {
+    return ""
+  }
+  const { getContent } = useFile(todoNote.value?.sha ?? "", false)
+
+  return getContent()
+})
+</script>
+
+<template>
+  <div class="todo-notes">
+    <flux-note
+      key="todo-notes"
+      :user="user"
+      :repo="repo"
+      :content="content"
+      :parse-content="false"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.todo-notes {
+  flex: 1;
+
+  input[type="checkbox"] {
+    margin-right: 0.5rem;
+  }
+}
+</style>