storing vertical vs horizontal product card

assets/views/home/index.html

@@ -35,7 +35,9 @@
         <h2 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="nav-shop", lang=lang | default(value='sk')) }}</h2>
         <a href="/shop" class="text-sm font-semibold text-primary dark:text-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }} →</a>
       </div>
-      <div x-data="{ view: 'list' }" class="flex flex-col gap-4">
+      <div x-data="{ view: localStorage.getItem('shopView') === 'grid' ? 'grid' : 'list' }"
+        x-init="$watch('view', v => localStorage.setItem('shopView', v))"
+        :class="view === 'list' ? 'flex flex-col gap-4' : 'grid grid-cols-2 gap-4 sm:grid-cols-3'">
         {% for product in products %}
         {% include "shop/_card.html" %}
         {% endfor %}