hedena_gold/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 :class="{ 'is-actingAs': Boolean(session.actingAs) }">
    <ActingAsBar />
    <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 />
    <InstallPromptModal />

    <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 InstallPromptModal from './components/pwa/InstallPromptModal.vue'
import ToastHost from './components/ui/ToastHost.vue'
import ProductMorph from './components/product/ProductMorph.vue'
import ActingAsBar from './components/expert/ActingAsBar.vue'
import { useSessionStore } from './stores/session'
import { usePwaInstall } from './composables/usePwaInstall'

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

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;
}

/* The act-as strip is fixed, so push everything down by its height while it is
   up — otherwise it covers the top of each page, including sticky headers. */
.is-actingAs {
  /* The strip's height. Fixed headers read it as their `top`, and the page flow
     is pushed down by the same amount. */
  --aab-h: 38px;
  padding-top: var(--aab-h);
}

#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;
  // Centred phone column on desktop (width only). Do NOT put transform /
  // filter / perspective here — that would make position:fixed bars
  // (tabbar, PageBar) stick to #app and scroll away with the page.
  max-width: var(--app-max-width);
  margin-inline: auto;
  min-height: 100dvh;
  min-height: 100svh;
  background: @page;
  position: relative;
}

@media (min-width: 431px) {
  #app {
    box-shadow:
      0 0 0 1px @hairline,
      0 28px 64px -28px rgba(20, 22, 26, 0.32);
  }
}

.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>