added task transitions to movement

bun.lock

@@ -5,6 +5,7 @@
     "": {
       "name": "tasgrid",
       "dependencies": {
+        "@formkit/auto-animate": "^0.9.0",
         "@kobalte/core": "^0.13.11",
         "@tailwindcss/vite": "^4.1.18",
         "@tiptap/core": "^3.18.0",
@@ -297,6 +298,8 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
+    "@formkit/auto-animate": ["@formkit/auto-animate@0.9.0", "", {}, "sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA=="],
+
     "@internationalized/date": ["@internationalized/date@3.10.1", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA=="],
 
     "@internationalized/number": ["@internationalized/number@3.6.5", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g=="],

package.json

@@ -15,6 +15,7 @@
     "deploy": "git pull && bun install && bun run build && (pm2 restart tasgrid || bun run start-prod)"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.9.0",
     "@kobalte/core": "^0.13.11",
     "@tailwindcss/vite": "^4.1.18",
     "@tiptap/core": "^3.18.0",

src/components/TaskCard.tsx

@@ -9,7 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/u
 import { getStatusOptionsForTask } from "@/lib/constants";
 import { StatusCircle } from "./StatusCircle";
 
-export const TaskCard: Component<{ task: Task }> = (props) => {
+export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props) => {
     const { resolvedTheme } = useTheme();
     const urgencyLevel = createMemo(() => calculateUrgencyFromDate(props.task.dueDate));
 
@@ -58,8 +58,9 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
     return (
         <div
             class={cn(
-                "group relative flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-500 hover:duration-100 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
-                props.task.completed && "opacity-60"
+                "group relative flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-[background-color,border-color,box-shadow,opacity] duration-500 hover:duration-100 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
+                props.task.completed && "opacity-60",
+                props.isShaking && "animate-task-shake bg-accent/20"
             )}
             onClick={() => setActiveTaskId(props.task.id)}
         >

src/hooks/useDelayedSort.ts

@@ -0,0 +1,65 @@
+import { createSignal, createEffect, onCleanup, untrack } from "solid-js";
+import type { Task } from "@/store";
+
+export function useDelayedSort(
+    sourceTasks: () => Task[],
+    sortFn: (a: Task, b: Task) => number,
+    delayMs = 300
+) {
+    const initialTasks = untrack(() => [...sourceTasks()].sort(sortFn));
+    const [displayedTasks, setDisplayedTasks] = createSignal<Task[]>(initialTasks);
+    const [shakingTaskIds, setShakingTaskIds] = createSignal<string[]>([]);
+
+    let timer: number | undefined;
+
+    createEffect(() => {
+        const sorted = [...sourceTasks()].sort(sortFn);
+        const currentDisplayed = untrack(() => displayedTasks());
+
+        // Initial load (though now handled by initial state, kept for safety if it resets)
+        if (currentDisplayed.length === 0 && sorted.length > 0) {
+            setDisplayedTasks(sorted);
+            return;
+        }
+
+        // Check if anything fundamentally changed order
+        const newIds = sorted.map(t => t.id).join(',');
+        const oldIds = currentDisplayed.map(t => t.id).join(',');
+
+        if (newIds !== oldIds) {
+            // Find which IDs have moved or changed their presence
+            // To be safe, let's just shake all currently visible ones, or maybe just the ones moving.
+            // A simple "shake everything" works perfectly for a brief warning: "Items are shifting!"
+            // The user wanted "tasks an animation when they rearange where they shake"
+            const changedSet = new Set<string>();
+            sorted.forEach((t: Task, i: number) => {
+                if (currentDisplayed[i]?.id !== t.id) {
+                    changedSet.add(t.id);
+                    if (currentDisplayed[i]) changedSet.add(currentDisplayed[i].id);
+                }
+            });
+
+            if (changedSet.size > 0) {
+                setShakingTaskIds(Array.from(changedSet));
+
+                if (timer) clearTimeout(timer);
+                timer = window.setTimeout(() => {
+                    setShakingTaskIds([]);
+                    setDisplayedTasks(sorted);
+                }, delayMs);
+            } else {
+                setDisplayedTasks(sorted);
+            }
+        } else {
+            // Identical order, just data updates (e.g. title changes)
+            // We want these to pass through instantly without rearranging
+            setDisplayedTasks(sorted);
+        }
+    });
+
+    onCleanup(() => {
+        if (timer) clearTimeout(timer);
+    });
+
+    return { displayedTasks, shakingTaskIds };
+}

src/index.css

@@ -55,6 +55,40 @@
       height: 0;
     }
   }
+
+  --animate-task-shake: task-shake 0.3s ease-in-out;
+
+  @keyframes task-shake {
+
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+
+    25% {
+      transform: translateX(3px);
+    }
+
+    50% {
+      transform: translateX(-3px);
+    }
+
+    75% {
+      transform: translateX(3px);
+    }
+  }
+
+  --animate-task-enter: task-enter 0.25s ease-out backwards;
+
+  @keyframes task-enter {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
 }
 
 :root {

src/views/CriticalView.tsx

@@ -1,15 +1,24 @@
-import { type Component, For, createMemo } from "solid-js";
+import { type Component, For, createMemo, onMount } from "solid-js";
 import { store, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
+import { useDelayedSort } from "@/hooks/useDelayedSort";
+import autoAnimate from "@formkit/auto-animate";
 
 export const CriticalView: Component = () => {
-    const sortedTasks = createMemo(() => {
-        return [...store.tasks]
-            .filter(t => !t.deletedAt && matchesFilter(t))
-            .sort((a, b) => {
-                if (a.completed !== b.completed) return a.completed ? 1 : -1;
-                return getCombinedScore(b) - getCombinedScore(a);
-            });
+    const sourceTasks = createMemo(() => store.tasks.filter(t => !t.deletedAt && matchesFilter(t)));
+
+    const { displayedTasks, shakingTaskIds } = useDelayedSort(
+        sourceTasks,
+        (a, b) => {
+            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            return getCombinedScore(b) - getCombinedScore(a);
+        },
+        300
+    );
+
+    let listRef: HTMLDivElement | undefined;
+    onMount(() => {
+        if (listRef) autoAnimate(listRef, { duration: 300, easing: 'ease-out' });
     });
 
     return (
@@ -19,13 +28,17 @@ export const CriticalView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ranked by highest urgency + priority.</p>
             </header>
 
-            <div class="grid gap-3">
-                <For each={sortedTasks()}>
-                    {(task) => <TaskCard task={task} />}
+            <div class="grid gap-3" ref={listRef}>
+                <For each={displayedTasks()}>
+                    {(task) => (
+                        <div class="animate-task-enter">
+                            <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
+                        </div>
+                    )}
                 </For>
             </div>
 
-            {sortedTasks().length === 0 && (
+            {displayedTasks().length === 0 && (
                 <div class="flex flex-col items-center justify-center py-20 text-center">
                     <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                         <span class="text-2xl">✨</span>

src/views/DigInView.tsx

@@ -1,20 +1,29 @@
-import { type Component, For, createMemo } from "solid-js";
+import { type Component, For, createMemo, onMount } from "solid-js";
 import { store, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
+import { useDelayedSort } from "@/hooks/useDelayedSort";
+import autoAnimate from "@formkit/auto-animate";
 
 export const DigInView: Component = () => {
-    const sortedTasks = createMemo(() => {
-        return [...store.tasks]
-            .filter(t => !t.deletedAt && matchesFilter(t))
-            .sort((a, b) => {
-                if (a.completed !== b.completed) return a.completed ? 1 : -1;
-                // Primary: Size descending (largest first)
-                const sizeA = a.size ?? 5;
-                const sizeB = b.size ?? 5;
-                if (sizeA !== sizeB) return sizeB - sizeA;
-                // Secondary: Combined score descending (higher focus first)
-                return getCombinedScore(b) - getCombinedScore(a);
-            });
+    const sourceTasks = createMemo(() => store.tasks.filter(t => !t.deletedAt && matchesFilter(t)));
+
+    const { displayedTasks, shakingTaskIds } = useDelayedSort(
+        sourceTasks,
+        (a, b) => {
+            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            // Primary: Size descending (largest first)
+            const sizeA = a.size ?? 5;
+            const sizeB = b.size ?? 5;
+            if (sizeA !== sizeB) return sizeB - sizeA;
+            // Secondary: Combined score descending (higher focus first)
+            return getCombinedScore(b) - getCombinedScore(a);
+        },
+        300
+    );
+
+    let listRef: HTMLDivElement | undefined;
+    onMount(() => {
+        if (listRef) autoAnimate(listRef, { duration: 300, easing: 'ease-out' });
     });
 
     return (
@@ -24,13 +33,17 @@ export const DigInView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Largest tasks first. Tackle big projects head-on.</p>
             </header>
 
-            <div class="grid gap-3">
-                <For each={sortedTasks()}>
-                    {(task) => <TaskCard task={task} />}
+            <div class="grid gap-3" ref={listRef}>
+                <For each={displayedTasks()}>
+                    {(task) => (
+                        <div class="animate-task-enter">
+                            <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
+                        </div>
+                    )}
                 </For>
             </div>
 
-            {sortedTasks().length === 0 && (
+            {displayedTasks().length === 0 && (
                 <div class="flex flex-col items-center justify-center py-20 text-center">
                     <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                         <span class="text-2xl">⛏️</span>

src/views/PriorityView.tsx

@@ -1,16 +1,24 @@
-import { type Component, For, createMemo } from "solid-js";
+import { type Component, For, createMemo, onMount } from "solid-js";
 import { store, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
+import { useDelayedSort } from "@/hooks/useDelayedSort";
+import autoAnimate from "@formkit/auto-animate";
 
 export const PriorityView: Component = () => {
-    const sortedTasks = createMemo(() => {
-        return [...store.tasks]
-            .filter(t => !t.deletedAt && matchesFilter(t))
-            .sort((a, b) => {
-                if (a.completed !== b.completed) return a.completed ? 1 : -1;
-                // Use combined score to account for priority, urgency, and tags
-                return getCombinedScore(b) - getCombinedScore(a);
-            });
+    const sourceTasks = createMemo(() => store.tasks.filter(t => !t.deletedAt && matchesFilter(t)));
+
+    const { displayedTasks, shakingTaskIds } = useDelayedSort(
+        sourceTasks,
+        (a, b) => {
+            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            return getCombinedScore(b) - getCombinedScore(a);
+        },
+        300
+    );
+
+    let listRef: HTMLDivElement | undefined;
+    onMount(() => {
+        if (listRef) autoAnimate(listRef, { duration: 300, easing: 'ease-out' });
     });
 
     return (
@@ -20,13 +28,17 @@ export const PriorityView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ordered by priority.</p>
             </header>
 
-            <div class="grid gap-3">
-                <For each={sortedTasks()}>
-                    {(task) => <TaskCard task={task} />}
+            <div class="grid gap-3" ref={listRef}>
+                <For each={displayedTasks()}>
+                    {(task) => (
+                        <div class="animate-task-enter">
+                            <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
+                        </div>
+                    )}
                 </For>
             </div>
 
-            {sortedTasks().length === 0 && (
+            {displayedTasks().length === 0 && (
                 <div class="flex flex-col items-center justify-center py-20 text-center">
                     <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                         <span class="text-2xl">🎯</span>

src/views/ProgressView.tsx

@@ -1,22 +1,31 @@
-import { type Component, For, createMemo } from "solid-js";
+import { type Component, For, createMemo, onMount } from "solid-js";
 import { store, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
+import { useDelayedSort } from "@/hooks/useDelayedSort";
+import autoAnimate from "@formkit/auto-animate";
 
 export const ProgressView: Component = () => {
-    const sortedTasks = createMemo(() => {
-        return [...store.tasks]
-            .filter(t => !t.deletedAt && matchesFilter(t))
-            .sort((a, b) => {
-                // 1. Completed tasks at the bottom
-                if (a.completed !== b.completed) return a.completed ? 1 : -1;
+    const sourceTasks = createMemo(() => store.tasks.filter(t => !t.deletedAt && matchesFilter(t)));
 
-                // 2. Sort by Progress (Status) Descending (Highest progress first)
-                // Assuming status 0-9 are active states, 10 is completed (handled above)
-                if (a.status !== b.status) return b.status - a.status;
+    const { displayedTasks, shakingTaskIds } = useDelayedSort(
+        sourceTasks,
+        (a, b) => {
+            // 1. Completed tasks at the bottom
+            if (a.completed !== b.completed) return a.completed ? 1 : -1;
 
-                // 3. Then by Focus Score (Combined Score)
-                return getCombinedScore(b) - getCombinedScore(a);
-            });
+            // 2. Sort by Progress (Status) Descending (Highest progress first)
+            // Assuming status 0-9 are active states, 10 is completed (handled above)
+            if (a.status !== b.status) return b.status - a.status;
+
+            // 3. Then by Focus Score (Combined Score)
+            return getCombinedScore(b) - getCombinedScore(a);
+        },
+        300
+    );
+
+    let listRef: HTMLDivElement | undefined;
+    onMount(() => {
+        if (listRef) autoAnimate(listRef, { duration: 300, easing: 'ease-out' });
     });
 
     return (
@@ -26,13 +35,17 @@ export const ProgressView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Tasks sorted by progress status, then by focus score.</p>
             </header>
 
-            <div class="grid gap-3">
-                <For each={sortedTasks()}>
-                    {(task) => <TaskCard task={task} />}
+            <div class="grid gap-3" ref={listRef}>
+                <For each={displayedTasks()}>
+                    {(task) => (
+                        <div class="animate-task-enter">
+                            <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
+                        </div>
+                    )}
                 </For>
             </div>
 
-            {sortedTasks().length === 0 && (
+            {displayedTasks().length === 0 && (
                 <div class="flex flex-col items-center justify-center py-20 text-center">
                     <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                         <span class="text-2xl">📈</span>

src/views/SnowballView.tsx

@@ -1,20 +1,29 @@
-import { type Component, For, createMemo } from "solid-js";
+import { type Component, For, createMemo, onMount } from "solid-js";
 import { store, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
+import { useDelayedSort } from "@/hooks/useDelayedSort";
+import autoAnimate from "@formkit/auto-animate";
 
 export const SnowballView: Component = () => {
-    const sortedTasks = createMemo(() => {
-        return [...store.tasks]
-            .filter(t => !t.deletedAt && matchesFilter(t))
-            .sort((a, b) => {
-                if (a.completed !== b.completed) return a.completed ? 1 : -1;
-                // Primary: Size ascending (smallest first)
-                const sizeA = a.size ?? 5;
-                const sizeB = b.size ?? 5;
-                if (sizeA !== sizeB) return sizeA - sizeB;
-                // Secondary: Combined score descending (higher focus first)
-                return getCombinedScore(b) - getCombinedScore(a);
-            });
+    const sourceTasks = createMemo(() => store.tasks.filter(t => !t.deletedAt && matchesFilter(t)));
+
+    const { displayedTasks, shakingTaskIds } = useDelayedSort(
+        sourceTasks,
+        (a, b) => {
+            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            // Primary: Size ascending (smallest first)
+            const sizeA = a.size ?? 5;
+            const sizeB = b.size ?? 5;
+            if (sizeA !== sizeB) return sizeA - sizeB;
+            // Secondary: Combined score descending (higher focus first)
+            return getCombinedScore(b) - getCombinedScore(a);
+        },
+        300
+    );
+
+    let listRef: HTMLDivElement | undefined;
+    onMount(() => {
+        if (listRef) autoAnimate(listRef, { duration: 300, easing: 'ease-out' });
     });
 
     return (
@@ -24,13 +33,17 @@ export const SnowballView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Smallest tasks first. Build momentum with quick wins.</p>
             </header>
 
-            <div class="grid gap-3">
-                <For each={sortedTasks()}>
-                    {(task) => <TaskCard task={task} />}
+            <div class="grid gap-3" ref={listRef}>
+                <For each={displayedTasks()}>
+                    {(task) => (
+                        <div class="animate-task-enter">
+                            <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
+                        </div>
+                    )}
                 </For>
             </div>
 
-            {sortedTasks().length === 0 && (
+            {displayedTasks().length === 0 && (
                 <div class="flex flex-col items-center justify-center py-20 text-center">
                     <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                         <span class="text-2xl">❄️</span>

src/views/UrgencyView.tsx

@@ -1,19 +1,28 @@
-import { type Component, For, createMemo } from "solid-js";
+import { type Component, For, createMemo, onMount } from "solid-js";
 import { store, calculateUrgencyScore, getCombinedScore, matchesFilter } from "@/store";
 import { TaskCard } from "@/components/TaskCard";
+import { useDelayedSort } from "@/hooks/useDelayedSort";
+import autoAnimate from "@formkit/auto-animate";
 
 export const UrgencyView: Component = () => {
-    const sortedTasks = createMemo(() => {
-        return [...store.tasks]
-            .filter(t => !t.deletedAt && matchesFilter(t))
-            .sort((a, b) => {
-                if (a.completed !== b.completed) return a.completed ? 1 : -1;
-                const uA = calculateUrgencyScore(a.dueDate);
-                const uB = calculateUrgencyScore(b.dueDate);
-                if (uA !== uB) return uB - uA;
-                // Tie-break with combined score (Priority + Tags)
-                return getCombinedScore(b) - getCombinedScore(a);
-            });
+    const sourceTasks = createMemo(() => store.tasks.filter(t => !t.deletedAt && matchesFilter(t)));
+
+    const { displayedTasks, shakingTaskIds } = useDelayedSort(
+        sourceTasks,
+        (a, b) => {
+            if (a.completed !== b.completed) return a.completed ? 1 : -1;
+            const uA = calculateUrgencyScore(a.dueDate);
+            const uB = calculateUrgencyScore(b.dueDate);
+            if (uA !== uB) return uB - uA;
+            // Tie-break with combined score (Priority + Tags)
+            return getCombinedScore(b) - getCombinedScore(a);
+        },
+        300
+    );
+
+    let listRef: HTMLDivElement | undefined;
+    onMount(() => {
+        if (listRef) autoAnimate(listRef, { duration: 300, easing: 'ease-out' });
     });
 
     return (
@@ -23,13 +32,17 @@ export const UrgencyView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ordered by deadline.</p>
             </header>
 
-            <div class="grid gap-3">
-                <For each={sortedTasks()}>
-                    {(task) => <TaskCard task={task} />}
+            <div class="grid gap-3" ref={listRef}>
+                <For each={displayedTasks()}>
+                    {(task) => (
+                        <div class="animate-task-enter">
+                            <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
+                        </div>
+                    )}
                 </For>
             </div>
 
-            {sortedTasks().length === 0 && (
+            {displayedTasks().length === 0 && (
                 <div class="flex flex-col items-center justify-center py-20 text-center">
                     <div class="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
                         <span class="text-2xl">⏳</span>