feat: ui improvements, show only active products, limit max page for infinity scroll

spa/src/components/CategoriesInline.vue

@@ -7,8 +7,12 @@
     Каталог
   </RouterLink>
 
-  <RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-md" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
-    {{ category.name }}
+  <RouterLink
+      v-for="category in categoriesStore.topCategories"
+      class="btn btn-md max-w-[12rem]"
+      :to="{name: 'product.categories.show', params: {category_id: category.id}}"
+  >
+    <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
   </RouterLink>
 </div>
 </template>

spa/src/components/CategoriesList/CategoryItem.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
 
-    <h3 class="ml-5 text-lg">{{ category.name }}</h3>
+    <h3 class="ml-5 text-lg line-clamp-2">{{ category.name }}</h3>
   </a>
 </template>
 
@@ -24,4 +24,4 @@ const props = defineProps({
 });
 
 const emit = defineEmits(["onSelect"]);
-</script>
+</script>

spa/src/views/CategoriesList.vue

@@ -3,11 +3,11 @@
     <h2 class="text-3xl mb-5">Категории</h2>
 
     <button v-if="parentId" class="py-2 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 min-w-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
       </svg>
 
-      <span class="ml-2">Назад к "{{ parentCategory.name }}"</span>
+      <span class="ml-2 line-clamp-2">Назад к "{{ parentCategory.name }}"</span>
     </button>
 
     <button

spa/src/views/Products.vue

@@ -1,9 +1,11 @@
 <template>
   <div ref="goodsRef" class="safe-top">
+    <SearchInput/>
     <ProductsList/>
   </div>
 </template>
 
 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
+import SearchInput from "@/components/SearchInput.vue";
 </script>