feat(frontend): working Discord login + signup

frontend/src/lib/components/FallbackImage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  export let urls: string[] | null;
+  export let urls: string[];
   export let alt: string;
+  export let width = 300;
 
   const contentTypeFor = (url: string) => {
     if (url.endsWith(".webp")) {
@@ -15,14 +16,14 @@
   };
 </script>
 
-{#if urls}
+{#if urls.length > 0}
   <picture class="rounded-circle img-fluid">
     {#each urls as url}
-      <source width=300 srcSet={url} type={contentTypeFor(url)} />
+      <source {width} srcSet={url} type={contentTypeFor(url)} />
     {/each}
-    <img width=300 src={urls[0]} {alt} class="rounded-circle img-fluid" />
+    <img {width} src={urls[0]} {alt} class="rounded-circle img-fluid" />
   </picture>
 {:else}
   <!-- TODO: actual placeholder that isn't a cat -->
-  <img width=300 class="rounded-circle img-fluid" src="https://placekitten.com/512/512" {alt} />
+  <img {width} class="rounded-circle img-fluid" src="https://placekitten.com/512/512" {alt} />
 {/if}

frontend/src/lib/components/FieldCard.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div>
-  <h5>{field.name}</h5>
+  <h4>{field.name}</h4>
   <ul class="list-unstyled">
     {#each field.entries as entry}
       <li><StatusIcon status={entry.status} /> {entry.value}</li>

frontend/src/lib/components/PartialMemberCard.svelte

@@ -1,15 +1,44 @@
 <script lang="ts">
-  import type { PartialMember, User } from "$lib/api/entities";
+  import { WordStatus, type PartialMember, type User } from "$lib/api/entities";
   import FallbackImage from "./FallbackImage.svelte";
 
   export let user: User;
   export let member: PartialMember;
+
+  let pronouns: string | undefined;
+
+  const getPronouns = (member: PartialMember) => {
+    const filteredPronouns = member.pronouns.filter(
+      (pronouns) => pronouns.status === WordStatus.Favourite,
+    );
+    if (filteredPronouns.length === 0) {
+      return undefined;
+    }
+    return filteredPronouns
+      .map((pronouns) => {
+        if (pronouns.display_text) {
+          return pronouns.display_text;
+        } else {
+          const split = pronouns.pronouns.split("/");
+          if (split.length < 2) return split.join("/");
+          else return split.slice(0, 2).join("/");
+        }
+      })
+      .join(", ");
+  };
+
+  $: pronouns = getPronouns(member);
 </script>
 
 <div>
-  <FallbackImage
-    urls={member.avatar_urls}
-    alt="Avatar for {member.name}"
-  />
-  <a class="text-reset" href="/@{user.name}/{member.name}"><h5 class="m-2">{member.display_name ?? member.name}</h5></a>
+  <FallbackImage urls={member.avatar_urls} width={200} alt="Avatar for {member.name}" />
+  <p class="m-2">
+    <a class="text-reset fs-5" href="/@{user.name}/{member.name}">
+      {member.display_name ?? member.name}
+    </a>
+    {#if pronouns}
+      <br />
+      {pronouns}
+    {/if}
+  </p>
 </div>