src/lib/components/editor.svelte

@@ -27,8 +27,8 @@
     });
 </script>
 
-<div class="flex flex-row items-center justify-between">
-    <h1 class="text-3xl">{formatDate(entry.date)}</h1>
+<div class="flex flex-row items-center space-x-2">
+    <h1 class="text-3xl mr-auto">{formatDate(entry.date)}</h1>
 
     {#if !edit}
         <button
@@ -36,17 +36,22 @@
             onclick={() => (edit = !edit)}>Edit</button
         >
     {:else}
-        <button class="bg-destructive py-2 px-3 rounded-lg" onclick={deleteEntry}>
+        <button
+            class="bg-destructive py-2 px-3 rounded-lg hover:opacity-60 transition-brightness"
+            onclick={deleteEntry}
+        >
             delete
         </button>
         <button
-            class="bg-secondary py-2 px-3 rounded-lg"
+            class="bg-primary text-accent py-2 px-3 rounded-lg hover:opacity-60 transition-brightness"
+        >
+            save
+        </button>
+        <button
+            class="bg-secondary py-2 px-3 rounded-lg hover:opacity-60 transition-brightness"
             onclick={() => (edit = false)}
         >
             cancel
         </button>
-        <button class="bg-primary text-accent py-2 px-3 rounded-lg">
-            save
-        </button>
     {/if}
 </div>

src/routes/+layout.svelte

@@ -2,25 +2,32 @@
     import "./layout.css";
     import favicon from "$lib/assets/favicon.svg";
     import { ModeWatcher } from "mode-watcher";
-    import { today, getLocalTimeZone } from "@internationalized/date";
+    import { CalendarDate, today, getLocalTimeZone } from "@internationalized/date";
 
     import Header from "$lib/components/header.svelte";
     import Calendar from "$lib/components/calendar.svelte";
     import EntrySummaryView from "$lib/components/entrySummaryView.svelte";
-    import { onMount } from "svelte";
     import { goto } from "$app/navigation";
 
-    let { children } = $props();
-    let dateValue = $state(today(getLocalTimeZone()));
-    let entries = $state([])
+    let { children, data } = $props();
+    let dateValue = $derived(data.date);
+    let entries = $derived(data.entries)
     
-    onMount(async () => {
-        const res = await fetch(
-            `/api/entry?month=${dateValue.year}-${dateValue.month}`,
-        );
+    // async function fetchForMonth(d: CalendarDate) {
+    //   const res = await fetch(
+    //       `/api/entry?month=${d.year}-${dateValue.month}`,
+    //   );
       
-        entries = await res.json()
-    });
+    //   return await res.json()
+    // }
+
+    // onMount(async () => {
+    //     const res = await fetch(
+    //         `/api/entry?month=${dateValue.year}-${dateValue.month}`,
+    //     );
+        
+    //     entries = await res.json()
+    // });
     
     $effect(() => {
       goto(`/${dateValue}`)
@@ -37,7 +44,6 @@
         <Header />
 
         {#key dateValue}
-            <!-- <Editor {dateValue} /> -->
             {@render children()}
         {/key}
     </div>

src/routes/+layout.ts

@@ -0,0 +1,13 @@
+import { today, getLocalTimeZone } from "@internationalized/date";
+
+export async function load({ params, fetch }) {
+  const dateValue = today(getLocalTimeZone());
+  
+  const res = await fetch(`/api/entry?month=${dateValue.year}-${dateValue.month}`)
+  const entries = await res.json()
+
+  return {
+    entries: entries,
+    date: dateValue
+  };
+}

src/routes/+page.ts

@@ -1,13 +0,0 @@
-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,
-  };
-};

src/routes/[date]/+page.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
+    import Editor from "$lib/components/editor.svelte";
     
     let {
       data
     } = $props()
+  
 </script>
 
-{JSON.stringify(data)}
+
+{#if data.entry.id}
+    <Editor dateValue={data.date} />
+{:else}
+    No entry exists for {data.date}
+{/if}
+

src/routes/[date]/+page.ts

@@ -2,5 +2,5 @@
 export async function load({ params, fetch }) {
   const res = await fetch(`/api/entry?date=${params.date}`);
   const entries = await res.json();
-    return { entries };
+  return { entry: entries };
 }