From 1604ce8e757e8203b7fb45f980c26daf942efa92 Mon Sep 17 00:00:00 2001
From: brobert <borja@brobert.net>
Date: Sat, 18 Oct 2025 23:07:27 +0200
Subject: [PATCH] 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 | 39 ++++++++++++---------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/routes/app/groups/+page.svelte b/apps/web/src/routes/app/groups/+page.svelte
index c516dbf..1ac608f 100644
--- a/apps/web/src/routes/app/groups/+page.svelte
+++ b/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>
-        <ul class="list">
-          {#each itemsByGroup[g.id] || [] as t (t.id)}
-            <TaskItem
-              id={t.id}
-              description={t.description}
-              due_date={t.due_date}
-              display_code={t.display_code}
-              assignees={t.assignees || []}
-              currentUserId={data.userId}
-              groupName={g.name ?? g.id}
-              groupId={t.group_id ?? g.id}
-              on:changed={(e) => updateGroupTask(g.id, e.detail)}
-            />
-          {/each}
-        </ul>
-      </Card>
+      {#if isOpen(g.id)}
+        <div in:slide={{ duration: 180 }} out:slide={{ duration: 180 }}>
+          <Card in:fade={{ duration: 120 }} out:fade={{ duration: 120 }}>
+            <ul class="list">
+              {#each itemsByGroup[g.id] || [] as t (t.id)}
+                <TaskItem
+                  id={t.id}
+                  description={t.description}
+                  due_date={t.due_date}
+                  display_code={t.display_code}
+                  assignees={t.assignees || []}
+                  currentUserId={data.userId}
+                  groupName={g.name ?? g.id}
+                  groupId={t.group_id ?? g.id}
+                  on:changed={(e) => updateGroupTask(g.id, e.detail)}
+                />
+              {/each}
+            </ul>
+          </Card>
+        </div>
+      {/if}
     </details>
   {/each}
 {/if}