feat(frontend): support multiple avatar urls

frontend/components/FallbackImage.tsx

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from "react";
+
+export interface Props extends HTMLAttributes<Props> {
+  urls: string[];
+  alt: string;
+}
+
+export default function FallbackImage({ urls, alt, className }: Props) {
+  const fallbackUrl = urls.pop()!;
+  urls.push(fallbackUrl);
+
+  return (
+    <picture className={className}>
+      {urls.length !== 0 &&
+        urls.map((url, key) => {
+          let contentType: string;
+          if (url.endsWith(".webp")) {
+            contentType = "image/webp";
+          } else if (url.endsWith(".jpg") || url.endsWith(".jpeg")) {
+            contentType = "image/jpeg";
+          } else if (url.endsWith(".png")) {
+            contentType = "image/png";
+          } else {
+            contentType = "application/octet-stream";
+          }
+          return <source key={key} srcSet={url} type={contentType} />;
+        })}
+      <img src={fallbackUrl} alt={alt} className={className} />
+    </picture>
+  );
+}

frontend/components/FieldCard.tsx

@@ -39,22 +39,22 @@ export default function FieldCard({
           <HeartFill className="inline" /> {linkPronoun(entry)}
         </p>
       ))}
-      {field.okay?.length !== 0 && (
+      {field.okay && field.okay.length !== 0 && (
         <p>
           <HandThumbsUp className="inline" /> {field.okay!.join(", ")}
         </p>
       )}
-      {field.jokingly?.length !== 0 && (
+      {field.jokingly && field.jokingly.length !== 0 && (
         <p>
           <EmojiLaughing className="inline" /> {field.jokingly!.join(", ")}
         </p>
       )}
-      {field.friends_only?.length !== 0 && (
+      {field.friends_only && field.friends_only.length !== 0 && (
         <p>
           <People className="inline" /> {field.friends_only!.join(", ")}
         </p>
       )}
-      {field.avoid?.length !== 0 && (
+      {field.avoid && field.avoid.length !== 0 && (
         <p className="text-slate-600 dark:text-slate-400">
           <HandThumbsDown className="inline" /> {field.avoid!.join(", ")}
         </p>