From dec304a2737b7accb3bf8b199fb58e81d65026e9 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 12 Feb 2026 20:05:45 -0600
Subject: [PATCH] fix(app): emoji as avatar

---
 packages/ui/src/components/avatar.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
index 76bde1e15..c1617b265 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -1,5 +1,16 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
 
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}
+
 export interface AvatarProps extends ComponentProps<"div"> {
   fallback: string
   src?: string
@@ -36,7 +47,7 @@ export function Avatar(props: AvatarProps) {
         ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
       }}
     >
-      <Show when={src} fallback={split.fallback?.[0]}>
+      <Show when={src} fallback={first(split.fallback)}>
         {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
       </Show>
     </div>