Improve login screen

src/app/components/ChatItem.svelte

@@ -16,7 +16,7 @@
   export let messages: TrustedEvent[]
 
   const message = messages[0]
-  const others = remove($pubkey, pubkeys)
+  const others = remove($pubkey!, pubkeys)
   const active = $page.params.chat === id
   const missingInbox = derived(inboxRelaySelectionsByPubkey, $m => others.some(pk => !$m.has(pk)))
 

src/app/components/InfoKeys.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Link from "@lib/components/Link.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    <div slot="title">What is a private key?</div>
+  </ModalHeader>
+  <p>
+    Most software keeps track of users by giving them a username and password. This gives the service
+    <strong>total control</strong> over their users, allowing them to ban them at any time, or sell their activity.
+  </p>
+  <p>
+    On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your own identity and
+    social data, through the magic of crytography. The basic idea is that you have a <strong>public key</strong>,
+    which acts as your user id, and a <strong>private key</strong> which allows you to authenticate any message
+    you send.
+  </p>
+  <p>
+    It's very important to keep private keys safe, but this can sometimes be confusing for newcomers. This is why
+    flotilla supports <strong>remote signer</strong> login. These services can store your keys securely for you,
+    giving you access using a username and password.
+  </p>
+  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+</div>

src/app/components/LogIn.svelte

@@ -3,10 +3,14 @@
   import {addSession, loadHandle, nip46Perms, type Session} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Divider from "@lib/components/Divider.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import SearchSelect from "@lib/components/SearchSelect.svelte"
   import SignUp from "@app/components/SignUp.svelte"
-  import InfoNostr from "@app/components/LogIn.svelte"
+  import InfoNostr from "@app/components/InfoNostr.svelte"
+  import LogInInfoRemoteSigner from "@app/components/LogInInfoRemoteSigner.svelte"
   import {pushModal, clearModal} from "@app/modal"
   import {pushToast} from "@app/toast"
   import {loadUserData} from "@app/commands"
@@ -33,17 +37,31 @@
   }
 
   const loginWithNip46 = withLoading(async () => {
-    const secret = makeSecret()
+    const rootHandle = await loadHandle(`_@${domain}`)
-    const handle = await loadHandle(`${username}@${handler.domain}`)
 
-    if (!handle?.pubkey) {
+    if (!rootHandle?.pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, we couldn't find that remote signer.",
+      })
+    }
+
+    const secret = makeSecret()
+    const {pubkey, nip46, relays = []} = await loadHandle(`${username}@${domain}`) || {}
+
+    if (!pubkey) {
       return pushToast({
         theme: "error",
         message: "Sorry, it looks like you don't have an account yet. Try signing up instead.",
       })
     }
 
-    const {pubkey, relays = []} = handle
+    const handler = {
+      domain,
+      pubkey: rootHandle.pubkey,
+      relays: rootHandle.nip46 || rootHandle.relays || nip46 || relays,
+    }
+
     const broker = Nip46Broker.get(pubkey, secret, handler)
 
     if (await broker.connect("", nip46Perms)) {
@@ -69,13 +87,8 @@
     }
   })
 
-  const handler = {
-    domain: "nsec.app",
-    relays: ["wss://relay.nsec.app"],
-    pubkey: "e24a86943d37a91ab485d6f9a7c66097c25ddd67e8bd1b75ed252a3c266cf9bb",
-  }
-
   let username = ""
+  let domain = 'nsec.app'
   let loading = false
 </script>
 
@@ -86,37 +99,40 @@
     <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
     you to own your social identity.
   </p>
