From 6f799543422c1943ecff5220b2863769a259956d Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Thu, 9 Oct 2025 22:31:49 +0200
Subject: [PATCH] Improves event drag and drop highlighting

Enhances the visual feedback during and after event drag and drop operations in the calendar.

- Preserves the full opacity of the dragged event clone during the drag operation for better visibility.
- Applies a highlight class to the event after it's dropped to visually indicate the new location.
- Adds specific styling for the highlighted state based on event type.
---
 src/elements/SwpEventElement.ts      |  3 ++
 src/managers/AllDayManager.ts        |  3 ++
 src/renderers/AllDayEventRenderer.ts |  3 ++
 wwwroot/css/calendar-layout-css.css  | 62 ++++++++++++++++++++++++++--
 4 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/src/elements/SwpEventElement.ts b/src/elements/SwpEventElement.ts
index 60d27c3..d375398 100644
--- a/src/elements/SwpEventElement.ts
+++ b/src/elements/SwpEventElement.ts
@@ -354,6 +354,9 @@ export class SwpAllDayEventElement extends BaseSwpEventElement {
     // Disable pointer events on clone so it doesn't interfere with hover detection
     clone.style.pointerEvents = 'none';
 
+    // Preserve full opacity during drag
+    clone.style.opacity = '1';
+
     return clone;
   }
 
diff --git a/src/managers/AllDayManager.ts b/src/managers/AllDayManager.ts
index 97d538c..dea9909 100644
--- a/src/managers/AllDayManager.ts
+++ b/src/managers/AllDayManager.ts
@@ -490,6 +490,9 @@ export class AllDayManager {
     dragEndEvent.draggedClone.style.cursor = '';
     dragEndEvent.draggedClone.style.opacity = '';
 
+    // 7. Apply highlight class to show the dropped event with highlight color
+    dragEndEvent.draggedClone.classList.add('highlight');
+
     this.fadeOutAndRemove(dragEndEvent.originalElement);
 
     this.checkAndAnimateAllDayHeight();
diff --git a/src/renderers/AllDayEventRenderer.ts b/src/renderers/AllDayEventRenderer.ts
index 2c42d4a..6803d02 100644
--- a/src/renderers/AllDayEventRenderer.ts
+++ b/src/renderers/AllDayEventRenderer.ts
@@ -79,6 +79,9 @@ export class AllDayEventRenderer {
     const dayEvent = SwpAllDayEventElement.fromCalendarEvent(event);
     dayEvent.applyGridPositioning(layout.row, layout.startColumn, layout.endColumn);
 
+    // Apply highlight class to show events with highlight color
+    dayEvent.classList.add('highlight');
+
     container.appendChild(dayEvent);
   }
 
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 34a4553..755ca7b 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -361,11 +361,67 @@ swp-allday-container swp-allday-event {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-left: 3px solid rgba(0, 0, 0, 0.2);
 
-  &.dragging {
-    background: lab(70.24% -13.38 -46.17);
+  /* Event type colors - normal state */
+  &[data-type="meeting"] {
+    background: var(--color-event-meeting);
+    color: var(--color-text);
   }
+
+  &[data-type="meal"] {
+    background: var(--color-event-meal);
+    color: var(--color-text);
+  }
+
+  &[data-type="work"] {
+    background: var(--color-event-work);
+    color: var(--color-text);
+  }
+
+  &[data-type="milestone"] {
+    background: var(--color-event-milestone);
+    color: var(--color-text);
+  }
+
+  &[data-type="personal"] {
+    background: var(--color-event-personal);
+    color: var(--color-text);
+  }
+
+  &[data-type="deadline"] {
+    background: var(--color-event-milestone);
+    color: var(--color-text);
+  }
+
+  /* Dragging state - keep full opacity */
+  &.dragging {
+    opacity: 1;
+  }
+}
+
+/* Event type colors - highlight state (after drop) */
+swp-allday-container swp-allday-event.highlight[data-type="meeting"] {
+  background: var(--color-event-meeting-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="meal"] {
+  background: var(--color-event-meal-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="work"] {
+  background: var(--color-event-work-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="milestone"] {
+  background: var(--color-event-milestone-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="personal"] {
+  background: var(--color-event-personal-hl) !important;
+}
+
+swp-allday-container swp-allday-event.highlight[data-type="deadline"] {
+  background: var(--color-event-milestone-hl) !important;
 }
 
 /* Overflow indicator styling */