1 files changed, 25 insertions, 28 deletions
diff --git a/front/src/components/Avatar.tsx b/front/src/components/Avatar.tsx
index 35b4386..0f3dc90 100644
--- a/front/src/components/Avatar.tsx
+++ b/front/src/components/Avatar.tsx
@@ -2,25 +2,41 @@ import useLocalState from "@/state/state";
 import type { Ship } from "@/types/urbit";
 import Sigil from "./Sigil";
 import ShipModal from "./modals/ShipModal";
+import { isValidPatp } from "urbit-ob";
+import type { UserProfile } from "@/types/nostrill";
+import Icon from "@/components/Icon";
 
 export default function ({
   p,
   size,
   color,
   noClickOnName,
+  profile,
+  picOnly = false,
 }: {
   p: Ship;
   size: number;
   color?: string;
   noClickOnName?: boolean;
+  profile?: UserProfile;
+  picOnly?: boolean;
 }) {
-  const { setModal } = useLocalState();
+  const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
   // TODO revisit this when %whom updates
+  const avatarInner = profile ? (
+    <img src={profile.picture} />
+  ) : isValidPatp(p) ? (
+    <Sigil patp={p} size={size} bg={color} />
+  ) : (
+    <Icon name="comet" />
+  );
   const avatar = (
-    <div className="avatar-w sigil cp" role="link" onClick={openModal}>
-      <Sigil patp={p} size={size} color={color} />
+    <div className="avatar cp" onClick={openModal}>
+      {avatarInner}
     </div>
   );
+  if (picOnly) return avatar;
+
   const tooLong = (s: string) => (s.length > 15 ? " too-long" : "");
   function openModal(e: React.MouseEvent) {
     if (noClickOnName) return;
@@ -29,31 +45,12 @@ export default function ({
   }
   const name = (
     <div className="name cp" role="link" onMouseUp={openModal}>
-      <p className={"p-only" + tooLong(p)}>{p.length > 28 ? "Anon" : p}</p>
-    </div>
-  );
-  return (
-    <div className="ship-avatar">
-      {avatar}
-      {name}
-    </div>
-  );
-}
-
-export function SigilOnly({ p, size, color }: any) {
-  const { setModal } = useLocalState();
-  function openModal(e: React.MouseEvent) {
-    e.stopPropagation();
-    setModal(<ShipModal ship={p} />);
-  }
-  return (
-    <div
-      className="avatar-w sigil cp"
-      role="link"
-      onClick={openModal}
-      onMouseUp={openModal}
-    >
-      <Sigil patp={p} size={size} color={color} />
+      {profile ? (
+        <p>{profile.name}</p>
+      ) : (
+        <p className={"p-only" + tooLong(p)}>{p.length > 28 ? "Anon" : p}</p>
+      )}
     </div>
   );
+  return <div className="ship-avatar">{name}</div>;
 }