hardcoded toast

assets/i18n/en/main.ftl

@@ -202,6 +202,7 @@ parent-category = Parent category
 no-parent = — None (top level) —
 quantity = Quantity
 add-to-cart = Add to cart
+cart-added = Added to cart
 in-stock = In stock
 out-of-stock = Out of stock
 confirm-delete = Delete this for good?

assets/i18n/sk/main.ftl

@@ -202,6 +202,7 @@ parent-category = Nadradená kategória
 no-parent = — Žiadna (najvyššia úroveň) —
 quantity = Množstvo
 add-to-cart = Pridať do košíka
+cart-added = Pridané do košíka
 in-stock = Na sklade
 out-of-stock = Vypredané
 confirm-delete = Naozaj zmazať?

assets/views/base.html

@@ -47,6 +47,10 @@
         if (!v) return 0;
         return v.split(',').reduce(function (s, e) { return s + (parseInt(e.split(':')[1]) || 0) }, 0);
       }
+      // Show a floating toast notification. Usage: toast('Saved').
+      function toast(message) {
+        window.dispatchEvent(new CustomEvent('toast', { detail: message }));
+      }
     </script>
     <link href="/static/css/app.css?v=2026-06-16" rel="stylesheet" type="text/css">
     <script src="/static/vendor/htmx/htmx-1.9.12.min.js"></script>
@@ -93,7 +97,7 @@
           <!-- cart with live item-count badge read from the `cart` cookie -->
           <a href="/cart" data-nav="/cart"
             x-data="{ count: 0 }"
-            x-init="count = cartCount(); window.addEventListener('htmx:afterSwap', function () { count = cartCount() })"
+            x-init="count = cartCount(); ['htmx:afterSwap', 'htmx:afterRequest'].forEach(function (e) { window.addEventListener(e, function () { count = cartCount() }) })"
             aria-label="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
             title="{{ t(key='cart-title', lang=lang | default(value='sk')) }}"
             class="relative inline-flex size-9 items-center justify-center rounded-radius text-on-surface transition hover:bg-surface-alt dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">
@@ -205,5 +209,20 @@
         {% block content %}{% endblock content %}
       </main>
     </div>
+
+    <!-- toast notifications: fire from anywhere with toast('message') -->
+    <div x-data="{ toasts: [] }"
+      @toast.window="const id = Date.now() + Math.random(); toasts.push({ id, msg: $event.detail }); setTimeout(() => { toasts = toasts.filter(t => t.id !== id) }, 3000)"
+      class="pointer-events-none fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+      <template x-for="t in toasts" :key="t.id">
+        <div x-transition.opacity.duration.300ms
+          class="pointer-events-auto flex items-center gap-2 rounded-radius border border-outline bg-surface px-4 py-3 text-sm font-medium text-on-surface shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5 shrink-0 text-success">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+          </svg>
+          <span x-text="t.msg"></span>
+        </div>
+      </template>
+    </div>
   </body>
 </html>

assets/views/shop/_card.html

@@ -14,7 +14,8 @@
   <div class="flex flex-col gap-2 px-4 pb-4">
     {% if product.stock > 0 %}
     <p class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
-    <form method="post" action="/cart/add" hx-boost="false">
+    <form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none"
+      hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
       <input type="hidden" name="product_id" value="{{ product.id }}">
       <input type="hidden" name="quantity" value="1">
       <button type="submit"

assets/views/shop/show.html

@@ -39,7 +39,8 @@
     {% endif %}
 
     {% if product.stock > 0 %}
-    <form method="post" action="/cart/add" hx-boost="false" class="flex flex-wrap items-end gap-3">
+    <form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none" class="flex flex-wrap items-end gap-3"
+      hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
       <input type="hidden" name="product_id" value="{{ product.id }}">
       <div class="space-y-1.5">
         <label for="quantity" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="quantity", lang=lang | default(value='sk')) }}</label>