From 1d56a2193d2502c6c6cd52c4d04eeb71085fa83c Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 17 Mar 2025 09:53:14 -0700
Subject: [PATCH] Clean up calendar header

---
 src/app/components/CalendarEventDate.svelte    |  8 +++++---
 src/app/components/CalendarEventHeader.svelte  | 13 +++++++++----
 src/app/components/CalendarEventItem.svelte    |  4 +---
 src/app/components/CalendarEventMeta.svelte    | 18 ++++++++++--------
 src/app/components/NoteContent.svelte          |  4 +---
 .../spaces/[relay]/calendar/[id]/+page.svelte  | 10 +++-------
 6 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/app/components/CalendarEventDate.svelte b/src/app/components/CalendarEventDate.svelte
index 04695654..5f3f3839 100644
--- a/src/app/components/CalendarEventDate.svelte
+++ b/src/app/components/CalendarEventDate.svelte
@@ -13,7 +13,9 @@
 </script>
 
 <div
-  class="flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-box border border-solid border-base-content p-2 sm:h-24 sm:w-24">
-  <span class="sm:text-lg">{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</span>
-  <span class="sm:text-4xl">{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
+  class="hidden h-32 w-32 min-w-32 flex-col items-center justify-center gap-1 rounded-box bg-base-300 p-2 sm:flex">
+  <strong>{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</strong>
+  <span class="text-4xl">{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
+  <span class="text-xs opacity-75"
+    >{Intl.DateTimeFormat(LOCALE, {weekday: "long"}).format(startDate)}</span>
 </div>
diff --git a/src/app/components/CalendarEventHeader.svelte b/src/app/components/CalendarEventHeader.svelte
index a1691412..504f6940 100644
--- a/src/app/components/CalendarEventHeader.svelte
+++ b/src/app/components/CalendarEventHeader.svelte
@@ -17,8 +17,13 @@
   const isSingleDay = $derived(startDateDisplay === endDateDisplay)
 </script>
 
-<p class="text-xl">{meta.title || meta.name}</p>
-<div class="flex items-center gap-2 text-sm">
-  <Icon icon="clock-circle" size={4} />
-  {formatTimestampAsTime(start)} — {isSingleDay ? formatTimestampAsTime(end) : formatTimestamp(end)}
+<div class="flex flex-grow flex-wrap justify-between gap-2">
+  <p class="text-xl">{meta.title || meta.name}</p>
+  <div class="flex items-center gap-2 text-sm">
+    <Icon icon="clock-circle" size={4} />
+    <span class="sm:hidden">{formatTimestampAsDate(start)}</span>
+    {formatTimestampAsTime(start)} — {isSingleDay
+      ? formatTimestampAsTime(end)
+      : formatTimestamp(end)}
+  </div>
 </div>
diff --git a/src/app/components/CalendarEventItem.svelte b/src/app/components/CalendarEventItem.svelte
index 50144569..7b4baeb4 100644
--- a/src/app/components/CalendarEventItem.svelte
+++ b/src/app/components/CalendarEventItem.svelte
@@ -15,9 +15,7 @@
 </script>
 
 <Link class="col-3 card2 bg-alt w-full cursor-pointer" href={makeCalendarPath(url, event.id)}>
-  <div class="flex items-center justify-between gap-2">
-    <CalendarEventHeader {event} />
-  </div>
+  <CalendarEventHeader {event} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
     <span class="whitespace-nowrap py-1 text-sm opacity-75">
       Posted by <ProfileLink pubkey={event.pubkey} />
diff --git a/src/app/components/CalendarEventMeta.svelte b/src/app/components/CalendarEventMeta.svelte
index e8571ff5..75b379af 100644
--- a/src/app/components/CalendarEventMeta.svelte
+++ b/src/app/components/CalendarEventMeta.svelte
@@ -12,13 +12,15 @@
   const meta = $derived(fromPairs(event.tags) as Record<string, string>)
 </script>
 
-<span>
-  Posted by <ProfileLink pubkey={event.pubkey} />
-</span>
-{#if meta.location}
-  <span>•</span>
+<div class="flex min-w-0 flex-col gap-1 text-sm opacity-75">
   <span class="flex items-center gap-1">
-    <Icon icon="map-point" size={4} />
-    {meta.location}
+    <Icon icon="user-circle" size={4} />
+    Posted by <ProfileLink pubkey={event.pubkey} />
   </span>
-{/if}
+  {#if meta.location}
+    <span class="ellipsize flex items-center gap-1 whitespace-nowrap">
+      <Icon icon="map-point" size={4} />
+      {meta.location}
+    </span>
+  {/if}
+</div>
diff --git a/src/app/components/NoteContent.svelte b/src/app/components/NoteContent.svelte
index 72a76eb7..345a7489 100644
--- a/src/app/components/NoteContent.svelte
+++ b/src/app/components/NoteContent.svelte
@@ -12,9 +12,7 @@
   <div class="flex items-start gap-4">
     <CalendarEventDate event={props.event} />
     <div class="flex flex-grow flex-col">
-      <div class="flex flex-grow flex-wrap justify-between gap-2">
-        <CalendarEventHeader event={props.event} />
-      </div>
+      <CalendarEventHeader event={props.event} />
       <div class="flex py-2 opacity-50">
         <div class="h-px flex-grow bg-base-content opacity-25"></div>
       </div>
diff --git a/src/routes/spaces/[relay]/calendar/[id]/+page.svelte b/src/routes/spaces/[relay]/calendar/[id]/+page.svelte
index 9bc45d5c..a1ee03bb 100644
--- a/src/routes/spaces/[relay]/calendar/[id]/+page.svelte
+++ b/src/routes/spaces/[relay]/calendar/[id]/+page.svelte
@@ -83,13 +83,9 @@
     <div class="card2 bg-alt col-3 z-feature">
       <div class="flex items-start gap-4">
         <CalendarEventDate event={$event} />
-        <div class="flex flex-grow flex-col">
-          <div class="flex flex-grow justify-between gap-2">
-            <CalendarEventHeader event={$event} />
-          </div>
-          <div class="flex items-center gap-2 text-sm opacity-75">
-            <CalendarEventMeta event={$event} />
-          </div>
+        <div class="flex min-w-0 flex-grow flex-col gap-1">
+          <CalendarEventHeader event={$event} />
+          <CalendarEventMeta event={$event} />
           <div class="flex py-2 opacity-50">
             <div class="h-px flex-grow bg-base-content opacity-25"></div>
           </div>