<template>
  <v-app>
    <AppShell>
      <RouterView />
    </AppShell>
    <ImageViewer v-if="modal.isOpen" @close="modal.close()" />
    <AppSnackbar ref="snackbar" />
  </v-app>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import AppShell from './components/AppShell.vue'
import AppSnackbar from './components/AppSnackbar.vue'
import ImageViewer from './components/modal/ImageViewer.vue'
import { useModalStore } from './stores/modal.js'

const modal = useModalStore()
const snackbar = ref(null)

onMounted(() => {
  // Expose snackbar via a simple global so stores can call it without props.
  window.__fcToast = (opts) => snackbar.value?.open(opts)
})
</script>
