{#each tabOrder
.filter((id) => $conversations.has(id))
.map((id) => ({ id, conversation: $conversations.get(id)! })) as { id, conversation } (id)}
handlePointerDown(e, id)}
onclick={() => handleTabClick(id)}
onkeydown={(e) => handleTabKeydown(id, e)}
role="tab"
tabindex={0}
aria-selected={id === $activeConversationId}
>
{#if editingTabId === id}
e.stopPropagation()}
class="bg-transparent border-b border-[var(--border-color)] outline-none px-0 py-0 text-sm w-32 select-text"
/>
{:else}
startEditing(id, conversation.name, e)}
role="button"
tabindex={-1}
>
{conversation.name}
{#if hasUnreadMessages(id, conversation)}
{/if}
{/if}
{#if $conversations.size > 1}
{/if}