feat: redesign match play and add broadcast tooling

src/lib/components/ProfileComments.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Avatar from '$lib/components/Avatar.svelte';
 	import { enhance } from '$app/forms';
 	import { page } from '$app/state';
 
@@ -48,11 +49,7 @@
 			class="mt-3"
 		>
 			<div class="flex gap-3">
-				{#if user.image}
-					<img src={user.image} alt="" class="h-8 w-8 shrink-0 rounded-full" />
-				{:else}
-					<div class="h-8 w-8 shrink-0 rounded-full bg-surface-600"></div>
-				{/if}
+				<Avatar src={user.image} name={user.name ?? '?'} size={32} />
 				<div class="flex-1">
 					<textarea
 						name="content"
@@ -81,19 +78,9 @@
 		<div class="mt-4 flex flex-col gap-3">
 			{#each comments as comment}
 				<div class="flex gap-3">
-					{#if comment.author.image}
-						<a href="/users/{comment.author.id}" class="shrink-0">
-							<img src={comment.author.image} alt="" class="h-8 w-8 rounded-full" />
-						</a>
-					{:else}
-						<a href="/users/{comment.author.id}" class="shrink-0">
-							<div
-								class="font-700 flex h-8 w-8 items-center justify-center rounded-full bg-surface-600 text-xs text-text-secondary"
-							>
-								{comment.author.name.charAt(0).toUpperCase()}
-							</div>
-						</a>
-					{/if}
+					<a href="/users/{comment.author.id}" class="shrink-0">
+						<Avatar src={comment.author.image} name={comment.author.name} size={32} />
+					</a>
 					<div class="min-w-0 flex-1">
 						<div class="flex items-center gap-2">
 							<a href="/users/{comment.author.id}" class="font-600 text-sm hover:text-accent"