feat(frontend): edit names/pronouns

Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte

@@ -8,14 +8,20 @@
 	let { data, children }: Props = $props();
 
 	const isActive = (path: string) => $page.url.pathname === path;
+
+	let name = $derived(
+		data.member.display_name === data.member.name
+			? data.member.name
+			: `${data.member.display_name} (${data.member.name})`,
+	);
 </script>
 
 <svelte:head>
-	<title>{$t("edit-profile.member-header", { name: data.member.name })} • pronouns.cc</title>
+	<title>{$t("edit-profile.member-header", { name })} • pronouns.cc</title>
 </svelte:head>
 
 <div class="container">
-	<h3>{$t("edit-profile.member-header", { name: data.member.name })}</h3>
+	<h3>{$t("edit-profile.member-header", { name })}</h3>
 	<div class="row">
 		<div class="col-md-3 mt-1 mb-3">
 			<div class="list-group">
@@ -51,7 +57,7 @@
 					href="/@{data.user.username}/{data.member.name}"
 					class="list-group-item list-group-item-action text-danger"
 				>
-					Back to member
+					{$t("edit-profile.back-to-profile-tab")}
 				</a>
 				<a href="/settings/members" class="list-group-item list-group-item-action text-danger">
 					{$t("edit-profile.back-to-settings-tab")}

Foxnouns.Frontend/src/routes/settings/members/[id]/+page.server.ts

@@ -64,7 +64,8 @@ export const actions = {
 	},
 	bio: async ({ params, request, fetch, cookies }) => {
 		const body = await request.formData();
-		const bio = body.get("bio") as string | null;
+		let bio = body.get("bio") as string | null;
+		if (!bio || bio === "") bio = null;
 
 		try {
 			await fastRequest("PATCH", `/users/@me/members/${params.id}`, {

Foxnouns.Frontend/src/routes/settings/members/[id]/names-pronouns/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { apiRequest } from "$api";
+	import ApiError, { type RawApiError } from "$api/error";
+	import type { Member } from "$api/models";
+	import { mergePreferences } from "$api/models/user";
+	import FieldEditor from "$components/editor/FieldEditor.svelte";
+	import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
+	import PronounsEditor from "$components/editor/PronounsEditor.svelte";
+	import { t } from "$lib/i18n";
+	import log from "$lib/log";
+	import type { PageData } from "./$types";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+
+	let names = $state(data.member.names);
+	let pronouns = $state(data.member.pronouns);
+
+	let ok: { ok: boolean; error: RawApiError | null } | null = $state(null);
+
+	let allPreferences = $derived(mergePreferences(data.user.custom_preferences));
+
+	const update = async () => {
+		try {
+			const resp = await apiRequest<Member>("PATCH", `/users/@me/members/${data.member.id}`, {
+				body: { names, pronouns },
+				token: data.token,
+			});
+			names = resp.names;
+			pronouns = resp.pronouns;
+			ok = { ok: true, error: null };
+		} catch (e) {
+			ok = { ok: false, error: null };
+			log.error("Could not update names/pronouns:", e);
+			if (e instanceof ApiError) ok.error = e.obj;
+		}
+	};
+</script>
+
+<FormStatusMarker form={ok} />
+
+<div>
+	<FieldEditor name={$t("profile.names-header")} bind:entries={names} {allPreferences} />
+</div>
+
+<div>
+	<PronounsEditor bind:entries={pronouns} {allPreferences} />
+</div>
+
+<div>
+	<button class="btn btn-primary" onclick={() => update()}>{$t("save-changes")}</button>
+</div>