Generate username color based on hash

src/app/components/GroupNote.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import twColors from "tailwindcss/colors"
   import {readable} from "svelte/store"
+  import {hash} from "@welshman/lib"
   import type {CustomEvent} from "@welshman/util"
   import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from "@welshman/util"
   import {fly} from "@lib/transition"
@@ -10,10 +12,34 @@
   export let event: CustomEvent
   export let showPubkey: boolean
 
+  const colors = [
+    ['amber', twColors.amber[600]],
+    ['blue', twColors.blue[600]],
+    ['cyan', twColors.cyan[600]],
+    ['emerald', twColors.emerald[600]],
+    ['fuchsia', twColors.fuchsia[600]],
+    ['green', twColors.green[600]],
+    ['indigo', twColors.indigo[600]],
+    ['lightBlue', twColors.lightBlue[600]],
+    ['lime', twColors.lime[600]],
+    ['orange', twColors.orange[600]],
+    ['pink', twColors.pink[600]],
+    ['purple', twColors.purple[600]],
+    ['red', twColors.red[600]],
+    ['rose', twColors.rose[600]],
+    ['sky', twColors.sky[600]],
+    ['teal', twColors.teal[600]],
+    ['violet', twColors.violet[600]],
+    ['yellow', twColors.yellow[600]],
+    ['zinc', twColors.zinc[600]],
+  ]
+
   const profile = deriveProfile(event.pubkey)
   const {replies} = getAncestorTags(event.tags)
-  const parentEvent =
-    replies.length > 0 ? deriveEvent(replies[0][1], [replies[0][2]]) : readable(null)
+  const parentId = replies[0]?.[1]
+  const parentHints = [replies[0]?.[2]].filter(Boolean)
+  const parentEvent = parentId ? deriveEvent(parentId, parentHints) : readable(null)
+  const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
   $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
   $: parentProfile = deriveProfile(parentPubkey)
