tehran_tala/apps/user-app/src/App.vue

<!--
  Ported from legacy henza_pwa/src/App.vue — layout switching, RTL shell, and
  and the update gate (components/AppUpdateGate.vue).

  Not ported (deliberate): Firebase push init and WebOTP autofill. Both were
  already commented out in legacy's own App.vue, so neither ran there either.
-->
<template>
  <div>
    <component :is="getLayout" class="relative">
      <router-view v-slot="{ Component, route }">
        <keep-alive>
          <suspense>
            <template #default>
              <component :is="Component" :key="route.name" />
            </template>
          </suspense>
        </keep-alive>
      </router-view>
    </component>

    <AppUpdateGate />

    <ProductMorph />
    <ToastHost />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useRegisterSW } from 'virtual:pwa-register/vue'
import MasterLayout from './layout/MasterLayout.vue'
import FullPageLayout from './layout/FullPageLayout.vue'
import AppUpdateGate from './components/AppUpdateGate.vue'
import ToastHost from './components/ui/ToastHost.vue'
import ProductMorph from './components/product/ProductMorph.vue'

const router = useRouter()
// Registers the service worker (offline, install). Updates are not applied
// here: AppUpdateGate shows what changed and applies them on the user's tap.
useRegisterSW()

const getLayout = computed(() => {
  if (router.currentRoute.value.meta && router.currentRoute.value.meta.layout === 'FullPage') {
    return FullPageLayout
  }
  return MasterLayout
})
</script>

<style lang="less">
body::-webkit-scrollbar {
  display: none;
}

#app {
  overflow: hidden;
  direction: rtl !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: start;
  color: @primary;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.slideDown-enter-active,
.slideDown-leave-active {
  transition: all @transition-duration ease;
}
.slideDown-enter-from {
  transform: translateY(-100vh);
}

.slideDown-leave-to {
  transform: translateY(100vh);
}

.slideDown-leave-from {
  transform: translateY(0);
}
.slideDown-enter-to {
  transform: translateY(0);
}

.fade-down-enter-active,
.fade-down-leave-active {
  transition: all @transition-duration ease;
}
</style>