Add log in with key, listen for messages

src/app/components/LogIn.svelte

@@ -9,6 +9,7 @@
   import SignUp from "@app/components/SignUp.svelte"
   import InfoNostr from "@app/components/InfoNostr.svelte"
   import LogInInfoRemoteSigner from "@app/components/LogInInfoRemoteSigner.svelte"
+  import LogInKey from "@app/components/LogInKey.svelte"
   import {pushModal, clearModals} from "@app/modal"
   import {pushToast} from "@app/toast"
   import {loadUserData} from "@app/commands"
@@ -85,6 +86,8 @@
     }
   })
 
+  const loginWithKey = () => pushModal(LogInKey)
+
   let username = ""
   let domain = "nsec.app"
   let loading = false
@@ -133,7 +136,7 @@
       Log in with Extension
     </Button>
   {/if}
-  <Button disabled={loading} on:click={loginWithNip07} class="btn btn-neutral">
+  <Button disabled={loading} on:click={loginWithKey} class="btn btn-neutral">
     <Icon icon="key" />
     Log in with Key
   </Button>

src/app/components/LogInKey.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {getPubkey} from "@welshman/signer"
+  import {addSession} from "@welshman/app"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import InfoNostr from "@app/components/InfoNostr.svelte"
+  import {loadUserData} from "@app/commands"
+  import {pushModal, clearModals} from "@app/modal"
+  import {pushToast} from "@app/toast"
+
+  const back = () => history.back()
+
+  const onSubmit = async () => {
+    let secret = key
+
+    if (secret.startsWith('nsec')) {
+      secret = nip19.decode(secret).data as string
+    }
+
+    if (!isKeyValid(secret)) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like that's an invalid private key.",
+      })
+    }
+
+    const pubkey = getPubkey(secret)
+
+    addSession({method: "nip01", pubkey, secret})
+
+    loading = true
+
+    await loadUserData(pubkey)
+
+    clearModals()
+  }
+
+  const isKeyValid = (key: string) => {
+    // Validate the key before setting it to state by encoding it using bech32.
+    // This will error if invalid (this works whether it's a public or a private key)
+    try {
+      getPubkey(key)
+    } catch (e) {
+      return false
+    }
+
+    return true
+  }
+
+  let key = ""
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={onSubmit}>
+  <ModalHeader>
+    <div slot="title">Log In</div>
+    <div slot="info">Already have a nostr key?</div>
+  </ModalHeader>
+  <Field>
+    <p slot="label">Private Key*</p>
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+      <Icon icon="key" />
+      <input bind:value={key} class="grow" type="password" />
+    </label>
+    <p slot="info">
+      A nostr nsec or private key. Note that this log in method is not recommended.
+      <Button class="link" on:click={() => pushModal(InfoNostr)}>What is nostr?</Button>
+    </p>
+  </Field>
+  <ModalFooter>
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Next</Spinner>
+      <Icon icon="alt-arrow-right" class="!bg-base-300" />
+    </Button>
+  </ModalFooter>
+</form>

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

@@ -8,14 +8,15 @@
 </script>
 
 <script lang="ts">
+  import {onMount} from 'svelte'
   import {page} from "$app/stores"
   import {writable} from 'svelte/store'
-  import {sortBy, assoc, append} from "@welshman/lib"
+  import {sortBy, now, assoc, append} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent} from "@welshman/util"
-  import {formatTimestampAsDate, publishThunk} from "@welshman/app"
+  import {formatTimestampAsDate, subscribe, publishThunk} from "@welshman/app"
   import type {Thunk} from "@welshman/app"
-  import {fly} from "@lib/transition"
+  import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -24,6 +25,7 @@
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
   import {
+    loadChannel,
     userMembership,
     decodeNRelay,
     makeChannelId,
@@ -37,14 +39,15 @@
 
   const {nrelay, room = GENERAL} = $page.params
   const url = decodeNRelay(nrelay)
-  const channel = deriveChannel(makeChannelId(url, room))
+  const id = makeChannelId(url, room)
+  const channel = deriveChannel(id)
   const thunks = writable({} as Record<string, Thunk>)
 
   const assertEvent = (e: any) => e as TrustedEvent
 
   const onSubmit = ({content, tags}: EventContent) => {
     const event = createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)})
-    const thunk = publishThunk({event, relays: [url], delay: 60_000})
+    const thunk = publishThunk({event, relays: [url], delay: 2000})
 
     thunks.update(assoc(thunk.event.id, thunk))
   }
@@ -80,6 +83,11 @@
     elements.reverse()
   }
 
+  onMount(() => {
+    loadChannel(id)
+    subscribe({filters: [{'#~': [room], since: now()}], relays: [url]})
+  })
+
   setTimeout(() => {
     loading = false
   }, 3000)
@@ -114,7 +122,7 @@
       {:else}
         {@const event = assertEvent(value)}
         {@const thunk = $thunks[event.id]}
-        <div in:fly>
+        <div in:slide>
           <ChannelMessage {url} {room} {event} {thunk} {showPubkey} />
         </div>
       {/if}