From bf24d9575aad016731649521728ce962ed17e384 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Mon, 10 Aug 2026 18:24:51 +0200
Subject: [PATCH] feat: add public avatar thumbnail contract

---
 .../shared/user-avatar-thumbnail.test.tsx     | 24 +++++++++++++++++
 .../shared/user-avatar-thumbnail.tsx          | 27 +++++++++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/components/shared/user-avatar-thumbnail.test.tsx
 create mode 100644 src/components/shared/user-avatar-thumbnail.tsx

diff --git a/src/components/shared/user-avatar-thumbnail.test.tsx b/src/components/shared/user-avatar-thumbnail.test.tsx
new file mode 100644
index 0000000000..ce4774c0ed
--- /dev/null
+++ b/src/components/shared/user-avatar-thumbnail.test.tsx
@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { UserAvatarThumbnail } from "./user-avatar-thumbnail";
+
+describe("UserAvatarThumbnail", () => {
+	it("renders the supplied figure as a fixed head-only thumbnail", () => {
+		const html = renderToStaticMarkup(
+			<UserAvatarThumbnail
+				figure="hd-180-1.hr-828-45"
+				alt="Life avatar"
+				options={{ direction: 3 }}
+			/>,
+		);
+
+		expect(html).toContain("figure=hd-180-1.hr-828-45");
+		expect(html).toContain("headonly=1");
+		expect(html).toContain("size=l");
+		expect(html).toContain("direction=3");
+		expect(html).toContain('width="40"');
+		expect(html).toContain('height="40"');
+		expect(html).toContain('alt="Life avatar"');
+		expect(html).toContain("shrink-0");
+	});
+});
diff --git a/src/components/shared/user-avatar-thumbnail.tsx b/src/components/shared/user-avatar-thumbnail.tsx
new file mode 100644
index 0000000000..0f7923db48
--- /dev/null
+++ b/src/components/shared/user-avatar-thumbnail.tsx
@@ -0,0 +1,27 @@
+import { AvatarImage } from "@/components/shared/avatar-image";
+import type { AvatarOptions } from "@/lib/imager";
+
+export interface UserAvatarThumbnailProps {
+	figure: string;
+	alt: string;
+	options?: Omit<AvatarOptions, "headOnly" | "size">;
+	className?: string;
+}
+
+export function UserAvatarThumbnail({
+	figure,
+	alt,
+	options,
+	className = "",
+}: UserAvatarThumbnailProps) {
+	return (
+		<AvatarImage
+			figure={figure}
+			options={{ ...options, headOnly: true, size: "l" }}
+			width={40}
+			height={40}
+			alt={alt}
+			className={`shrink-0 ${className}`.trim()}
+		/>
+	);
+}