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

<!--
  Ported from legacy henza_pwa/src/App.vue — layout switching, RTL shell, and
  the app-version-check / service-worker update dialog.

  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>

    <DialogVantOneButton :timeOut="-1" v-model:show="versionDialog" :closeOnClickOverlay="true">
      <template v-slot:img>
        <!-- Still (first frame) in reduced-motion mode. -->
        <DotLottieVue
          class="w-full aspect-square"
          :autoplay="!appearance.isReducedMotion"
          :loop="!appearance.isReducedMotion"
          src="https://lottie.host/cb620e8e-c64a-42e8-a6b5-8844146e5999/nmft7oBO8q.json"
        />
      </template>

      <template v-slot:title>
        <div class="p-8 text-justify">نسخه جدید منتزر منتشر شد!</div>
      </template>

      <template v-slot:button>
        <div class="text-center text-[color:var(--c-primary)]" @click="update()">به روز رسانی</div>
      </template>
    </DialogVantOneButton>

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

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
import { useRegisterSW } from 'virtual:pwa-register/vue'
import MasterLayout from './layout/MasterLayout.vue'
import FullPageLayout from './layout/FullPageLayout.vue'
import DialogVantOneButton from './components/DialogVantOneButton.vue'
import ToastHost from './components/ui/ToastHost.vue'
import ProductMorph from './components/product/ProductMorph.vue'
import { useRefresh } from './composables/useRefresh'
import { useAppearanceStore } from './stores/appearanceStore'
import pkg from '../package.json'

const router = useRouter()
const appearance = useAppearanceStore()
const { updateServiceWorker } = useRegisterSW()

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

// Ported from legacy App.vue:52-74 — compare the stored version against the
// bundled package version and offer a one-tap service-worker update.
const versionDialog = ref(false)

function checkVersion() {
  const version = localStorage.getItem('version')
  if (version) {
    if (version !== pkg.version) versionDialog.value = true
  } else {
    localStorage.setItem('version', pkg.version)
  }
}

function update() {
  localStorage.setItem('version', pkg.version)
  updateServiceWorker()
  window.location.reload()
}

onMounted(() => {
  useRefresh()
  checkVersion()
})
</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>