anoopcodehack · Oct 1, 2026 · Sep 30, 2026
diff --git a/devboard/client/src/components/Board/TaskCard.jsx b/devboard/client/src/components/Board/TaskCard.jsx
@@ -128,6 +128,18 @@ const TaskCard = ({
       false);
   const { suggestedTags, loadingTags, handleSuggestTags, handleAddTag } = useSuggestTags(task, selectedSnippet, updateTask);
   const [showPreview, setShowPreview] = useState(false);
+  const [isFlipping, setIsFlipping] = useState(false);
+  const prevStatus = useRef(task.status);
+
+  useEffect(() => {
+    if (prevStatus.current !== task.status) {
+      setIsFlipping(true);
+      const timer = setTimeout(() => setIsFlipping(false), 400);
+      prevStatus.current = task.status;
+      return () => clearTimeout(timer);
+    }
+  }, [task.status]);
+
 
   // ── Time tracker ──────────────────────────────────────────
   const [elapsed, setElapsed] = useState(0);
@@ -269,7 +281,8 @@ const actualPomodoros = task.pomodoroCount || 0;
           className={`card group bg-[var(--bg-card)] border rounded-lg p-3 cursor-pointer transition-all
             hover:shadow-lg ${GLOW[task.priority] || "hover:shadow-[var(--accent-20)]"}
             ${snapshot.isDragging ? "border-[var(--accent)] shadow-lg shadow-[var(--accent-10)]" : isOverdue
-              ? "border-red-500 border-l-4 hover:border-red-400" : "border-[var(--border-primary)] hover:border-[var(--border-hover)]"}`}
+              ? "border-red-500 border-l-4 hover:border-red-400" : "border-[var(--border-primary)] hover:border-[var(--border-hover)]"}
+            ${isFlipping ? "card-flip" : ""}`}
         >
 
           {/* Title */}

diff --git a/devboard/client/src/index.css b/devboard/client/src/index.css
@@ -1,79 +1,98 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  /* Default accent */
-  --accent: #7f77dd;
-
-  /* Accent opacity variants */
-  --accent-10: #7f77dd1a;
-  --accent-15: #7f77dd26;
-  --accent-20: #7f77dd33;
-  --accent-30: #7f77dd4d;
-  --accent-40: #7f77dd66;
-
-  /* Background */
-  --bg: #0f0f10;
-  --bg-primary: var(--bg);
-  --bg-card: #18181b;
-  --bg-muted: #27272a;
-
-  /* Used by Login gradient */
-  --bg-accent: #15121d;
-
-  /* Borders */
-  --border-primary: rgba(255, 255, 255, 0.1);
-
-  /* Text */
-  --text-primary: #f4f4f5;
-  --text-secondary: #a1a1aa;
-  --text-tertiary: #71717a;
-  --text-muted: #52525b;
-}
-
-body {
-  margin: 0;
-
-  background-color: var(--bg);
-
-  background-image: radial-gradient(
-    circle,
-    var(--border-primary) 1px,
-    transparent 1px
-  );
-
-  background-size: 24px 24px;
-
-  color: var(--text-primary);
-
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Open Sans",
-    "Helvetica Neue",
-    sans-serif;
-
-  transition: background-color 0.3s ease;
-}
-
-@media print {
-  .no-print {
-    display: none !important;
-  }
-
-  .board {
-    display: block !important;
-    overflow: visible !important;
-    height: auto !important;
-  }
-
-  .card {
-    break-inside: avoid;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Default accent */
+  --accent: #7f77dd;
+
+  /* Accent opacity variants */
+  --accent-10: #7f77dd1a;
+  --accent-15: #7f77dd26;
+  --accent-20: #7f77dd33;
+  --accent-30: #7f77dd4d;
+  --accent-40: #7f77dd66;
+
+  /* Background */
+  --bg: #0f0f10;
+  --bg-primary: var(--bg);
+  --bg-card: #18181b;
+  --bg-muted: #27272a;
+
+  /* Used by Login gradient */
+  --bg-accent: #15121d;
+
+  /* Borders */
+  --border-primary: rgba(255, 255, 255, 0.1);
+
+  /* Text */
+  --text-primary: #f4f4f5;
+  --text-secondary: #a1a1aa;
+  --text-tertiary: #71717a;
+  --text-muted: #52525b;
+}
+
+body {
+  margin: 0;
+
+  background-color: var(--bg);
+
+  background-image: radial-gradient(
+    circle,
+    var(--border-primary) 1px,
+    transparent 1px
+  );
+
+  background-size: 24px 24px;
+
+  color: var(--text-primary);
+
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
+
+  transition: background-color 0.3s ease;
+}
+
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  .board {
+    display: block !important;
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  .card {
+    break-inside: avoid;
+  }
+}
+
+@keyframes cardFlip {
+  0% {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+  50% {
+    transform: rotateY(90deg);
+    opacity: 0;
+  }
+  100% {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+}
+
+.card-flip {
+  animation: cardFlip 0.4s ease-in-out;
+}