feat: keep collapsible state on montlhly overview

app/templates/cotton/transaction/item.html

@@ -94,7 +94,7 @@
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Edit" %}"
                 hx-get="{% url 'transaction_edit' transaction_id=transaction.id %}"
-                hx-target="#generic-offcanvas">
+                hx-target="#generic-offcanvas" hx-swap="innerHTML">
           <i class="fa-solid fa-pencil fa-fw"></i></a>
           <a class="btn btn-secondary btn-sm transaction-action"
                   role="button"

app/templates/includes/scripts.html

@@ -10,9 +10,12 @@
 {% include 'includes/scripts/hyperscript/htmx_error_handler.html' %}
 {% include 'includes/scripts/hyperscript/sounds.html' %}
 {% include 'includes/scripts/hyperscript/swal.html' %}
+<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
 
 {% javascript_pack 'htmx' attrs="defer" %}
 {% javascript_pack 'charts' %}
+{#<script src="https://unpkg.com/htmx-ext-alpine-morph@2.0.0/alpine-morph.js"></script>#}
+
 
 <script>
 let tz = Intl.DateTimeFormat().resolvedOptions().timeZone;

app/templates/monthly_overview/fragments/list.html

@@ -3,7 +3,7 @@
 {% regroup transactions by date|customnaturaldate as transactions_by_date %}
 
 <div id="transactions-list"
-     _="on change or click
+     _="on change or click or htmx:afterSettle
           if no <input[type='checkbox']:checked/> in me
             add .tw-hidden to #actions-bar
           else
@@ -11,19 +11,20 @@
           end
         end">
   {% for x in transactions_by_date %}
-    <div>
+    <div x-data="{ isOpen: $persist(true).as('{{ x.grouper|slugify }}-state').using(sessionStorage) }" id="#{{ x.grouper|slugify }}">
       <div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body">
         <a class="text-decoration-none d-inline-block w-100"
            role="button"
            data-bs-toggle="collapse"
-           data-bs-target="#{{ x.grouper|slugify }}"
+           data-bs-target="#{{ x.grouper|slugify }}-collapse"
            id="#{{ x.grouper|slugify }}-collapsible"
-           aria-expanded="true"
+           :aria-expanded="isOpen"
+           @click="isOpen = !isOpen"
            aria-controls="collapseExample">
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse show" id="{{ x.grouper|slugify }}">
+      <div class="collapse" id="{{ x.grouper|slugify }}-collapse" :class="{ 'show': isOpen }">
         <div class="d-flex flex-column">
         {% for transaction in x.list %}
           <c-transaction.item

app/templates/monthly_overview/pages/overview.html

@@ -131,7 +131,9 @@
       <div id="transactions"
            class="show-loading"
            hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
-           hx-trigger="load, updated from:window" hx-include="#filter, #order"></div>
+           hx-trigger="load, updated from:window" hx-include="#filter, #order" hx-ext="alpine-morph" hx-swap="morph" hx-target="#transactions-list">
+          <div id="transactions-list"></div>
+      </div>
     </div>
   </div>
 </div>