Add keys section, discover more relays, allow custom relays

src/app/commands.ts

@@ -52,6 +52,7 @@ import {
   INDEXER_RELAYS,
   loadMembership,
   loadSettings,
+  getDefaultPubkeys,
 } from "@app/state"
 
 // Utils
@@ -101,7 +102,7 @@ export const loadUserData = (
 
   // Load followed profiles slowly in the background without clogging other stuff up
   promise.then(async () => {
-    for (const pubkeys of chunk(50, getFollows(pubkey))) {
+    for (const pubkeys of chunk(50, getDefaultPubkeys())) {
       await sleep(300)
 
       for (const pubkey of pubkeys) {
@@ -174,7 +175,6 @@ export const removeRoomMembership = async (url: string, room: string) => {
 
 export const setRelayPolicy = (url: string, read: boolean, write: boolean) => {
   const list = get(userRelaySelections) || makeList({kind: RELAYS})
-
   const tags = getRelayTags(getListTags(list)).filter(t => normalizeRelayUrl(t[1]) !== url)
 
   if (read && write) {

src/app/components/PeopleItem.svelte

@@ -55,7 +55,7 @@
     <div class="divider" />
     <button type="button" class="chat chat-start cursor-default" on:click|stopPropagation>
       <div class="bg-alt col-4 chat-bubble text-left">
-        <Content hideMedia={!following} {event} />
+        <Content showEntire hideMedia={!following} {event} />
         <Link external href={entityLink(nevent)} class="row-2 group justify-end whitespace-nowrap">
           <Icon icon="link-round" size={3} />
           <p class="text-xs">{formatTimestamp(event.created_at)}</p>

src/app/components/RelayAdd.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {Readable} from "svelte/store"
+  import {tryCatch} from "@welshman/lib"
+  import {isShareableRelayUrl, normalizeRelayUrl} from "@welshman/util"
   import {relaySearch} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
@@ -14,6 +16,8 @@
   let limit = 20
   let element: Element
 
+  $: customUrl = tryCatch(() => normalizeRelayUrl(term))
+
   onMount(() => {
     const scroller = createScroller({
       element,
@@ -34,6 +38,14 @@
   <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
 </label>
 <div class="column -m-6 mt-0 h-[50vh] gap-2 overflow-auto p-6 pt-2" bind:this={element}>
+  {#if customUrl && isShareableRelayUrl(customUrl) && !$relays.includes(normalizeRelayUrl(customUrl))}
+    <RelayItem url={term}>
+      <Button class="btn btn-outline btn-sm flex items-center" on:click={() => addRelay(customUrl)}>
+        <Icon icon="add-circle" />
+        Add Relay
+      </Button>
+    </RelayItem>
+  {/if}
   {#each $relaySearch
     .searchValues(term)
     .filter(url => !$relays.includes(url))