<script setup lang="ts">
import { onMounted } from "vue";
import { useAppStore } from "@/stores/app.store";
import UnlockLayout from "@/layouts/UnlockLayout.vue";

// MainLayout is the full app shell — lazy-load it so the unlock screen is
// instant and the heavy editor/terminal code only lands after auth.
import { defineAsyncComponent } from "vue";
const MainLayout = defineAsyncComponent(
  () => import("@/layouts/MainLayout.vue")
);

const app = useAppStore();

onMounted(async () => {
  await app.checkVaultState();
});
</script>

<template>
  <div class="app-root">
    <!-- Show the unlock/create-vault screen until the store confirms we're in -->
    <UnlockLayout v-if="!app.isUnlocked" />
    <!-- Once unlocked, mount the full application shell -->
    <MainLayout v-else />
  </div>
</template>

<style scoped>
.app-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
