feat: animar apertura y cierre de grupos

Co-authored-by: aider (openrouter/openai/gpt-5) <aider@aider.chat>

apps/web/src/routes/app/groups/+page.svelte

@@ -2,6 +2,7 @@
   import TaskItem from "$lib/ui/data/TaskItem.svelte";
   import Card from "$lib/ui/layout/Card.svelte";
   import { onMount } from "svelte";
+  import { slide, fade } from "svelte/transition";
 
   type GroupItem = {
     id: string;
@@ -162,23 +163,27 @@
           <span class="badge warn">🙅‍♂️: {g.counts.unassigned}</span>
         </span>
       </summary>
-      <Card>
+      {#if isOpen(g.id)}
-        <ul class="list">
+        <div in:slide={{ duration: 180 }} out:slide={{ duration: 180 }}>
-          {#each itemsByGroup[g.id] || [] as t (t.id)}
+          <Card in:fade={{ duration: 120 }} out:fade={{ duration: 120 }}>
-            <TaskItem
+            <ul class="list">
-              id={t.id}
+              {#each itemsByGroup[g.id] || [] as t (t.id)}
-              description={t.description}
+                <TaskItem
-              due_date={t.due_date}
+                  id={t.id}
-              display_code={t.display_code}
+                  description={t.description}
-              assignees={t.assignees || []}
+                  due_date={t.due_date}
-              currentUserId={data.userId}
+                  display_code={t.display_code}
-              groupName={g.name ?? g.id}
+                  assignees={t.assignees || []}
-              groupId={t.group_id ?? g.id}
+                  currentUserId={data.userId}
-              on:changed={(e) => updateGroupTask(g.id, e.detail)}
+                  groupName={g.name ?? g.id}
-            />
+                  groupId={t.group_id ?? g.id}
-          {/each}
+                  on:changed={(e) => updateGroupTask(g.id, e.detail)}
-        </ul>
+                />
-      </Card>
+              {/each}
+            </ul>
+          </Card>
+        </div>
+      {/if}
     </details>
   {/each}
 {/if}