feat: add fulscreen mode, dark mode

spa/src/components/ProductList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white">
+  <div class="bg-base-100">
     <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
       <h2 class="sr-only">Products</h2>
 
@@ -11,8 +11,8 @@
             </div>
           </div>
 
-          <h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
-          <p class="mt-1 text-lg font-medium text-gray-900">{{ product.price }}</p>
+          <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+          <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
         </a>
       </div>
     </div>
@@ -22,6 +22,9 @@
 <script setup>
 import {$fetch} from 'ofetch';
 import {onMounted, ref} from "vue";
+import { useHapticFeedback } from 'vue-tg';
+
+const hapticFeedback = useHapticFeedback();
 
 const products = ref([]);
 
@@ -37,14 +40,8 @@ function onScroll(e) {
   const delta = Math.abs(scrollLeft - lastScrollLeft);
 
   if (delta > 30) {
-    hapticFeedback();
+    hapticFeedback.impactOccurred('soft');
     lastScrollLeft = scrollLeft;
   }
 }
-
-function hapticFeedback(strength = 'light') {
-  if (window.Telegram.WebApp.version >= '6.1') {
-    window.Telegram.WebApp.HapticFeedback.impactOccurred(strength);
-  }
-}
 </script>