app-v2/src/App.vue

<script setup lang="ts">
import SpaceList from "@/components/space-list/SpaceList.vue";
import Toolbar from "@/components/Toolbar.vue";
import Toast from "primevue/toast";
import ProgressSpinner from "primevue/progressspinner";
import {useSpaceStore} from "@/stores/spaceStore";
import {useToolbarStore} from "@/stores/toolbar-store";
import router from "@/router";
import {useRoute} from "vue-router";
import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
import {useToast} from "primevue/usetoast";
import {useUserStore} from "@/stores/userStore";

const spaceStore = useSpaceStore();
const toolbarStore = useToolbarStore();
const route = useRoute();
const platform = ref<string>("unknown")
const toast = useToast();
const userStore = useUserStore();

const isLoading = ref(true);

const tgApp = (window as any)?.Telegram?.WebApp;
const isTelegram = computed(() => !!tgApp);

const isSpaceSelectorVisible = ref(false);
const isSpaceSelected = computed(
    () => spaceStore.selectedSpaceId === undefined || isSpaceSelectorVisible.value
);

const menu = [
  {name: "Dashboard", icon: "pi pi-chart-bar", link: "/", navStack: 'dashboard'},
  {name: "Transactions", icon: "pi pi-cog", link: "/transactions", navStack: 'transactions'},
  {name: "Settings", icon: "pi pi-list", link: "/settings", navStack: 'settings'},
];

function spaceSelected() {
  router.push("/");
  isSpaceSelectorVisible.value = false;
}

let backHandler: (() => void) | null = null;

function setupBackButton() {
  if (!tgApp.initData) 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();
  }
}

const isNavVisible = ref(true)
const isInputFocused = ref(false)

const handleFocusIn = () => {
  isNavVisible.value = false
  isInputFocused.value = true
}

const handleFocusOut = () => {
  isNavVisible.value = true
  isInputFocused.value = false
}

const blurAllInputs = () => {
  // Снимаем фокус со всех активных элементов
  const activeElement = document.activeElement as HTMLElement
  if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
    activeElement.blur()
  }
}

onMounted(async () => {

  // setTimeout(async () => {
  //   if (!userStore.isAuthorized) await router.push(`/login?back=${route.path}`)
  // }, 1000)
  //
  await userStore.fetchUserProfile()
  await spaceStore.getSpace()
  // setTimeout(async () => {
  //   if (!userStore.isAuthorized) await router.push(`/login?back=${route.path}`)
  // }, 100)

  toolbarStore.registerHandler("openSpacePicker", () => {
    isSpaceSelectorVisible.value = true;
  });
  document.addEventListener('focusin', handleFocusIn)
  document.addEventListener('focusout', handleFocusOut)
  blurAllInputs()
  if (tgApp.initData) {
    try {
      tgApp.expand?.();
      platform.value = tgApp.platform
      if (['ios', 'android'].includes(platform.value)) {
        tgApp.requestFullscreen?.();
      }
      tgApp.lockOrientation?.();
      tgApp.disableVerticalSwipes()

      tgApp.ready();
      setupBackButton();
    } catch (err) {
      console.warn("Telegram WebApp init error:", err);
    }
  }
  isLoading.value = false;
});

// 🔁 следим за изменением маршрута
watch(
    () => route.path,
    () => setupBackButton()
);

onBeforeUnmount(() => {
  toolbarStore.unregisterHandler("openSpacePicker");
  document.removeEventListener('focusin', handleFocusIn)
  document.removeEventListener('focusout', handleFocusOut)
  tgApp?.BackButton?.hide();
  if (backHandler) tgApp?.BackButton?.offClick(backHandler);
});
</script>

<template>
  <Toast/>
  <div v-if="isLoading">
    <ProgressSpinner/>
  </div>

  <div v-else>
    <div v-if="!userStore.isAuthorized">
      <router-view/>
    </div>
    <div v-else class="flex flex-col tg " :class="['ios', 'android'].includes(platform) ? '!pt-10' : ''">
      <SpaceList v-if="isSpaceSelected && userStore.isAuthorized" @space-selected="spaceSelected"/>

      <div v-else class="flex flex-col w-full gap-4">
        <div class="flex w-full flex flex-row items-end justify-end pt-2 pe-4">
          <Toolbar/>
        </div>

        <div class="flex flex-col w-full h-full items-end px-4 gap-4 pb-6">
          <router-view class=" w-full"/>
        </div>
        <button
            v-if="isInputFocused"
            @click="blurAllInputs"
            class="fixed bottom-4 right-4 z-50 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg"
        >
          Готово
        </button>
        <nav v-if="isNavVisible"
             class="fixed inset-x-0 bottom-4 z-50 w-full flex justify-center items-center "
             style="padding-bottom: var(--tg-content-safe-area-inset-bottom) !important;"
        >

          <div class="flex h-full items-center justify-between py-2 bg-white rounded-4xl px-6 w-fit shadow">
            <!--          <div class="flex  h-full justify-items-center items-center justify-between py-2  bg-white  rounded-4xl !px-6 w-fit">-->
            <router-link
                v-for="item in menu"
                :key="item.link"
                :to="item.link"
                class="flex w-fit h-full flex-col items-center gap-2 !py-2 !px-4"
                :class="route.meta.navStack === item.navStack ? 'bg-green-100 rounded-2xl ' : ''"
            >
              <i class="!text-lg" :class="item.icon"/>
              <span class="font-medium text-gray-900">{{ item.name }}</span>
            </router-link>
          </div>
        </nav>

        <div class="flex h-16"/>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tg {
  width: 100% !important;
  margin: var(--tg-content-safe-area-inset-top) var(--tg-content-safe-area-inset-right) 0 var(--tg-content-safe-area-inset-left) !important;
}
</style>