adding entry cover

src/lib/components/addEntryCover.svelte

@@ -1,15 +1,21 @@
 <script lang="ts">
-    let {
-      date = $bindable('')
-    } = $props()
+    import Editor from '$lib/components/editor/index.svelte'
+    import { today } from '$lib/date'
+    let { date = $bindable(today()) } = $props();
 
+    let edit = $state(false);
 </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">
+{#if edit}
+    <Editor newEntryDate={date} edit={true}/>
+{:else}
+    <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"
+            onclick={() => edit = true}
+        >
             <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>
+    </div>
+{/if}

src/lib/components/editor/index.svelte

@@ -3,13 +3,15 @@
     import TextEditor from "./textEditor.svelte";
     import { formatDate } from "$lib/date.ts";
 
-    let { entry = $bindable({}), edit = $bindable(false) } = $props();
+    let { newEntryDate, entry = $bindable(), edit = $bindable(false) } = $props();
+    
+    let newEntry = $state({ date: newEntryDate, image: "", content: "" });
 
     let editModeText = $derived(edit ? "done" : "edit")
 </script>
 
 <div class="flex flex-row mb-2">
-    <p class="text-3xl font-bold">{formatDate(entry.date)}</p>
+    <p class="text-3xl font-bold">{entry ? formatDate(entry.date) : formatDate(newEntryDate)}</p>
     <button
         class="bg-white/20 px-3 rounded-lg ml-auto"
         onclick={() => edit = !edit}
@@ -18,5 +20,10 @@
     </button>
 </div>
 
-<ImageTarget bind:image={entry.image} bind:edit />
-<TextEditor bind:content={entry.content} bind:edit />
+{#if entry}
+    <ImageTarget bind:image={entry.image} bind:edit />
+    <TextEditor bind:content={entry.content} bind:edit />
+{:else}
+    <ImageTarget bind:image={newEntry.image} bind:edit />
+    <TextEditor bind:content={newEntry.content} bind:edit />
+{/if}

src/routes/+page.svelte

@@ -14,7 +14,6 @@
     let selectedDate = $state(today())
     
     let selectEntry = async (hasEntry: boolean, data: string | null) => {
-      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}`)
@@ -27,7 +26,7 @@
     }
 </script>
 
-<Calendar entries={data.all} dayClickCallback={async (entryID: string) => await selectEntry(entryID)} />
+<Calendar entries={data.all} dayClickCallback={selectEntry} />
 
 <div class="flex flex-col md:flex-row space-y-4 w-full mt-6">
     
@@ -42,7 +41,7 @@
     <div class="md:w-1/2 md:mr-4">
         <ul>
             {#each data.all as entry}
-                <EntrySummaryView clickCB={async () => await selectEntry(entry.id)} {entry} />
+                <EntrySummaryView clickCB={async () => await selectEntry(true, entry.id)} {entry} />
             {/each}
         </ul>
     </div>