create today fleeting note

src/views/FleetingNotes.vue

@@ -1,11 +1,59 @@
 <script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
 import FluxNote from '@/components/FluxNote.vue'
+import { useEditionMode } from '@/hooks/useEditionMode'
+import { useGitHubContent } from '@/hooks/useGitHubContent.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
+import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
+import EditNote from '@/modules/note/components/EditNote.vue'
 import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
+import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8'
 
 const FLEETING_NOTES_FOLDER = ['inbox', '_inbox']
 
-defineProps<{ user: string; repo: string }>()
+const props = defineProps<{ user: string; repo: string }>()
+const user = computed(() => props.user)
+const repo = computed(() => props.repo)
+
+const { addStackedNote } = useRouteQueryStackedNotes()
 const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
+
+const today = new Date().toISOString().split('T')[0]
+const newContentPath = `_inbox/${today}.md`
+const initialContent = ``
+const newContent = ref(initialContent)
+const { mode, toggleMode } = useEditionMode()
+
+const { createFile } = useGitHubContent({
+  repo: repo.value,
+  user: user.value
+})
+
+const hasTodayNote = computed(() => content.value.includes(today))
+
+watch(mode, async (newMode) => {
+  if (newMode === 'read' && newContent.value.trim() !== initialContent) {
+    const content = `# ${new Date().toLocaleDateString()}\n\n${
+      newContent.value
+    }`
+
+    const newSha = await createFile({
+      content,
+      path: newContentPath
+    })
+
+    if (!newSha) {
+      return
+    }
+
+    newContent.value = initialContent
+    const { saveCacheNote } = prepareNoteCache(newSha)
+    await saveCacheNote(encodeUTF8ToBase64(content))
+
+    addStackedNote('', newSha)
+  }
+})
 </script>
 
 <template>
@@ -17,6 +65,23 @@ const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
       :content="content"
     >
       <h3 class="subtitle is-3">Inbox</h3>
+      <div v-if="!hasTodayNote" class="columns is-centered">
+        <div class="column is-half is-centered">
+          <button class="button is-primary is-light" @click="toggleMode">
+            new fleeting note
+          </button>
+        </div>
+      </div>
+      <div v-if="mode === 'edit'">
+        <edit-note v-model="newContent" />
+        <div class="columns is-centered">
+          <div class="column is-half is-centered">
+            <button class="button is-light" @click="toggleMode">
+              <img src="@/assets/icons/saved.svg" alt="save" />
+            </button>
+          </div>
+        </div>
+      </div>
     </flux-note>
   </div>
 </template>
@@ -29,5 +94,10 @@ const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
   .subtitle {
     text-align: center;
   }
+
+  .column {
+    display: flex;
+    justify-content: center;
+  }
 }
 </style>