fix(todo): smoothly collapse rows on filter leave/enter

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/components/TodoTxtItem.vue

@@ -268,7 +268,24 @@ watch(
             class="todo-chip badge badge-soft badge-primary mx-0.5"
             @click.stop
           >
-            +{{ seg.value }}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="icon icon-tabler icon-tabler-plus"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M12 5l0 14" />
+              <path d="M5 12l14 0" />
+            </svg>
+            {{ seg.value }}
             <button
               v-if="canEdit"
               class="todo-chip-close"
@@ -300,7 +317,28 @@ watch(
             class="todo-chip badge badge-soft badge-secondary mx-0.5"
             @click.stop
           >
-            @{{ seg.value }}
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="icon icon-tabler icon-tabler-at"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              stroke-width="1.75"
+              stroke="currentColor"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path
+                d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
+              />
+              <path
+                d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28"
+              />
+            </svg>
+            {{ seg.value }}
             <button
               v-if="canEdit"
               class="todo-chip-close"

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">
+            <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;
+      transform 220ms ease,
-  }
+      grid-template-rows 220ms ease;
-
-  .todo-enter-from {
-    opacity: 0;
-    transform: translateX(-12px);
   }
 
+  .todo-enter-from,
   .todo-leave-to {
     opacity: 0;
-    transform: translateX(12px);
+    transform: translateX(-12px);
-  }
+    grid-template-rows: 0fr;
-
-  // 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%;
   }
 
   .todo-move {