feat: improve navbar settings and other stuff

app/apps/users/urls.py

@@ -11,4 +11,9 @@ urlpatterns = [
         views.toggle_amount_visibility,
         name="toggle_amount_visibility",
     ),
+    path(
+        "user/settings/",
+        views.update_settings,
+        name="user_settings",
+    ),
 ]

app/apps/users/views.py

@@ -11,8 +11,10 @@ from django.utils.translation import gettext_lazy as _
 
 from apps.users.forms import (
     LoginForm,
+    UserSettingsForm,
 )
 from apps.common.decorators.htmx import only_htmx
+from apps.users.models import UserSettings
 
 
 def logout_view(request):
@@ -29,20 +31,39 @@ class UserLoginView(LoginView):
 @only_htmx
 @login_required
 def toggle_amount_visibility(request):
-    current_hide_amounts = request.user.settings.hide_amounts
+    user_settings, created = UserSettings.objects.get_or_create(user=request.user)
+    current_hide_amounts = user_settings.hide_amounts
     new_hide_amounts = not current_hide_amounts
 
-    request.user.settings.hide_amounts = new_hide_amounts
+    user_settings.hide_amounts = new_hide_amounts
-    request.user.settings.save()
+    user_settings.save()
 
     if new_hide_amounts is True:
         messages.info(request, _("Transaction amounts are now hidden"))
-        response = HttpResponse(
+        response = render(request, "users/generic/show_amounts.html")
-            '<i class="fa-solid fa-eye-slash fa-fw"></i><div id="settings-hide-amounts" class="d-inline tw-invisible"></div>'
-        )
     else:
         messages.info(request, _("Transaction amounts are now displayed"))
-        response = HttpResponse('<i class="fa-solid fa-eye fa-fw"></i>')
+        response = render(request, "users/generic/hide_amounts.html")
 
     response.headers["HX-Trigger"] = "transaction_updated, toast"
     return response
+
+
+@only_htmx
+@login_required
+def update_settings(request):
+    user_settings, created = UserSettings.objects.get_or_create(user=request.user)
+
+    if request.method == "POST":
+        form = UserSettingsForm(request.POST, instance=user_settings)
+        if form.is_valid():
+            form.save()
+            messages.success(request, _("Your settings have been updated."))
+            return HttpResponse(
+                status=204,
+                headers={"HX-Refresh": "true"},
+            )
+    else:
+        form = UserSettingsForm(instance=user_settings)
+
+    return render(request, "users/fragments/user_settings.html", {"form": form})

app/templates/includes/navbar.html

@@ -45,15 +45,7 @@
                   </ul>
                 </li>
             </ul>
-            {% spaceless %}
+          {% include 'includes/navbar/user_menu.html' %}
-            <a class="mx-3 tw-text-2xl" hx-get="{% url 'toggle_amount_visibility' %}">
-              {% if user.settings.hide_amounts %}
-                <i class="fa-solid fa-eye-slash fa-fw"></i><div id="settings-hide-amounts" class="d-inline tw-invisible"></div>
-              {% else %}
-                <i class="fa-solid fa-eye fa-fw"></i>
-              {% endif %}</a>
-            {% endspaceless %}
-            <a class="btn btn-outline-light btn-sm" href="{% url 'logout' %}"><i class="fa-solid fa-door-open me-2"></i>{% translate 'Logout' %}</a>
         </div>
     </div>
 </nav>

app/templates/includes/navbar/user_menu.html

@@ -0,0 +1,29 @@
+{% load i18n %}
+{#<a class="" href=""></i></a>#}
+
+<div class="dropdown">
+  <a class="tw-text-2xl" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <i class="fa-solid fa-user"></i>
+  </a>
+  <ul class="dropdown-menu dropdown-menu-start dropdown-menu-lg-end">
+    <li><a class="dropdown-item"
+           hx-get="{% url 'user_settings' %}"
+           hx-target="#generic-offcanvas">
+      <i class="fa-solid fa-gear me-2 fa-fw"></i>{% translate 'Settings' %}</a></li>
+    <li><hr class="dropdown-divider"></li>
+    {% spaceless %}
+    <li>
+      <a class="dropdown-item" hx-get="{% url 'toggle_amount_visibility' %}" role="button">
+        {% if user.settings.hide_amounts %}
+        {% include 'users/generic/show_amounts.html' %}
+        {% else %}
+        {% include 'users/generic/hide_amounts.html' %}
+        {% endif %}
+      </a>
+    {% endspaceless %}
+    </li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="{% url 'logout' %}"><i class="fa-solid fa-door-open me-2 fa-fw"></i
+    >{% translate 'Logout' %}</a></li>
+  </ul>
+</div>

app/templates/users/fragments/user_settings.html

@@ -0,0 +1,11 @@
+{% extends 'extends/offcanvas.html' %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block title %}{% translate 'User Settings' %}{% endblock %}
+
+{% block body %}
+<form hx-post="{% url 'user_settings' %}" hx-target="#generic-offcanvas" novalidate>
+    {% crispy form %}
+</form>
+{% endblock %}

app/templates/users/generic/hide_amounts.html

@@ -0,0 +1,2 @@
+{% load i18n %}
+<i class="fa-solid fa-eye-slash me-2 fa-fw"></i>{% translate 'Hide amounts' %}

app/templates/users/generic/show_amounts.html

@@ -0,0 +1,3 @@
+{% load i18n %}
+<i class="fa-solid fa-eye me-2 fa-fw"></i>
+<span id="settings-hide-amounts" class="d-inline tw-invisible"></span>{% translate 'Show amounts' %}