feat: redesign match play and add broadcast tooling

src/lib/components/SearchModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Avatar from '$lib/components/Avatar.svelte';
 	import { goto } from '$app/navigation';
 
 	interface SearchResult {
@@ -145,6 +146,7 @@
 	<div
 		class="fixed top-[15%] left-1/2 z-[60] w-full max-w-lg -translate-x-1/2 rounded-xl border border-border bg-surface-800 shadow-2xl"
 		role="dialog"
+		tabindex="-1"
 		aria-label="Search"
 		onkeydown={handleModalKeydown}
 	>
@@ -219,7 +221,7 @@
 									<path stroke-linecap="round" stroke-linejoin="round" d={typeIcons[type] ?? ''} />
 								</svg>
 								{#if item.image || item.avatarUrl}
-									<img src={item.image ?? item.avatarUrl} alt="" class="h-5 w-5 rounded-full" />
+									<Avatar src={item.image ?? item.avatarUrl} name={item.name ?? '?'} size={20} />
 								{/if}
 								<span class="flex-1 truncate">{item.name ?? 'Unnamed'}</span>
 								{#if item.state}