feat(dashboard): add system pronouns + editing (I forgot to)

dashboard/src/api/types.ts

@@ -19,6 +19,7 @@ export interface System {
     created?: string;
     privacy?: SystemPrivacy;
     color?: string;
+    pronouns?: string;
 }
 
 export interface Config {

dashboard/src/lib/system/Body.svelte

@@ -14,6 +14,8 @@
 
     let htmlDescription: string;
     let htmlName: string;
+    let htmlPronouns: string;
+
     if (user.description) { 
         htmlDescription = toHTML(parseTimestamps(user.description), {embed: true});
     } else {
@@ -24,6 +26,10 @@
         htmlName = toHTML(user.name);
     }
 
+    if (user.pronouns) {
+        htmlPronouns = toHTML(user.pronouns);
+    }
+
     let created = moment(user.created).format("MMM D, YYYY");
 
     let bannerOpen = false;
@@ -33,11 +39,13 @@
     let descriptionElement: any;
     let nameElement: any;
     let tagElement: any;
+    let pronounElement: any;
 
     $: if (settings && settings.appearance.twemoji) {
         if (descriptionElement) twemoji.parse(descriptionElement);
         if (nameElement) twemoji.parse(nameElement);
         if (tagElement) twemoji.parse(tagElement);
+        if (pronounElement) twemoji.parse(pronounElement);
     }
 
 </script>
@@ -58,6 +66,11 @@
         <span bind:this={tagElement}><b>Tag:</b> {user.tag}</span>
     </Col>
     {/if}
+    {#if user.pronouns}
+    <Col xs={12} lg={4} class="mb-2">
+        <span bind:this={pronounElement}><b>Pronouns:</b> {@html htmlPronouns}</span>
+    </Col>
+    {/if}
     {#if user.created && !isPublic}
     <Col xs={12} lg={4} class="mb-2">
         <b>Created:</b> {created}

dashboard/src/lib/system/Edit.svelte

@@ -72,6 +72,10 @@
         <Label>Tag:</Label>
         <Input bind:value={input.tag} maxlength={100} type="text" placeholder={user.tag} aria-label="system tag" />
     </Col>
+    <Col xs={12} lg={4} class="mb-2">
+        <Label>Pronouns:</Label>
+        <Input bind:value={input.pronouns} maxlength={100} style="resize: none; height: 1em" type="textarea" placeholder={user.pronouns} aria-label="system pronouns" />
+    </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Color:</Label>
         <Input bind:value={input.color} type="text" placeholder={user.color} aria-label="system color"/>