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 handle = await loadHandle(`${username}@${handler.domain}`)
+    const rootHandle = await loadHandle(`_@${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="flex items-center gap-2" slot="input">
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="user-rounded" />
-        <input
-          bind:value={username}
-          disabled={loading}
-          class="grow"
-          type="text"
-          placeholder="username" />
-        <span>@{handler.domain}</span>
-      </label>
-      {#if getNip07()}
-        <Button
-          disabled={loading}
-          on:click={loginWithNip07}
-          class="btn btn-neutral tooltip tooltip-left"
-          data-tip="Log in with browser extension">
-          <Icon icon="square-share-line" />
-        </Button>
-      {/if}
-    </div>
-  </Field>
-  <div class="flex flex-col gap-2">
-    <Button type="submit" class="btn btn-primary flex-grow" disabled={!username || loading}>
-      <Spinner {loading}>Log In</Spinner>
-      <Icon icon="alt-arrow-right" />
+  <div class="grid grid-cols-3 gap-3 items-center">
+    <p class="font-bold">Username</p>
+    <label class="input input-bordered flex w-full items-center gap-2 col-span-2">
+      <Icon icon="user-circle" />
+      <input bind:value={username} disabled={loading} class="grow" type="text" placeholder="username" />
+    </label>
+    <Tippy component={LogInInfoRemoteSigner} params={{interactive: true}}>
+      <p class="font-bold cursor-pointer flex gap-2 items-center">
+        Remote Signer
+        <Icon icon="info-circle" class="opacity-50" />
+      </p>
+    </Tippy>
+    <label class="input input-bordered flex w-full items-center gap-2 col-span-2">
+      <Icon icon="key-minimalistic-square-3" />
+      <input bind:value={domain} disabled={loading} class="grow" type="text" />
+    </label>
+  </div>
+  <Button type="submit" class="btn btn-primary flex-grow" disabled={!username || loading}>
+    <Spinner {loading}>Log In</Spinner>
+    <Icon icon="alt-arrow-right" />
+  </Button>
+  <Divider>Or</Divider>
+  {#if getNip07()}
+    <Button disabled={loading} on:click={loginWithNip07} class="btn {username ? 'btn-neutral' : 'btn-primary'}">
+      <Icon icon="widget" />
+      Log in with Extension
     </Button>
-    <div class="text-sm">
-      Need an account?
-      <Button class="link" on:click={signUp}>Register instead</Button>
-    </div>
+  {/if}
+  <Button disabled={loading} on:click={loginWithNip07} class="btn btn-neutral">
+    <Icon icon="key" />
+    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>