feat: changes and fixes

app/templates/accounts/fragments/list.html

@@ -3,7 +3,7 @@
         url="{% url 'account_add' %}"
         hx_target="#generic-offcanvas">
 </c-ui.fab-single-action>
-<div class="container px-md-3 py-3 column-gap-5">
+<div class="container">
   <div class="text-3xl font-bold font-mono w-full mb-3">
     {% spaceless %}
       <div>{% translate 'Accounts' %}</div>

app/templates/calendar_view/pages/calendar.html

@@ -12,35 +12,33 @@
 {% endblock %}
 
 {% block content %}
-  <div class="container px-md-3 py-3 gap-x-5 overflow-x-hidden">
+  <div class="container">
     <div class="flex flex-wrap mb-4 gap-x-xl-4 gap-y-3">
       {#    Date picker#}
       <div class="w-full xl:w-4/12 flex-row items-center flex">
-        <div class="text-base h-full items-center flex btn btn-ghost">
         <a role="button"
            hx-boost="true"
+           class="btn btn-ghost"
            hx-trigger="click, previous_month from:window"
            href="{% url 'calendar' month=previous_month year=previous_year %}">
           <i class="fa-solid fa-chevron-left"></i>
         </a>
-        </div>
+        <div class="text-2xl font-bold btn btn-ghost flex-1 text-center whitespace-normal flex-wrap h-auto min-w-0 1flex flex-"
-        <div class="text-2xl font-bold btn btn-ghost flex-1 text-center whitespace-normal flex-wrap h-auto min-w-0"
              hx-get="{% url 'month_year_picker' %}"
              hx-target="#generic-offcanvas-left"
              hx-trigger="click, date_picker from:window"
              hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "calendar", "field": "date"}' role="button">
           {{ month|month_name }} {{ year }}
         </div>
-        <div class="text-base h-full items-center flex btn btn-ghost">
         <a role="button"
            hx-boost="true"
+           class="btn btn-ghost"
            hx-trigger="click, next_month from:window"
            href="{% url 'calendar' month=next_month year=next_year %}">
           <i class="fa-solid fa-chevron-right"></i>
         </a>
       </div>
     </div>
-    </div>
     <div class="flex flex-wrap">
       <div class="show-loading w-full" hx-get="{% url 'calendar_list' month=month year=year %}"
            hx-trigger="load, updated from:window, selective_update from:window, every 10m"></div>

app/templates/dca/fragments/strategy/list.html

@@ -3,7 +3,7 @@
         url="{% url 'dca_strategy_add' %}"
         hx_target="#generic-offcanvas">
 </c-ui.fab-single-action>
-<div class="container px-md-3 py-3 column-gap-5">
+<div class="container">
   <div class="text-3xl font-bold font-mono w-full mb-3">
     {% spaceless %}
       <div>{% translate 'Dollar Cost Average Strategies' %}</div>

app/templates/export_app/fragments/export.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate 'Export' %}{% endblock %}
 
 {% block body %}
-  <div class="container p-3">
+  <div class="container">
     <form hx-post="{% url 'export_form' %}" hx-ext="htmx-download" hx-swap="none" id="export-form" class="show-loading px-1" target="_blank">
       {% crispy form %}
     </form>

app/templates/export_app/fragments/restore.html

@@ -5,7 +5,7 @@
 {% block title %}{% translate 'Restore' %}{% endblock %}
 
 {% block body %}
-  <div class="container p-3">
+  <div class="container">
     <form hx-post="{% url 'restore_form' %}"
           hx-target="#generic-offcanvas"
           id="restore-form"

app/templates/includes/mobile_navbar.html

@@ -4,7 +4,7 @@
 {% load i18n %}
 {% load active_link %}
 <nav class="navbar border-b-2 border-base-100 bg-base-200 flex lg:hidden shadow-lg" hx-boost="true">
-  <div class="container mx-auto px-4 flex justify-between items-center w-full">
+  <div class="container flex justify-between items-center w-full">
     <a class="text-xl font-bold text-primary" href="{% url 'index' %}">
       <div class="logo mobile"></div>
     </a>

