Add loading indicator to discover page, add deploy directions to readme

src/app/commands.ts

@@ -167,15 +167,8 @@ export const loadUserData = (
   return promise
 }
 
-export const discoverRelays = (lists: List[]) => {
-  const urls = uniq(lists.flatMap(getRelayUrls))
-
-  for (const url of urls) {
-    if (isShareableRelayUrl(url)) {
-      loadRelay(url)
-    }
-  }
-}
+export const discoverRelays = (lists: List[]) =>
+  Promise.all(uniq(lists.flatMap(getRelayUrls)).filter(isShareableRelayUrl).map(loadRelay))
 
 // Synchronization
 

src/app/components/ChatItem.svelte

@@ -16,7 +16,6 @@
   export let pubkeys: string[]
   export let messages: TrustedEvent[]
 
-  const message = messages[0]
   const others = remove($pubkey!, pubkeys)
   const active = $page.params.chat === id
   const path = makeChatPath(pubkeys)
@@ -53,7 +52,7 @@
         {/if}
       </div>
       <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-        {message.content}
+        {messages[0].content}
       </p>
     </div>
   </div>

src/app/components/LogOut.svelte

@@ -26,9 +26,9 @@
 
 <form class="column gap-4" on:submit|preventDefault={logout}>
   <ModalHeader>
-    <div slot="title">Are you sure you<br />want to log out?</div>
+    <div slot="title">Are you sure you want<br />to log out?</div>
   </ModalHeader>
-  <p>Your local database will be cleared.</p>
+  <p class="text-center">Your local database will be cleared.</p>
   <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />

src/app/components/MenuSpaces.svelte

@@ -21,11 +21,13 @@
     {/each}
     <Divider />
   {/if}
-  <Button on:click={addSpace}>
-    <CardButton>
-      <div slot="icon"><Icon icon="login-2" size={7} /></div>
-      <div slot="title">Add a space</div>
-      <div slot="info">Join or create a new space</div>
-    </CardButton>
-  </Button>
+  {#if !PLATFORM_RELAY}
+    <Button on:click={addSpace}>
+      <CardButton>
+        <div slot="icon"><Icon icon="login-2" size={7} /></div>
+        <div slot="title">Add a space</div>
+        <div slot="info">Join or create a new space</div>
+      </CardButton>
+    </Button>
+  {/if}
 </div>

src/app/components/PeopleItem.svelte

@@ -5,8 +5,11 @@
   import type {Filter} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
   import {repository, load, loadRelaySelections, formatTimestampRelative} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import {makeChatPath} from "@app/routes"
 
   export let pubkey
 
@@ -28,7 +31,13 @@
 </script>
 
 <div class="card2 bg-alt col-2 shadow-xl">
-  <Profile {pubkey} />
+  <div class="flex justify-between">
+    <Profile {pubkey} />
+    <Link class="btn btn-primary" href={makeChatPath([pubkey])}>
+      <Icon icon="letter" />
+      Start a Chat
+    </Link>
+  </div>
   <ProfileInfo {pubkey} />
   {#if roots.length > 0}
     {@const event = first(sortBy(e => -e.created_at, roots))}

src/app/state.ts

@@ -441,7 +441,7 @@ export type Chat = {
   search_text: string
 }
 
-export const makeChatId = (pubkeys: string[]) => sort(uniq(pubkeys)).join(",")
+export const makeChatId = (pubkeys: string[]) => sort(uniq(pubkeys.concat(pubkey.get()!))).join(",")
 
 export const splitChatId = (id: string) => id.split(",")
 

src/routes/discover/+page.svelte

@@ -7,6 +7,7 @@
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import PageHeader from "@lib/components/PageHeader.svelte"
   import RelayName from "@app/components/RelayName.svelte"
@@ -40,6 +41,7 @@
   let term = ""
   let limit = 20
   let element: Element
+  let promise: Promise<any>
 
   $: relaySearch = createSearch($relays, {
     getValue: (relay: Relay) => relay.url,
@@ -57,8 +59,7 @@
   })
 
   onMount(() => {
-    discoverRelays($memberships)
-    discoverRelays($relaySelections)
+    promise = Promise.all([discoverRelays($memberships), discoverRelays($relaySelections)])
 
     const scroller = createScroller({
       element,
@@ -125,5 +126,8 @@
         {/if}
       </Button>
     {/each}
+    {#await promise}
+      <Spinner loading>Loading more relays...</Spinner>
+    {/await}
   </div>
 </Page>