AI pass on redesign

src/app/components/ProfileCircle.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import cx from "classnames"
   import {removeUndefined} from "@welshman/lib"
-  import {deriveProfile} from "@welshman/app"
-  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import {deriveProfile, deriveProfileDisplay} from "@welshman/app"
+  import {getColor, getBlobVariant} from "@app/theme"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
 
   type Props = {
@@ -10,15 +10,39 @@
     class?: string
     size?: number
     url?: string
+    shape?: "blob" | "circle"
+    style?: string
   }
 
-  const {pubkey, url, size = 7, ...props}: Props = $props()
+  const {pubkey, url, size = 7, shape = "blob", style = "", ...props}: Props = $props()
 
   const profile = deriveProfile(pubkey, removeUndefined([url]))
+  const display = deriveProfileDisplay(pubkey)
+
+  // Organic, hand-drawn-feeling mask. The variant is stable per pubkey so a
+  // person's silhouette never changes; `shape="circle"` opts back into a disc.
+  const shapeClass =
+    shape === "circle"
+      ? "rounded-full"
+      : ["avatar-blob", "avatar-blob-2", "avatar-blob-3"][getBlobVariant(pubkey) - 1]
+
+  const color = getColor(pubkey)
+  const px = $derived(size * 4)
+  const initial = $derived([...($display || "")].find(c => c.trim()) || "?")
 </script>
 
-<ImageIcon
-  {size}
-  alt=""
-  class={cx(props.class, "rounded-full")}
-  src={$profile?.picture || UserRounded} />
+{#if $profile?.picture}
+  <ImageIcon {size} alt="" {style} class={cx(props.class, shapeClass)} src={$profile.picture} />
+{:else}
+  <!-- Fallback: a subtle gradient derived from the pubkey + the person's initial. -->
+  <div
+    class={cx(
+      props.class,
+      shapeClass,
+      "font-display flex shrink-0 items-center justify-center font-bold text-white uppercase select-none",
+    )}
+    style="width:{px}px;height:{px}px;font-size:{px *
+      0.45}px;background-image:linear-gradient(135deg,{color},color-mix(in oklab,{color},#000 28%));{style}">
+    {initial}
+  </div>
+{/if}