Add chat sidebar

src/app/components/PrimaryNav.svelte

@@ -49,8 +49,7 @@
       <PrimaryNavItem href="/home">
         <Avatar
           src={$userProfile?.picture}
-          class="!h-10 !w-10 border border-solid border-base-300"
-          size={7} />
+          class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
       {#each $userMembership?.roomsByUrl.keys() || [] as url (url)}
         <PrimaryNavItem title={displayRelayUrl(url)} href={makeSpacePath(url)}>
@@ -58,21 +57,15 @@
         </PrimaryNavItem>
       {/each}
       <PrimaryNavItem title="Add Space" on:click={addSpace}>
-        <div class="!flex w-10 items-center justify-center">
-          <Icon size={7} icon="add-circle" />
-        </div>
+        <Avatar icon="add-circle" class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
       <PrimaryNavItem title="Discover Spaces" href="/discover">
-        <div class="!flex w-10 items-center justify-center">
-          <Icon size={6} icon="compass-big" />
-        </div>
+        <Avatar icon="compass-big" class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
     </div>
     <div>
       <PrimaryNavItem title="Settings" href="/settings">
-        <div class="!flex w-10 items-center justify-center">
-          <Icon size={7} icon="settings" />
-        </div>
+        <Avatar icon="settings" class="!h-10 !w-10 border border-solid border-base-300" />
       </PrimaryNavItem>
     </div>
   </div>

src/app/components/ProfileCircle.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import {deriveProfile} from '@welshman/app'
+  import Avatar from '@lib/components/Avatar.svelte'
+
+  export let pubkey
+
+  const profile = deriveProfile(pubkey)
+</script>
+
+<Avatar src={$profile?.picture} icon="user-circle" {...$$props} />

src/app/components/ProfileCircles.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import {deriveProfile} from '@welshman/app'
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+
+  export let pubkeys
+</script>
+
+<div class="flex pr-3">
+  {#each pubkeys.slice(0, 15) as pubkey (pubkey)}
+    <div class="z-feature -mr-3 inline-block">
+      <ProfileCircle class="w-8 h-8" {pubkey} {...$$props} />
+    </div>
+  {/each}
+</div>

src/app/components/SpaceAvatar.svelte

@@ -9,8 +9,7 @@
 </script>
 
 <Avatar
-  icon="ghost"
+  icon="remote-controller-minimalistic"
   class="!h-10 !w-10 border border-solid border-base-300"
   alt={displayRelayUrl(url)}
-  src={$relay?.profile?.icon}
-  size={7} />
+  src={$relay?.profile?.icon} />