From 4e680c669733f94f35d79c0bff9650d568a46a65 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Mon, 9 Feb 2026 21:32:54 -0800
Subject: [PATCH] ui: refactor chips into ChipGroup component

---
 .../ui/chip-group/chip-group.svelte           | 45 +++++++++++++++++++
 src/lib/components/ui/chip-group/index.ts     |  1 +
 src/routes/songs/+page.svelte                 | 28 ++++--------
 3 files changed, 55 insertions(+), 19 deletions(-)
 create mode 100644 src/lib/components/ui/chip-group/chip-group.svelte
 create mode 100644 src/lib/components/ui/chip-group/index.ts

diff --git a/src/lib/components/ui/chip-group/chip-group.svelte b/src/lib/components/ui/chip-group/chip-group.svelte
new file mode 100644
index 0000000..baf6c96
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/ui/chip-group/index.ts b/src/lib/components/ui/chip-group/index.ts
new file mode 100644
index 0000000..678a3f7
--- /dev/null
+++ b/src/lib/components/ui/chip-group/index.ts
@@ -0,0 +1 @@
+export { default as ChipGroup } from "./chip-group.svelte";
diff --git a/src/routes/songs/+page.svelte b/src/routes/songs/+page.svelte
index 1aae94b..cc52ed9 100644
--- a/src/routes/songs/+page.svelte
+++ b/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