split event view into seperate component

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { CalendarEvent } from '@shared/types/calendar'
+import { Clock, MapPin, User, X } from 'lucide-vue-next';
+import { computed } from 'vue';
+import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
+import Button from '../ui/button/Button.vue';
+
+const props = defineProps<{
+    event: CalendarEvent | null
+    onClose?: () => void
+}>()
+
+const emit = defineEmits<{
+    (e: 'close'): void
+}>()
+
+const activeEvent = computed(() => props.event)
+
+const startFmt = new Intl.DateTimeFormat(undefined, {
+    weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
+    hour: 'numeric', minute: '2-digit'
+})
+const endFmt = new Intl.DateTimeFormat(undefined, {
+    hour: 'numeric', minute: '2-digit'
+})
+
+const whenText = computed(() => {
+    if (!activeEvent.value?.start) return ''
+    const s = new Date(activeEvent.value.start)
+    const e = activeEvent.value?.end ? new Date(activeEvent.value.end) : null
+    return e
+        ? `${startFmt.format(s)} – ${endFmt.format(e)}`
+        : `${startFmt.format(s)}`
+})
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex items-center justify-between gap-3 border-b px-4 py-3">
+            <h2 class="text-lg font-semibold break-all">
+                {{ activeEvent?.name || 'Event' }}
+            </h2>
+            <button
+                class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition"
+                aria-label="Close" @click="emit('close')">
+                <X class="size-4" />
+            </button>
+        </div>
+        <!-- Body -->
+        <div class="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-6">
+            <section>
+                <ButtonGroup>
+                    <Button variant="outline">Going</Button>
+                    <Button variant="outline">Maybe</Button>
+                    <Button variant="outline">Declined</Button>
+                </ButtonGroup>
+            </section>
+            <!-- When -->
+            <section v-if="whenText" class="space-y-2">
+                <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>
+            </section>
+            <!-- Quick meta chips -->
+            <section class="flex flex-wrap gap-2">
+                <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>
+                </span>
+                <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>
+            </section>
+            <!-- Description -->
+            <section class="space-y-2">
+                <p class="text-lg font-semibold">Description</p>
+                <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2">
+                    {{ activeEvent.description }}
+                </p>
+            </section>
+            <!-- Attendance -->
+            <section class="space-y-2">
+                <p class="text-lg font-semibold">Attendance</p>
+                <!-- <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2">
+                            {{ activeEvent.description }}
+                        </p> -->
+            </section>
+        </div>
+        <!-- Footer (optional actions) -->
+        <div class="border-t px-4 py-3 flex items-center justify-end gap-2">
+            <button class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40 transition">
+                Edit
+            </button>
+            <button
+                class="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm hover:opacity-90 transition">
+                Open details
+            </button>
+        </div>
+
+    </div>
+</template>