From 1fbd7a7f9a611749768168ea9a30f87d7eda2c5b Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Tue, 9 Dec 2025 15:21:04 -0600
Subject: wip(desktop): progress

---
 packages/ui/src/components/avatar.css |  5 +++++
 packages/ui/src/components/avatar.tsx | 10 +++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

(limited to 'packages/ui')

diff --git a/packages/ui/src/components/avatar.css b/packages/ui/src/components/avatar.css
index bc87f3bd8..4e42e6f99 100644
--- a/packages/ui/src/components/avatar.css
+++ b/packages/ui/src/components/avatar.css
@@ -13,6 +13,11 @@
   color: oklch(from var(--avatar-bg) calc(l * 0.72) calc(c * 8) h);
 }
 
+[data-component="avatar"][data-has-image] {
+  background-color: transparent;
+  border: none;
+}
+
 [data-component="avatar"][data-size="small"] {
   width: 1.25rem;
   height: 1.25rem;
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
index 183a15b9b..1ff3008ee 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -2,27 +2,31 @@ import { type ComponentProps, splitProps, Show } from "solid-js"
 
 export interface AvatarProps extends ComponentProps<"div"> {
   fallback: string
+  src?: string
   background?: string
   size?: "small" | "normal" | "large"
 }
 
 export function Avatar(props: AvatarProps) {
-  const [split, rest] = splitProps(props, ["fallback", "background", "size", "class", "classList", "style"])
+  const [split, rest] = splitProps(props, ["fallback", "src", "background", "size", "class", "classList", "style"])
   return (
     <div
       {...rest}
       data-component="avatar"
       data-size={split.size || "normal"}
+      data-has-image={split.src ? "" : undefined}
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
       }}
       style={{
         ...(typeof split.style === "object" ? split.style : {}),
-        ...(split.background ? { "--avatar-bg": split.background } : {}),
+        ...(!split.src && split.background ? { "--avatar-bg": split.background } : {}),
       }}
     >
-      <Show when={split.fallback}>{split.fallback[0]}</Show>
+      <Show when={split.src} fallback={split.fallback?.[0]}>
+        {(src) => <img src={src()} draggable={false} class="size-full object-cover" />}
+      </Show>
     </div>
   )
 }
-- 
cgit v1.2.3