add new sveltekit frontend

frontend/src/lib/api/entities.ts

@@ -0,0 +1,99 @@
+export interface User {
+  id: string;
+  name: string;
+  display_name: string | null;
+  bio: string | null;
+  avatar_urls: string[] | null;
+  links: string[] | null;
+
+  names: FieldEntry[];
+  pronouns: Pronoun[];
+  members: PartialMember[];
+  fields: Field[];
+}
+
+export interface MeUser extends User {
+  discord: string | null;
+  discord_username: string | null;
+}
+
+export interface Field {
+  name: string;
+  entries: FieldEntry[];
+}
+
+export interface FieldEntry {
+  value: string;
+  status: WordStatus;
+}
+
+export interface Pronoun {
+  pronouns: string;
+  display_text: string | null;
+  status: WordStatus;
+}
+
+export enum WordStatus {
+  Unknown = 0,
+  Favourite = 1,
+  Okay = 2,
+  Jokingly = 3,
+  FriendsOnly = 4,
+  Avoid = 5,
+}
+
+export interface PartialMember {
+  id: string;
+  name: string;
+  display_name: string | null;
+  avatar_urls: string[] | null;
+}
+
+export interface Member extends PartialMember {
+  bio: string | null;
+  links: string | null;
+  names: FieldEntry[];
+  pronouns: Pronoun[];
+  fields: Field[];
+  user: MemberPartialUser;
+}
+
+export interface MemberPartialUser {
+  id: string;
+  name: string;
+  display_name: string | null;
+  avatar_urls: string[] | null;
+}
+
+export interface APIError {
+  code: ErrorCode;
+  message?: string;
+  details?: string;
+}
+
+export enum ErrorCode {
+  BadRequest = 400,
+  Forbidden = 403,
+  NotFound = 404,
+  MethodNotAllowed = 405,
+  TooManyRequests = 429,
+  InternalServerError = 500,
+
+  InvalidState = 1001,
+  InvalidOAuthCode = 1002,
+  InvalidToken = 1003,
+  InviteRequired = 1004,
+  InvalidTicket = 1005,
+  InvalidUsername = 1006,
+  UsernameTaken = 1007,
+  InvitesDisabled = 1008,
+  InviteLimitReached = 1009,
+  InviteAlreadyUsed = 1010,
+
+  UserNotFound = 2001,
+
+  MemberNotFound = 3001,
+  MemberLimitReached = 3002,
+
+  RequestTooBig = 4001,
+}

frontend/src/lib/api/fetch.ts

@@ -0,0 +1,24 @@
+import type { APIError } from "./entities";
+import { PUBLIC_BASE_URL } from "$env/static/public";
+
+export async function apiFetch<T>(
+  path: string,
+  { method, body, token }: { method?: string; body?: any; token?: string },
+) {
+
+  const resp = await fetch(`${PUBLIC_BASE_URL}/api/v1${path}`, {
+    method: method || "GET",
+    headers: {
+      ...(token ? { Authorization: token } : {}),
+      "Content-Type": "application/json",
+    },
+    body: body ? JSON.stringify(body) : null,
+  });
+
+  const data = await resp.json();
+  if (resp.status < 200 || resp.status >= 300) throw data as APIError;
+  return data as T;
+}
+
+export const apiFetchClient = async <T>(path: string, method: string = "GET", body: any = null) =>
+  apiFetch<T>(path, { method, body, token: localStorage.getItem("pronouns-token") || undefined });

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>

frontend/src/lib/store.ts

@@ -0,0 +1,14 @@
+import { writable } from "svelte/store";
+import { browser } from "$app/environment";
+
+import type { MeUser } from "./api/entities";
+
+export const userStore = writable<MeUser | null>(null);
+export const tokenStore = writable<string | null>(null);
+
+let defaultThemeValue = "dark";
+const initialThemeValue = browser
+  ? window.localStorage.getItem("pronouns-theme") ?? defaultThemeValue
+  : defaultThemeValue;
+
+export const themeStore = writable<string>(initialThemeValue);