add new sveltekit frontend

frontend/src/lib/components/FallbackImage.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  export let urls: string[] | null;
+  export let alt: string;
+
+  const contentTypeFor = (url: string) => {
+    if (url.endsWith(".webp")) {
+      return "image/webp";
+    } else if (url.endsWith(".jpg") || url.endsWith(".jpeg")) {
+      return "image/jpeg";
+    } else if (url.endsWith(".png")) {
+      return "image/png";
+    } else {
+      return "application/octet-stream";
+    }
+  };
+</script>
+
+{#if urls}
+  <picture class="rounded-circle img-fluid">
+    {#each urls as url}
+      <source width=300 srcSet={url} type={contentTypeFor(url)} />
+    {/each}
+    <img width=300 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} />
+{/if}

frontend/src/lib/components/FieldCard.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Card, CardHeader, CardTitle, ListGroup, ListGroupItem } from "sveltestrap";
+
+  import type { Field } from "$lib/api/entities";
+
+  import StatusIcon from "./StatusIcon.svelte";
+
+  export let field: Field;
+</script>
+
+<div>
+  <h5>{field.name}</h5>
+  <ul class="list-unstyled">
+    {#each field.entries as entry}
+      <li><StatusIcon status={entry.status} /> {entry.value}</li>
+    {/each}
+  </ul>
+</div>

frontend/src/lib/components/PartialMemberCard.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { PartialMember, User } from "$lib/api/entities";
+  import FallbackImage from "./FallbackImage.svelte";
+
+  export let user: User;
+  export let member: PartialMember;
+</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>
+</div>

frontend/src/lib/components/PronounLink.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Pronoun } from "$lib/api/entities";
+
+  export let pronouns: Pronoun;
+
+  let pronounText: string;
+  if (pronouns.display_text) {
+    pronounText = pronouns.display_text;
+  } else {
+    const split = pronouns.pronouns.split("/");
+    if (split.length < 2) pronounText = split.join("/");
+    else pronounText = split.slice(0, 2).join("/")
+  }
+</script>
+
+<a href="/pronouns/{pronouns.pronouns}">{pronounText}</a>

frontend/src/lib/components/StatusIcon.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Icon, Tooltip } from "sveltestrap";
+
+  import { WordStatus } from "$lib/api/entities";
+
+  export let status: WordStatus;
+
+  const iconFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "heart-fill";
+      case WordStatus.Okay:
+        return "hand-thumbs-up";
+      case WordStatus.Jokingly:
+        return "emoji-laughing";
+      case WordStatus.FriendsOnly:
+        return "people";
+      case WordStatus.Avoid:
+        return "hand-thumbs-down";
+      default:
+        return "hand-thumbs-up";
+    }
+  };
+
+  const textFor = (wordStatus: WordStatus) => {
+    switch (wordStatus) {
+      case WordStatus.Favourite:
+        return "Favourite";
+      case WordStatus.Okay:
+        return "Okay";
+      case WordStatus.Jokingly:
+        return "Jokingly";
+      case WordStatus.FriendsOnly:
+        return "Friends only";
+      case WordStatus.Avoid:
+        return "Avoid";
+      default:
+        return "Okay";
+    }
+  };
+
+  let statusIcon: string;
+  $: statusIcon = iconFor(status);
+
+  let statusText: string;
+  $: statusText = textFor(status);
+
+  let iconElement: HTMLElement;
+</script>
+
+<span bind:this={iconElement} tabindex={0}><Icon name={statusIcon} /></span>
+<Tooltip target={iconElement} placement="top">{statusText}</Tooltip>