Add back event card -> popup transitions

src/components/DraggableEvent.tsx

@@ -24,6 +24,7 @@ export default function DraggableEvent({
 }: DraggableEventProps) {
   const ref = useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
   const screenWidth = useRef(isClient ? window.innerWidth : 0);
   const lastChangeTime = useRef(0);
 
@@ -36,6 +37,7 @@ export default function DraggableEvent({
       onDragStart: () => {
         screenWidth.current = window.innerWidth;
         setIsDragging(true);
+        setIsTransitioning(true);
         onDragStart();
         lastChangeTime.current = Date.now();
       },
@@ -56,7 +58,9 @@ export default function DraggableEvent({
       },
       onDrop: () => {
         setIsDragging(false);
+        setIsTransitioning(true);
         onDragEnd();
+        setTimeout(() => setIsTransitioning(false), 300);
       },
       getInitialData: () => ({ id: event.id, date }),
       dragHandle: element
@@ -68,14 +72,11 @@ export default function DraggableEvent({
   return (
     <motion.div
       ref={ref}
-      layoutId={isDragging ? event.id : undefined}
+      layoutId={event.id}
       onClick={() => !isDragging && onEventClick({ event, date })}
       className="bg-white p-4 rounded shadow-md mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
       whileHover={{ scale: 1.01 }}
-      transition={{ 
-        duration: 0.3,
-        layout: { duration: 0.1 }
-      }}
+      transition={{ duration: 1.2 }}
       style={{
         opacity: isDragging ? 0.7 : 1,
         userSelect: 'none',
@@ -87,8 +88,8 @@ export default function DraggableEvent({
       <div className="relative rounded overflow-hidden mb-2">
         {event.imageUrl && (
           <motion.img 
-            layoutId={isDragging ? `event-image-${event.id}` : undefined}
-            transition={{ duration: 0.3 }}
+            layoutId={`event-image-${event.id}`}
+            transition={{ duration: 1.2 }}
             src={event.imageUrl} 
             alt={event.title}
             className="w-full h-16 md:h-12 object-cover pointer-events-none"
@@ -96,16 +97,16 @@ export default function DraggableEvent({
           />
         )}
         <motion.div
-          layoutId={isDragging ? `event-time-${event.id}` : undefined}
-          transition={{ duration: 0.3 }}
+          layoutId={`event-time-${event.id}`}
+          transition={{ duration: 1.2 }}
           className="absolute top-1 right-1 bg-gradient-to-br from-indigo-600 to-violet-600 text-white text-[12px] md:text-[10px] px-1 py-0.5 rounded"
         >
           {event.time}
         </motion.div>
       </div>
       <motion.h3 
-        layoutId={isDragging ? `event-title-${event.id}` : undefined}
-        transition={{ duration: 0.3 }}
+        layoutId={`event-title-${event.id}`}
+        transition={{ duration: 1.2 }}
         className="text-sm text-black font-sans"
       >
         {event.title}