Implementing different page for the entries, for sharability ig

src/routes/+layout.svelte

@@ -1,14 +1,56 @@
 <script lang="ts">
-	import './layout.css';
-	import favicon from '$lib/assets/favicon.svg';
-	import { ModeWatcher } from "mode-watcher"
+    import "./layout.css";
+    import favicon from "$lib/assets/favicon.svg";
+    import { ModeWatcher } from "mode-watcher";
+    import { today, getLocalTimeZone } from "@internationalized/date";
 
-	let { children } = $props();
+    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([])
+
+    onMount(async () => {
+        const res = await fetch(
+            `/api/entry?month=${dateValue.year}-${dateValue.month}`,
+        );
+        
+        entries = await res.json()
+    });
+    
+    $effect(() => {
+      goto(`/${dateValue}`)
+    })
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
+<ModeWatcher />
 
-<div class="md:max-w-3/4 mx-auto">
-    <ModeWatcher />
-    {@render children()}
+<div
+    class="flex flex-col md:flex-row space-y-4 w-full mt-6 mx-auto md:max-w-3/4"
+>
+    <div class="md:w-1/2 md:order-2">
+        <Header />
+
+        {#key dateValue}
+            <!-- <Editor {dateValue} /> -->
+            {@render children()}
+        {/key}
+    </div>
+
+    <div class="md:w-1/2 lg:max-w-1/4 space-y-4 md:mr-4">
+        <Calendar bind:value={dateValue} />
+        <ul class="space-y-4">
+            {#each entries as entry}
+                <EntrySummaryView
+                    {entry}
+                    bind:value={dateValue}
+                />
+            {/each}
+        </ul>
+    </div>
 </div>

src/routes/+page.svelte

@@ -13,8 +13,14 @@
 
 </script>
 
+<!-- <Editor {dateValue} /> -->
 
-<div class="flex flex-col md:flex-row space-y-4 w-full mt-6">
+<div>
+    Click on a date to view or edit an entry.
+</div>
+
+
+<!-- <div class="flex flex-col md:flex-row space-y-4 w-full mt-6">
     <div class="md:w-1/2 md:order-2">
         <Header />
         
@@ -34,4 +40,4 @@
             {/each}
         </ul>
     </div>
-</div>
+</div> -->

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+    
+    let {
+      data
+    } = $props()
+</script>
+
+{JSON.stringify(data)}

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

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