feat: grouped list selected state

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>

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>