From e0ba5ea0dc0ef5fab11ae936d0effd96dd90765b Mon Sep 17 00:00:00 2001
From: sam <sam@sleepycat.moe>
Date: Tue, 26 Dec 2023 04:19:58 +0100
Subject: [PATCH] feat: add preference cheat sheet to bottom of user/member
 pages

---
 frontend/src/routes/@[username]/+page.svelte  | 14 ++++-
 .../@[username]/PreferencesCheatsheet.svelte  | 59 +++++++++++++++++++
 .../@[username]/[memberName]/+page.svelte     |  7 +++
 3 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/routes/@[username]/PreferencesCheatsheet.svelte

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 642e715..e7be793 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -46,6 +46,7 @@
   import ProfileFlag from "./ProfileFlag.svelte";
   import IconButton from "$lib/components/IconButton.svelte";
   import Badges from "./badges/Badges.svelte";
+  import PreferencesCheatsheet from "./PreferencesCheatsheet.svelte";
 
   export let data: PageData;
 
@@ -190,14 +191,15 @@
         {/if}
         {#if data.utc_offset}
           <Tooltip target="user-clock" placement="top">Current time</Tooltip>
-          <Icon id="user-clock" name="clock" aria-label="This user's current time" /> {currentTime} <span class="text-body-secondary">(UTC{timezone})</span>
+          <Icon id="user-clock" name="clock" aria-label="This user's current time" />
+          {currentTime} <span class="text-body-secondary">(UTC{timezone})</span>
         {/if}
         {#if profileEmpty && $userStore?.id === data.id}
           <hr />
           <p>
             <em>
-              Your profile is empty! You can customize it by going to the <a href="/@{data.name}/edit"
-                >edit profile</a
+              Your profile is empty! You can customize it by going to the <a
+                href="/@{data.name}/edit">edit profile</a
               > page.</em
             > <span class="text-muted">(only you can see this)</span>
           </p>
@@ -258,6 +260,12 @@
         </div>
       {/each}
     </div>
+    <PreferencesCheatsheet
+      preferences={data.custom_preferences}
+      names={data.names}
+      pronouns={data.pronouns}
+      fields={data.fields}
+    />
     <div class="row">
       <div class="col-md-6">
         <InputGroup>
diff --git a/frontend/src/routes/@[username]/PreferencesCheatsheet.svelte b/frontend/src/routes/@[username]/PreferencesCheatsheet.svelte
new file mode 100644
index 0000000..ac4200a
--- /dev/null
+++ b/frontend/src/routes/@[username]/PreferencesCheatsheet.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { CustomPreferences, Field, FieldEntry, Pronoun } from "$lib/api/entities";
+  import defaultPreferences from "$lib/api/default_preferences";
+  import StatusIcon from "$lib/components/StatusIcon.svelte";
+
+  export let preferences: CustomPreferences;
+  export let names: FieldEntry[];
+  export let pronouns: Pronoun[];
+  export let fields: Field[];
+
+  let mergedPreferences: CustomPreferences;
+  $: mergedPreferences = Object.assign({}, defaultPreferences, preferences);
+
+  // Filter default preferences to the ones the user/member has used
+  // This is done separately from custom preferences to make the shown list cleaner
+  let usedDefaultPreferences: Array<{ id: string; preference: CustomPreference }>;
+  $: usedDefaultPreferences = Object.keys(defaultPreferences)
+    .filter(
+      (pref) =>
+        names.some((entry) => entry.status === pref) ||
+        pronouns.some((entry) => entry.status === pref) ||
+        fields.some((field) => field.entries.some((entry) => entry.status === pref)),
+    )
+    .map((key) => ({
+      id: key,
+      preference: defaultPreferences[key],
+    }));
+  // Do the same for custom preferences
+  let usedCustomPreferences: Array<{ id: string; preference: CustomPreference }>;
+  $: usedCustomPreferences = Object.keys(preferences)
+    .filter(
+      (pref) =>
+        names.some((entry) => entry.status === pref) ||
+        pronouns.some((entry) => entry.status === pref) ||
+        fields.some((field) => field.entries.some((entry) => entry.status === pref)),
+    )
+    .map((pref) => ({ id: pref, preference: mergedPreferences[pref] }));
+</script>
+
+<div class="text-center">
+  <ul class="list-inline text-body-secondary">
+    {#each usedDefaultPreferences as pref (pref.id)}
+      <li class="list-inline-item mx-2">
+        <StatusIcon {preferences} status={pref.id} />
+        {pref.preference.tooltip}
+      </li>
+    {/each}
+  </ul>
+  {#if usedCustomPreferences}
+    <ul class="list-inline text-body-secondary">
+      {#each usedCustomPreferences as pref (pref.id)}
+        <li class="list-inline-item mx-2">
+          <StatusIcon {preferences} status={pref.id} />
+          {pref.preference.tooltip}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 206cbfd..1ecc942 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -22,6 +22,7 @@
   import { addToast } from "$lib/toast";
   import ProfileFlag from "../ProfileFlag.svelte";
   import IconButton from "$lib/components/IconButton.svelte";
+  import PreferencesCheatsheet from "../PreferencesCheatsheet.svelte";
 
   export let data: PageData;
 
@@ -154,6 +155,12 @@
         </div>
       {/each}
     </div>
+    <PreferencesCheatsheet
+      preferences={data.user.custom_preferences}
+      names={data.names}
+      pronouns={data.pronouns}
+      fields={data.fields}
+    />
     <div class="row">
       <div class="col-md-6">
         <InputGroup>