feat: add editable nickname field to account settings

Nickname was previously HCA-managed only and reset on every login.
Users can now set their own nickname from the account page, and the
HCA sync preserves it across future logins.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: maxstellar

src/routes/(app)/account/+page.server.ts

@@ -27,6 +27,16 @@ export const actions = {
 		return { success: true };
 	},
 
+	saveNickname: async ({ request, locals }) => {
+		if (!locals.user) redirect(302, '/login');
+		const form = await request.formData();
+		await db
+			.update(users)
+			.set({ nickname: (form.get('nickname') as string)?.trim() || null, updatedAt: new Date() })
+			.where(eq(users.hcaId, locals.user.sub));
+		return { success: true };
+	},
+
 	saveDarkMode: async ({ request, locals }) => {
 		if (!locals.user) redirect(302, '/login');
 		const form = await request.formData();

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

@@ -11,6 +11,8 @@
 		untrack(() => page.url.searchParams.get('edit') === 'address')
 	);
 
+	let editingNickname = $state(false);
+
 	let addressCardEl = $state<HTMLDivElement | null>(null);
 
 	onMount(() => {
@@ -51,6 +53,44 @@
 	<div class="card card-wide">
 		<span class="card-label">details</span>
 		<div class="field-list">
+			<div class="field">
+				<span class="field-key">nickname</span>
+				{#if editingNickname}
+					<form
+						method="POST"
+						action="?/saveNickname"
+						class="inline-edit-form"
+						use:enhance={() => {
+							return ({ update }) => {
+								update();
+								editingNickname = false;
+							};
+						}}
+					>
+						<input
+							class="edit-input inline-input"
+							type="text"
+							name="nickname"
+							value={data.user?.nickname ?? ''}
+							placeholder="nickname"
+							maxlength="40"
+						/>
+						<button type="submit" class="btn-save btn-save-sm">save</button>
+						<button
+							type="button"
+							class="btn-cancel btn-cancel-sm"
+							onclick={() => (editingNickname = false)}>cancel</button
+						>
+					</form>
+				{:else}
+					<span class="field-val">
+						{data.user?.nickname ?? '—'}
+						<button class="edit-link-inline" onclick={() => (editingNickname = true)}
+							>edit</button
+						>
+					</span>
+				{/if}
+			</div>
 			{#if data.user?.name}
 				<div class="field">
 					<span class="field-key">name</span>
@@ -374,6 +414,40 @@
 		padding: 0.2em 0.55em;
 	}
 
+	.edit-link-inline {
+		font-size: 0.7rem;
+		font-weight: bold;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		color: var(--rail-label);
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+	}
+
+	.edit-link-inline:hover {
+		color: var(--color-text);
+	}
+
+	.inline-edit-form {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.inline-input {
+		width: 12rem;
+		padding: 0.3rem 0.5rem;
+	}
+
+	.btn-save-sm,
+	.btn-cancel-sm {
+		font-size: 0.75rem;
+		padding: 0.3rem 0.7rem;
+	}
+
 	.logout-link {
 		display: inline-block;
 		margin-top: 1.5rem;

src/routes/auth/callback/+server.ts

@@ -121,6 +121,9 @@ export const GET: RequestHandler = async ({ url, cookies }) => {
 			target: users.hcaId,
 			set: {
 				...userRow,
+				// Users can set their own nickname in account settings — never let the
+				// HCA-synced value clobber it on a later login.
+				nickname: sql`coalesce(nullif(${users.nickname}, ''), ${userRow.nickname})`,
 				streetAddress: sql`coalesce(nullif(${users.streetAddress}, ''), ${addressInsert.streetAddress})`,
 				addressLine2: sql`coalesce(nullif(${users.addressLine2}, ''), ${addressInsert.addressLine2})`,
 				locality: sql`coalesce(nullif(${users.locality}, ''), ${addressInsert.locality})`,