feat: hashes in avatar file names (closes #19)

frontend/src/lib/api/entities.ts

@@ -1,9 +1,11 @@
+import { PUBLIC_BASE_URL } from "$env/static/public";
+
 export interface User {
   id: string;
   name: string;
   display_name: string | null;
   bio: string | null;
-  avatar_urls: string[];
+  avatar: string | null;
   links: string[];
 
   names: FieldEntry[];
@@ -47,7 +49,7 @@ export interface PartialMember {
   name: string;
   display_name: string | null;
   bio: string | null;
-  avatar_urls: string[];
+  avatar: string | null;
   links: string[];
   names: FieldEntry[];
   pronouns: Pronoun[];
@@ -63,7 +65,7 @@ export interface MemberPartialUser {
   id: string;
   name: string;
   display_name: string | null;
-  avatar_urls: string[];
+  avatar: string | null;
 }
 
 export interface APIError {
@@ -98,3 +100,21 @@ export enum ErrorCode {
 
   RequestTooBig = 4001,
 }
+
+export const userAvatars = (user: User | MeUser | MemberPartialUser) => {
+  if (!user.avatar) return [];
+
+  return [
+    `${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.webp`,
+    `${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.webp`,
+  ];
+};
+
+export const memberAvatars = (member: Member | PartialMember) => {
+  if (!member.avatar) return [];
+
+  return [
+    `${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.webp`,
+    `${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.webp`,
+  ];
+};

frontend/src/lib/components/PartialMemberCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { WordStatus, type PartialMember, type User } from "$lib/api/entities";
+  import { memberAvatars, WordStatus, type PartialMember, type User } from "$lib/api/entities";
   import FallbackImage from "./FallbackImage.svelte";
 
   export let user: User;
@@ -31,7 +31,7 @@
 </script>
 
 <div>
-  <FallbackImage urls={member.avatar_urls} width={200} alt="Avatar for {member.name}" />
+  <FallbackImage urls={memberAvatars(member)} 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}

frontend/src/routes/@[username]/+page.svelte

@@ -11,6 +11,7 @@
   import PartialMemberCard from "$lib/components/PartialMemberCard.svelte";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { userStore } from "$lib/store";
+  import { userAvatars } from "$lib/api/entities";
 
   export let data: PageData;
 
@@ -32,7 +33,7 @@
   <div class="grid row-gap-3">
     <div class="row">
       <div class="col-md text-center">
-        <FallbackImage width={200} urls={data.avatar_urls} alt="Avatar for @{data.name}" />
+        <FallbackImage width={200} urls={userAvatars(data)} alt="Avatar for @{data.name}" />
       </div>
       <div class="col-md">
         {#if data.display_name}

frontend/src/routes/@[username]/[memberName]/+page.svelte

@@ -9,6 +9,7 @@
   import PronounLink from "$lib/components/PronounLink.svelte";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { Button, Icon } from "sveltestrap";
+  import { memberAvatars } from "$lib/api/entities";
 
   export let data: PageData;
 
@@ -29,7 +30,7 @@
   <div class="grid">
     <div class="row">
       <div class="col-md text-center">
-        <FallbackImage width={200} urls={data.avatar_urls} alt="Avatar for @{data.name}" />
+        <FallbackImage width={200} urls={memberAvatars(data)} alt="Avatar for @{data.name}" />
       </div>
       <div class="col-md">
         <h2>{data.display_name ?? data.name}</h2>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import {
+    userAvatars,
     WordStatus,
     type APIError,
     type Field,
@@ -195,7 +196,7 @@
             {#if avatar}
               <img width={200} src={avatar} alt="New avatar" class="rounded-circle img-fluid" />
             {:else}
-              <FallbackImage alt="Current avatar" urls={$userStore.avatar_urls} width={200} />
+              <FallbackImage alt="Current avatar" urls={userAvatars($userStore)} width={200} />
             {/if}
           </div>
           <div class="col-md">