From feccc4e17adf12f30494c5b1608aeb9fa745d940 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 21:00:29 +0200
Subject: [PATCH] feat: shared layout animation - card expands into detail
 modal

---
 src/components/board/CardThumbnail.tsx        |   1 +
 .../card-detail/CardDetailModal.tsx           | 163 +++++++++++-------
 2 files changed, 102 insertions(+), 62 deletions(-)

diff --git a/src/components/board/CardThumbnail.tsx b/src/components/board/CardThumbnail.tsx
index 941a1f8..01ad8d4 100644
--- a/src/components/board/CardThumbnail.tsx
+++ b/src/components/board/CardThumbnail.tsx
@@ -52,6 +52,7 @@ export function CardThumbnail({ card, boardLabels, columnId, onCardClick }: Card
       style={style}
       onClick={handleClick}
       className="w-full rounded-lg bg-pylon-surface shadow-sm text-left"
+      layoutId={`card-${card.id}`}
       variants={fadeSlideUp}
       initial={prefersReducedMotion ? false : "hidden"}
       animate="visible"
diff --git a/src/components/card-detail/CardDetailModal.tsx b/src/components/card-detail/CardDetailModal.tsx
index d200d94..35b0324 100644
--- a/src/components/card-detail/CardDetailModal.tsx
+++ b/src/components/card-detail/CardDetailModal.tsx
@@ -1,11 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
+import { AnimatePresence, motion } from "framer-motion";
 import { Separator } from "@/components/ui/separator";
 import { useBoardStore } from "@/stores/board-store";
 import { MarkdownEditor } from "@/components/card-detail/MarkdownEditor";
@@ -13,6 +7,7 @@ import { ChecklistSection } from "@/components/card-detail/ChecklistSection";
 import { LabelPicker } from "@/components/card-detail/LabelPicker";
 import { DueDatePicker } from "@/components/card-detail/DueDatePicker";
 import { AttachmentSection } from "@/components/card-detail/AttachmentSection";
+import { springs, staggerContainer, fadeSlideUp } from "@/lib/motion";
 
 interface CardDetailModalProps {
   cardId: string | null;
@@ -29,70 +24,115 @@ export function CardDetailModal({ cardId, onClose }: CardDetailModalProps) {
   const open = cardId != null && card != null;
 
   return (
-    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
-      <DialogContent className="max-w-3xl gap-0 overflow-hidden p-0">
-        {card && cardId && (
-          <>
-            {/* Hidden accessible description */}
-            <DialogDescription className="sr-only">
-              Card detail editor
-            </DialogDescription>
+    <AnimatePresence>
+      {open && card && cardId && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            onClick={onClose}
+          />
 
-            <div className="flex max-h-[80vh] flex-col sm:flex-row">
-              {/* Left panel: Title + Markdown (60%) */}
-              <div className="flex flex-1 flex-col overflow-y-auto p-6 sm:w-[60%]">
-                <DialogHeader className="mb-4">
-                  <InlineTitle
+          {/* Modal */}
+          <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
+            <motion.div
+              layoutId={`card-${cardId}`}
+              className="relative w-full max-w-3xl overflow-hidden rounded-xl bg-pylon-surface shadow-2xl"
+              transition={springs.gentle}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Close on Escape */}
+              <EscapeHandler onClose={onClose} />
+
+              {/* Hidden accessible description */}
+              <span className="sr-only">Card detail editor</span>
+
+              <motion.div
+                className="flex max-h-[80vh] flex-col sm:flex-row"
+                variants={staggerContainer(0.05)}
+                initial="hidden"
+                animate="visible"
+              >
+                {/* Left panel: Title + Markdown (60%) */}
+                <motion.div
+                  className="flex flex-1 flex-col overflow-y-auto p-6 sm:w-[60%]"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <div className="mb-4">
+                    <InlineTitle
+                      cardId={cardId}
+                      title={card.title}
+                      updateCard={updateCard}
+                    />
+                  </div>
+
+                  <MarkdownEditor cardId={cardId} value={card.description} />
+                </motion.div>
+
+                {/* Vertical separator */}
+                <Separator orientation="vertical" className="hidden sm:block" />
+
+                {/* Right sidebar (40%) */}
+                <motion.div
+                  className="flex flex-col gap-5 overflow-y-auto border-t border-border p-5 sm:w-[40%] sm:border-t-0"
+                  variants={fadeSlideUp}
+                  transition={springs.bouncy}
+                >
+                  <CoverColorPicker cardId={cardId} coverColor={card.coverColor} />
+
+                  <Separator />
+
+                  <LabelPicker
                     cardId={cardId}
-                    title={card.title}
-                    updateCard={updateCard}
+                    cardLabelIds={card.labels}
+                    boardLabels={boardLabels}
                   />
-                </DialogHeader>
 
-                <MarkdownEditor cardId={cardId} value={card.description} />
-              </div>
+                  <Separator />
 
-              {/* Vertical separator */}
-              <Separator orientation="vertical" className="hidden sm:block" />
+                  <DueDatePicker cardId={cardId} dueDate={card.dueDate} />
 
-              {/* Right sidebar (40%) */}
-              <div className="flex flex-col gap-5 overflow-y-auto border-t border-border p-5 sm:w-[40%] sm:border-t-0">
-                <CoverColorPicker cardId={cardId} coverColor={card.coverColor} />
+                  <Separator />
 
-                <Separator />
+                  <ChecklistSection
+                    cardId={cardId}
+                    checklist={card.checklist}
+                  />
 
-                <LabelPicker
-                  cardId={cardId}
-                  cardLabelIds={card.labels}
-                  boardLabels={boardLabels}
-                />
+                  <Separator />
 
-                <Separator />
-
-                <DueDatePicker cardId={cardId} dueDate={card.dueDate} />
-
-                <Separator />
-
-                <ChecklistSection
-                  cardId={cardId}
-                  checklist={card.checklist}
-                />
-
-                <Separator />
-
-                <AttachmentSection
-                  cardId={cardId}
-                  attachments={card.attachments}
-                />
-              </div>
-            </div>
-          </>
-        )}
-      </DialogContent>
-    </Dialog>
+                  <AttachmentSection
+                    cardId={cardId}
+                    attachments={card.attachments}
+                  />
+                </motion.div>
+              </motion.div>
+            </motion.div>
+          </div>
+        </>
+      )}
+    </AnimatePresence>
   );
 }
 
+/* ---------- Escape key handler ---------- */
+
+function EscapeHandler({ onClose }: { onClose: () => void }) {
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return null;
+}
+
 /* ---------- Inline editable title ---------- */
 
 interface InlineTitleProps {
@@ -106,7 +146,6 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
   const [draft, setDraft] = useState(title);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  // Sync when title changes externally
   useEffect(() => {
     setDraft(title);
   }, [title]);
@@ -152,12 +191,12 @@ function InlineTitle({ cardId, title, updateCard }: InlineTitleProps) {
   }
 
   return (
-    <DialogTitle
+    <h2
       onClick={() => setEditing(true)}
       className="cursor-pointer font-heading text-xl text-pylon-text transition-colors hover:text-pylon-accent"
     >
       {title}
-    </DialogTitle>
+    </h2>
   );
 }