<script lang="ts">
  import PageHeader from '$lib/components/PageHeader.svelte';
  import Panel from '$lib/components/Panel.svelte';
  import EmptyState from '$lib/components/EmptyState.svelte';
  import Button from '$lib/components/Button.svelte';
  import Badge from '$lib/components/Badge.svelte';
</script>

<PageHeader title="Your Rooms" kicker="Conversations">
  <Badge slot="meta" tone="warning">Coming soon</Badge>
</PageHeader>

<Panel>
  <EmptyState
    icon="💬"
    title="The chat experience ships in a later phase"
    description="Aether body stats, character mood, RP/stage direction, SSE streaming — all the things that make a conversation more than a chatbot. The chat sidebar from the main site (XP, reputation, alarm, dialogue colors) lives here."
  >
    <Button variant="secondary" small disabled>Create a new room (coming soon)</Button>
  </EmptyState>
</Panel>
