src/routes/+layout.svelte

@@ -2,7 +2,11 @@
     import "./layout.css";
     import favicon from "$lib/assets/favicon.svg";
     import { ModeWatcher } from "mode-watcher";
-    import { CalendarDate, 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";
@@ -11,27 +15,17 @@
 
     let { children, data } = $props();
     let dateValue = $derived(data.date);
-    let entries = $derived(data.entries)
-    
-    // async function fetchForMonth(d: CalendarDate) {
-    //   const res = await fetch(
-    //       `/api/entry?month=${d.year}-${dateValue.month}`,
-    //   );
-      
-    //   return await res.json()
-    // }
+    let entries = $derived(data.entries);
 
-    // onMount(async () => {
-    //     const res = await fetch(
-    //         `/api/entry?month=${dateValue.year}-${dateValue.month}`,
-    //     );
-        
-    //     entries = await res.json()
-    // });
-    
     $effect(() => {
-      goto(`/${dateValue}`)
-    })
+        // Navigate when dateValue changes
+        goto(`/${dateValue}`);
+    });
+
+    $effect(() => {
+        // Sync dateValue with data.date when it changes
+        dateValue = data.date;
+    });
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
@@ -52,11 +46,8 @@
         <Calendar bind:value={dateValue} />
         <ul class="space-y-4">
             {#each entries as entry}
-                <EntrySummaryView
-                    {entry}
-                    bind:value={dateValue}
-                />
+                <EntrySummaryView {entry} bind:value={dateValue} />
             {/each}
         </ul>
     </div>
-</div>
+</div>

src/routes/+layout.ts

@@ -1,13 +1,22 @@
-import { today, getLocalTimeZone } from "@internationalized/date";
+import { today, getLocalTimeZone, CalendarDate } 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()
+  let dateValue;
+
+  if (params.date) {
+    const [year, month, day] = params.date.split("-").map(Number);
+    dateValue = new CalendarDate(year, month, day);
+  } else {
+    dateValue = today(getLocalTimeZone());
+  }
+
+  const res = await fetch(
+    `/api/entry?month=${dateValue.year}-${dateValue.month}`,
+  );
+  const entries = await res.json();
 
   return {
     entries: entries,
-    date: dateValue
+    date: dateValue,
   };
 }

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

@@ -8,7 +8,7 @@
 </script>
 
 
-{#if data.entry.id}
+{#if data.entry}
     <Editor dateValue={data.date} />
 {:else}
     No entry exists for {data.date}

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 { entry: entries };
+  return { entry: entries[0] };
 }