<script lang="ts">
  import { page } from "$app/state";
  import ChatHeader from "$lib/components/ChatHeader.svelte";
  import MessageList from "$lib/components/MessageList.svelte";
  import { accounts } from "$lib/stores/accounts.svelte";
  import { chats } from "$lib/stores/chats.svelte";

  const chatId = $derived(Number(page.params.chatId));

  $effect(() => {
    if (accounts.selectedId === null) {
      return;
    }
    chats.ensure(chatId);
    chats.enrich(chatId);
  });
</script>

<div class="chat-view">
  {#key chatId}
    <ChatHeader {chatId} />
    <div class="chat-body">
      <MessageList {chatId} />
    </div>
  {/key}
</div>

<style lang="scss">
  .chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .chat-body {
    flex: 1;
    min-height: 0;
  }
</style>
