feat: improve month_year_picker

app/templates/transactions/fragments/month_year_picker.html

@@ -5,23 +5,42 @@
 {% block title %}{% translate 'Pick one' %}{% endblock %}
 
 {% block body %}
-<div class="form-floating mb-3">
-  <input type="search" class="form-control" id="floatingInput" placeholder="{% translate 'Search' %}"
-  _="on change or input
-         if the event's key is 'Escape'
-           set my value to ''
-           trigger keyup
-         else
-          show <li/> in #month-year-list when its textContent.toLowerCase() contains my value.toLowerCase()">
-  <label for="floatingInput">{% translate 'Search' %}</label>
-</div>
-<ul class="list-group list-group-flush" id="month-year-list">
-  {% for date in available_dates %}
-    <li class="list-group-item hover:tw-bg-zinc-900">
-      <a class="text-decoration-none stretched-link" href="{% url "transactions_overview" month=date.month year=date.year %}">
-        {{ date.month|month_name }} / {{ date.year }}
-      </a>
-    </li>
+<ul class="nav nav-pills nav-fill" id="yearTabs" role="tablist">
+  {% for date in available_years %}
+  <li class="nav-item" role="presentation">
+    <button class="nav-link{% if date.year == current_year %} active{% endif %}"
+            id="{{ date.year }}"
+            data-bs-toggle="tab"
+            data-bs-target="#{{ date.year }}-pane"
+            type="button"
+            role="tab"
+            aria-controls="{{ date.year }}-pane"
+            aria-selected="{% if date.year == current_year %}true{% else %}false{% endif %}">
+      {{ date.year }}
+    </button>
+  </li>
   {% endfor %}
 </ul>
+<div class="tab-content" id="yearTabsContent">
+  {% for date in available_years %}
+  <div class="tab-pane fade{% if date.year == current_year %} show active{% endif %} mt-2"
+       id="{{ date.year }}-pane"
+       role="tabpanel"
+       aria-labelledby="{{ date.year }}"
+       tabindex="0">
+    <ul class="list-group list-group-flush" id="month-year-list">
+      {% for month in months %}
+      <li class="list-group-item hover:tw-bg-zinc-900
+            {% if month == current_month and date.year == current_year %} disabled bg-primary{% endif %}"
+          {% if month == current_month and date.year == current_year %}aria-disabled="true"{% endif %}>
+        <a class="text-decoration-none stretched-link {% if month == current_month and date.year == current_year %} text-black{% endif %}"
+           href="{% url "transactions_overview" month=month year=date.year %}">
+          {{ month|month_name }}
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>
+  {% endfor %}
+</div>
 {% endblock %}