feat: accept short versions of traditional pronouns

frontend/src/lib/api/entities.ts

@@ -174,3 +174,12 @@ export const defaultAvatars = [
   `${PUBLIC_BASE_URL}/default/512.webp`,
   `${PUBLIC_BASE_URL}/default/512.jpg`,
 ];
+
+export interface PronounsJson {
+  pages: Pronouns;
+  autocomplete: Pronouns;
+}
+
+interface Pronouns {
+  [key: string]: { pronouns: string[]; display?: string };
+}

frontend/src/lib/pronouns.json

@@ -1,12 +1,22 @@
 {
-  "pronouns": {
+  "pages": {
     "they": { "pronouns": ["they", "them", "their", "theirs", "themself"] },
-    "they/them": { "pronouns": ["they", "them", "their", "theirs", "themself"] },
     "he": { "pronouns": ["he", "him", "his", "his", "himself"] },
-    "he/him": { "pronouns": ["he", "him", "his", "his", "himself"] },
     "she": { "pronouns": ["she", "her", "her", "hers", "herself"] },
+    "it": { "pronouns": ["it", "it", "its", "its", "itself"], "display": "it/its" }
+  },
+  "autocomplete": {
+    "they/them": { "pronouns": ["they", "them", "their", "theirs", "themself"] },
+    "they/them (singular)": {
+      "pronouns": ["they", "them", "their", "theirs", "themself"],
+      "display": "they/them (singular)"
+    },
+    "they/them (plural)": {
+      "pronouns": ["they", "them", "their", "theirs", "themselves"],
+      "display": "they/them (plural)"
+    },
+    "he/him": { "pronouns": ["he", "him", "his", "his", "himself"] },
     "she/her": { "pronouns": ["she", "her", "her", "hers", "herself"] },
-    "it": { "pronouns": ["it", "it", "its", "its", "itself"], "display": "it/its" },
     "it/its": { "pronouns": ["it", "it", "its", "its", "itself"], "display": "it/its" }
   }
 }

frontend/src/routes/edit/profile/+page.svelte

@@ -11,7 +11,7 @@
   } from "$lib/api/entities";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
-  import { Button, ButtonGroup, FormGroup, Icon, Input } from "sveltestrap";
+  import { Alert, Button, ButtonGroup, FormGroup, Icon, Input, Popover } from "sveltestrap";
   import { encode } from "base64-arraybuffer";
   import { apiFetchClient } from "$lib/api/fetch";
   import IconButton from "$lib/components/IconButton.svelte";
@@ -40,7 +40,6 @@
 
   let newName = "";
   let newPronouns = "";
-  let newPronounsDisplay = "";
   let newLink = "";
 
   let modified = false;
@@ -155,12 +154,23 @@
   };
 
   const addPronouns = () => {
+    if (newPronouns in data.pronouns) {
+      const fullSet = data.pronouns[newPronouns];
       pronouns = [
         ...pronouns,
-      { pronouns: newPronouns, display_text: newPronounsDisplay || null, status: WordStatus.Okay },
+        {
+          pronouns: fullSet.pronouns.join("/"),
+          display_text: fullSet.display || null,
+          status: WordStatus.Okay,
+        },
       ];
+    } else {
+      pronouns = [
+        ...pronouns,
+        { pronouns: newPronouns, display_text: null, status: WordStatus.Okay },
+      ];
+    }
     newPronouns = "";
-    newPronounsDisplay = "";
   };
 
   const addLink = () => {
@@ -353,22 +363,22 @@
         <input
           type="text"
           class="form-control"
-          placeholder="Full set (e.g. it/it/its/its/itself)"
+          placeholder="New pronouns"
           bind:value={newPronouns}
           required
         />
-        <input
-          type="text"
-          class="form-control"
-          placeholder="Optional display text (e.g. it/its)"
-          bind:value={newPronounsDisplay}
-        />
         <IconButton
           color="success"
           icon="plus"
           tooltip="Add pronouns"
+          disabled={newPronouns === ""}
           click={() => addPronouns()}
         />
+        <Button id="pronouns-help" color="secondary"><Icon name="question" /></Button>
+        <Popover target="pronouns-help" placement="bottom">
+          For common pronouns, the short form (e.g. "she/her" or "he/him") is enough; for less
+          common pronouns, you will have to use all five forms (e.g. "ce/cir/cir/cirs/cirself").
+        </Popover>
       </div>
     </div>
   </div>

frontend/src/routes/edit/profile/+page.ts

@@ -1,7 +1,10 @@
-import type { APIError, MeUser } from "$lib/api/entities";
+import type { APIError, MeUser, PronounsJson } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
 import { error } from "@sveltejs/kit";
 
+import pronounsRaw from "$lib/pronouns.json";
+const pronouns = pronounsRaw as PronounsJson;
+
 export const ssr = false;
 
 export const load = async () => {
@@ -10,6 +13,7 @@ export const load = async () => {
 
     return {
       user,
+      pronouns: pronouns.autocomplete,
     };
   } catch (e) {
     throw error((e as APIError).code, (e as APIError).message);

frontend/src/routes/pronouns/[...pronouns]/+page.ts

@@ -1,9 +1,9 @@
 import { error } from "@sveltejs/kit";
 import type { PageLoad } from "./$types";
+import type { PronounsJson } from "$lib/api/entities";
 
-interface Pronouns {
-  [key: string]: { pronouns: string[]; display?: string };
-}
+import pronounsRaw from "$lib/pronouns.json";
+const pronouns = pronounsRaw as PronounsJson;
 
 export const load = (async ({ params }) => {
   const [param, displayText] = params.pronouns.split(",");
@@ -24,10 +24,18 @@ export const load = (async ({ params }) => {
     };
   }
 
-  const pronouns: Pronouns = (await import("$lib/pronouns.json")).pronouns;
-
-  if (params.pronouns in pronouns) {
-    const entry = pronouns[params.pronouns];
+  if (params.pronouns in pronouns.pages) {
+    const entry = pronouns.pages[params.pronouns];
+    return {
+      displayText: entry.display || "",
+      subjective: entry.pronouns[0],
+      objective: entry.pronouns[1],
+      possessiveDeterminer: entry.pronouns[2],
+      possessivePronoun: entry.pronouns[3],
+      reflexive: entry.pronouns[4],
+    };
+  } else if (params.pronouns in pronouns.autocomplete) {
+    const entry = pronouns.autocomplete[params.pronouns];
     return {
       displayText: entry.display || "",
       subjective: entry.pronouns[0],