From 6a09d9093e100c400f67337149fb5ed4ccb2f74f Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Mon, 19 Jan 2026 23:18:11 +1030
Subject: [PATCH] style: card based selection for quality / delay profile
 syncing

---
 .../[id]/sync/components/DelayProfiles.svelte | 23 ++++++++++---------
 .../sync/components/QualityProfiles.svelte    | 23 ++++++++++---------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/routes/arr/[id]/sync/components/DelayProfiles.svelte b/src/routes/arr/[id]/sync/components/DelayProfiles.svelte
index 66ce8a9..9ddc4b0 100644
--- a/src/routes/arr/[id]/sync/components/DelayProfiles.svelte
+++ b/src/routes/arr/[id]/sync/components/DelayProfiles.svelte
@@ -125,23 +125,24 @@
 						{#if database.delayProfiles.length === 0}
 							<p class="text-sm text-neutral-500 dark:text-neutral-400">No delay profiles</p>
 						{:else}
-							<div class="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+							<div class="grid grid-cols-5 gap-2">
 								{#each database.delayProfiles as profile}
-									<div class="flex items-center gap-2">
+									<button
+										type="button"
+										class="flex cursor-pointer items-center justify-between gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-left transition-colors hover:border-neutral-300 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600 dark:hover:bg-neutral-700"
+										on:click={() => {
+											state[database.id][profile.id] = !state[database.id][profile.id];
+										}}
+									>
+										<code class="font-mono text-sm text-neutral-900 dark:text-neutral-50">
+											{profile.name}
+										</code>
 										<IconCheckbox
 											checked={state[database.id]?.[profile.id] ?? false}
 											icon={Check}
 											shape="rounded"
-											on:click={() => {
-												state[database.id][profile.id] = !state[database.id][profile.id];
-											}}
 										/>
-										<code
-											class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-sm text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50"
-										>
-											{profile.name}
-										</code>
-									</div>
+									</button>
 								{/each}
 							</div>
 						{/if}
diff --git a/src/routes/arr/[id]/sync/components/QualityProfiles.svelte b/src/routes/arr/[id]/sync/components/QualityProfiles.svelte
index 190e354..6934dc6 100644
--- a/src/routes/arr/[id]/sync/components/QualityProfiles.svelte
+++ b/src/routes/arr/[id]/sync/components/QualityProfiles.svelte
@@ -127,23 +127,24 @@
 						{#if database.qualityProfiles.length === 0}
 							<p class="text-sm text-neutral-500 dark:text-neutral-400">No quality profiles</p>
 						{:else}
-							<div class="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">
+							<div class="grid grid-cols-5 gap-2">
 								{#each database.qualityProfiles as profile}
-									<div class="flex items-center gap-2">
+									<button
+										type="button"
+										class="flex cursor-pointer items-center justify-between gap-2 rounded-lg border border-neutral-200 bg-white px-3 py-2 text-left transition-colors hover:border-neutral-300 hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600 dark:hover:bg-neutral-700"
+										on:click={() => {
+											state[database.id][profile.id] = !state[database.id][profile.id];
+										}}
+									>
+										<code class="font-mono text-sm text-neutral-900 dark:text-neutral-50">
+											{profile.name}
+										</code>
 										<IconCheckbox
 											checked={state[database.id]?.[profile.id] ?? false}
 											icon={Check}
 											shape="rounded"
-											on:click={() => {
-												state[database.id][profile.id] = !state[database.id][profile.id];
-											}}
 										/>
-										<code
-											class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-sm text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50"
-										>
-											{profile.name}
-										</code>
-									</div>
+									</button>
 								{/each}
 							</div>
 						{/if}