ui: refactor chips into ChipGroup component

src/lib/components/ui/chip-group/chip-group.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" generics="T">
+    import { cn } from "$lib/utils";
+
+    type Item = {
+        label: string;
+        value: T;
+    };
+
+    let {
+        label,
+        items,
+        value = $bindable(),
+        type = "checkbox",
+        class: className,
+        ...rest
+    }: {
+        label?: string;
+        items: Item[];
+        value: any;
+        type?: "checkbox" | "radio";
+        class?: string;
+    } = $props();
+</script>
+
+<div class={cn("flex flex-col gap-2", className)}>
+    {#if label}
+        <span class="scn-label">{label}</span>
+    {/if}
+    <div class="chip-group" {...rest}>
+        {#each items as item}
+            <label class="chip">
+                {#if type === "checkbox"}
+                    <input
+                        type="checkbox"
+                        bind:group={value}
+                        value={item.value}
+                    />
+                {:else}
+                    <input type="radio" bind:group={value} value={item.value} />
+                {/if}
+                <span>{item.label}</span>
+            </label>
+        {/each}
+    </div>
+</div>

src/lib/components/ui/chip-group/index.ts

@@ -0,0 +1 @@
+export { default as ChipGroup } from "./chip-group.svelte";

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">
+		<ChipGroup
-			<div class="flex flex-col gap-2">
+			label="Song Type"
-				<legend class="scn-label">Song Type</legend>
+			items={Object.keys(AmqSongLinkTypeMap).map((type) => ({
-				<div class="chip-group">
+				label: type,
-					{#each Object.keys(AmqSongLinkTypeMap) as type}
+				value: AmqSongLinkTypeMap[type as keyof typeof AmqSongLinkTypeMap],
-						<label class="chip">
+			}))}
-							<input
+			bind:value={params.type}
-								type="checkbox"
-								bind:group={params.type}
-								value={AmqSongLinkTypeMap[
-									type as keyof typeof AmqSongLinkTypeMap
-								]}
 		/>
-							<span>{type}</span>
-						</label>
-					{/each}
-				</div>
-			</div>
-		</fieldset>
 		<div class="flex flex-col gap-2">
 			<Label for="songs-limit">Limit</Label>
 			<Input