event details area initial redesign

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>
@@ -179,7 +193,7 @@ defineExpose({forceReload})
                     <span class="font-medium">Created by: {{ activeEvent.creator_name || "Unknown User"
                     }}</span>
                 </span>
-            </section>
+            </section> -->
             <!-- Description -->
             <section class="space-y-2 w-full">
                 <p class="text-lg font-semibold">Description</p>