feat: add fulscreen mode, dark mode

spa/src/App.vue

@@ -1,6 +1,8 @@
 <template>
+  <FullscreenViewport v-if="platform === 'ios' && platform === 'android'"/>
+
   <div
-      class="hero min-h-screen"
+      class="hero min-h-screen relative"
       style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
   >
     <div class="hero-overlay"></div>
@@ -8,7 +10,7 @@
       <div class="max-w-md">
         <h1 class="mb-5 text-5xl font-bold">Товарняк</h1>
         <p class="mb-5">
-          Магазин, который гордо продаёт то, что другие прячут.
+          Мы гордо продаём то, что другие боятся.
         </p>
         <button class="btn btn-primary" @click="scrollToProducts">
           Показать товар лицом
@@ -24,6 +26,10 @@
             <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
           </svg>
         </div>
+
+        <div class="absolute text-gray-400 left-3 bottom-3">
+          {{ platform }}
+        </div>
       </div>
     </div>
   </div>
@@ -36,13 +42,28 @@
 <script setup>
 import ProductList from "./components/ProductList.vue";
 import {onMounted, ref} from "vue";
+import { useWebAppViewport } from 'vue-tg';
+import { useMiniApp, FullscreenViewport } from 'vue-tg';
+
+const tg = useMiniApp();
+const platform = ref();
+platform.value = tg.platform;
+
+// const backButton = useBackButton();
+// backButton.show();
 
 const goodsRef = ref();
 function scrollToProducts() {
   goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
 }
 
+
+const { disableVerticalSwipes } = useWebAppViewport();
+disableVerticalSwipes();
+
+
 onMounted(() => {
-  window.Telegram?.WebApp?.expand();
-})
+
+});
+
 </script>

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>

spa/src/main.js

@@ -1,8 +1,27 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
+import { VueTelegramPlugin } from 'vue-tg';
 
-createApp(App).mount('#app')
 
-const tg = window.Telegram.WebApp;
+const app = createApp(App);
+app.use(VueTelegramPlugin);
+app.mount('#app');
+
+import { useMiniApp, useTheme, onThemeChanged } from 'vue-tg';
+
+const theme = useTheme();
+const tg = useMiniApp();
+
+
+
+onThemeChanged(() => {
+    // handle theme update
+})
+
+theme.onChange(() => {
+    document.documentElement.setAttribute('data-theme', theme.colorScheme.value);
+});
+
+document.documentElement.setAttribute('data-theme', theme.colorScheme.value);
 tg.ready();

spa/src/style.css

@@ -1,2 +1,10 @@
 @import "tailwindcss";
-@plugin "daisyui";
+
+@plugin "daisyui" {
+    themes: light --default, dark --prefersdark;
+}
+
+html, body {
+    overscroll-behavior-y: none;
+    -webkit-overflow-scrolling: auto;
+}