-  <Field>
+  <div class="grid grid-cols-3 gap-3 items-center">
-    <div class="flex items-center gap-2" slot="input">
+    <p class="font-bold">Username</p>
-      <label class="input input-bordered flex w-full items-center gap-2">
+    <label class="input input-bordered flex w-full items-center gap-2 col-span-2">
-        <Icon icon="user-rounded" />
+      <Icon icon="user-circle" />
-        <input
+      <input bind:value={username} disabled={loading} class="grow" type="text" placeholder="username" />
-          bind:value={username}
+    </label>
-          disabled={loading}
+    <Tippy component={LogInInfoRemoteSigner} params={{interactive: true}}>
-          class="grow"
+      <p class="font-bold cursor-pointer flex gap-2 items-center">
-          type="text"
+        Remote Signer
-          placeholder="username" />
+        <Icon icon="info-circle" class="opacity-50" />
-        <span>@{handler.domain}</span>
+      </p>
-      </label>
+    </Tippy>
-      {#if getNip07()}
+    <label class="input input-bordered flex w-full items-center gap-2 col-span-2">
-        <Button
+      <Icon icon="key-minimalistic-square-3" />
-          disabled={loading}
+      <input bind:value={domain} disabled={loading} class="grow" type="text" />
-          on:click={loginWithNip07}
+    </label>
-          class="btn btn-neutral tooltip tooltip-left"
+  </div>
-          data-tip="Log in with browser extension">
+  <Button type="submit" class="btn btn-primary flex-grow" disabled={!username || loading}>
-          <Icon icon="square-share-line" />
+    <Spinner {loading}>Log In</Spinner>
-        </Button>
+    <Icon icon="alt-arrow-right" />
-      {/if}
+  </Button>
-    </div>
+  <Divider>Or</Divider>
-  </Field>
+  {#if getNip07()}
-  <div class="flex flex-col gap-2">
+    <Button disabled={loading} on:click={loginWithNip07} class="btn {username ? 'btn-neutral' : 'btn-primary'}">
-    <Button type="submit" class="btn btn-primary flex-grow" disabled={!username || loading}>
+      <Icon icon="widget" />
-      <Spinner {loading}>Log In</Spinner>
+      Log in with Extension
-      <Icon icon="alt-arrow-right" />
     </Button>
-    <div class="text-sm">
+  {/if}
-      Need an account?
+  <Button disabled={loading} on:click={loginWithNip07} class="btn btn-neutral">
-      <Button class="link" on:click={signUp}>Register instead</Button>
+    <Icon icon="key" />
-    </div>
+    Log in with Key
+  </Button>
+  <div class="text-sm">
+    Need an account?
+    <Button class="link" on:click={signUp}>Register instead</Button>
   </div>
 </form>

src/app/components/LogInInfoRemoteSigner.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import InfoKeys from "@app/components/InfoKeys.svelte"
+  import {pushModal} from "@app/modal"
+</script>
+
+<p class="text-sm card2 bg-alt transition-all">
+  A remote signer is a simple way to protect your private key.
+  <Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</Button>
+</p>

src/assets/icons/Key Minimalistic Square 3.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M11 12C11 13.3807 9.88071 14.5 8.5 14.5C7.11929 14.5 6 13.3807 6 12C6 10.6193 7.11929 9.5 8.5 9.5C9.88071 9.5 11 10.6193 11 12Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M11 12H15.5M15.5 12H17C17.5523 12 18 12.4477 18 13V14M15.5 12V13.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/lib/components/Divider.svelte

@@ -1,4 +1,4 @@
-<div class="flex items-center gap-2 p-2 text-xs opacity-50">
+<div class="flex items-center gap-2 p-2 text-xs opacity-50 uppercase">
   <div class="h-px flex-grow bg-base-content opacity-25" />
   <p><slot /></p>
   <div class="h-px flex-grow bg-base-content opacity-25" />

src/lib/components/Field.svelte

@@ -1,4 +1,4 @@
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-2 {$$props.class}">
   <label class="flex items-center gap-2 font-bold">
     <slot name="label" />
   </label>

src/lib/components/Icon.svelte

@@ -46,6 +46,7 @@
   import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
   import InfoSquare from "@assets/icons/Info Square.svg?dataurl"
   import Key from "@assets/icons/Key.svg?dataurl"
+  import KeyMinimalisticSquare3 from "@assets/icons/Key Minimalistic Square 3.svg?dataurl"
   import LinkRound from "@assets/icons/Link Round.svg?dataurl"
   import Login from "@assets/icons/Login.svg?dataurl"
   import Login2 from "@assets/icons/Login 2.svg?dataurl"
@@ -117,6 +118,7 @@
     "info-circle": InfoCircle,
     "info-square": InfoSquare,
     key: Key,
+    'key-minimalistic-square-3': KeyMinimalisticSquare3,
     "link-round": LinkRound,
     login: Login,
     "login-2": Login2,

src/lib/components/SearchSelect.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type {SvelteComponent} from "svelte"
+  import {readable} from 'svelte/store'
+  import {type Instance} from "tippy.js"
+  import {append, identity, remove, uniq} from "@welshman/lib"
+  import {createSearch} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Suggestions from "@lib/editor/Suggestions.svelte"
+  import SuggestionString from "@lib/editor/SuggestionString.svelte"
+
+  export let value: string
+  export let options: string[]
+  export let allowCreate = false
+
+  let input: Element
+  let popover: Instance
+  let instance: SvelteComponent
+
+  const search = readable(
+    createSearch(options, {
+      getValue: identity,
+      fuseOptions: {keys: [""]},
+    })
+  )
+
+  const select = (newValue: string) => {
+    popover.hide()
+    value = newValue
+  }
+
+  const onKeyDown = (e: Event) => {
+    if (instance.onKeyDown(e)) {
+      e.preventDefault()
+    }
+  }
+
+  const onFocus = () => {
+    popover.show()
+  }
+
+  const onBlur = () => {
+    popover.hide()
+  }
+</script>
+
+<div class={$$props.class}>
+  <label class="input input-bordered flex w-full items-center gap-3" bind:this={input}>
+    <slot name="before" />
+    <input class="grow" type="text" bind:value={value} on:keydown={onKeyDown} on:focus={onFocus} on:blur={onBlur} />
+    <Icon icon="alt-arrow-down" class="cursor-pointer" />
+  </label>
+  <Tippy
+    bind:popover
+    bind:instance
+    component={Suggestions}
+    props={{
+      search,
+      select,
+      allowCreate,
+      term: value,
+      component: SuggestionString,
+      class: "rounded-box",
+      style: `left: 4px; width: ${input?.clientWidth + 12}px`,
+    }}
+    params={{
+      trigger: "manual",
+      interactive: true,
+      maxWidth: "none",
+      getReferenceClientRect: () => input.getBoundingClientRect(),
+    }} />
+</div>

src/lib/components/Tippy.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import 'tippy.js/animations/shift-away.css'
+
   import {onMount} from "svelte"
   import type {SvelteComponent, ComponentType, ComponentProps} from "svelte"
   import tippy, {type Instance, type Props} from "tippy.js"
@@ -17,7 +19,7 @@
     if (element) {
       const target = document.createElement("div")
 
-      popover = tippy(element, {content: target, ...params})
+      popover = tippy(element, {content: target, animation: 'shift-away', ...params})
 
       instance = new component({target, props})
 

src/lib/editor/SuggestionString.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let value
+</script>
+
+{value}

src/lib/editor/Suggestions.svelte

@@ -67,7 +67,7 @@
     transition:fly|local={{duration: 200}}
     class="mt-2 max-h-[350px] overflow-y-auto overflow-x-hidden shadow-xl {$$props.class} bg-alt"
     style={$$props.style}>
-    {#if term && allowCreate}
+    {#if term && allowCreate && !items.includes(term)}
       <button
         class="white-space-nowrap block w-full min-w-0 cursor-pointer overflow-x-hidden text-ellipsis px-4 py-2 text-left transition-all hover:brightness-150"
         on:mousedown|preventDefault
@@ -81,7 +81,7 @@
         on:mousedown|preventDefault
         on:click|preventDefault={() => select(value)}>
         {#if index === i}
-          <div transition:slide|local={{axis: "x"}} class="pr-2">
+          <div transition:slide|local={{axis: "x"}} class="pr-2 flex items-center">
             <Icon icon="alt-arrow-right" />
           </div>
         {/if}

src/lib/editor/util.ts

@@ -1,6 +1,6 @@
 import type {JSONContent, PasteRuleMatch, InputRuleMatch} from "@tiptap/core"
 import {Editor} from "@tiptap/core"
-import {choice} from "@welshman/lib"
+import {ctx} from "@welshman/lib"
 import {Address} from "@welshman/util"
 
 export const asInline = (extend: Record<string, any>) => ({
@@ -61,23 +61,23 @@ export const getEditorTags = (editor: Editor) => {
     attrs.tag.replace(/^#/, "").toLowerCase(),
   ])
 
-  const naddrTags = findNodes("naddr", json).map(({kind, pubkey, identifier, relays}: any) => {
+  const naddrTags = findNodes("naddr", json).map(({kind, pubkey, identifier, relays = []}: any) => {
     const address = new Address(kind, pubkey, identifier).toString()
 
-    return ["q", address, choice(relays) || "", pubkey]
+    return ["q", address, ctx.app.router.fromRelays(relays).getUrl(), pubkey]
   })
 
-  const neventTags = findNodes("nevent", json).map(({id, author, relays}: any) => [
+  const neventTags = findNodes("nevent", json).map(({id, author, relays = []}: any) => [
     "q",
     id,
-    choice(relays) || "",
+    ctx.app.router.fromRelays(relays).getUrl(),
     author || "",
   ])
 
-  const mentionTags = findNodes("nprofile", json).map(({pubkey, relays}: any) => [
+  const mentionTags = findNodes("nprofile", json).map(({pubkey, relays = []}: any) => [
     "p",
     pubkey,
-    choice(relays) || "",
+    ctx.app.router.fromRelays(relays).getUrl(),
     "",
   ])
 

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

@@ -42,7 +42,7 @@
   const id = $page.params.chat === "notes" ? $pubkey! : $page.params.chat
   const chat = deriveChat(id)
   const pubkeys = splitChatId(id)
-  const others = remove($pubkey, pubkeys)
+  const others = remove($pubkey!, pubkeys)
   const missingInboxes = derived(inboxRelaySelectionsByPubkey, $m =>
     pubkeys.filter(pk => !$m.has(pk)),
   )