<template>
  <div class="flex h-full flex-col">
    <div
      v-if="wsReconnecting"
      class="border-b border-amber-900/50 bg-amber-950/80 px-4 py-1.5 text-center text-xs text-amber-300"
    >
      {{ t('ws.reconnecting') }}
    </div>
    <RouterView class="min-h-0 flex-1" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { wsClient } from './lib/ws-client';

const { t } = useI18n();
const wsReconnecting = computed(() => wsClient.status.value === 'reconnecting');
</script>
