feat: redesign match play and add broadcast tooling

src/lib/components/Header.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Avatar from '$lib/components/Avatar.svelte';
 	import { page } from '$app/state';
 	import { enhance } from '$app/forms';
 
@@ -47,9 +48,7 @@
 						{badge.label}
 					</span>
 				{/if}
-				{#if user.image}
-					<img src={user.image} alt={user.name} class="h-7 w-7 rounded-full" />
-				{/if}
+				<Avatar src={user.image} name={user.name} size={28} />
 				<span class="font-500 hidden text-sm text-text-primary sm:inline">{user.name}</span>
 				<svg
 					class="h-3.5 w-3.5 text-text-secondary transition-transform {menuOpen