tg app fix sizes

src/App.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import SpaceList from "@/components/space-list/SpaceList.vue";
-import { useSpaceStore } from "@/stores/spaceStore";
-import { computed, onMounted, onBeforeUnmount, ref } from "vue";
 import Toolbar from "@/components/Toolbar.vue";
+import { useSpaceStore } from "@/stores/spaceStore";
 import { useToolbarStore } from "@/stores/toolbar-store";
 import router from "@/router";
-import {useRoute} from "vue-router"; // если у тебя index.ts экспортирует по умолчанию, можно без /index.js
+import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import { computed, onMounted, onBeforeUnmount, ref, watch } from "vue";
 
 const spaceStore = useSpaceStore();
 const toolbarStore = useToolbarStore();
 const route = useRoute();
 
-// true/false, есть ли Telegram WebApp
-const isTelegram = computed(() => !!(window as any)?.Telegram?.WebApp);
+const tgApp = (window as any)?.Telegram?.WebApp;
+const isTelegram = computed(() => !!tgApp);
 
 const isSpaceSelectorVisible = ref(false);
 const isSpaceSelected = computed(
@@ -20,9 +20,9 @@ const isSpaceSelected = computed(
 );
 
 const menu = [
-  { name: "Dashboard",    icon: "pi pi-chart-bar", link: "/" },
-  { name: "Transactions", icon: "pi pi-cog",       link: "/transactions" },
-  { name: "Settings",     icon: "pi pi-list",      link: "/settings" },
+  { name: "Dashboard", icon: "pi pi-chart-bar", link: "/" },
+  { name: "Transactions", icon: "pi pi-cog", link: "/transactions" },
+  { name: "Settings", icon: "pi pi-list", link: "/settings" },
 ];
 
 function spaceSelected() {
@@ -30,46 +30,63 @@ function spaceSelected() {
   isSpaceSelectorVisible.value = false;
 }
 
+let backHandler: (() => void) | null = null;
+
+function setupBackButton() {
+  if (!tgApp) return;
+
+  if (route.path !== "/") {
+    tgApp.BackButton.show();
+
+    // снять старый обработчик
+    if (backHandler) tgApp.BackButton.offClick(backHandler);
+
+    // навесить новый
+    backHandler = () => {
+      if (window.history.length > 1) {
+        router.back();
+      } else {
+        tgApp.BackButton.hide();
+      }
+    };
+    tgApp.BackButton.onClick(backHandler);
+  } else {
+    tgApp.BackButton.hide();
+  }
+}
+
 onMounted(() => {
   toolbarStore.registerHandler("openSpacePicker", () => {
     isSpaceSelectorVisible.value = true;
   });
 
-  const tgApp = (window as any)?.Telegram?.WebApp;
   if (tgApp) {
     try {
-
-      tgApp.expand?.();          // более мягкий вариант, чем requestFullscreen()
+      tgApp.expand?.();
       tgApp.requestFullscreen?.();
       tgApp.lockOrientation?.();
-      if (route.path !== '/') {
-        tgApp.BackButton.show()
-        // при нажатии — возвращаемся назад
-        const handleBack = () => {
-          // например, переход на предыдущий маршрут
-          if (window.history.length > 1) {
-            router.back();
-          } else {
-            tg.BackButton.hide();
-          }
-        };
-
-        tg.BackButton.onClick(handleBack);
-      }
       tgApp.ready();
-    } catch {
-      /* ignore */
+      setupBackButton();
+    } catch (err) {
+      console.warn("Telegram WebApp init error:", err);
     }
   }
 });
 
+// 🔁 следим за изменением маршрута
+watch(
+    () => route.path,
+    () => setupBackButton()
+);
+
 onBeforeUnmount(() => {
   toolbarStore.unregisterHandler("openSpacePicker");
+  tgApp?.BackButton?.hide();
+  if (backHandler) tgApp?.BackButton?.offClick(backHandler);
 });
 </script>
 
 <template>
-
   <div class="flex flex-col tg">
     <SpaceList v-if="isSpaceSelected" @space-selected="spaceSelected" />
 
@@ -91,25 +108,23 @@ onBeforeUnmount(() => {
               class="flex w-fit flex-col items-center gap-2"
           >
             <i class="!text-lg" :class="item.icon" />
-            <span class=" font-medium text-gray-900">{{ item.name }}</span>
+            <span class="font-medium text-gray-900">{{ item.name }}</span>
           </router-link>
         </div>
       </nav>
 
-      <!-- отступ под нижний navbar, чтобы контент не перекрывался -->
       <div class="h-16" />
     </div>
   </div>
 </template>
 
 <style scoped>
-/* Порядок отступов: top right bottom left */
 .tg {
   width: 100% !important;
   padding:
       var(--tg-content-safe-area-inset-top)
       var(--tg-content-safe-area-inset-right)
-      var(--tg-content-safe-area-inset-bottom)
+      0
       var(--tg-content-safe-area-inset-left) !important;
 }
 </style>