TicketsState

<script>
  import { TicketsState } from '@cstar.help/svelte';

  // Pulls the identified customer's full ticket list from the chat provider.
  const tix = new TicketsState();

  // Client-side filter — TicketsState fetches the full list, no server-side params.
  const open = $derived(tix.tickets.filter((t) => t.status === 'open'));

  async function newTicket() {
    await tix.create({ title: 'Need help with my account' });
    // create() prepends the new ticket to .tickets — no manual refresh needed.
  }
</script>

{#if tix.isLoading}
  <p>Summoning tickets...</p>
{:else if tix.error}
  <p>Couldn't load — try again?</p>
{:else}
  <button onclick={newTicket}>New ticket</button>
  <ul>
    {#each open as t (t.id)}
      <li>{t.title}</li>
    {/each}
  </ul>
  <button onclick={() => tix.refresh()} disabled={tix.isLoading}>Refresh</button>
{/if}