Get chat view started

src/app/components/GroupNote.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import {readable} from 'svelte/store'
+  import type {CustomEvent} from '@welshman/util'
+  import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from '@welshman/util'
+  import {deriveEvent} from '@welshman/store'
+  import {fly} from '@lib/transition'
+  import Icon from '@lib/components/Icon.svelte'
+  import Avatar from '@lib/components/Avatar.svelte'
+  import {repository} from '@app/base'
+  import {deriveProfile} from '@app/state'
+
+  export let event: CustomEvent
+  export let showPubkey: boolean
+
+  const profile = deriveProfile(event.pubkey)
+  const {replies} = getAncestorTags(event.tags)
+  const parentEvent = replies.length > 0
+    ? deriveEvent(repository, replies[0][1])
+    : readable(null)
+
+  $: parentProfile = deriveProfile($parentEvent?.pubkey)
+</script>
+
+<div in:fly>
+  {#if event.kind === GROUP_REPLY}
+    <div class="pl-12">
+      <div class="text-xs flex gap-1">
+        <Icon icon="arrow-right" />
+        <Avatar src={$parentProfile?.picture} size={4}/>
+        <p class="text-primary">{displayProfile($parentProfile, displayPubkey($parentEvent.pubkey))}<p>
+        <p class="whitespace-nowrap overflow-hidden text-ellipsis">{$parentEvent.content}</p>
+      </div>
+    </div>
+  {/if}
+  <div class="flex gap-2">
+    {#if showPubkey}
+      <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+    {:else}
+      <div class="w-10" />
+    {/if}
+    <div class="-mt-1">
+      {#if showPubkey}
+        <strong class="text-sm text-primary">{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
+      {/if}
+      <p class="text-sm">{event.content}</p>
+    </div>
+  </div>
+</div>

src/app/components/PrimaryNav.svelte

@@ -13,6 +13,7 @@
 	import {quintOut} from 'svelte/easing'
   import {identity, nth} from '@welshman/lib'
   import Icon from "@lib/components/Icon.svelte"
+  import Avatar from "@lib/components/Avatar.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from '@app/components/SpaceAdd.svelte'
   import {session} from "@app/base"
@@ -53,13 +54,7 @@
   <div class="flex h-full flex-col justify-between">
     <div>
       <PrimaryNavItem on:click={gotoHome}>
-        <div class="!flex w-10 items-center justify-center rounded-full border border-solid border-base-300">
-          {#if $userProfile?.picture}
-            <img alt="" src={$userProfile.picture} />
-          {:else}
-            <Icon icon="user-rounded" size={7} />
-          {/if}
-        </div>
+        <Avatar src={$userProfile?.picture} class="border border-solid border-base-300 !w-10 !h-10" size={7} />
       </PrimaryNavItem>
       {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
         {@const qualifiedGroup = qualifiedGroups[0]}