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))

src/lib/components/FieldInline.svelte

@@ -1,14 +1,12 @@
-<div class="flex flex-col gap-2 {$$props.class}">
+<div class="grid grid-cols-3 gap-2 {$$props.class}">
-  <div class="grid grid-cols-3">
+  <label class="flex items-center gap-2 font-bold">
-    <label class="flex items-center gap-2 font-bold">
+    <slot name="label" />
-      <slot name="label" />
+  </label>
-    </label>
+  <div class="col-span-2">
-    <div class="col-span-2">
+    <slot name="input" />
-      <slot name="input" />
-    </div>
   </div>
   {#if $$slots.info}
-    <p class="text-sm">
+    <p class="text-sm col-start-2 col-span-2">
       <slot name="info" />
     </p>
   {/if}

src/routes/settings/profile/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {hexToBytes} from "@noble/hashes/utils"
   import {ctx} from "@welshman/lib"
   import {
     createEvent,
@@ -9,22 +11,27 @@
     createProfile,
     isPublishedProfile,
   } from "@welshman/util"
-  import {pubkey, publishThunk, displayNip05, deriveProfile} from "@welshman/app"
+  import {pubkey, session, publishThunk, displayNip05, deriveProfile} from "@welshman/app"
   import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import InputProfilePicture from "@lib/components/InputProfilePicture.svelte"
   import Content from "@app/components/Content.svelte"
   import InfoHandle from "@app/components/InfoHandle.svelte"
   import {pushModal} from "@app/modal"
-  import {pushToast} from "@app/toast"
+  import {pushToast, clip} from "@app/toast"
 
   const profile = deriveProfile($pubkey!)
 
   const pubkeyDisplay = displayPubkey($pubkey!)
 
+  const copyNpub = () => clip(nip19.npubEncode($session!.pubkey))
+
+  const copyNsec = () => clip(nip19.nsecEncode(hexToBytes($session!.secret!)))
+
   const cloneProfile = () => ({...($profile || makeProfile())})
 
   const toggleEdit = () => {
@@ -84,7 +91,7 @@
     {/key}
   </div>
   {#if editing}
-    <form class="card2 bg-alt shadow-xl" transition:slide on:submit|preventDefault={saveEdit}>
+    <form class="card2 bg-alt shadow-xl col-4" transition:slide on:submit|preventDefault={saveEdit}>
       <div class="flex justify-center py-2">
         <InputProfilePicture bind:file bind:url={values.picture} />
       </div>
@@ -120,4 +127,35 @@
       </div>
     </form>
   {/if}
+  {#if $session?.method === "nip01"}
+    <div class="card2 bg-alt shadow-xl col-4" transition:slide>
+      <FieldInline>
+        <p slot="label">Public Key</p>
+        <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+          <Icon icon="link-round" />
+          <input value={$session.pubkey} class="grow" type="text" />
+          <Button class="flex items-center" on:click={copyNpub}>
+            <Icon icon="copy" />
+          </Button>
+        </label>
+        <p slot="info">
+          Your public key is your nostr user identifier. It also allows other people to
+          authenticate your messages.
+        <p>
+      </FieldInline>
+      <FieldInline>
+        <p slot="label">Private Key</p>
+        <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+          <Icon icon="link-round" />
+          <input value={$session.secret} class="grow" type="password" />
+          <Button class="flex items-center" on:click={copyNsec}>
+            <Icon icon="copy" />
+          </Button>
+        </label>
+        <p slot="info">
+          Your private key is your nostr password. Keep this somewhere safe!
+        <p>
+      </FieldInline>
+    </div>
+  {/if}
 </div>