Implementing different page for the entries, for sharability ig

src/lib/components/editor.svelte

@@ -1,30 +1,52 @@
 <script lang="ts">
     import { CalendarDate } from "@internationalized/date";
     import { onMount } from "svelte";
-    
+    import { formatDate } from "$lib/date";
+    import { createEntry, updateEntry, deleteEntry } from "$lib/upload.ts";
+
     let {
-      dateValue = $bindable<CalendarDate | undefined>(
-                  new CalendarDate(2026, 2, 1),
-              ),
-    } = $props()
-    
-    let edit = $state(false)
-    
+        dateValue = $bindable<CalendarDate | undefined>(
+            new CalendarDate(2026, 2, 1),
+        ),
+    } = $props();
+
+    let edit = $state<boolean>(false);
+
     let entry = $state({
-      date: dateValue.toString(),
-      image: "",
-      content: ""
-    })
-    
+        date: dateValue.toString(),
+        image: "",
+        content: "",
+    });
+
     onMount(async () => {
-      const res = await fetch(`/api/entry?date=${dateValue.toString()}`)
-      const data = await res.json()
-      entry = data
-    })
+        const res = await fetch(`/api/entry?date=${dateValue.toString()}`);
+        const data = await res.json();
+        if (data) {
+            entry = { date: dateValue.toString(), ...data[0] };
+        }
+    });
 </script>
 
-{JSON.stringify(entry)}
+<div class="flex flex-row items-center justify-between">
+    <h1 class="text-3xl">{formatDate(entry.date)}</h1>
 
-<!-- <div class="flex flex-row items-center justify-between"> -->
-    <h1 class="text-3xl">{entry["date"]}</h1>
-<!-- </div> -->
+    {#if !edit}
+        <button
+            class="btn bg-secondary py-2 px-3 rounded-lg hover:opacity-60 transition-brightness"
+            onclick={() => (edit = !edit)}>Edit</button
+        >
+    {:else}
+        <button class="bg-destructive py-2 px-3 rounded-lg" onclick={deleteEntry}>
+            delete
+        </button>
+        <button
+            class="bg-secondary py-2 px-3 rounded-lg"
+            onclick={() => (edit = false)}
+        >
+            cancel
+        </button>
+        <button class="bg-primary text-accent py-2 px-3 rounded-lg">
+            save
+        </button>
+    {/if}
+</div>

src/lib/upload.ts

@@ -55,3 +55,19 @@ export async function updateEntry(entry) {
     body: JSON.stringify(entry),
   });
 }
+
+export async function deleteEntry(entry) {
+  const res = await fetch(`/api/entry/delete`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ id: entry.id })
+  });
+  
+  if (res.ok) {
+    entry = null;
+  } else {
+    alert('Failed to delete entry');
+  }
+}

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>
+<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 />
         
@@ -23,7 +29,7 @@
         {/key}
     </div>
 
-    <div class="md:w-1/2 space-y-4 md:mr-4">
+    <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 data.all as entry}
@@ -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 };
+}