app/templates/includes/sidebar.html

@@ -269,18 +269,19 @@
       </div>
       {% get_update_check as update_check %}
       {% if update_check.update_available %}
-        <div class="my-3">
+        <div class="my-3 sidebar-item">
-          <a class="btn btn-primary btn-soft btn-sm w-full sidebar-item"
+          <a class="btn btn-primary btn-soft btn-sm w-full !block content-center"
-             href="https://github.com/eitchtee/WYGIWYH/releases/latest" target="_blank"><i
+             href="https://github.com/eitchtee/WYGIWYH/releases/latest" target="_blank">
-              class="fa-solid fa-circle-exclamation fa-fw lg:group-hover:me-2"></i><span
+            <i class="fa-solid fa-circle-exclamation fa-fw lg:group-hover:me-2"></i>
-              class="lg:hidden lg:group-hover:block">v.{{ update_check.latest_version }} {% translate 'is available' %}!</span></a>
+            <span>v.{{ update_check.latest_version }} {% translate 'is available' %}!</span></a>
         </div>
       {% endif %}
 
-      <div class="btn-group w-full sidebar-item" role="group">
+      <div class="w-full sidebar-item" role="group">
-        <button type="button" class="btn btn-secondary btn-sm w-full" data-tippy-content="{% trans "Calculator" %}"
+        <button type="button" class="btn btn-secondary btn-sm w-full !block content-center"
                 _="on click trigger show on #calculator">
-          <i class="fa-solid fa-calculator fa-fw"></i>
+          <i class="fa-solid fa-calculator fa-fw lg:group-hover:me-2"></i>
+          <span>{% trans "Calculator" %}</span>
         </button>
       </div>
     </div>

app/templates/insights/fragments/category_explorer/index.html

@@ -16,9 +16,9 @@
     </div>
   </div>
 
-  <div class="row">
+  <div class="row gap-3">
     <div class="col-12 lg:col-6">
-        <div class="card bg-base-100 shadow-xl h-full">
+        <div class="card bg-base-100 card-border shadow h-full">
           <div class="card-header bg-base-200 p-4 font-semibold rounded-box shadow">
             {% trans "Income/Expense by Account" %}
           </div>
@@ -30,7 +30,7 @@
         </div>
     </div>
     <div class="col-12 lg:col-6">
-        <div class="card bg-base-100 shadow-xl h-full">
+        <div class="card bg-base-100 card-border shadow h-full">
           <div class="card-header bg-base-200 p-4 font-semibold rounded-box shadow">
             {% trans "Income/Expense by Currency" %}
           </div>

app/templates/insights/fragments/category_overview/index.html

@@ -47,7 +47,8 @@
         <div id="show-entities" class="{% if not show_tags %}hidden{% endif %}">
           <label class="label">
             <input type="hidden" name="show_entities" value="off">
-            <input type="checkbox" class="toggle toggle-primary toggle-sm" id="show-entities-switch" name="show_entities"
+            <input type="checkbox" class="toggle toggle-primary toggle-sm" id="show-entities-switch"
+                   name="show_entities"
                    _="on change trigger updated" {% if show_entities %}checked{% endif %}>
             <span>
                 {% trans 'Entities' %}
@@ -60,19 +61,23 @@
       {% endif %}
     </div>
     <div class="join" role="group" id="showing" _="on change trigger updated">
-      <input type="radio" class="join-item btn btn-outline btn-primary btn-sm" name="showing" id="showing-projected" autocomplete="off" aria-label="{% trans 'Projected' %}"
+      <input type="radio" class="join-item btn btn-outline btn-primary btn-sm" name="showing" id="showing-projected"
+             autocomplete="off" aria-label="{% trans 'Projected' %}"
              value="projected" {% if showing == 'projected' %}checked{% endif %}>
 
