feat(frontend): preference cheatsheet

Foxnouns.Frontend/src/lib/components/profile/PreferenceCheatsheet.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { type User, type Member, type CustomPreference } from "$api/models";
+	import StatusIcon from "$components/StatusIcon.svelte";
+
+	type Props = { profile: User | Member; allPreferences: Record<string, CustomPreference> };
+	let { profile, allPreferences }: Props = $props();
+
+	let preferences = $derived.by(() => {
+		let preferenceKeys = Object.keys(allPreferences).filter(
+			(pref) =>
+				profile.names.some((entry) => entry.status === pref) ||
+				profile.pronouns.some((entry) => entry.status === pref) ||
+				profile.fields.some((field) => field.entries.some((entry) => entry.status === pref)),
+		);
+
+		return preferenceKeys.map((pref) => allPreferences[pref]);
+	});
+</script>
+
+<div class="text-center text-body-secondary">
+	<ul class="list-inline">
+		{#each preferences as preference}
+			<li class="list-inline-item mx-2">
+				<StatusIcon {preference} />
+				{preference.tooltip}
+			</li>
+		{/each}
+	</ul>
+</div>

Foxnouns.Frontend/src/routes/@[username]/+page.svelte

@@ -9,6 +9,7 @@
 	import Paginator from "$components/Paginator.svelte";
 	import MemberCard from "$components/profile/user/MemberCard.svelte";
 	import ProfileButtons from "$components/profile/ProfileButtons.svelte";
+	import PreferenceCheatsheet from "$components/profile/PreferenceCheatsheet.svelte";
 
 	type Props = { data: PageData };
 	let { data }: Props = $props();
@@ -28,7 +29,7 @@
 
 	<ProfileHeader name="@{data.user.username}" profile={data.user} offset={data.user.utc_offset} />
 	<ProfileFields profile={data.user} {allPreferences} />
-
+	<PreferenceCheatsheet profile={data.user} {allPreferences} />
 	<ProfileButtons
 		meUser={data.meUser}
 		user={data.user.username}

Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.svelte

@@ -7,6 +7,7 @@
 	import { Icon } from "@sveltestrap/sveltestrap";
 	import { t } from "$lib/i18n";
 	import ProfileButtons from "$components/profile/ProfileButtons.svelte";
+	import PreferenceCheatsheet from "$components/profile/PreferenceCheatsheet.svelte";
 
 	type Props = { data: PageData };
 	let { data }: Props = $props();
@@ -38,7 +39,7 @@
 
 	<ProfileHeader name="{data.member.name} (@{data.member.user.username})" profile={data.member} />
 	<ProfileFields profile={data.member} {allPreferences} />
-
+	<PreferenceCheatsheet profile={data.member} {allPreferences} />
 	<ProfileButtons
 		meUser={data.meUser}
 		user={data.member.user.username}