<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import AppShell from '@/components/layout/AppShell.vue'
import DegradedModeBanner from '@/components/DegradedModeBanner.vue'

const route = useRoute()
const useShell = computed(() => !route.meta.public)
</script>

<template>
  <DegradedModeBanner />
  <AppShell v-if="useShell">
    <RouterView v-slot="{ Component }">
      <KeepAlive include="WardDashboard">
        <Transition name="fade" mode="out-in">
          <component :is="Component" />
        </Transition>
      </KeepAlive>
    </RouterView>
  </AppShell>
  <RouterView v-else />
</template>

<style>
.fade-enter-active,
.fade-leave-active { transition: opacity 0.15s ease; }
.fade-enter-from,
.fade-leave-to { opacity: 0; }
</style>