From bf1ccb956df1fbc35cdd0f991bc163d3f4cef21e Mon Sep 17 00:00:00 2001
From: Sam Chau <schau22@pm.me>
Date: Tue, 30 Dec 2025 05:20:23 +1030
Subject: [PATCH] feat(notifications): update styles for notification service
 forms and Discord configuration to use accent coloring

---
 .../settings/notifications/+page.svelte       |  6 +--
 .../components/DiscordConfiguration.svelte    | 34 ++++++------
 .../components/NotificationServiceForm.svelte | 52 +++++++++++++------
 3 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/src/routes/settings/notifications/+page.svelte b/src/routes/settings/notifications/+page.svelte
index c5272a5..b0f906a 100644
--- a/src/routes/settings/notifications/+page.svelte
+++ b/src/routes/settings/notifications/+page.svelte
@@ -104,7 +104,7 @@
 			<!-- Add Service Button -->
 			<a
 				href="/settings/notifications/new"
-				class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+				class="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600"
 			>
 				<Plus size={16} />
 				Add Service
@@ -239,7 +239,7 @@
 								<div class="flex max-w-sm flex-wrap gap-1">
 									{#each getEnabledTypes(service.enabled_types) as type}
 										<span
-											class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200"
+											class="inline-flex items-center rounded-full bg-accent-100 px-2 py-0.5 text-xs font-medium text-accent-800 dark:bg-accent-900 dark:text-accent-200"
 										>
 											{formatNotificationType(type)}
 										</span>
@@ -293,7 +293,7 @@
 										<button
 											type="submit"
 											disabled={testingServiceId === service.id}
-											class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-neutral-300 bg-white text-blue-600 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-blue-400 dark:hover:bg-neutral-700"
+											class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg border border-neutral-300 bg-white text-accent-600 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-accent-400 dark:hover:bg-neutral-700"
 											title="Send test notification"
 										>
 											{#if testingServiceId === service.id}
diff --git a/src/routes/settings/notifications/components/DiscordConfiguration.svelte b/src/routes/settings/notifications/components/DiscordConfiguration.svelte
index 9b5fd9d..21339c0 100644
--- a/src/routes/settings/notifications/components/DiscordConfiguration.svelte
+++ b/src/routes/settings/notifications/components/DiscordConfiguration.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { Check } from 'lucide-svelte';
+	import IconCheckbox from '$ui/form/IconCheckbox.svelte';
+
 	export let config: Record<string, unknown> = {};
 	export let mode: 'create' | 'edit' = 'create';
 
@@ -34,7 +37,7 @@
 				name="webhook_url"
 				required={mode === 'create'}
 				placeholder="https://discord.com/api/webhooks/..."
-				class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
+				class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-400 focus:outline-none focus:ring-1 focus:ring-neutral-400 dark:focus:border-neutral-500 dark:focus:ring-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
 			/>
 			<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
 				{#if mode === 'edit'}
@@ -58,7 +61,7 @@
 				id="username"
 				name="username"
 				placeholder="Profilarr"
-				class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
+				class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-400 focus:outline-none focus:ring-1 focus:ring-neutral-400 dark:focus:border-neutral-500 dark:focus:ring-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
 			/>
 			<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
 				Custom username for the webhook bot
@@ -78,7 +81,7 @@
 				id="avatar_url"
 				name="avatar_url"
 				placeholder="https://example.com/avatar.png"
-				class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
+				class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-400 focus:outline-none focus:ring-1 focus:ring-neutral-400 dark:focus:border-neutral-500 dark:focus:ring-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
 			/>
 			<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
 				Custom avatar image for the webhook bot
@@ -87,23 +90,24 @@
 
 		<!-- Enable Mentions -->
 		<div class="flex items-start gap-3">
-			<input
-				type="checkbox"
-				id="enable_mentions"
-				name="enable_mentions"
-				class="mt-1 h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800"
+			<IconCheckbox
+				icon={Check}
+				checked={enableMentions}
+				on:click={() => (enableMentions = !enableMentions)}
 			/>
-			<div class="flex-1">
-				<label
-					for="enable_mentions"
-					class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
-				>
+			<input type="hidden" name="enable_mentions" value={enableMentions ? 'on' : ''} />
+			<button
+				type="button"
+				class="flex-1 text-left"
+				on:click={() => (enableMentions = !enableMentions)}
+			>
+				<span class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
 					Enable @here mentions
-				</label>
+				</span>
 				<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
 					Mention @here in notifications to alert online users
 				</p>
-			</div>
+			</button>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/settings/notifications/components/NotificationServiceForm.svelte b/src/routes/settings/notifications/components/NotificationServiceForm.svelte
index 4d4ac60..766548d 100644
--- a/src/routes/settings/notifications/components/NotificationServiceForm.svelte
+++ b/src/routes/settings/notifications/components/NotificationServiceForm.svelte
@@ -4,6 +4,8 @@
 	import DiscordConfiguration from './DiscordConfiguration.svelte';
 	import { siDiscord } from 'simple-icons';
 	import { groupNotificationTypesByCategory } from '$shared/notificationTypes';
+	import { Plus, Save, Check } from 'lucide-svelte';
+	import IconCheckbox from '$ui/form/IconCheckbox.svelte';
 
 	export let mode: 'create' | 'edit' = 'create';
 	export let initialData: {
@@ -19,9 +21,18 @@
 	// Group notification types by category
 	const groupedTypes = groupNotificationTypesByCategory();
 
-	// Check if a notification type should be checked by default
-	function isTypeEnabled(typeId: string): boolean {
-		return initialData.enabledTypes?.includes(typeId) || false;
+	// Track enabled types state
+	let enabledTypesState: Record<string, boolean> = {};
+
+	// Initialize enabled types from initialData
+	$: {
+		for (const [, types] of Object.entries(groupedTypes)) {
+			for (const type of types) {
+				if (enabledTypesState[type.id] === undefined) {
+					enabledTypesState[type.id] = initialData.enabledTypes?.includes(type.id) || false;
+				}
+			}
+		}
 	}
 </script>
 
@@ -80,7 +91,7 @@
 						bind:value={selectedType}
 						required
 						disabled={mode === 'edit'}
-						class="block w-full rounded-lg border border-neutral-300 bg-white py-2 pl-10 pr-3 text-sm text-neutral-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
+						class="block w-full rounded-lg border border-neutral-300 bg-white py-2 pl-10 pr-3 text-sm text-neutral-900 focus:border-neutral-400 focus:outline-none focus:ring-1 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:focus:border-neutral-500 dark:focus:ring-neutral-500"
 					>
 						<option value="discord">Discord</option>
 					</select>
@@ -108,7 +119,7 @@
 					bind:value={serviceName}
 					required
 					placeholder="e.g., Main Discord Server"
-					class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
+					class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-400 focus:outline-none focus:ring-1 focus:ring-neutral-400 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500 dark:focus:border-neutral-500 dark:focus:ring-neutral-500"
 				/>
 				<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
 					A friendly name to identify this notification service
@@ -141,17 +152,20 @@
 					</h3>
 					<div class="space-y-2">
 						{#each types as type}
-							<div class="flex items-start gap-3">
-								<input
-									type="checkbox"
-									id={type.id}
-									name={type.id}
-									checked={isTypeEnabled(type.id)}
-									class="mt-0.5 h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800"
+							<div class="flex items-center gap-3">
+								<IconCheckbox
+									icon={Check}
+									checked={enabledTypesState[type.id]}
+									on:click={() => (enabledTypesState[type.id] = !enabledTypesState[type.id])}
 								/>
-								<label for={type.id} class="text-sm text-neutral-700 dark:text-neutral-300">
+								<input type="hidden" name={type.id} value={enabledTypesState[type.id] ? 'on' : ''} />
+								<button
+									type="button"
+									class="text-sm text-neutral-700 dark:text-neutral-300"
+									on:click={() => (enabledTypesState[type.id] = !enabledTypesState[type.id])}
+								>
 									{type.label}
-								</label>
+								</button>
 							</div>
 						{/each}
 					</div>
@@ -170,9 +184,15 @@
 		</a>
 		<button
 			type="submit"
-			class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600"
+			class="flex items-center gap-2 rounded-lg bg-accent-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600"
 		>
-			{mode === 'create' ? 'Create Service' : 'Update Service'}
+			{#if mode === 'create'}
+				<Plus size={16} />
+				Create Service
+			{:else}
+				<Save size={16} />
+				Update Service
+			{/if}
 		</button>
 	</div>
 </form>