From afa9a2f0084519925f773ea9c9a4d58839b35237 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Sat, 13 Jun 2026 22:21:35 +0200
Subject: [PATCH] fix(todo): smoothly collapse rows on filter leave/enter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch the TransitionGroup animation from in-flow opacity+translate to
the grid-template-rows 1fr → 0fr pattern so a leaving row's height
shrinks during the transition. Avoids the post-animation snap that
happened when the DOM nodes were removed and the surrounding gap
suddenly closed.
---
 src/views/TodoNotes.vue | 44 +++++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/views/TodoNotes.vue b/src/views/TodoNotes.vue
index 3103ced..21a6477 100644
--- a/src/views/TodoNotes.vue
+++ b/src/views/TodoNotes.vue
@@ -388,12 +388,14 @@ const createTodoFile = async () => {
 
         <TransitionGroup name="todo" tag="ul" class="todo-list">
           <li v-for="entry in filteredEntries" :key="entry.index">
-            <todo-txt-item
-              :task="entry.line"
-              :can-edit="canPush"
-              @update="(t) => updateTask(entry.index, t)"
-              @delete="deleteTask(entry.index)"
-            />
+            <div class="todo-li-inner">
+              <todo-txt-item
+                :task="entry.line"
+                :can-edit="canPush"
+                @update="(t) => updateTask(entry.index, t)"
+                @delete="deleteTask(entry.index)"
+              />
+            </div>
           </li>
         </TransitionGroup>
 
@@ -431,35 +433,35 @@ const createTodoFile = async () => {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    position: relative;
 
     li {
       list-style: none;
+      // Use grid-template-rows 1fr → 0fr so the row's height (and therefore
+      // the surrounding gap) collapses smoothly during leave instead of
+      // snapping closed when the DOM node is removed.
+      display: grid;
+      grid-template-rows: 1fr;
     }
   }
 
+  .todo-li-inner {
+    overflow: hidden;
+    min-height: 0;
+  }
+
   .todo-enter-active,
   .todo-leave-active {
     transition:
       opacity 180ms ease,
-      transform 220ms ease;
-  }
-
-  .todo-enter-from {
-    opacity: 0;
-    transform: translateX(-12px);
+      transform 220ms ease,
+      grid-template-rows 220ms ease;
   }
 
+  .todo-enter-from,
   .todo-leave-to {
     opacity: 0;
-    transform: translateX(12px);
-  }
-
-  // Take the leaving item out of layout flow so the rest of the list
-  // slides up smoothly via .todo-move instead of jumping.
-  .todo-leave-active {
-    position: absolute;
-    width: 100%;
+    transform: translateX(-12px);
+    grid-template-rows: 0fr;
   }
 
   .todo-move {