From e550f862bcf41015f0f952e43b04f629a6c4f5c1 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Thu, 4 Dec 2025 23:41:55 -0500
Subject: [PATCH] event details area initial redesign

---
 .../components/calendar/ViewCalendarEvent.vue | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/calendar/ViewCalendarEvent.vue b/ui/src/components/calendar/ViewCalendarEvent.vue
index 25fac9d..fa5185e 100644
--- a/ui/src/components/calendar/ViewCalendarEvent.vue
+++ b/ui/src/components/calendar/ViewCalendarEvent.vue
@@ -55,6 +55,20 @@ const endFmt = new Intl.DateTimeFormat(undefined, {
     hour: 'numeric', minute: '2-digit'
 })
 
+const dateFmt = new Intl.DateTimeFormat(undefined, {
+    weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
+    hour: 'numeric', minute: '2-digit'
+})
+
+const startText = computed(() => {
+    return dateFmt.format(new Date(activeEvent.value.start));
+})
+
+const endText = computed(() => {
+    return dateFmt.format(new Date(activeEvent.value.end));
+})
+
+
 const whenText = computed(() => {
     if (!activeEvent.value?.start) return ''
     const s = new Date(activeEvent.value.start)
@@ -103,7 +117,7 @@ const isPast = computed(() => {
     return new Date() < end;
 })
 
-defineExpose({forceReload})
+defineExpose({ forceReload })
 </script>
 
 <template>
@@ -125,8 +139,7 @@ defineExpose({forceReload})
                         <DropdownMenuItem @click="emit('edit', activeEvent)">
                             Edit
                         </DropdownMenuItem>
-                        <DropdownMenuItem v-if="activeEvent.cancelled"
-                            @click="setCancel(false)">
+                        <DropdownMenuItem v-if="activeEvent.cancelled" @click="setCancel(false)">
                             Un-Cancel
                         </DropdownMenuItem>
                         <DropdownMenuItem v-else @click="setCancel(true)">
@@ -161,15 +174,16 @@ defineExpose({forceReload})
                         @click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
                 </ButtonGroup>
             </section>
-            <!-- When -->
-            <section v-if="whenText" class="space-y-2 w-full">
-                <div class="inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm">
-                    <Clock class="size-4 opacity-80" />
-                    <span class="font-medium">{{ whenText }}</span>
-                </div>
+            <!-- Meta -->
+            <section class="space-y-2 w-full">
+                <p class="text-lg font-semibold">Details</p>
+                <p class="font-semibold">Start: <span class="font-normal">{{ startText }}</span></p>
+                <p class="font-semibold">End: <span class="font-normal">{{ endText }}</span></p>
+                <p class="font-semibold">Creator: <span class="font-normal">{{ activeEvent.creator_name || "Unknown User" }}</span></p>
+                <p class="font-semibold">Location: <span class="font-normal">{{ activeEvent.location || "Unknown" }}</span></p>
             </section>
             <!-- Quick meta chips -->
-            <section class="flex flex-wrap gap-2 w-full">
+            <!-- <section class="flex flex-wrap gap-2 w-full">
                 <span class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
                     <MapPin class="size-3.5 opacity-80" />
                     <span class="font-medium">{{ activeEvent.location || "Unknown" }}</span>
@@ -177,9 +191,9 @@ defineExpose({forceReload})
                 <span class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
                     <User class="size-3.5 opacity-80" />
                     <span class="font-medium">Created by: {{ activeEvent.creator_name || "Unknown User"
-                        }}</span>
+                    }}</span>
                 </span>
-            </section>
+            </section> -->
             <!-- Description -->
             <section class="space-y-2 w-full">
                 <p class="text-lg font-semibold">Description</p>