flotilla/src/routes/chat/+page.svelte

<script lang="ts">
  import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import ContentSearch from "@lib/components/ContentSearch.svelte"
  import ChatItem from "@app/components/ChatItem.svelte"
  import ChatStart from "@app/components/ChatStart.svelte"
  import ChatMenu from "@app/components/ChatMenu.svelte"
  import {chatSearch} from "@app/core/state"
  import {pushModal} from "@app/util/modal"

  let term = $state("")

  const startChat = () => pushModal(ChatStart)

  const openMenu = () => pushModal(ChatMenu)

  const chats = $derived($chatSearch.searchOptions(term))
</script>

<div class="hidden min-h-screen md:hero">
  <div class="col-2 hero-content text-center">
    <p class="row-2 text-lg">
      <Icon icon={InfoCircle} />
      No conversation selected.
    </p>
    <p>
      Click on a conversation in the sidebar, or <Button class="link" onclick={startChat}
        >start a new one</Button
      >.
    </p>
  </div>
</div>

<ContentSearch class="md:hidden">
  {#snippet input()}
    <div class="row-2 min-w-0 flex-grow items-center">
      <label class="input input-bordered flex flex-grow items-center gap-2">
        <Icon icon={Magnifier} />
        <input
          bind:value={term}
          class="grow"
          type="text"
          placeholder="Search for conversations..." />
      </label>
      <Button class="btn btn-neutral" onclick={openMenu}>
        <Icon icon={MenuDots} />
      </Button>
    </div>
  {/snippet}
  {#snippet content()}
    <div class="col-2">
      {#each chats as { id, pubkeys, messages } (id)}
        <ChatItem {id} {pubkeys} {messages} class="bg-alt card2" />
      {:else}
        <div class="py-20 max-w-sm col-4 items-center m-auto text-center">
          <p>No chats found! Try starting one up.</p>
          <Button class="btn btn-primary" onclick={startChat}>
            <Icon icon={AddCircle} />
            Start a Chat
          </Button>
        </div>
      {/each}
    </div>
  {/snippet}
</ContentSearch>