<script lang="ts" setup>
// import

import { VueQueryDevtools } from "@tanstack/vue-query-devtools";

// state

const { $updateAvailable: updateAvailable, $handleUpdate: handleUpdate } =
    useNuxtApp();

const closeModal = () => {
    updateAvailable.value = false;
};
</script>

<template>
    <div>
        <LoadingIndicator />
        <NuxtPwaManifest />

        <UpdatePwaModal
            :isShow="updateAvailable"
            @update="handleUpdate"
            @close="closeModal"
        />

        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>

        <ToastProvider>
            <ToastContainer />
            <ToastViewport
                class="[--viewport-padding:_25px] fixed bottom-0 left-0 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-w-[100vw] m-0 list-none z-[9999999999999999] outline-none"
            />
        </ToastProvider>

        <VueQueryDevtools dir="ltr" buttonPosition="bottom-left" />
    </div>
</template>
