From 8a2ffd7d69dc630acf5db26109095ea26bafb92e Mon Sep 17 00:00:00 2001
From: sam <sam@vulpine.solutions>
Date: Wed, 18 Dec 2024 21:38:39 +0100
Subject: [PATCH] feat(frontend): preference cheatsheet

---
 .../profile/PreferenceCheatsheet.svelte       | 29 +++++++++++++++++++
 .../src/routes/@[username]/+page.svelte       |  3 +-
 .../@[username]/[memberName]/+page.svelte     |  3 +-
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 Foxnouns.Frontend/src/lib/components/profile/PreferenceCheatsheet.svelte

diff --git a/Foxnouns.Frontend/src/lib/components/profile/PreferenceCheatsheet.svelte b/Foxnouns.Frontend/src/lib/components/profile/PreferenceCheatsheet.svelte
new file mode 100644
index 0000000..5e03a4e
--- /dev/null
+++ b/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>
diff --git a/Foxnouns.Frontend/src/routes/@[username]/+page.svelte b/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
index 0562274..e431e9b 100644
--- a/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
+++ b/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}
diff --git a/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.svelte b/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.svelte
index e0deff6..209c388 100644
--- a/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/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}