feat: guess what, more changes

app/templates/cotton/transaction/item.html

@@ -1,7 +1,7 @@
 {% load markdown %}
 {% load i18n %}
 <div
-    class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} group/transaction relative">
+    class="transaction {% if transaction.type == "EX" %}expense{% else %}income{% endif %} group/transaction">
   <div class="flex my-1">
     {% if not disable_selection or not dummy %}
       <label class="px-3 flex! items-center justify-center">
@@ -161,7 +161,7 @@
                     <button class="btn btn-soft btn-sm transaction-action" data-bs-toggle="dropdown" aria-expanded="false">
                       <i class="fa-solid fa-ellipsis fa-fw"></i>
                     </button>
-                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu w-max relative">
+                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-md-start menu">
                       <div class="absolute inset-[0rem_-3rem_-3rem_-3rem] pointer-events-auto -z-10"></div>
                       {% if transaction.account.is_untracked_by %}
                         <li class="menu-disabled" aria-disabled="true">

app/templates/cotton/ui/components/collapse.html

@@ -0,0 +1,21 @@
+<div class="bg-base-100 border-base-300 border-2 join-item {{ base_classes }}"
+     x-data="{ expanded: {% if active %}true{% else %}false{% endif %} }">
+
+  <div class="font-medium text-sm cursor-pointer p-4 flex w-full items-center justify-between gap-4 text-left {{ title_classes }}"
+       @click="expanded = ! expanded">
+
+    <div>
+      {{ title }}
+    </div>
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true" x-bind:class="expanded  ?  'rotate-180'  :  ''">
+       <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
+    </svg>
+  </div>
+
+  <div class="bg-base-200 p-4 {{ content_classes }}"
+       x-show="expanded"
+       x-collapse>
+    {{ content }}
+    </div>
+</div>