<template>
  <div class="flex h-dvh flex-col">
    <WsBanner v-if="wsReconnecting" />
    <AppShell v-if="layout !== 'bare'" :fullbleed="layout === 'fullbleed'">
      <RouterView />
    </AppShell>
    <RouterView v-else class="min-h-0 flex-1" />
    <ToastContainer />
    <CommandPalette />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { wsClient } from './lib/ws-client';
import WsBanner from './components/layout/WsBanner.vue';
import AppShell from './components/layout/AppShell.vue';
import ToastContainer from './components/ToastContainer.vue';
import CommandPalette from './components/CommandPalette.vue';

const route = useRoute();
const layout = computed(() => route.meta.layout ?? 'shell');
const wsReconnecting = computed(() => wsClient.status.value === 'reconnecting');
</script>
