fix: infinity scroll, init data in base64

spa/src/components/ProductsList.vue

@@ -17,6 +17,7 @@
           <h3 class="mt-4 text-sm">{{ product.name }}</h3>
           <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
         </RouterLink>
+        <div ref="bottom" style="height: 1px;"></div>
       </div>
 
       <div v-if="productsStore.isLoading" class="text-center mt-5">
@@ -57,6 +58,7 @@ const route = useRoute();
 const categoryId = route.params.category_id ?? null;
 const productsStore = useProductsStore();
 const settings = useSettingsStore();
+const bottom = ref(null);
 
 function haptic() {
   window.Telegram.WebApp.HapticFeedback.selectionChanged();
@@ -89,9 +91,9 @@ async function loadMore() {
 }
 
 useInfiniteScroll(
-    window,
+    bottom,
     loadMore,
-    {distance: 500}
+    {distance: 1000}
 )
 
 watch(() => route.params.id, async newId => {

spa/src/utils/ftch.js

@@ -2,15 +2,20 @@ import {ofetch} from "ofetch";
 
 const BASE_URL = '/';
 
+function encodeBase64Unicode(str) {
+    return btoa(new TextEncoder().encode(str).reduce((data, byte) => data + String.fromCharCode(byte), ''));
+}
+
 export const apiFetch = ofetch.create({
     throwHttpErrors: true,
     onRequest({request, options}) {
         const data = window.Telegram?.WebApp?.initData;
 
         if (data) {
+            const encoded = encodeBase64Unicode(data);
             options.headers = {
                 ...options.headers,
-                'X-Telegram-InitData': data,
+                'X-Telegram-InitData': encoded,
             }
         }
     },