From e3e34817397a90b76bc26b89ecf7ff3a37397ac5 Mon Sep 17 00:00:00 2001
From: Shibo Lyu <github@of.sb>
Date: Tue, 15 Oct 2024 03:03:30 +0800
Subject: [PATCH] feat: grouped list selected state

---
 .../components/GroupedList/GroupedListItem.svelte   | 13 +++++++++++--
 src/routes/(app)/Settings.svelte                    |  0
 src/routes/(app)/settings/SettingsList.svelte       |  2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)
 delete mode 100644 src/routes/(app)/Settings.svelte

diff --git a/src/lib/components/GroupedList/GroupedListItem.svelte b/src/lib/components/GroupedList/GroupedListItem.svelte
index 00f845a..ca9fff5 100644
--- a/src/lib/components/GroupedList/GroupedListItem.svelte
+++ b/src/lib/components/GroupedList/GroupedListItem.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
+	import { tw } from '$lib/tw';
 	import { Icon, type IconSource } from 'svelte-hero-icons';
 
 	export let href: string | undefined = undefined;
 	export let icon: IconSource | undefined = undefined;
+	export let selected: boolean = false;
 </script>
 
 <svelte:element
 	this={href ? 'a' : 'div'}
 	{href}
-	class="flex items-center gap-2 px-4 py-3 font-medium text-sf-primary"
+	class={tw(
+		'flex items-center gap-2 px-4 py-3 font-medium text-sf-primary first:rounded-t-lg last:rounded-b-lg',
+		selected && 'bg-accent-500 text-white shadow-inner dark:bg-accent-900 dark:text-sf-primary'
+	)}
 >
 	{#if icon}
-		<Icon src={icon} class="size-5 text-sf-secondary" mini />
+		<Icon
+			src={icon}
+			class={tw('size-5 text-sf-secondary', selected && 'text-white dark:text-sf-primary')}
+			mini
+		/>
 	{/if}
 	<slot />
 </svelte:element>
diff --git a/src/routes/(app)/Settings.svelte b/src/routes/(app)/Settings.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes/(app)/settings/SettingsList.svelte b/src/routes/(app)/settings/SettingsList.svelte
index 20c3311..f2de676 100644
--- a/src/routes/(app)/settings/SettingsList.svelte
+++ b/src/routes/(app)/settings/SettingsList.svelte
@@ -26,7 +26,7 @@
 			<GroupedListItem icon={UserPlus}>Add Account</GroupedListItem>
 		</GroupedListSection>
 		<GroupedListSection>
-			<GroupedListItem icon={Cog}>General</GroupedListItem>
+			<GroupedListItem icon={Cog} selected>General</GroupedListItem>
 			<GroupedListItem icon={Bell}>Notifications</GroupedListItem>
 			<GroupedListItem icon={LockClosed}>Privacy and Security</GroupedListItem>
 			<GroupedListItem icon={DevicePhoneMobile}>Devices</GroupedListItem>