feat: render raid events

Author: olivermrose

src/lib/components/message/Notification.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { UserMessage } from "../../message";
 	import Announcement from "./Announcement.svelte";
+	import Raid from "./Raid.svelte";
 	import Sub from "./Sub.svelte";
 
 	const { message }: { message: UserMessage } = $props();
@@ -11,6 +12,8 @@
 
 	{#if type === "announcement"}
 		<Announcement {message} color={message.event.color} />
+	{:else if type === "raid"}
+		<Raid {message} raid={message.event} />
 	{:else if type === "sub_or_resub" || type === "sub_mystery_gift" || type === "sub_gift"}
 		<Sub {message} sub={message.event} />
 	{/if}

src/lib/components/message/Raid.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { UserMessage } from "$lib/message";
+	import { app } from "$lib/state.svelte";
+	import type { RaidEvent } from "$lib/twitch/irc";
+
+	interface Props {
+		message: UserMessage;
+		raid: RaidEvent;
+	}
+
+	const { message, raid }: Props = $props();
+</script>
+
+<div class="bg-muted/50 my-0.5 border-l-4 p-2.5" style:border-color={app.active?.user.color}>
+	<div class="flex items-center gap-2">
+		<img
+			class="size-6 rounded-full"
+			src={raid.profile_image_url.replace("%s", "150x150")}
+			alt={message.viewer.displayName}
+		/>
+
+		<p class="inline">
+			<span class="font-semibold" style:color={message.viewer.color}>
+				{message.viewer.displayName}
+			</span>
+
+			is raiding with {raid.viewer_count}
+			{raid.viewer_count > 1 ? "viewers" : "viewer"}!
+		</p>
+	</div>
+</div>