Added reactivity when adding an event

components/calendar/CalendarEventDetails.vue

@@ -11,7 +11,8 @@ import {
   PhDotsThreeOutlineVertical
 } from '@phosphor-icons/vue'
 
-const { defaultDate, getFormattedDateTitle, jumpToDate } = useCalendar()
+const { defaultDate, getFormattedDateTitle, jumpToDate, revealEditEventModal, getRelativeString } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendarEvents())
 
 const props = defineProps<{
   event: CalendarEvent
@@ -25,8 +26,6 @@ const eventDetails = ref<HTMLElement>()
 
 const emit = defineEmits(['query:close-popover'])
 
-const { getRelativeString } = useCalendar()
-
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
   ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
@@ -41,11 +40,11 @@ function handleJumpToDate(date: RPGDate) {
  * Edit event
  */
 const commandMenuOpened = ref(false)
-const editModelOpened = ref(false)
 
 function deployEditModal() {
+  lastActiveEvent.value = { ...props.event }
+  revealEditEventModal()
   commandMenuOpened.value = false
-  editModelOpened.value = true
 }
 </script>
 
@@ -154,8 +153,6 @@ function deployEditModal() {
       </UiPopover>
     </menu>
 
-    <CalendarFormUpdateEvent v-model:model-value="editModelOpened" :event :anchor="eventDetails" />
-
     <nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
       <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child>
         <button