ui: refactor chips into ChipGroup component

src/routes/songs/+page.svelte

@@ -5,6 +5,7 @@
 	import { invalidate } from "$app/navigation";
 	import SongEntry from "$lib/components/SongEntry.svelte";
 	import { Button } from "$lib/components/ui/button";
+	import { ChipGroup } from "$lib/components/ui/chip-group";
 	import { Input } from "$lib/components/ui/input";
 	import { Label } from "$lib/components/ui/label";
 	import { db as clientDb } from "$lib/db/client-db";
@@ -119,25 +120,14 @@
 				/>
 			</div>
 		</div>
-		<fieldset id="song-types">
-			<div class="flex flex-col gap-2">
-				<legend class="scn-label">Song Type</legend>
-				<div class="chip-group">
-					{#each Object.keys(AmqSongLinkTypeMap) as type}
-						<label class="chip">
-							<input
-								type="checkbox"
-								bind:group={params.type}
-								value={AmqSongLinkTypeMap[
-									type as keyof typeof AmqSongLinkTypeMap
-								]}
-							/>
-							<span>{type}</span>
-						</label>
-					{/each}
-				</div>
-			</div>
-		</fieldset>
+		<ChipGroup
+			label="Song Type"
+			items={Object.keys(AmqSongLinkTypeMap).map((type) => ({
+				label: type,
+				value: AmqSongLinkTypeMap[type as keyof typeof AmqSongLinkTypeMap],
+			}))}
+			bind:value={params.type}
+		/>
 		<div class="flex flex-col gap-2">
 			<Label for="songs-limit">Limit</Label>
 			<Input