fix: render fallback for empty avatar sources

src/components/layout/avatar.test.tsx

@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+/* eslint-disable @next/next/no-img-element, jsx-a11y/alt-text */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
+import { Avatar } from "./avatar";
+
+vi.mock("next/image", () => ({
+  default: ({
+    unoptimized,
+    priority,
+    ...props
+  }: React.ImgHTMLAttributes<HTMLImageElement> & { unoptimized?: boolean; priority?: boolean }) => {
+    void unoptimized;
+    void priority;
+    return <img {...props} />;
+  },
+}));
+
+describe("Avatar", () => {
+  afterEach(cleanup);
+
+  test("renders an image for a non-empty source", () => {
+    render(<Avatar src="https://example.com/avatar.png" alt="Ada Lovelace" />);
+
+    expect(screen.getByRole("img", { name: "Ada Lovelace" })).toHaveAttribute(
+      "src",
+      "https://example.com/avatar.png",
+    );
+  });
+
+  test.each(["", "   ", null, undefined])(
+    "renders an initial fallback instead of an image for an invalid source",
+    (src) => {
+      render(<Avatar src={src} alt="Ada Lovelace" size={40} />);
+
+      expect(screen.getByRole("img", { name: "Ada Lovelace" })).toHaveTextContent("A");
+      expect(screen.queryByRole("img", { name: "Ada Lovelace" })?.tagName).toBe("SPAN");
+      expect(document.querySelector("img")).not.toBeInTheDocument();
+    },
+  );
+});

src/components/layout/avatar.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import { cn } from "@/utils/cn";
 
 type AvatarProps = {
-  src: string;
+  src?: string | null;
   alt: string;
   size?: number;
   unoptimized?: boolean;
@@ -22,9 +22,27 @@ export function Avatar({
   priority = false,
   className,
 }: AvatarProps) {
+  const hasImage = Boolean(src?.trim());
+
+  if (!hasImage) {
+    return (
+      <span
+        role="img"
+        aria-label={alt}
+        style={{ width: size, height: size }}
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground ring-1 ring-border",
+          className,
+        )}
+      >
+        {alt.trim().charAt(0).toUpperCase() || "?"}
+      </span>
+    );
+  }
+
   return (
     <Image
-      src={src}
+      src={src!}
       alt={alt}
       width={size}
       height={size}