-      <input type="radio" class="join-item btn btn-outline btn-primary btn-sm" name="showing" id="showing-current" autocomplete="off" value="current" aria-label="{% trans 'Current' %}"
+      <input type="radio" class="join-item btn btn-outline btn-primary btn-sm" name="showing" id="showing-current"
+             autocomplete="off" value="current" aria-label="{% trans 'Current' %}"
              {% if showing == 'current' %}checked{% endif %}>
 
-      <input type="radio" class="join-item btn btn-outline btn-primary btn-sm" name="showing" id="showing-final" autocomplete="off" value="final" aria-label="{% trans 'Final total' %}"
+      <input type="radio" class="join-item btn btn-outline btn-primary btn-sm" name="showing" id="showing-final"
+             autocomplete="off" value="final" aria-label="{% trans 'Final total' %}"
              {% if showing == 'final' %}checked{% endif %}>
     </div>
   </div>
   {% if total_table %}
     {% if view_type == "table" %}
       <div class="card bg-base-100 card-border">
+        <div class="card-body">
           <c-config.search></c-config.search>
           <div class="overflow-x-auto">
             <table class="table">
@@ -86,10 +91,10 @@
               </thead>
               <tbody>
               {% for category in total_table.values %}
-            <!-- Category row -->
+{#                Category row #}
                 <tr class="font-semibold">
-              <th>{% if category.name %}{{ category.name }}{% else %}{% trans 'Uncategorized' %}{% endif %}</th>
+                  <th class="text-nowrap">{% if category.name %}{{ category.name }}{% else %}{% trans 'Uncategorized' %}{% endif %}</th>
-              <td> {# income #}
+                  <td class="text-nowrap">
                     {% for currency in category.currencies.values %}
                       {% if showing == 'current' and currency.income_current != 0 %}
                         <c-amount.display
@@ -117,7 +122,7 @@
                       {% endif %}
                     {% endfor %}
                   </td>
-              <td>  {# expenses #}
+                  <td class="text-nowrap">
                     {% for currency in category.currencies.values %}
                       {% if showing == 'current' and currency.expense_current != 0 %}
                         <c-amount.display
@@ -145,7 +150,7 @@
                       {% endif %}
                     {% endfor %}
                   </td>
-              <td>  {# total #}
+                  <td class="text-nowrap">
                     {% for currency in category.currencies.values %}
                       {% if showing == 'current' and currency.total_current != 0 %}
                         <c-amount.display
@@ -180,10 +185,10 @@
                   {% for tag_id, tag in category.tags.items %}
                     {% if tag.name or not tag.name and category.tags.values|length > 1 %}
                       <tr class="bg-base-200">
-                    <td class="ps-6">
+                        <td class="ps-6 text-nowrap">
                           <i class="fa-solid fa-hashtag fa-fw me-2 text-base-content/60"></i>{% if tag.name %}{{ tag.name }}{% else %}{% trans 'Untagged' %}{% endif %}
                         </td>
-                    <td>
+                        <td class="text-nowrap">
                           {% for currency in tag.currencies.values %}
                             {% if showing == 'current' and currency.income_current != 0 %}
                               <c-amount.display
@@ -211,7 +216,7 @@
                             {% endif %}
                           {% endfor %}
                         </td>
-                    <td>
+                        <td class="text-nowrap">
                           {% for currency in tag.currencies.values %}
                             {% if showing == 'current' and currency.expense_current != 0 %}
                               <c-amount.display
@@ -239,7 +244,7 @@
                             {% endif %}
                           {% endfor %}
                         </td>
-                    <td>
+                        <td class="text-nowrap">
                           {% for currency in tag.currencies.values %}
                             {% if showing == 'current' and currency.total_current != 0 %}
                               <c-amount.display
@@ -268,15 +273,15 @@
                           {% endfor %}
                         </td>
                       </tr>
-                  <!-- Entity rows -->
+{#                      Entity rows #}
                       {% if show_entities %}
                         {% for entity_id, entity in tag.entities.items %}
                           {% if entity.name or not entity.name and tag.entities.values|length > 1 %}
                             <tr class="bg-base-300">
-                          <td class="ps-10">
+                              <td class="ps-10 text-nowrap">
                                 <i class="fa-solid fa-user-group fa-fw me-2 text-base-content/60"></i>{% if entity.name %}{{ entity.name }}{% else %}{% trans 'No entity' %}{% endif %}
                               </td>
-                          <td>
+                              <td class="text-nowrap">
                                 {% for currency in entity.currencies.values %}
                                   {% if showing == 'current' and currency.income_current != 0 %}
                                     <c-amount.display
@@ -304,7 +309,7 @@
                                   {% endif %}
                                 {% endfor %}
                               </td>
-                          <td>
+                              <td class="text-nowrap">
                                 {% for currency in entity.currencies.values %}
                                   {% if showing == 'current' and currency.expense_current != 0 %}
                                     <c-amount.display
@@ -332,7 +337,7 @@
                                   {% endif %}
                                 {% endfor %}
                               </td>
-                          <td>
+                              <td class="text-nowrap">
                                 {% for currency in entity.currencies.values %}
                                   {% if showing == 'current' and currency.total_current != 0 %}
                                     <c-amount.display
@@ -372,6 +377,7 @@
             </table>
           </div>
         </div>
+      </div>
 
 
     {% elif view_type == "bars" %}

app/templates/insights/pages/index.html

@@ -73,22 +73,22 @@
                     remove .btn-active from <.insights-list button/>
                     add .btn-active to event.target
                     set event.target's @aria-selected to 'true'">
-              <button class="btn btn-ghost justify-start text-start"
+              <button class="btn btn-ghost btn-free justify-start text-start"
                       type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                       hx-get="{% url 'insights_sankey_by_account' %}">
                       {% trans 'Account Flow' %}
               </button>
-              <button class="btn btn-ghost justify-start text-start"  data-bs-target="#v-pills-content"
+              <button class="btn btn-ghost btn-free justify-start text-start"  data-bs-target="#v-pills-content"
                       type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                       hx-get="{% url 'insights_sankey_by_currency' %}"
                       >{% trans 'Currency Flow' %}
               </button>
-              <button class="btn btn-ghost justify-start text-start"  data-bs-target="#v-pills-content"
+              <button class="btn btn-ghost btn-free justify-start text-start"  data-bs-target="#v-pills-content"
                       type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                       hx-get="{% url 'category_explorer_index' %}">
                       {% trans 'Category Explorer' %}
               </button>
-              <button class="btn btn-ghost justify-start text-start"  data-bs-target="#v-pills-content"
+              <button class="btn btn-ghost btn-free justify-start text-start"  data-bs-target="#v-pills-content"
                       type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                       hx-get="{% url 'category_overview' %}"
                       >{% trans 'Categories Overview' %}
@@ -106,17 +106,17 @@
                     remove .btn-active from <.insights-list button/>
                     add .btn-active to event.target
                     set event.target's @aria-selected to 'true'">
-                    <button class="btn btn-ghost justify-start text-start"  data-bs-target="#v-pills-content"
+                    <button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
                             type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                             hx-get="{% url 'insights_late_transactions' %}">
                             {% trans 'Late Transactions' %}
                     </button>
-                    <button class="btn btn-ghost justify-start text-start"  data-bs-target="#v-pills-content"
+                    <button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
                             type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                             hx-get="{% url 'insights_latest_transactions' %}">
                             {% trans 'Latest Transactions' %}
                     </button>
-                    <button class="btn btn-ghost justify-start text-start"  data-bs-target="#v-pills-content"
+                    <button class="btn btn-ghost btn-free justify-start text-start"  data-bs-target="#v-pills-content"
                             type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
                             hx-get="{% url 'insights_emergency_fund' %}">
                             {% trans 'Emergency Fund' %}
@@ -126,6 +126,9 @@
           </div>
         </div>
       </div>
+
+      <hr class="xl:hidden hr">
+
       <div class="col-12 md:col-9 gy-3">
         <div id="tab-content" class="show-loading"></div>
       </div>

app/templates/monthly_overview/pages/overview.html

@@ -17,13 +17,13 @@
       <div class="col-12 lg:col-4">
         {#    Date picker#}
         <div class="flex flex-row items-center">
-          <div class="text-base h-full flex items-center btn btn-ghost">
           <a role="button"
+             class="btn btn-ghost"
             hx-boost="true"
             hx-trigger="click, previous_month from:window"
-              href="{% url 'monthly_overview' month=previous_month year=previous_year %}"><i
+            href="{% url 'monthly_overview' month=previous_month year=previous_year %}">
-                class="fa-solid fa-chevron-left"></i></a>
+            <i class="fa-solid fa-chevron-left"></i>
-          </div>
+          </a>
           <div class="text-2xl font-bold btn btn-ghost flex-1 text-center whitespace-normal flex-wrap h-auto min-w-0"
               hx-get="{% url 'month_year_picker' %}"
               hx-target="#generic-offcanvas-left"
@@ -32,8 +32,8 @@
               role="button">
             {{ month|month_name }} {{ year }}
           </div>
-          <div class="text-base h-full flex items-center btn btn-ghost">
           <a role="button"
+             class="btn btn-ghost"
             hx-boost="true"
             hx-trigger="click, next_month from:window"
             href="{% url 'monthly_overview' month=next_month year=next_year %}">
@@ -42,7 +42,6 @@
         </div>
       </div>
     </div>
-    </div>
     {#  Monthly summary#}
     <div class="row gap-y-3">
       <div class="col-12 lg:col-4 lg:order-last! order-first!">

app/templates/net_worth/net_worth.html

@@ -70,7 +70,7 @@
                     </a>
                     <ul>
                       <li>
-                        <a class="text-base-content/60 select-auto">
+                        <a class="text-base-content/60 select-auto flex justify-between items-center w-full">
                           <span class="text-start shrink">{% trans "Consolidated" %}</span>
                           <span class="text-end shrink-0">
                             <c-amount.display :amount="currency.consolidated.total_final" :prefix="currency.consolidated.currency.prefix" :suffix="currency.consolidated.currency.suffix" :decimal_places="currency.consolidated.currency.decimal_places" color="{% if currency.consolidated.total_final > 0 %}green{% elif currency.consolidated.total_final < 0 %}red{% endif %}" text-end></c-amount.display>
@@ -112,7 +112,7 @@
                        id="tab-evolution"
                        checked="checked" />
                 <div role="tabpanel" class="tab-content p-4" id="evolution-tab-pane">
-                  <div class="chart-container relative min-h-[40vh] h-full w-full">
+                  <div class="chart-container relative min-h-[80vh] md:min-h-[40vh] h-full w-full">
                     <canvas id="currencyBalanceChart"></canvas>
                   </div>
                 </div>
@@ -123,7 +123,7 @@
                        aria-label="{% trans 'Difference' %}"
                        id="tab-diff" />
                 <div role="tabpanel" class="tab-content p-4" id="diff-tab-pane">
-                  <div class="chart-container relative min-h-[40vh] h-full w-full">
+                  <div class="chart-container relative min-h-[80vh] md:min-h-[40vh] h-full w-full">
                     <canvas id="monthlyDifferenceChart"></canvas>
                   </div>
                 </div>
@@ -194,7 +194,7 @@
           </div>
         </div>
         <div class="col lg:col-7">
-          <div class="chart-container relative min-h-[40vh] h-full card bg-base-100">
+          <div class="chart-container relative min-h-[80vh] md:min-h-[40vh] h-full card bg-base-100">
             <div class="card-body">
               <canvas id="accountBalanceChart"></canvas>
             </div>

app/templates/users/fragments/list.html

@@ -11,7 +11,7 @@
     {% endspaceless %}
   </div>
 
-  <div class="card bg-base-100 shadow-xl">
+  <div class="card card-border bg-base-100 shadow w-full">
     <div class="card-body">
       <div id="tags-table">
         {% if users %}

app/templates/yearly_overview/pages/yearly_overview_base.html

@@ -3,7 +3,8 @@
 {% load month_name %}
 {% load static %}
 
-{% block title %}{% translate 'Yearly Overview' %} :: {% block overview_type_title %}{% endblock %} :: {{ year }}{% endblock %}
+{% block title %}{% translate 'Yearly Overview' %} ::
+  {% block overview_type_title %}{% endblock %} :: {{ year }}{% endblock %}
 
 {% block body_hyperscript %}
   on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_year' end
@@ -13,31 +14,33 @@
 {% block content %}
   <div class="h-full text-center mb-4 w-full">
     <div role="tablist" class="tabs tabs-box mx-auto w-fit">
-      <a href="{% url 'yearly_overview_currency' year=year %}" class="tab {% if type == 'currency' %}tab-active{% endif %}" hx-boost>
+      <a href="{% url 'yearly_overview_currency' year=year %}"
+         class="tab {% if type == 'currency' %}tab-active{% endif %}" hx-boost>
         <i class="fa-solid fa-solid fa-coins fa-fw me-2"></i>{% trans 'Currency' %}
       </a>
-      <a href="{% url 'yearly_overview_account' year=year %}" class="tab {% if type == 'account' %}tab-active{% endif %}" hx-boost>
+      <a href="{% url 'yearly_overview_account' year=year %}"
+         class="tab {% if type == 'account' %}tab-active{% endif %}" hx-boost>
         <i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
       </a>
     </div>
   </div>
   <div class="container" id="yearly-content">
-    <div class="flex flex-wrap mb-4 gap-x-xl-4 gap-y-3">
+    <div class="row mt-7 mb-5">
-      {#    Date picker#}
+      {#    Date picker #}
-      <div class="w-full xl:w-auto flex-row items-center flex">
+      <div class="col-12 lg:col-3">
-        <div class="text-base h-full items-center flex btn btn-ghost">
+        <div class="flex flex-row items-center">
           <a role="button"
              hx-boost="true"
+             class="btn btn-ghost"
              hx-trigger="click, previous_year from:window"
              href="{% block previous_year_url %}{% endblock %}">
             <i class="fa-solid fa-chevron-left"></i></a>
-        </div>
           <div class="text-2xl font-bold flex-1 text-center whitespace-normal flex-wrap h-auto min-w-0">
             {{ year }}
           </div>
-        <div class="text-base mx-2 h-full items-center flex btn btn-ghost">
           <a role="button"
              hx-boost="true"
+             class="btn btn-ghost"
              hx-trigger="click, next_year from:window"
              href="{% block next_year_url %}{% endblock %}">
             <i class="fa-solid fa-chevron-right"></i>
@@ -93,8 +96,9 @@
         </div>
       </div>
 
+      <hr class="xl:hidden hr">
+
       <div class="col-12 xl:col-6">
-        <hr class="xl:hidden my-3 hr">
         <div id="data-content"
              class="show-loading"
              hx-get="{% block content_data_url %}{% endblock %}"

frontend/package.json

@@ -20,7 +20,6 @@
     "@alpinejs/mask": "^3.15.1",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.1.0",
-    "@marcreichel/alpine-autosize": "^1.3.3",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@tailwindcss/vite": "^4.1.17",
@@ -31,10 +30,9 @@
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "chartjs-chart-sankey": "^0.14.0",
-    "daisyui": "^5.4.7",
+    "daisyui": "^5.5.5",
     "htmx.org": "^2.0.8",
     "hyperscript.org": "^0.9.14",
-    "jquery": "^3.7.1",
     "mathjs": "^15.1.0",
     "postcss": "^8.5.6",
     "sass": "^1.94.0",

frontend/src/js/_tooltip.js

@@ -16,7 +16,7 @@ function initiateTooltips() {
     delegate(document.body, {
         target: '[data-tippy-content]',
         theme: theme,
-        zIndex: 1100,
+        zIndex: 1089,
         content(reference) {
             return reference.getAttribute('data-tippy-content');
         },

frontend/src/styles/tailwind.css

@@ -174,6 +174,11 @@
     .table-col-auto {
         @apply w-1;
     }
+
+    .btn.btn-free {
+        @apply min-h-(--size) py-1;
+        height: unset;
+    }
 }