@@ -41,7 +67,7 @@
     {/if}
     <div class="-mt-1">
       {#if showPubkey}
-        <strong class="text-sm text-primary"
+        <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
           >{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
       {/if}
       <p class="text-sm">{event.content}</p>

src/app/components/InfoNip29.svelte

@@ -21,8 +21,8 @@
     >. If you do decide to join someone else's, make sure to follow their directions for registering
     as a user.
   </p>
-  <div class="alert !flex justify-between items-center">
-    <div class="flex gap-2 items-center">
+  <div class="alert !flex items-center justify-between">
+    <div class="flex items-center gap-2">
       <Icon icon="remote-controller-minimalistic" />
       groups.fiatjaf.com
     </div>

src/app/components/LogIn.svelte

@@ -4,14 +4,15 @@
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import SignUp from "@app/components/SignUp.svelte"
   import InfoNostr from "@app/components/LogIn.svelte"
   import {pushModal, clearModal} from "@app/modal"
   import {pushToast} from "@app/toast"
-  import {addSession} from "@app/base"
+  import {addSession, nip46Perms} from "@app/base"
   import {loadHandle} from "@app/state"
   import {loadUserData} from "@app/commands"
 
-  const back = () => history.back()
+  const signUp = () => pushModal(SignUp)
 
   const tryLogin = async () => {
     const secret = makeSecret()
@@ -29,7 +30,7 @@
 
     loadUserData(pubkey, relays)
 
-    if (await broker.connect()) {
+    if (await broker.connect("", nip46Perms)) {
       addSession({method: "nip46", pubkey, secret, handler})
       pushToast({message: "Successfully logged in!"})
       clearModal()
@@ -62,14 +63,12 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={login}>
-  <div class="py-2">
-    <h1 class="heading">Log in with Nostr</h1>
-    <p class="text-center">
-      Flotilla is built using the
-      <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which
-      allows you to own your social identity.
-    </p>
-  </div>
+  <h1 class="heading">Log in with Nostr</h1>
+  <p class="m-auto max-w-sm text-center">
+    Flotilla is built using the
+    <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">
@@ -80,13 +79,13 @@
     </div>
   </Field>
   <div class="flex flex-col gap-2">
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
       <Spinner {loading}>Log In</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
     <div class="text-sm">
       Need an account?
-      <Button class="link" on:click={back}>Register</Button>
+      <Button class="link" on:click={signUp}>Register instead</Button>
     </div>
   </div>
 </form>

src/app/components/LogOut.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import {clearStorage} from "@app/storage"
+
+  const back = () => history.back()
+
+  const logout = async () => {
+    loading = true
+
+    try {
+      await clearStorage()
+      localStorage.clear()
+    } finally {
+      loading = false
+    }
+
+    window.location.reload()
+  }
+
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={logout}>
+  <h1 class="heading">Are you sure you want to log out?</h1>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <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}>Log Out</Spinner>
+    </Button>
+  </div>
+</form>

src/app/components/SignUp.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {makeSecret, Nip46Broker} from "@welshman/signer"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import LogIn from "@app/components/LogIn.svelte"
+  import InfoNostr from "@app/components/LogIn.svelte"
+  import {pushModal, clearModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+  import {addSession, nip46Perms} from "@app/base"
+  import {loadHandle} from "@app/state"
+
+  const login = () => pushModal(LogIn)
+
+  const trySignup = async () => {
+    const secret = makeSecret()
+    const handle = await loadHandle(`${username}@${handler.domain}`)
+
+    if (handle?.pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like that account already exists. Try logging in instead.",
+      })
+    }
+
+    const signupBroker = Nip46Broker.get("", secret, handler)
+    const pubkey = await signupBroker.createAccount(username, nip46Perms)
+
+    if (!pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like something went wrong. Please try again.",
+      })
+    }
+
+    const loginBroker = Nip46Broker.get(pubkey, secret, handler)
+
+    if (await loginBroker.connect("", nip46Perms)) {
+      addSession({method: "nip46", pubkey, secret, handler})
+      pushToast({message: "Successfully logged in!"})
+      clearModal()
+    } else {
+      pushToast({
+        theme: "error",
+        message: "Something went wrong! Please try again.",
+      })
+    }
+  }
+
+  const signup = async () => {
+    loading = true
+
+    try {
+      await trySignup()
+    } finally {
+      loading = false
+    }
+  }
+
+  const handler = {
+    domain: "nsec.app",
+    relays: ["wss://relay.nsec.app"],
+    pubkey: "e24a86943d37a91ab485d6f9a7c66097c25ddd67e8bd1b75ed252a3c266cf9bb",
+  }
+
+  let username = ""
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={signup}>
+  <h1 class="heading">Sign up with Nostr</h1>
+  <p class="m-auto max-w-sm text-center">
+    Flotilla is built using the
+    <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} class="grow" type="text" placeholder="username" />
+      </label>
+      @{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>
+    <div class="text-sm">
+      Already have an account?
+      <Button class="link" on:click={login}>Log in instead</Button>
+    </div>
+  </div>
+</form>

src/app/components/SpaceCreate.svelte

@@ -39,7 +39,7 @@
     </label>
     <p slot="info">
       This should be a NIP-29 compatible nostr relay where you'd like to host your space.
-      <Button class="link" on:click={() => pushModal(InfoNip29)}>More information</Button>
+      <Button class="link" on:click={() => pushModal(InfoNip29)}>What is a relay?</Button>
     </p>
   </Field>
   <div class="flex flex-row items-center justify-between gap-4">

src/app/components/SpaceJoin.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import {append, remove} from '@welshman/lib'
-  import {displayRelayUrl} from '@welshman/util'
+  import {append, remove} from "@welshman/lib"
+  import {displayRelayUrl} from "@welshman/util"
   import {goto} from "$app/navigation"
-  import CardButton from "@lib/components/CardButton.svelte"
   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 InfoNip29 from '@app/components/InfoNip29.svelte'
-  import {pushToast} from "@app/toast"
+  import InfoNip29 from "@app/components/InfoNip29.svelte"
   import {pushModal} from "@app/modal"
   import {deriveGroup, displayGroup, relayUrlsByNom} from "@app/state"
   import {addGroupMemberships} from "@app/commands"
@@ -20,7 +17,9 @@
   const back = () => history.back()
 
   const onUrlChange = (e: any) => {
-    urls = urls.includes(e.target.value) ? remove(e.target.value, urls) : append(e.target.value, urls)
+    urls = urls.includes(e.target.value)
+      ? remove(e.target.value, urls)
+      : append(e.target.value, urls)
   }
 
   const join = async () => {
@@ -48,15 +47,20 @@
   </h1>
   <p class="text-center">
     Please select which relays you'd like to use for this group.
-    <Button class="link" on:click={() => pushModal(InfoNip29)}>More information</Button>
+    <Button class="link" on:click={() => pushModal(InfoNip29)}>What is a relay?</Button>
   </p>
   {#each urlOptions as url}
-    <div class="alert !flex justify-between items-center">
-      <div class="flex gap-2 items-center">
+    <div class="alert !flex items-center justify-between">
+      <div class="flex items-center gap-2">
         <Icon icon="remote-controller-minimalistic" />
         {displayRelayUrl(url)}
       </div>
-      <input type="checkbox" value={url} class="toggle toggle-primary" checked={urls.includes(url)} on:change={onUrlChange} />
+      <input
+        type="checkbox"
+        value={url}
+        class="toggle toggle-primary"
+        checked={urls.includes(url)}
+        on:change={onUrlChange} />
     </div>
   {/each}
   <div class="flex flex-row items-center justify-between gap-4">