From ba2befcb566e4149a41c198174ca37b470bd800e Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Tue, 3 Feb 2026 19:26:23 +1300
Subject: [PATCH] adding entry cover

---
 src/lib/components/addEntryCover.svelte | 28 +++++++++++++++----------
 src/lib/components/editor/index.svelte  | 15 +++++++++----
 src/routes/+page.svelte                 |  5 ++---
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/addEntryCover.svelte b/src/lib/components/addEntryCover.svelte
index d0c7daa..65b18a0 100644
--- a/src/lib/components/addEntryCover.svelte
+++ b/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">
-        <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>
\ No newline at end of file
+{#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>
+    </div>
+{/if}
diff --git a/src/lib/components/editor/index.svelte b/src/lib/components/editor/index.svelte
index b894613..3b6cf65 100644
--- a/src/lib/components/editor/index.svelte
+++ b/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}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8b011c4..3656ea5 100644
--- a/src/routes/+page.svelte
+++ b/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>