Adding AddEntryCover

src/lib/components/addEntryCover.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    let {
+      date = $bindable('')
+    } = $props()
+
+</script>
+
+<div class="flex flex-col items-center justify-center">
+    <button class="bg-white/20 p-4 rounded-xl w-full hover:brightness-80 transition-all">
+        <p class="rounded-full bg-white/30 p-2 h-10 w-10">+</p>
+        <p>Add Entry for {date}</p>
+    </button>
+    
+    <!-- <p class="text-white/60">Select an entry to view/edit</p> -->
+</div>

src/lib/components/editor/index.svelte

@@ -3,9 +3,8 @@
     import TextEditor from "./textEditor.svelte";
     import { formatDate } from "$lib/date.ts";
 
-    let { entry = $bindable({}) } = $props();
+    let { entry = $bindable({}), edit = $bindable(false) } = $props();
 
-    let edit = $state(false);
     let editModeText = $derived(edit ? "done" : "edit")
 </script>
 

src/lib/date.ts

@@ -3,3 +3,7 @@ export const formatDate = (dateString: string) => {
     const options = { year: "numeric", month: "long", day: "numeric" };
     return date.toLocaleDateString(undefined, options);
 };
+
+export const today = () => {
+  return new Date().toISOString().split('T')[0];
+}

src/routes/+page.svelte

@@ -6,14 +6,24 @@
     import Calendar from '$lib/components/calendar.svelte'
     import Editor from '$lib/components/editor/index.svelte';
     import EntrySummaryView from '$lib/components/entrySummaryView.svelte'
+    import AddEntryCover from '$lib/components/addEntryCover.svelte'
+    import { today } from '$lib/date';
     
     let edit = $state(false)
-    
     let selectedEntry = $state('')
+    let selectedDate = $state(today())
     
-    let selectEntry = async (entryID: string) => {
+    let selectEntry = async (hasEntry: boolean, data: string | null) => {
-      const res = await fetch(`/api/entry?id=${entryID}`)
+      console.log(data)
+      // data should be the entryID if hasEntry == true, or the date if there is no entry
+      if (hasEntry) {
+        const res = await fetch(`/api/entry?id=${data}`)
         selectedEntry = await res.json()
+        selectedDate = selectedEntry.date
+      } else {
+        selectedEntry = ''
+        selectedDate = data as string
+      }
     }
 </script>
 
@@ -25,9 +35,7 @@
         {#if selectedEntry}
             <Editor bind:entry={selectedEntry} />
         {:else}
-            <div class="md:flex flex-col items-center justify-center mx-5 hidden">
+            <AddEntryCover bind:date={selectedDate} />
-                <p class="text-white/60">Select an entry to view/edit</p>
-            </div>
         {/if}
     </div>
     

src/routes/+page.ts

@@ -2,7 +2,12 @@ export const load = async ({ fetch, params }) => {
   const res = await fetch("/api/entry/all");
   const allEntries = await res.json();
   
+  const today = new Date().toISOString().split('T')[0];
+  const todayEntry = await fetch(`/api/entry?date=${today}`);
+  const todayEntryData = await todayEntry.json();
+
   return {
     all: allEntries,
+    today: todayEntryData,
   };
 };