4 files changed, 47 insertions, 9 deletions
diff --git a/pages/agenda.vue b/pages/agenda.vue
index 7ef5f44..9f83210 100644
--- a/pages/agenda.vue
+++ b/pages/agenda.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Panel from '~/components/Panel.vue';
-import { LucideRadio } from "lucide-vue-next";
+import Dialog from '~/components/Dialog.vue';
 
 const favouritesStore = useFavouritesStore();
 const scheduleStore = useScheduleStore();
@@ -17,15 +17,14 @@ const calendarLinkWithPageProtocol = computed(() => {
   return window.location.protocol + '//' + calendarLink.value;
 });
 
+const refConfirmDeleteDialog = ref<typeof Dialog>();
+
 const calendarAction = ref(false);
 
 useFetch(config.public.baseURL + '/calendar', {
   method: 'GET',
   server: false,
   lazy: true,
-  onResponseError: ({ response }) => {
-    calendarStatus.value = 'idle';
-  },
   onResponse: ({ response }) => {
     if (!response.ok) {
       if (response.status !== 404) {
@@ -43,7 +42,7 @@ function generateCalendar() {
   useFetch(config.public.baseURL + '/calendar', {
     method: 'POST',
     server: false,
-  lazy: true,
+    lazy: true,
     onResponseError: ({ response }) => {
       errorStore.setError(response._data.message || 'An unknown error occurred');
       calendarAction.value = false;
@@ -98,7 +97,7 @@ function deleteCalendar() {
           <template v-if="calendarLink">
             <span>You can add your agenda to your own calendar using the iCal link below</span>
             <Input :value="calendarLinkWithPageProtocol" readonly/>
-            <Button @click="deleteCalendar" :loading="calendarAction">Delete calendar</Button>
+            <Button @click="refConfirmDeleteDialog!.show()" :loading="calendarAction">Delete calendar</Button>
           </template>
           <template v-else>
             <span>You do not have a calendar link yet. Use the button below to request a calendar link to subscribe to on your own calendar app.</span>
@@ -112,6 +111,15 @@ function deleteCalendar() {
   <Panel v-else>
     <span>You have not added any favourites yet.</span>
   </Panel>
+  
+  <Dialog ref="refConfirmDeleteDialog" title="Delete calendar" :confirmation="true" @submit="deleteCalendar" :fit-contents="true">
+    <span>Are you sure you want to delete your calendar?</span>
+    <span>Your unique link cannot be recovered if you do so.</span>
+    <template v-slot:actions>
+      <Button kind="secondary" type="button" @click="refConfirmDeleteDialog!.close()">Cancel</Button>
+      <Button kind="danger" type="submit" :loading="calendarAction">Delete</Button>
+    </template>
+  </Dialog>
 </template>
 
 <style scoped>
diff --git a/pages/events.vue b/pages/events.vue
index bfbe553..9ae35ed 100644
--- a/pages/events.vue
+++ b/pages/events.vue
@@ -10,7 +10,7 @@ const scheduleStore = useScheduleStore();
     <div v-for="[day, events] of Object.entries(scheduleStore.eventsPerDay)" :key="day" class="events-container">
       <ul class="events-list">
         <li v-for="event in events" :key="event.id" class="event-item" :data-index="event.id">
-          <EventListing :event="event" />
+          <EventListing :event="event" :show-relative-time="true" />
         </li>
       </ul>
     </div>
diff --git a/pages/live.vue b/pages/live.vue
index b181ff0..1c5679f 100644
--- a/pages/live.vue
+++ b/pages/live.vue
@@ -1,10 +1,40 @@
 <script setup lang="ts">
 import Panel from '~/components/Panel.vue';
+import { type Event } from '~/stores/schedule';
 
+const favouritesStore = useFavouritesStore();
+const scheduleStore = useScheduleStore();
+const errorStore = useErrorStore();
+
+const favouriteEvents = computed(() => {
+  return scheduleStore.events.filter((event) => favouritesStore.isFavourite(event));
+});
+const todayEvents = computed(() => {
+  return scheduleStore.events.filter((event) => isToday(new Date(event.start)));
+});
+const happeningNow = computed(() => {
+  return todayEvents.value.filter((event) => isEventHappeningNow(event));
+});
+const favouritesHappeningNow = computed(() => {
+  return happeningNow.value.filter((event) => favouritesStore.isFavourite(event));
+});
+
+function isEventHappeningNow(event: Event): boolean {
+  const now = new Date();
+  return event.start <= now && event.end >= now;
+}
+
+function isToday(date: Date): boolean {
+  const today = new Date();
+  return date.getDate() === today.getDate() &&
+         date.getMonth() === today.getMonth() &&
+         date.getFullYear() === today.getFullYear();
+}
 </script>
 
 <template>
-  <Panel>
+  <Panel kind="success" class="ongoing" v-if="happeningNow.length > 0">
+    
   </Panel>
 
 </template>
diff --git a/pages/register.vue b/pages/register.vue
index b06578f..35e77dd 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -133,7 +133,7 @@ const handleSubmit = async (e: Event) => {
 }
 
 .auth-error {
-  color: var(--color-error);
+  color: var(--color-error-light);
 }
 
 .form-group {