refactor: Add GroupedListContent and enhance GroupedList components

src/lib/components/GroupedList/GroupedListContent.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { tw } from '$lib/tw';
+
+	interface Props {
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { children, class: classNames }: Props = $props();
+</script>
+
+<div class={tw('px-4 py-3', classNames)}>
+	{@render children?.()}
+</div>

src/lib/components/GroupedList/GroupedListSection.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	interface Props {
-		header?: import('svelte').Snippet;
+		header?: import('svelte').Snippet | string;
 		children?: import('svelte').Snippet;
-		footer?: import('svelte').Snippet;
+		footer?: import('svelte').Snippet | string;
 	}
 
 	let { header, children, footer }: Props = $props();
@@ -10,18 +10,26 @@
 
 <section class="my-6 cursor-default px-4">
 	{#if header}
-		<h3 class="mb-1 truncate px-4 text-sm font-medium uppercase text-sf-tertiary">
-			{@render header?.()}
+		<h3 class="text-sf-tertiary mb-1 truncate px-4 text-sm font-medium uppercase">
+			{#if typeof header === 'string'}
+				{header}
+			{:else}
+				{@render header?.()}
+			{/if}
 		</h3>
 	{/if}
 	<div
-		class="divide-y-[0.5px] divide-ss-secondary overflow-hidden rounded-lg border-[0.5px] border-ss-secondary bg-sb-primary shadow-xs"
+		class="divide-ss-secondary border-ss-secondary bg-sb-primary divide-y-[0.5px] overflow-hidden rounded-lg border-[0.5px] shadow-xs"
 	>
 		{@render children?.()}
 	</div>
 	{#if footer}
-		<div class="mt-1 px-4 text-sm text-sf-tertiary">
-			{@render footer?.()}
+		<div class="text-sf-tertiary mt-1 px-4 text-sm">
+			{#if typeof footer === 'string'}
+				{footer}
+			{:else}
+				{@render footer?.()}
+			{/if}
 		</div>
 	{/if}
 </section>

src/routes/(app)/settings/account/new/+page.svelte

@@ -15,9 +15,9 @@
 	import RichTextInput from '$lib/components/RichTextInput.svelte';
 	import Link from '$lib/components/Link.svelte';
 	import type { BlahProfile } from '@blah-im/core/identity';
-	import { onMount } from 'svelte';
 	import type { Node } from 'prosemirror-model';
 	import { messageSchema } from '$lib/components/RichTextInput/schema';
+	import GroupedListContent from '$lib/components/GroupedList/GroupedListContent.svelte';
 
 	let name: string = $state('');
 	let bioDoc: Node | null = $state(null);
@@ -64,7 +64,7 @@
 
 <GroupedListContainer>
 	<GroupedListSection>
-		<GroupedListItem>
+		<GroupedListContent class="flex items-center">
 			<ProfilePicture size={64} account={undefined} />
 			<input
 				type="text"
@@ -73,24 +73,22 @@
 				disabled={isBusy}
 				class="caret-accent-500 ms-3 flex-1 bg-transparent text-lg leading-loose outline-hidden placeholder:opacity-50"
 			/>
-		</GroupedListItem>
+		</GroupedListContent>
 	</GroupedListSection>
 
-	<GroupedListSection>
-		{#snippet header()}Bio{/snippet}
+	<GroupedListSection
+		header="Bio"
+		footer="Introduce yourself. This will be public for everyone to see."
+	>
 		<RichTextInput
 			schema={messageSchema}
 			onDocChange={(newDoc) => (bioDoc = newDoc)}
 			class="p-4 shadow-none ring-0"
 			placeholder="a 25 yo. artist from Paris."
 		/>
-		{#snippet footer()}
-			<p>Introduce yourself. This will be public for everyone to see.</p>
-		{/snippet}
 	</GroupedListSection>
 
-	<GroupedListSection>
-		{#snippet header()}Security{/snippet}
+	<GroupedListSection header="Security">
 		<GroupedListInputItem>
 			Password
 			<input type="password" bind:value={password} placeholder="Password" disabled={isBusy} />
@@ -117,8 +115,7 @@
 		{/snippet}
 	</GroupedListSection>
 	{#if customize}
-		<GroupedListSection>
-			{#snippet header()}Identity Service{/snippet}
+		<GroupedListSection header="Identity Service">
 			<GroupedListInputItem>
 				Initial Service
 				<input type="text" bind:value={identityServer} />