From 74023040fc3a472d95568063bc7b8db353f902af Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Wed, 11 Feb 2026 19:25:34 +1300
Subject: [PATCH] i mean calendar *works* now, just gotta make it look okay

---
 src/lib/components/calendar.svelte | 78 ++++++++++++++++++++++--------
 src/routes/+page.svelte            |  2 +-
 2 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/calendar.svelte b/src/lib/components/calendar.svelte
index c4e84e6..0ad3448 100644
--- a/src/lib/components/calendar.svelte
+++ b/src/lib/components/calendar.svelte
@@ -1,29 +1,67 @@
 <script lang="ts">
-  import Calendar from "$lib/components/ui/calendar/calendar.svelte";
-  import CalendarDay from "$lib/components/ui/calendar/calendar-day.svelte";
-  import { CalendarDate } from "@internationalized/date";
-    
-  let {
-    value = $bindable<CalendarDate | undefined>(new CalendarDate(2026, 2, 1)),
-  } = $props()
-  
-  let getImageForDate = async (dateObject) => {
-    const date = `${dateObject.year}-${dateObject.month}-${dateObject.day}`;
-    const res = await fetch(`/api/entry?date=${date}`);
-    const data = await res.json();
-    
-    console.log(date)
-    
-    return data.image ? data.image : "noi"
-  }
-  
+    import Calendar from "$lib/components/ui/calendar/calendar.svelte";
+    import CalendarDay from "$lib/components/ui/calendar/calendar-day.svelte";
+    import { CalendarDate, type DateValue } from "@internationalized/date";
+
+    let {
+        value = $bindable<CalendarDate | undefined>(
+            new CalendarDate(2026, 2, 1),
+        ),
+    } = $props();
+
+    let placeholder = $state<CalendarDate | undefined>(undefined);
+    let imageMap = $state<Map<string, string>>(new Map());
+
+    let displayedMonth = $derived(placeholder ?? value);
+
+    $effect(() => {
+        if (displayedMonth) {
+            const month = `${displayedMonth.year}-${String(displayedMonth.month).padStart(2, "0")}`;
+            fetchMonthImages(month);
+        }
+    });
+
+    async function fetchMonthImages(month: string) {
+        try {
+            const res = await fetch(`/api/entry?month=${month}`);
+            const entries = await res.json();
+            const newMap = new Map<string, string>();
+            for (const entry of entries) {
+                if (entry.image) {
+                    const d = new Date(entry.date);
+                    const key = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+                    newMap.set(key, entry.image);
+                }
+            }
+            imageMap = newMap;
+        } catch (err) {
+            console.error("Failed to fetch month images:", err);
+        }
+    }
+
+    function getImageForDate(day: DateValue): string | null {
+        const key = `${day.year}-${day.month}-${day.day}`;
+        return imageMap.get(key) ?? null;
+    }
 </script>
 
-<Calendar type="single" bind:value class="rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]">
+<Calendar
+    type="single"
+    bind:value
+    bind:placeholder
+    class="rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
+>
     {#snippet day({ day })}
         <CalendarDay>
             {day.day}
-            <img src={getImageForDate(day)} alt="Image for {day}" />
+            {@const img = getImageForDate(day)}
+            {#if img}
+                <img
+                    src={img}
+                    alt=""
+                    class="h-4 w-full rounded-sm object-cover"
+                />
+            {/if}
         </CalendarDay>
     {/snippet}
 </Calendar>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index db2ac29..818a691 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,7 +14,7 @@
     let selectedEntry = $state("");
     let selectedDate = $state(today());
     
-    let dateValue = $state(new CalendarDate(2026, 1, 1));
+    let dateValue = $state(new CalendarDate(2026, 2, 1));