Improve join/leave, publish messages

src/lib/components/Avatar.svelte

@@ -3,15 +3,17 @@
   import Icon from "@lib/components/Icon.svelte"
 
   export let src
+  export let alt = ""
   export let size = 7
+  export let icon = "user-rounded"
 </script>
 
 <div
   class={cx($$props.class, "!flex items-center justify-center overflow-hidden rounded-full")}
   style={`width: ${size * 4}px; height: ${size * 4}px;`}>
   {#if src}
-    <img alt="" {src} />
+    <img {alt} {src} />
   {:else}
-    <Icon icon="user-rounded" size={Math.round(size * 0.7)} />
+    <Icon {icon} size={Math.round(size * 0.7)} />
   {/if}
 </div>