feat(frontend): user profile flag editor

Foxnouns.Frontend/src/routes/settings/flags/+page.svelte

@@ -78,10 +78,7 @@
 <NoscriptWarning />
 
 <form method="POST" action="?/upload" enctype="multipart/form-data">
-	<FormStatusMarker
-		{form}
-		successMessage="Successfully uploaded your flag! It may take a few seconds before it's saved."
-	/>
+	<FormStatusMarker {form} successMessage={$t("settings.flag-upload-success")} />
 	<h4>{$t("settings.flag-upload-title")}</h4>
 	<input
 		type="file"
@@ -90,8 +87,19 @@
 		class="mb-2 form-control"
 		required
 	/>
-	<input class="mb-2 form-control" name="name" placeholder="Name" autocomplete="off" required />
-	<input class="mb-2 form-control" name="desc" placeholder="Description" autocomplete="off" />
+	<input
+		class="mb-2 form-control"
+		name="name"
+		placeholder={$t("settings.flag-name-placeholder")}
+		autocomplete="off"
+		required
+	/>
+	<input
+		class="mb-2 form-control"
+		name="desc"
+		placeholder={$t("settings.flag-description-placeholder")}
+		autocomplete="off"
+	/>
 	<button type="submit" class="btn btn-primary">{$t("settings.flag-upload-button")}</button>
 </form>
 

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

@@ -6,6 +6,7 @@
 	import ApiError from "$api/error";
 	import log from "$lib/log";
 	import { Icon, InputGroup } from "@sveltestrap/sveltestrap";
+	import InfoCircleFill from "svelte-bootstrap-icons/lib/InfoCircleFill.svelte";
 	import { t } from "$lib/i18n";
 	import AvatarEditor from "$components/editor/AvatarEditor.svelte";
 	import ErrorAlert from "$components/ErrorAlert.svelte";
@@ -133,7 +134,7 @@
 				</label>
 			</div>
 			<p class="text-muted mt-1">
-				<Icon name="info-circle-fill" aria-hidden />
+				<InfoCircleFill aria-hidden />
 				{$t("edit-profile.unlisted-note")}
 				<code>
 					{PUBLIC_BASE_URL.substring("https://".length)}/@{data.member.user.username}/{data.member

Foxnouns.Frontend/src/routes/settings/profile/flags-links/+page.server.ts

@@ -0,0 +1,7 @@
+import { apiRequest } from "$api";
+import type { PrideFlag } from "$api/models/user";
+
+export const load = async ({ fetch, cookies }) => {
+	const flags = await apiRequest<PrideFlag[]>("GET", "/users/@me/flags", { fetch, cookies });
+	return { flags };
+};

Foxnouns.Frontend/src/routes/settings/profile/flags-links/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { fastRequest } from "$api";
+	import type { RawApiError } from "$api/error";
+	import ApiError from "$api/error";
+	import ProfileFlagsEditor from "$components/editor/ProfileFlagsEditor.svelte";
+	import log from "$lib/log";
+	import type { PageData } from "./$types";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+
+	let form: { ok: boolean; error: RawApiError | null } | null = $state(null);
+
+	const save = async (flags: string[]) => {
+		try {
+			await fastRequest("PATCH", "/users/@me", {
+				body: { flags },
+				token: data.token,
+			});
+			form = { ok: true, error: null };
+		} catch (e) {
+			log.error("Could not update profile flags:", e);
+			if (e instanceof ApiError) form = { ok: false, error: e.obj };
+		}
+	};
+</script>
+
+<ProfileFlagsEditor profileFlags={data.user.flags} allFlags={data.flags} {save} {form} />