feat: turn quick transactions buttons in a component and gracefully handle buttons w/ long text

app/templates/calendar_view/pages/calendar.html

@@ -44,53 +44,10 @@
     </div>
 {#    Action buttons#}
     <div class="col-12 col-xl-8">
-      <div class="d-grid gap-2 d-xl-flex justify-content-xl-end">
+      <c-ui.quick-transactions-buttons
-        <button class="btn btn-sm btn-outline-success"
+        :year="year"
-                      hx-get="{% url 'transaction_add' %}"
+        :month="month"
-                      hx-target="#generic-offcanvas"
+      ></c-ui.quick-transactions-buttons>
-                      hx-trigger="click, add_income from:window"
-                      hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "IN"}'>
-                <i class="fa-solid fa-arrow-right-to-bracket me-2"></i>
-                {% translate "Income" %}
-        </button>
-        <button class="btn btn-sm btn-outline-danger"
-                      hx-get="{% url 'transaction_add' %}"
-                      hx-target="#generic-offcanvas"
-                      hx-trigger="click, add_expense from:window"
-                      hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "EX"}'>
-                <i class="fa-solid fa-arrow-right-from-bracket me-2"></i>
-                {% translate "Expense" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'installment_plan_add' %}"
-                hx-trigger="click, installment from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-divide me-2"></i>
-          {% translate "Installment" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'recurring_transaction_add' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-repeat me-2"></i>
-          {% translate "Recurring" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'transactions_transfer' %}"
-                hx-target="#generic-offcanvas"
-                hx-trigger="click, add_transfer from:window"
-                hx-vals='{"year": {{ year }}, "month": {{ month }}}'>
-          <i class="fa-solid fa-money-bill-transfer me-2"></i>
-          {% translate "Transfer" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'account_reconciliation' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-scale-balanced me-2"></i>
-          {% translate "Balance" %}
-        </button>
-      </div>
     </div>
   </div>
   <div class="row">

app/templates/cotton/ui/quick_transactions_buttons.html

@@ -0,0 +1,50 @@
+{% load i18n %}
+<div class="d-grid gap-2 d-xl-flex justify-content-xl-end">
+  <div class="d-grid gap-2 d-xl-flex flex-wrap justify-content-xl-center">
+    <button class="btn btn-sm btn-outline-success"
+            hx-get="{% url 'transaction_add' %}"
+            hx-target="#generic-offcanvas"
+            hx-trigger="click, add_income from:window"
+            hx-vals='{"year": {{ year }}, {% if month %}"month": {{ month }},{% endif %} "type": "IN"}'>
+      <i class="fa-solid fa-arrow-right-to-bracket me-2"></i>
+      {% translate "Income" %}
+    </button>
+    <button class="btn btn-sm btn-outline-danger"
+            hx-get="{% url 'transaction_add' %}"
+            hx-target="#generic-offcanvas"
+            hx-trigger="click, add_expense from:window"
+            hx-vals='{"year": {{ year }}, {% if month %}"month": {{ month }},{% endif %} "type": "EX"}'>
+      <i class="fa-solid fa-arrow-right-from-bracket me-2"></i>
+      {% translate "Expense" %}
+    </button>
+    <button class="btn btn-sm btn-outline-warning"
+            hx-get="{% url 'installment_plan_add' %}"
+            hx-trigger="click, installment from:window"
+            hx-target="#generic-offcanvas">
+      <i class="fa-solid fa-divide me-2"></i>
+      {% translate "Installment" %}
+    </button>
+    <button class="btn btn-sm btn-outline-warning"
+            hx-get="{% url 'recurring_transaction_add' %}"
+            hx-trigger="click, balance from:window"
+            hx-target="#generic-offcanvas">
+      <i class="fa-solid fa-repeat me-2"></i>
+      {% translate "Recurring" %}
+    </button>
+    <button class="btn btn-sm btn-outline-info"
+            hx-get="{% url 'transactions_transfer' %}"
+            hx-target="#generic-offcanvas"
+            hx-trigger="click, add_transfer from:window"
+            hx-vals='{"year": {{ year }} {% if month %}, "month": {{ month }}{% endif %}}'>
+      <i class="fa-solid fa-money-bill-transfer me-2"></i>
+      {% translate "Transfer" %}
+    </button>
+    <button class="btn btn-sm btn-outline-info"
+            hx-get="{% url 'account_reconciliation' %}"
+            hx-trigger="click, balance from:window"
+            hx-target="#generic-offcanvas">
+      <i class="fa-solid fa-scale-balanced me-2"></i>
+      {% translate "Balance" %}
+    </button>
+  </div>
+</div>

app/templates/monthly_overview/pages/overview.html

@@ -44,53 +44,10 @@
     </div>
 {#    Action buttons#}
     <div class="col-12 col-xl-8">
-      <div class="d-grid gap-2 d-xl-flex justify-content-xl-end">
+      <c-ui.quick-transactions-buttons
-        <button class="btn btn-sm btn-outline-success"
+        :year="year"
-                      hx-get="{% url 'transaction_add' %}"
+        :month="month"
-                      hx-target="#generic-offcanvas"
+      ></c-ui.quick-transactions-buttons>
-                      hx-trigger="click, add_income from:window"
-                      hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "IN"}'>
-                <i class="fa-solid fa-arrow-right-to-bracket me-2"></i>
-                {% translate "Income" %}
-        </button>
-        <button class="btn btn-sm btn-outline-danger"
-                      hx-get="{% url 'transaction_add' %}"
-                      hx-target="#generic-offcanvas"
-                      hx-trigger="click, add_expense from:window"
-                      hx-vals='{"year": {{ year }}, "month": {{ month }}, "type": "EX"}'>
-                <i class="fa-solid fa-arrow-right-from-bracket me-2"></i>
-                {% translate "Expense" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'installment_plan_add' %}"
-                hx-trigger="click, installment from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-divide me-2"></i>
-          {% translate "Installment" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'recurring_transaction_add' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-repeat me-2"></i>
-          {% translate "Recurring" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'transactions_transfer' %}"
-                hx-target="#generic-offcanvas"
-                hx-trigger="click, add_transfer from:window"
-                hx-vals='{"year": {{ year }}, "month": {{ month }}}'>
-          <i class="fa-solid fa-money-bill-transfer me-2"></i>
-          {% translate "Transfer" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'account_reconciliation' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-scale-balanced me-2"></i>
-          {% translate "Balance" %}
-        </button>
-      </div>
     </div>
   </div>
 {#  Monthly summary#}

app/templates/yearly_overview/pages/overview_by_account.html

@@ -39,53 +39,10 @@
     </div>
 {#    Action buttons#}
     <div class="col-12 col-xl-10">
-      <div class="d-grid gap-2 d-xl-flex justify-content-xl-end">
+      <c-ui.quick-transactions-buttons
-        <button class="btn btn-sm btn-outline-success"
+        :year="year"
-                      hx-get="{% url 'transaction_add' %}"
+        :month="month"
-                      hx-target="#generic-offcanvas"
+      ></c-ui.quick-transactions-buttons>
-                      hx-trigger="click, add_income from:window"
-                      hx-vals='{"year": {{ year }}, "type": "IN"}'>
-                <i class="fa-solid fa-arrow-right-to-bracket me-2"></i>
-                {% translate "Income" %}
-        </button>
-        <button class="btn btn-sm btn-outline-danger"
-                      hx-get="{% url 'transaction_add' %}"
-                      hx-target="#generic-offcanvas"
-                      hx-trigger="click, add_expense from:window"
-                      hx-vals='{"year": {{ year }}, "type": "EX"}'>
-                <i class="fa-solid fa-arrow-right-from-bracket me-2"></i>
-                {% translate "Expense" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'installment_plan_add' %}"
-                hx-trigger="click, installment from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-divide me-2"></i>
-          {% translate "Installment" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'recurring_transaction_add' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-repeat me-2"></i>
-          {% translate "Recurring" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'transactions_transfer' %}"
-                hx-target="#generic-offcanvas"
-                hx-trigger="click, add_transfer from:window"
-                hx-vals='{"year": {{ year }}}'>
-          <i class="fa-solid fa-money-bill-transfer me-2"></i>
-          {% translate "Transfer" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'account_reconciliation' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-scale-balanced me-2"></i>
-          {% translate "Balance" %}
-        </button>
-      </div>
     </div>
   </div>
   <div class="row">

app/templates/yearly_overview/pages/overview_by_currency.html

@@ -41,53 +41,10 @@
     </div>
 {#    Action buttons#}
     <div class="col-12 col-xl-10">
-      <div class="d-grid gap-2 d-xl-flex justify-content-xl-end">
+      <c-ui.quick-transactions-buttons
-        <button class="btn btn-sm btn-outline-success"
+        :year="year"
-                      hx-get="{% url 'transaction_add' %}"
+        :month="month"
-                      hx-target="#generic-offcanvas"
+      ></c-ui.quick-transactions-buttons>
-                      hx-trigger="click, add_income from:window"
-                      hx-vals='{"year": {{ year }}, "type": "IN"}'>
-                <i class="fa-solid fa-arrow-right-to-bracket me-2"></i>
-                {% translate "Income" %}
-        </button>
-        <button class="btn btn-sm btn-outline-danger"
-                      hx-get="{% url 'transaction_add' %}"
-                      hx-target="#generic-offcanvas"
-                      hx-trigger="click, add_expense from:window"
-                      hx-vals='{"year": {{ year }}, "type": "EX"}'>
-                <i class="fa-solid fa-arrow-right-from-bracket me-2"></i>
-                {% translate "Expense" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'installment_plan_add' %}"
-                hx-trigger="click, installment from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-divide me-2"></i>
-          {% translate "Installment" %}
-        </button>
-        <button class="btn btn-sm btn-outline-warning"
-                hx-get="{% url 'recurring_transaction_add' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-repeat me-2"></i>
-          {% translate "Recurring" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'transactions_transfer' %}"
-                hx-target="#generic-offcanvas"
-                hx-trigger="click, add_transfer from:window"
-                hx-vals='{"year": {{ year }}}'>
-          <i class="fa-solid fa-money-bill-transfer me-2"></i>
-          {% translate "Transfer" %}
-        </button>
-        <button class="btn btn-sm btn-outline-info"
-                hx-get="{% url 'account_reconciliation' %}"
-                hx-trigger="click, balance from:window"
-                hx-target="#generic-offcanvas">
-          <i class="fa-solid fa-scale-balanced me-2"></i>
-          {% translate "Balance" %}
-        </button>
-      </div>
     </div>
   </div>
   <div class="row">