feat: basic settings layout

src/lib/components/GroupedList.ts

@@ -0,0 +1,4 @@
+import GroupedListItem from './GroupedList/GroupedListItem.svelte';
+import GroupedListSection from './GroupedList/GroupedListSection.svelte';
+
+export { GroupedListItem, GroupedListSection };

src/lib/components/GroupedList/GroupedListItem.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Icon, type IconSource } from 'svelte-hero-icons';
+
+	export let href: string | undefined = undefined;
+	export let icon: IconSource | undefined = undefined;
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	{href}
+	class="flex items-center gap-2 px-4 py-3 font-medium text-sf-primary"
+>
+	{#if icon}
+		<Icon src={icon} class="size-5 text-sf-secondary" mini />
+	{/if}
+	<slot />
+</svelte:element>

src/lib/components/GroupedList/GroupedListSection.svelte

@@ -0,0 +1,17 @@
+<section class="my-4 px-4">
+	{#if $$slots.header}
+		<h3 class="mb-1 truncate text-sm font-medium uppercase text-sf-secondary">
+			<slot name="header" />
+		</h3>
+	{/if}
+	<div
+		class="divide-y-[0.5px] divide-ss-secondary rounded-lg border-[0.5px] border-ss-secondary bg-sb-primary shadow-sm"
+	>
+		<slot />
+	</div>
+	{#if $$slots.footer}
+		<div class="mt-1 text-sm font-medium uppercase text-sf-secondary">
+			<slot name="footer" />
+		</div>
+	{/if}
+</section>

src/lib/components/ProfilePicture.svelte

@@ -14,7 +14,7 @@
 {:else}
 	<div
 		class="box-border size-[--weblah-profile-pic-size] rounded-full border-2 border-dashed border-ss-primary"
-		style:--weblah-profile-pic-size={`${size - 2}px`}
+		style:--weblah-profile-pic-size={`${size}px`}
 		aria-hidden
 	/>
 	<span class="sr-only">Account Unavailable</span>