create today fleeting note

src/components/StackedNote.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useMagicKeys } from '@vueuse/core'
 import {
   computed,
   defineAsyncComponent,
@@ -9,8 +8,9 @@ import {
   watch
 } from 'vue'
 
+import { useEditionMode } from '@/hooks/useEditionMode'
 import { useFile } from '@/hooks/useFile.hook'
-import { useGitHubUpdate } from '@/hooks/useGitHubUpdate.hook'
+import { useGitHubContent } from '@/hooks/useGitHubContent.hook'
 import { useImages } from '@/hooks/useImages.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
@@ -58,20 +58,17 @@ const hasBacklinks = computed(() => store.userSettings?.backlink)
 const { displayNoteOverlay } = useNoteOverlay(className.value, index)
 const displayedTitle = computed(() => filenameToNoteTitle(props.title))
 
-const { updateFile } = useGitHubUpdate({
+const { updateFile } = useGitHubContent({
   user: user.value,
   repo: repo.value
 })
 
-const mode = ref<'read' | 'edit'>('read')
-const toggleMode = () => {
-  mode.value = mode.value === 'read' ? 'edit' : 'read'
-}
-
 onMounted(async () => {
   initialRawContent.value = await getRawContent()
 })
 
+const { mode, toggleMode } = useEditionMode()
+
 watch([content, mode], () => {
   if (!content.value) {
     return
@@ -101,14 +98,6 @@ watch(mode, async (newMode) => {
     initialRawContent.value = rawContent.value
   }
 })
-
-const { escape } = useMagicKeys()
-
-watch(escape, () => {
-  if (mode.value === 'edit') {
-    toggleMode()
-  }
-})
 </script>
 
 <template>

src/hooks/useEditionMode.ts

@@ -0,0 +1,22 @@
+import { useMagicKeys } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+export const useEditionMode = () => {
+  const mode = ref<'read' | 'edit'>('read')
+  const toggleMode = () => {
+    mode.value = mode.value === 'read' ? 'edit' : 'read'
+  }
+
+  const { escape } = useMagicKeys()
+
+  watch(escape, () => {
+    if (mode.value === 'edit') {
+      toggleMode()
+    }
+  })
+
+  return {
+    mode,
+    toggleMode
+  }
+}

src/hooks/useGitHubContent.hook.ts

@@ -2,21 +2,21 @@ import { getOctokit } from '@/modules/repo/services/octo'
 import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8'
 import { confirmMessage, errorMessage } from '@/utils/notif'
 
-export const useGitHubUpdate = ({
+export const useGitHubContent = ({
   user,
   repo
 }: {
   user: string
   repo: string
 }) => {
-  const updateFile = async ({
+  const putFile = async ({
     content,
     path,
     sha
   }: {
     content: string
     path: string
-    sha: string
+    sha?: string
   }) => {
     try {
       const octokit = await getOctokit()
@@ -35,8 +35,6 @@ export const useGitHubUpdate = ({
 
       confirmMessage('file saved on GitHub')
 
-      console.log(response)
-
       return response?.data.content?.sha ?? null
     } catch (error) {
       errorMessage('File could not be saved')
@@ -46,6 +44,9 @@ export const useGitHubUpdate = ({
   }
 
   return {
-    updateFile
+    updateFile: async (props: { content: string; path: string; sha: string }) =>
+      putFile(props),
+    createFile: async (props: { content: string; path: string }) =>
+      putFile(props)
   }
 }

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -41,10 +41,6 @@ export const useRouteQueryStackedNotes = () => {
   }
 
   const addStackedNote = (currentSHA: string, sha: string) => {
-    if (!stackedNotes.value) {
-      return
-    }
-
     if (stackedNotes.value.includes(sha)) {
       scrollToFocusedNote(sha)
       return

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>