web: fade card drag shadows and keep the drop outline until it lands

apps/web/src/components/service/service-card.tsx

@@ -173,7 +173,10 @@ export default function ServiceCard({
       )}
     >
       {/* The shadow wraps the volumes too, they would cover it on the card */}
-      <div className="group-data-dragging/item:shadow-shadow-color/shadow-opacity flex w-full flex-1 flex-col rounded-xl group-data-dragging/item:shadow-xl">
+      <div
+        data-card-shadow
+        className="group-data-dragging/item:shadow-shadow-color/shadow-opacity flex w-full flex-1 flex-col rounded-xl group-data-dragging/item:shadow-xl"
+      >
         <ServicePanelOrPlaceholder {...panelProps}>
           {isPlaceholder ? (
             <Button variant="card" className={cardClassName}>

apps/web/src/components/service/service-group-card.tsx

@@ -82,7 +82,10 @@ export default function ServiceGroupCard({
         className,
       )}
     >
-      <div className="group-data-dragging/group:bg-card-hover group-data-dragging/group:shadow-shadow-color/shadow-opacity relative flex w-full flex-col rounded-xl border bg-[radial-gradient(color-mix(in_oklab,var(--border)_var(--opacity-8-10),transparent)_1px,transparent_1px),radial-gradient(color-mix(in_oklab,var(--border)_var(--opacity-8-10),transparent)_1px,transparent_1px)] bg-size-[10px_10px] bg-position-[0px_0px,5px_5px] group-data-dragging/group:pointer-events-none group-data-dragging/group:shadow-xl">
+      <div
+        data-card-shadow
+        className="group-data-dragging/group:bg-card-hover group-data-dragging/group:shadow-shadow-color/shadow-opacity relative flex w-full flex-col rounded-xl border bg-[radial-gradient(color-mix(in_oklab,var(--border)_var(--opacity-8-10),transparent)_1px,transparent_1px),radial-gradient(color-mix(in_oklab,var(--border)_var(--opacity-8-10),transparent)_1px,transparent_1px)] bg-size-[10px_10px] bg-position-[0px_0px,5px_5px] group-data-dragging/group:pointer-events-none group-data-dragging/group:shadow-xl"
+      >
         <NewEntityIndicator id={groupObject.group.id} />
         <div className="flex w-full items-center gap-2 px-4 pt-2.5 pr-10 pb-1.5 transition-opacity duration-(--skeleton-smooth-lead-in) group-data-deleting/group:pointer-events-none group-data-deleting/group:opacity-(--skeleton-smooth-weaker-opacity)">
           <TitleButton

apps/web/src/components/sortable/card-sorting.ts

@@ -51,7 +51,7 @@ class CardKeyboardSensor extends KeyboardSensor {
 export function useCardSensors() {
   return useSensors(
     useSensor(CardMouseSensor, {
-      activationConstraint: { distance: 6, delay: 300, tolerance: Infinity },
+      activationConstraint: { distance: 6, delay: 250, tolerance: Infinity },
     }),
     useSensor(CardTouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }),
     useSensor(CardKeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, keyboardCodes }),
@@ -80,13 +80,15 @@ const translate = (x: number, y: number) => `translate3d(${x}px, ${y}px, 0)`;
 
 // The picked up card shrinks a little, and grows back as it lands. It grows back
 // even when it lands where it was picked up, which dnd-kit's own drop would skip.
+// Its shadow fades out and the spot it lands on stays outlined until it gets there.
 const dropCard: DropAnimationFunction = (params) => {
   const { active, dragOverlay, transform } = params;
   const card = dragOverlay.node.firstElementChild;
+  const shadow = dragOverlay.node.querySelector("[data-card-shadow]");
   const x = transform.x - (dragOverlay.rect.left - active.rect.left);
   const y = transform.y - (dragOverlay.rect.top - active.rect.top);
   const { duration, easing } = defaultDropAnimation;
-  const cleanup = defaultDropAnimation.sideEffects?.(params);
+  active.node.dataset.dragSource = "";
   const animations = [
     dragOverlay.node.animate(
       { transform: [translate(transform.x, transform.y), translate(x, y)] },
@@ -96,11 +98,20 @@ const dropCard: DropAnimationFunction = (params) => {
       { transform: [getComputedStyle(card).transform, "none"] },
       { duration, easing, fill: "forwards" },
     ),
+    shadow?.animate(
+      { boxShadow: [getComputedStyle(shadow).boxShadow, "none"] },
+      { duration, easing, fill: "forwards" },
+    ),
   ];
-  return Promise.allSettled(animations.map((a) => a?.finished)).then(() => cleanup?.());
+  return Promise.allSettled(animations.map((a) => a?.finished)).then(() => {
+    delete active.node.dataset.dragSource;
+  });
 };
 
-export const cardOverlayProps = { className: "*:animate-card-grab", dropAnimation: dropCard };
+export const cardOverlayProps = {
+  className: "*:animate-card-grab **:data-card-shadow:animate-card-shadow-in",
+  dropAnimation: dropCard,
+};
 
 // dnd-kit measures the overlay's card, so it has to see past the shrink to place the drop
 export const cardMeasuring: MeasuringConfiguration = {

apps/web/src/components/team/project-card.tsx

@@ -162,7 +162,7 @@ function ConditionalButton({
 
   if (linkProps === undefined) {
     return (
-      <Button variant={variant} className={className}>
+      <Button data-card-shadow variant={variant} className={className}>
         {children}
       </Button>
     );
@@ -182,7 +182,7 @@ function ConditionalButton({
         }}
         error={error}
       >
-        <Button variant={variant} className={className}>
+        <Button data-card-shadow variant={variant} className={className}>
           {children}
         </Button>
       </DeleteEntityTrigger>
@@ -192,6 +192,7 @@ function ConditionalButton({
   return (
     <LinkButton
       {...linkProps}
+      data-card-shadow
       variant={variant}
       disabled={isDeleting}
       // The browser's own link dragging would cancel the reorder drag

apps/web/src/globals.css

@@ -114,6 +114,7 @@
   --animate-loading-bar: loading-bar 45s linear infinite;
   --animate-line-in: line-in 0.01s step-end forwards;
   --animate-card-grab: card-grab 150ms ease-out both;
+  --animate-card-shadow-in: card-shadow-in 150ms ease-out;
   --animate-ping-pong: ping-pong 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   --animate-ping-pong-long: ping-pong 4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
@@ -244,7 +245,12 @@
       transform: scale(1);
     }
     100% {
-      transform: scale(0.97);
+      transform: scale(0.96);
+    }
+  }
+  @keyframes card-shadow-in {
+    0% {
+      box-shadow: none;
     }
   }
   @keyframes ping-pong {