gami-web/app/layouts/native.vue

<script setup lang="ts">
import type { NativeSafeArea } from '~/types/native'

const SAFE_AREA_COOKIE_KEY = 'GAMI-cookie_safe_area'

const nativeSafeArea = useState<NativeSafeArea>('native-safe-area', () => ({
  top: 0,
  bottom: 0,
}))

const safeAreaCookie = useCookie<string | null>(SAFE_AREA_COOKIE_KEY, {
  default: () => null,
})

const parseSafeArea = (raw?: string | null): NativeSafeArea | null => {
  if (!raw || typeof raw !== 'string') {
    return null
  }

  const [topStr, bottomStr] = raw.split('|')
  const top = Number.parseFloat(topStr ?? '')
  const bottom = Number.parseFloat(bottomStr ?? '')

  if (!Number.isFinite(top) && !Number.isFinite(bottom)) {
    return null
  }

  return {
    top: Number.isFinite(top) ? top : 0,
    bottom: Number.isFinite(bottom) ? bottom : 0,
  }
}

const setSafeAreaIfValid = (raw?: string | null) => {
  const parsed = parseSafeArea(raw)
  if (parsed) {
    nativeSafeArea.value = parsed
  }
}

if (import.meta.server) {
  setSafeAreaIfValid(safeAreaCookie.value)
}

if (import.meta.client) {
  setSafeAreaIfValid(window.GAMI_BRIDGE?.safeArea ?? safeAreaCookie.value)

  onMounted(() => {
    setSafeAreaIfValid(window.GAMI_BRIDGE?.safeArea ?? safeAreaCookie.value)
  })
}
</script>

<template>
  <div>
    <slot />
  </div>
</template>