Listen for new messages in channel

src/app/components/GroupCompose.svelte

@@ -161,7 +161,7 @@
 </script>
 
 <div class="flex gap-2 relative z-feature border-t border-solid border-base-100 p-2 shadow-top-xl bg-base-100">
-  <Button on:click={addFile} class="bg-base-300 rounded-box w-10 h-10 center">
+  <Button on:click={addFile} class="bg-base-300 rounded-box w-10 h-10 center hover:bg-base-200 transition-colors">
     {#if uploading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}

src/lib/components/InputProfilePicture.svelte

@@ -69,7 +69,7 @@
     on:dragleave|preventDefault|stopPropagation={onDragLeave}
     on:drop|preventDefault|stopPropagation={onDrop}>
     <div
-      class="absolute right-0 top-0 overflow-hidden rounded-full bg-primary"
+      class="absolute right-0 top-0 overflow-hidden rounded-full bg-primary h-5 w-5"
       class:bg-error={file}
       class:bg-primary={!file}>
       {#if file}

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import {browser} from "$app/environment"
+  import {sleep} from "@welshman/lib"
   import {createEventStore, adapter} from "@welshman/store"
   import ModalBox from "@lib/components/ModalBox.svelte"
   import Toast from "@app/components/Toast.svelte"
@@ -20,7 +21,7 @@
   import * as base from "@app/base"
   import * as state from "@app/state"
 
-  let ready: Promise<void>
+  let ready: Promise<unknown>
   let dialog: HTMLDialogElement
   let prev: any
 
@@ -121,7 +122,7 @@
           },
         }),
       },
-    })
+    }).then(() => sleep(300)) // Wait an extra few ms because of repository throttle
 
     dialog.addEventListener("close", () => {
       if (modal) {

src/routes/spaces/[nom]/[[room]]/+page.svelte

@@ -8,15 +8,16 @@
 </script>
 
 <script lang="ts">
-  import {sortBy} from "@welshman/lib"
+  import {onMount} from 'svelte'
-  import type {TrustedEvent} from "@welshman/util"
   import {page} from "$app/stores"
+  import {sortBy, now} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
   import {formatTimestampAsDate} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import GroupNote from "@app/components/GroupNote.svelte"
   import GroupCompose from "@app/components/GroupCompose.svelte"
-  import {deriveGroupChat} from "@app/state"
+  import {subscribe, deriveGroupChat, userRelayUrlsByNom} from "@app/state"
 
   const {nom} = $page.params
   const chat = deriveGroupChat(nom)
@@ -57,6 +58,15 @@
   setTimeout(() => {
     loading = false
   }, 3000)
+
+  onMount(() => {
+    const sub = subscribe({
+      filters: [{'#h': [nom], since: now() - 30}],
+      relays: $userRelayUrlsByNom.get(nom)!,
+    })
+
+    return () => sub.close()
+  })
 </script>
 
 <div class="relative flex h-screen flex-col">