wip(desktop): progress

2 files changed, 12 insertions, 3 deletions

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>
   )
 }