Added update logic for single day events

app/components/calendar/event/Event.vue

@@ -2,14 +2,17 @@
 import { cn } from "@/lib/utils"
 import type { RPGDate } from "@@/models/Date"
 import type { CalendarEvent } from "@@/models/CalendarEvent"
+import { ja } from "zod/v4/locales";
 
 const props = defineProps<{
   event: CalendarEvent
   tileDate: RPGDate
 }>()
 
-const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
-const { lastActiveEvent } = storeToRefs(useCalendar())
+const buttonRef = useTemplateRef<HTMLButtonElement>('buttonRef')
+
+const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal, resetSkeleton } = useCalendar()
+const { lastActiveEvent, eventSkeleton, isDraggingEvent } = storeToRefs(useCalendar())
 
 const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
 const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
@@ -49,13 +52,29 @@ onMounted(() => {
     handleDelete()
   })
 })
+
+// Draggable logic
+const isTileDragging = shallowRef(false)
+
+function handleDragStart() {
+  isTileDragging.value = true
+  isDraggingEvent.value = true
+  eventSkeleton.value = structuredClone(toRaw(props.event))
+  handleClosePopover()
+}
+function handleDragEnd() {
+  isTileDragging.value = false
+  isDraggingEvent.value = false
+}
 </script>
 
 <template>
   <UiPopover v-model:open="isPopoverDetailsOpen">
     <UiPopoverTrigger as-child>
       <button
-        class="event-button text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
+        ref="buttonRef"
+        class="event-button text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left rounded-sm transition-opacity outline-offset-1 cursor-pointer"
+        :draggable="event.endDate ? 'false' : 'true'"
         :class="
           cn(
             `element-${event.category?.color}`,
@@ -63,11 +82,17 @@ onMounted(() => {
               'is-hidden': event.hidden,
               'rounded-r-none': isStartEvent,
               'rounded-l-none': isEndEvent,
+            },
+            {
+              'opacity-60': isTileDragging,
+              'opacity-100': !isTileDragging
             }
           )
         "
         @dblclick="handleDoubleClick"
         @keydown.delete="handleDelete"
+        @dragstart="handleDragStart"
+        @dragend="handleDragEnd"
       >
         <div class="line-clamp-2 [overflow-wrap:anywhere] hyphens-auto">
           {{ eventTitle }}