<template>
  <RouterView />
  <BottomNav />
  <BaseToast />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import BottomNav from '@/components/BottomNav.vue'
import BaseToast from '@/components/BaseToast.vue'
import { useAuthStore } from '@/stores/auth'
import { useTheme } from '@/composables/useTheme'

const auth = useAuthStore()
const { applyTheme } = useTheme()

onMounted(() => {
  // Sync Vue's theme state with whatever SpaController stamped on <html>
  const stamped = document.documentElement.dataset.theme
  if (stamped && auth.user) {
    auth.user.theme = stamped
  } else if (auth.user?.theme) {
    applyTheme(auth.user.theme)
  }
})
</script>
