feat: add option for muting sounds

app/templates/includes/navbar/user_menu.html

@@ -18,8 +18,19 @@
         {% include 'users/generic/hide_amounts.html' %}
         {% endif %}
       </a>
-    {% endspaceless %}
     </li>
+    {% endspaceless %}
+    {% spaceless %}
+    <li>
+      <a class="dropdown-item" hx-get="{% url 'toggle_sound_playing' %}" role="button">
+        {% if user.settings.mute_sounds %}
+        {% include 'users/generic/play_sounds.html' %}
+        {% else %}
+        {% include 'users/generic/mute_sounds.html' %}
+        {% endif %}
+      </a>
+    </li>
+    {% endspaceless %}
     <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>

app/templates/transactions/fragments/item.html

@@ -13,14 +13,14 @@ my-3"
          hx-get="{% url 'transaction_pay' transaction_id=transaction.id %}"
          hx-target="closest .transaction"
          hx-swap="outerHTML"
-         _="on paid
+         _="on paid if body do not include #settings-mute-sound
               js
                 paidSound.pause()
                 paidSound.currentTime = 0
                 paidSound.play()
               end
             end
-            on unpaid
+            on unpaid if body do not include #settings-mute-sound
               js
                 unpaidSound.pause()
                 unpaidSound.currentTime = 0

app/templates/users/generic/mute_sounds.html

@@ -0,0 +1,2 @@
+{% load i18n %}
+<i class="fa-solid fa-volume-xmark me-2 fa-fw"></i>{% translate 'Mute sounds' %}

app/templates/users/generic/play_sounds.html

@@ -0,0 +1,3 @@
+{% load i18n %}
+<i class="fa-solid fa-volume-low me-2 fa-fw"></i>{% translate 'Play sounds' %}
+<span id="settings-mute-sound" class="d-inline tw-invisible"></span>