Share one user avatar between the rail and the profile page

UserAvatar (src/components/general/user-avatar.tsx) replaces the
profile page's ProfileAvatar and the rail's initials chip, so the rail
shows the user's photo too.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/components/general/user-avatar.tsx

@@ -0,0 +1,62 @@
+import Img from "@moduletrace/twui/layout/Img";
+import Span from "@moduletrace/twui/layout/Span";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Round avatar sizes, each with the type scale for its initials.
+ */
+const UserAvatarSizeClasses = {
+    sm: "size-6 text-[11px]",
+    md: "size-8 text-xs",
+    lg: "size-16 text-lg",
+} as const;
+
+type Props = {
+    src?: string;
+    /**
+     * Tried when `src` fails to load, e.g. a full image behind a thumbnail.
+     */
+    img_err_src?: string;
+    initials: string;
+    alt?: string;
+    size?: keyof typeof UserAvatarSizeClasses;
+    className?: string;
+};
+
+/**
+ * A user's round photo, or their initials on sunken paper when there is none.
+ */
+export default function UserAvatar({
+    src,
+    img_err_src,
+    initials,
+    alt = "",
+    size = "md",
+    className,
+}: Props) {
+    const base_class = twMerge(
+        "shrink-0 rounded-full bg-sunken",
+        UserAvatarSizeClasses[size],
+        src
+            ? "object-cover"
+            : "flex items-center justify-center font-bold leading-none text-ink",
+        className,
+    );
+
+    if (src) {
+        return (
+            <Img
+                src={src}
+                imgErrSrc={img_err_src}
+                alt={alt}
+                className={base_class}
+            />
+        );
+    }
+
+    return (
+        <Span className={base_class} aria-hidden>
+            {initials || "?"}
+        </Span>
+    );
+}

src/layouts/bots/(partials)/rail-user-row.tsx

@@ -4,6 +4,7 @@ import Row from "@moduletrace/twui/layout/Row";
 import Stack from "@moduletrace/twui/layout/Stack";
 import Span from "@moduletrace/twui/layout/Span";
 import { ChevronRight } from "lucide-react";
+import UserAvatar from "@/src/components/general/user-avatar";
 import { AppContext } from "@/src/pages/__root";
 import RailUserMenu from "./rail-user-menu";
 import Tag from "@moduletrace/twui/elements/Tag";
@@ -35,20 +36,24 @@ export default function RailUserRow() {
                         aria-label={`Account menu for ${name}`}
                         className="w-full h-12 gap-3! flex-nowrap items-center rounded-default px-1 lg:px-0 cursor-pointer hover:bg-sunken transition-colors duration-[var(--m-fast)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2 focus-visible:ring-offset-paper"
                     >
-                        <Span className="size-6 shrink-0 rounded-full bg-sunken flex items-center justify-center text-[11px] font-bold leading-none text-ink">
+                        <UserAvatar
-                            {initials}
+                            src={user?.image_thumbnail || user?.image}
-                        </Span>
+                            img_err_src={user?.image}
+                            initials={initials}
+                            size="md"
+                        />
                         <Stack className="hidden lg:flex grow min-w-0 gap-1">
                             <Span className="text-sm font-bold leading-5 text-ink truncate w-full">
                                 {name}
                             </Span>
-                            <Row>
+                            <Row className="-mt-1">
                                 {user_types?.map((ut, indx) => {
                                     return (
                                         <Tag
                                             key={indx}
-                                            variant="outlined"
+                                            variant="ghost"
                                             color="gray"
+                                            className="p-0!"
                                         >
                                             {ut.user_type}
                                         </Tag>

src/pages/admin/settings/profile/(partials)/profile-avatar.tsx

@@ -1,32 +0,0 @@
-import Img from "@moduletrace/twui/layout/Img";
-import Span from "@moduletrace/twui/layout/Span";
-
-type Props = {
-    src?: string;
-    initials: string;
-};
-
-/**
- * 64px round photo, or the initials on sunken paper when there is none.
- * Same treatment as the account row in the rail, just larger.
- */
-export default function ProfileAvatar({ src, initials }: Props) {
-    if (src) {
-        return (
-            <Img
-                src={src}
-                alt="Your photo"
-                className="size-16 shrink-0 rounded-full object-cover bg-sunken"
-            />
-        );
-    }
-
-    return (
-        <Span
-            className="size-16 shrink-0 rounded-full bg-sunken flex items-center justify-center text-lg font-bold leading-none text-ink"
-            aria-hidden
-        >
-            {initials || "?"}
-        </Span>
-    );
-}

src/pages/admin/settings/profile/(partials)/profile-photo-field.tsx

@@ -6,7 +6,7 @@ import Button from "@moduletrace/twui/layout/Button";
 import imageInputToBase64, {
     type ImageInputToBase64FunctionReturn,
 } from "@moduletrace/twui/utils/form/imageInputToBase64";
-import ProfileAvatar from "./profile-avatar";
+import UserAvatar from "@/src/components/general/user-avatar";
 
 type Props = {
     saved_src?: string;
@@ -32,7 +32,12 @@ export default function ProfilePhotoField({
 
     return (
         <Row className="w-full gap-4! flex-nowrap items-center">
-            <ProfileAvatar src={preview_src} initials={initials} />
+            <UserAvatar
+                src={preview_src}
+                initials={initials}
+                alt="Your photo"
+                size="lg"
+            />
             <Stack className="gap-2! min-w-0">
                 <Row className="gap-2!">
                     <Button