Clean up calendar header

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">
+  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">
-  <span class="sm:text-lg">{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</span>
+  <strong>{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</strong>
-  <span class="sm:text-4xl">{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
+  <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>

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 flex-grow flex-wrap justify-between gap-2">
-<div class="flex items-center gap-2 text-sm">
+  <p class="text-xl">{meta.title || meta.name}</p>
-  <Icon icon="clock-circle" size={4} />
+  <div class="flex items-center gap-2 text-sm">
-  {formatTimestampAsTime(start)} — {isSingleDay ? formatTimestampAsTime(end) : formatTimestamp(end)}
+    <Icon icon="clock-circle" size={4} />
+    <span class="sm:hidden">{formatTimestampAsDate(start)}</span>
+    {formatTimestampAsTime(start)} — {isSingleDay
+      ? formatTimestampAsTime(end)
+      : formatTimestamp(end)}
+  </div>
 </div>

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} />
-    <CalendarEventHeader {event} />
-  </div>
   <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} />

src/app/components/CalendarEventMeta.svelte

@@ -12,13 +12,15 @@
   const meta = $derived(fromPairs(event.tags) as Record<string, string>)
 </script>
 
-<span>
+<div class="flex min-w-0 flex-col gap-1 text-sm opacity-75">
-  Posted by <ProfileLink pubkey={event.pubkey} />
-</span>
-{#if meta.location}
-  <span>•</span>
   <span class="flex items-center gap-1">
-    <Icon icon="map-point" size={4} />
+    <Icon icon="user-circle" size={4} />
-    {meta.location}
+    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>

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} />
-        <CalendarEventHeader event={props.event} />
-      </div>
       <div class="flex py-2 opacity-50">
         <div class="h-px flex-grow bg-base-content opacity-25"></div>
       </div>

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 min-w-0 flex-grow flex-col gap-1">
-          <div class="flex flex-grow justify-between gap-2">
+          <CalendarEventHeader event={$event} />
-            <CalendarEventHeader event={$event} />
+          <CalendarEventMeta event={$event} />
-          </div>
-          <div class="flex items-center gap-2 text-sm opacity-75">
-            <CalendarEventMeta event={$event} />
-          </div>
           <div class="flex py-2 opacity-50">
             <div class="h-px flex-grow bg-base-content opacity-25"></div>
           </div>