Add key signup, improve message listening

src/app/components/AppContainer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import {page} from "$app/stores"
   import {pubkey} from "@welshman/app"
   import Landing from "@app/components/Landing.svelte"
   import Toast from "@app/components/Toast.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
+  import {modals} from "@app/modal"
 </script>
 
 <div class="flex h-screen overflow-hidden">
@@ -10,7 +12,7 @@
     <PrimaryNav>
       <slot />
     </PrimaryNav>
-  {:else}
+  {:else if !$modals[$page.url.hash.slice(1)]}
     <Landing />
   {/if}
 </div>

src/app/components/ChannelMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {readable, derived} from "svelte/store"
-  import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
+  import {hash, sleep, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents, throttled} from "@welshman/store"
   import {
@@ -12,17 +12,20 @@
   import type {Thunk} from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
+  import {slideAndFade, conditionalTransition} from '@lib/transition'
   import Icon from "@lib/components/Icon.svelte"
+  import Delay from "@lib/components/Delay.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChannelThread from "@app/components/ChannelThread.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
   import {colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
-  import {pushModal} from "@app/modal"
+  import {pushModal, pushDrawer} from "@app/modal"
 
   export let url
   export let room
@@ -41,6 +44,10 @@
   const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null)
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
+  const transition = conditionalTransition(thunk, slideAndFade)
+
+  const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
+
   const openThread = () => {
     const root = $rootEvent || event
 
@@ -67,9 +74,11 @@
   $: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "")
 </script>
 
+<Delay>
   <button
-  type="button"
+    in:transition
     on:click={openThread}
+    type="button"
     class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
     {#if $rootEvent && !hideParent}
       <div class="flex items-center gap-1 pl-12 text-xs">
@@ -85,24 +94,25 @@
     {/if}
     <div class="flex w-full gap-3">
       {#if showPubkey}
-      <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
+        <Button on:click={showProfile}>
+          <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+        </Button>
       {:else}
         <div class="w-10 min-w-10 max-w-10" />
       {/if}
       <div class="-mt-1 flex-grow pr-1">
         {#if showPubkey}
           <div class="flex items-center gap-2">
-          <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
+            <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
-            >{$profileDisplay}</strong>
+              {$profileDisplay}
+            </Button>
             <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
           </div>
         {/if}
         <div class="text-sm">
           <Content {event} />
           {#if thunk}
-          <div class="badge badge-neutral">
             <ThunkStatus {thunk} />
-          </div>
           {/if}
         </div>
       </div>
@@ -134,3 +144,4 @@
       <ChannelMessageMenuButton {url} {room} {event} />
     </button>
   </button>
+</Delay>

src/app/components/ChatMessage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {derived} from "svelte/store"
   import {type Instance} from "tippy.js"
-  import {hash, uniqBy, groupBy, now} from "@welshman/lib"
+  import {hash, sleep, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents, throttled} from "@welshman/store"
   import {
@@ -12,8 +12,10 @@
   } from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
+  import {slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
+  import Delay from "@lib/components/Delay.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
@@ -54,7 +56,9 @@
   let popoverIsVisible = false
 </script>
 
+<Delay>
   <div
+    in:slideAndFade
     class="group chat flex items-center justify-end gap-1"
     class:chat-start={event.pubkey !== $pubkey}
     class:flex-row-reverse={event.pubkey !== $pubkey}
@@ -91,7 +95,7 @@
           <div class="-mt-1 flex-grow pr-1">
             {#if showPubkey}
               <div class="flex items-center gap-2">
-              <Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
+                <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
                   {$profileDisplay}
                 </Button>
                 <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
@@ -125,3 +129,4 @@
       {/if}
     </div>
   </div>
+</Delay>

src/app/components/ChatStart.svelte

@@ -22,7 +22,6 @@
     <div slot="info">Create an encrypted chat room for private conversations.</div>
   </ModalHeader>
   <Field>
-    <p slot="label">Members</p>
     <div slot="input">
       <ProfileMultiSelect bind:value={pubkeys} />
     </div>

src/app/components/ProfileName.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import {loadProfile, deriveProfileDisplay} from "@welshman/app"
+  import {deriveProfileDisplay} from "@welshman/app"
 
   export let pubkey
 
   const profileDisplay = deriveProfileDisplay(pubkey)
-
-  loadProfile(pubkey)
 </script>
 
 {$profileDisplay}

src/app/components/RelayAdd.svelte

@@ -32,13 +32,11 @@
   })
 </script>
 
-<div class="fixed left-6 right-6 top-6">
 <label class="input input-bordered flex w-full items-center gap-2">
   <Icon icon="magnifer" />
   <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
 </label>
-</div>
+<div class="column -m-6 mt-0 p-6 pt-2 h-[50vh] gap-2 overflow-auto" bind:this={element}>
-<div class="column mt-16 h-[50vh] gap-2 overflow-auto" bind:this={element}>
   {#each $relaySearch
     .searchValues(term)
     .filter(url => !$relays.includes(url))

src/app/components/SignUp.svelte

@@ -4,14 +4,18 @@
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Divider from "@lib/components/Divider.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import LogIn from "@app/components/LogIn.svelte"
-  import InfoNostr from "@app/components/LogIn.svelte"
+  import InfoNostr from "@app/components/InfoNostr.svelte"
+  import SignUpKey from "@app/components/SignUpKey.svelte"
   import {pushModal, clearModals} from "@app/modal"
   import {pushToast} from "@app/toast"
 
   const login = () => pushModal(LogIn)
 
+  const signUpWithKey = () => pushModal(SignUpKey)
+
   const trySignup = async () => {
     const secret = makeSecret()
     const handle = await loadHandle(`${username}@${handler.domain}`)
@@ -83,14 +87,17 @@
       @{handler.domain}
     </div>
   </Field>
-  <div class="flex flex-col gap-2">
   <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
     <Spinner {loading}>Sign Up</Spinner>
     <Icon icon="alt-arrow-right" />
   </Button>
+  <Divider>Or</Divider>
+  <Button disabled={loading} on:click={signUpWithKey} class="btn btn-neutral">
+    <Icon icon="key" />
+    Sign up with Key
+  </Button>
   <div class="text-sm">
     Already have an account?
     <Button class="link" on:click={login}>Log in instead</Button>
   </div>
-  </div>
 </form>

src/app/components/SignUpKey.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {goto} from '$app/navigation'
+  import {hexToBytes} from '@noble/hashes/utils'
+  import {getPubkey, makeSecret} 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 InfoKeys from "@app/components/InfoKeys.svelte"
+  import {loadUserData} from "@app/commands"
+  import {pushModal, clearModals} from "@app/modal"
+  import {clip} from "@app/toast"
+
+  const secret = makeSecret()
+  const nsec = nip19.nsecEncode(hexToBytes(secret))
+
+  const back = () => history.back()
+
+  const copyNsec = () => clip(nsec)
+
+  const onSubmit = async () => {
+    const pubkey = getPubkey(secret)
+
+    addSession({method: "nip01", pubkey, secret})
+    clearModals()
+    goto("/settings/profile")
+  }
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={onSubmit}>
+  <ModalHeader>
+    <div slot="title">Sign Up</div>
+    <div slot="info">With a freshly generated private 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 value={nsec} class="grow" type="password" />
+      <Button on:click={copyNsec}>
+        <Icon icon="copy" />
+      </Button>
+    </label>
+    <p slot="info">
+      Make sure to save your private key somewhere safe, like in a password manager.
+      <Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</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">
+      Next
+      <Icon icon="alt-arrow-right" class="!bg-base-300" />
+    </Button>
+  </ModalFooter>
+</form>

src/lib/components/Delay.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import {sleep} from '@welshman/lib'
+
+  export let delay = 1
+</script>
+
+{#await sleep(delay)}
+  <!-- pass -->
+{:then}
+  <slot />
+{/await}

src/lib/components/Dialog.svelte

@@ -11,7 +11,7 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
+    class="relative card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
     transition:fly={{duration: 300}}>
     <slot />
   </div>

src/lib/components/Drawer.svelte

@@ -10,7 +10,7 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="menu absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    class="absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
     transition:slide={{axis: "x", duration: 300}}>
     <slot />
   </div>

src/lib/editor/SuggestionProfile.svelte

@@ -1,7 +1,42 @@
 <script lang="ts">
-  import Profile from "@app/components/Profile.svelte"
+  import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
+  import {
+    userFollows,
+    deriveUserWotScore,
+    deriveProfile,
+    deriveHandleForPubkey,
+    displayHandle,
+    deriveProfileDisplay,
+  } from "@welshman/app"
+  import Avatar from "@lib/components/Avatar.svelte"
+  import WotScore from "@lib/components/WotScore.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushDrawer} from "@app/modal"
 
   export let value
+
+  const pubkey = value
+  const profile = deriveProfile(pubkey)
+  const profileDisplay = deriveProfileDisplay(pubkey)
+  const handle = deriveHandleForPubkey(pubkey)
+  const score = deriveUserWotScore(pubkey)
+
+  $: following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
 </script>
 
-<Profile pubkey={value} />
+<div class="flex max-w-full gap-3">
+  <div class="py-1">
+    <Avatar src={$profile?.picture} size={10} />
+  </div>
+  <div class="flex min-w-0 flex-col">
+    <div class="flex items-center gap-2">
+      <div class="text-bold overflow-hidden text-ellipsis">
+        {$profileDisplay}
+      </div>
+      <WotScore score={$score} active={following} />
+    </div>
+    <div class="overflow-hidden text-ellipsis text-sm opacity-75">
+      {$handle ? displayHandle($handle) : displayPubkey(pubkey)}
+    </div>
+  </div>
+</div>

src/lib/transition.ts

@@ -13,6 +13,7 @@ export function slideAndFade(
   node: any,
   {delay = 0, duration = 400, easing = cubicOut, axis = "y"} = {},
 ) {
+  console.log('slideAndFade')
   const style = getComputedStyle(node)
   const primary_property = axis === "y" ? "height" : "width"
   const primary_property_value = parseFloat(style[primary_property])
@@ -46,3 +47,6 @@ export function slideAndFade(
       `border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`,
   }
 }
+
+export const conditionalTransition = (condition: any, transition: any) =>
+  (node: any, args?: any) => condition ? transtion(node, args) : null

src/routes/home/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {ctx, ago} from "@welshman/lib"
+  import {WEEK, ctx, ago} from "@welshman/lib"
   import {WRAP} from "@welshman/util"
   import {pubkey, subscribe} from "@welshman/app"
   import {fly} from "@lib/transition"
@@ -26,7 +26,7 @@
   onMount(() => {
     const filter = {kinds: [WRAP], "#p": [$pubkey!]}
     const relays = ctx.app.router.InboxRelays().getUrls()
-    const sub = subscribe({filters: [{...filter, since: ago(30)}], relays})
+    const sub = subscribe({filters: [{...filter, since: ago(WEEK)}], relays})
 
     pullConservatively({filters: [filter], relays})
 

src/routes/home/[chat]/+page.svelte

@@ -21,7 +21,6 @@
     loadInboxRelaySelections,
     tagPubkey,
   } from "@welshman/app"
-  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -155,9 +154,7 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <div in:fly>
         <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
-        </div>
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">