Work on login screen

src/app/base.ts

@@ -1,6 +1,15 @@
+import {derived} from "svelte/store"
+import {memoize} from '@welshman/lib'
 import type {SignedEvent} from "@welshman/util"
-import {Repository, Relay} from "@welshman/util"
+import {Repository, createEvent, Relay} from "@welshman/util"
+import {getter} from "@welshman/store"
 import {NetworkContext, Tracker} from "@welshman/net"
+import type {ISigner} from "@welshman/signer"
+import {Nip46Broker, Nip46Signer, Nip07Signer, Nip01Signer} from '@welshman/signer'
+import {synced} from '@lib/util'
+import type {Session} from "@app/types"
+
+export const INDEXER_RELAYS = ["wss://purplepag.es", "wss://relay.damus.io"]
 
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"
 
@@ -10,29 +19,55 @@ export const relay = new Relay(repository)
 
 export const tracker = new Tracker()
 
+export const pk = synced<string | null>('pk', null)
+
+export const sessions = synced<Record<string, Session>>('sessions', {})
+
+export const session = derived([pk, sessions], ([$pk, $sessions]) => $pk ? $sessions[$pk] : null)
+
+export const getSession = getter(session)
+
+export const makeSigner = memoize((session: Session) => {
+  switch (session?.method) {
+    case "extension":
+      return new Nip07Signer()
+    case "privkey":
+      return new Nip01Signer(session.secret!)
+    case "connect":
+      return new Nip46Signer(Nip46Broker.get(session.pubkey, session.secret!, session.handler!))
+    default:
+      return null
+  }
+})
+
+export const signer = derived(session, makeSigner)
+
+export const getSigner = getter(signer)
+
 const seenChallenges = new Set()
 
 Object.assign(NetworkContext, {
   onEvent: (url: string, event: SignedEvent) => tracker.track(event.id, url),
   isDeleted: (url: string, event: SignedEvent) => repository.isDeleted(event),
-  // onAuth: async (url, challenge) => {
-  //   if (seenChallenges.has(challenge)) {
-  //     return
-  //   }
+  onAuth: async (url: string, challenge: string) => {
+    if (seenChallenges.has(challenge)) {
+      return
+    }
 
-  //   seenChallenges.add(challenge)
+    seenChallenges.add(challenge)
 
-  //   const event = await signer.get().signAsUser(
-  //     createEvent(22242, {
-  //       tags: [
-  //         ["relay", url],
-  //         ["challenge", challenge],
-  //       ],
-  //     }),
-  //   )
+    const event = await getSigner()!.sign(
+      createEvent(22242, {
+        tags: [
+          ["relay", url],
+          ["challenge", challenge],
+        ],
+      }),
+    )
 
-  //   NetworkContext.pool.get(url).send(["AUTH", event])
+    NetworkContext.pool.get(url).send(["AUTH", event])
 
-  //   return event
-  // },
+    return event
+  },
 })
+

src/app/commands.ts

@@ -1,16 +1,175 @@
-import {batch, postJson} from "@welshman/lib"
-import {normalizeRelayUrl} from "@welshman/util"
-import {DUFFLEPUD_URL} from "@app/base"
-import {relayInfo} from "@app/state"
+import {get} from 'svelte/store'
+import type {SignedEvent} from '@welshman/util'
+import {batcher, uniq, now, postJson, assoc} from "@welshman/lib"
+import {normalizeRelayUrl, PROFILE, FOLLOWS, MUTES, GROUP_META} from "@welshman/util"
+import {subscribe} from "@welshman/net"
+import type {RelayInfo, HandleInfo, Session} from "@app/types"
+import {splitGroupId} from "@app/domain"
+import {DUFFLEPUD_URL, INDEXER_RELAYS, repository, pk, sessions} from "@app/base"
+import {relayInfo, handleInfo, groupsById, profilesByPubkey, mutesByPubkey} from "@app/state"
 
-export const loadRelay = batch(1000, async (urls: string[]) => {
-  const data = await postJson(`${DUFFLEPUD_URL}/relay/info`, {urls})
+// Session
+
+export const addSession = (session: Session) => {
+  sessions.update(assoc(session.pubkey, session))
+  pk.set(session.pubkey)
+}
+
+// Handle info
+
+export const loadHandleInfo = batcher(800, async (handles: string[]) => {
+  const res = await postJson(`${DUFFLEPUD_URL}/handle/info`, {handles: uniq(handles)})
+  const data: {handle: string, info: HandleInfo}[] = res?.data || []
+
+  handleInfo.update($handleInfo => {
+    for (const {handle, info} of data) {
+      $handleInfo.set(handle, {...info, fetched_at: now()})
+    }
+
+    return $handleInfo
+  })
+
+  return data.map(item => item.info)
+})
+
+export const getHandleInfo = (handle: string) => {
+  const info = get(handleInfo).get(handle)
+
+  if (info?.fetched_at > now() - 3600) {
+    return info
+  }
+
+  return loadHandleInfo(handle)
+}
+
+// Relay info
+
+export const loadRelayInfo = batcher(800, async (urls: string[]) => {
+  const res = await postJson(`${DUFFLEPUD_URL}/relay/info`, {urls: uniq(urls)})
+  const data: {url: string, info: RelayInfo}[] = res?.data || []
 
   relayInfo.update($relayInfo => {
     for (const {url, info} of data) {
-      $relayInfo.set(normalizeRelayUrl(url), info)
+      $relayInfo.set(normalizeRelayUrl(url), {...info, fetched_at: now()})
     }
 
     return $relayInfo
   })
+
+  return data.map(item => item.info)
 })
+
+export const getRelayInfo = (url: string) => {
+  const info = get(relayInfo).get(url)
+
+  if (info?.fetched_at > now() - 3600) {
+    return info
+  }
+
+  return loadRelayInfo(url)
+}
+
+// Group meta
+
+export const getGroup = (groupId: string) => {
+  const group = get(groupsById).get(groupId)
+
+  if (group?.event.fetched_at > now() - 3600) {
+    return group
+  }
+
+  const [url, nom] = splitGroupId(groupId)
+
+  const sub = subscribe({
+    relays: [url],
+    filters: [{kinds: [GROUP_META], '#d': [groupId]}],
+    closeOnEose: true,
+  })
+
+  sub.emitter.on('event', (url: string, e: SignedEvent) => {
+    e.fetched_at = now()
+    repository.publish(e)
+    console.log(e)
+  })
+}
+
+// Profile
+
+export const getProfile = (pubkey: string, relays = []) => {
+  const profile = get(profilesByPubkey).get(pubkey)
+
+  if (profile?.event.fetched_at > now() - 3600) {
+    return profile
+  }
+
+  return new Promise(resolve => {
+    const sub = subscribe({
+      relays: [...relays, ...INDEXER_RELAYS],
+      filters: [{kinds: [PROFILE], authors: [pubkey]}],
+      closeOnEose: true,
+    })
+
+    sub.emitter.on('event', (url: string, e: SignedEvent) => {
+      e.fetched_at = now()
+      repository.publish(e)
+      console.log(e)
+      resolve(e)
+    })
+
+    sub.emitter.on('close', () => resolve(null))
+  })
+}
+
+// Follows
+
+export const getFollows = (pubkey: string, relays = []) => {
+  const follows = get(followsByPubkey).get(pubkey)
+
+  if (follows?.event.fetched_at > now() - 3600) {
+    return follows
+  }
+
+  return new Promise(resolve => {
+    const sub = subscribe({
+      relays: [...relays, ...INDEXER_RELAYS],
+      filters: [{kinds: [FOLLOWS], authors: [pubkey]}],
+      closeOnEose: true,
+    })
+
+    sub.emitter.on('event', (url: string, e: SignedEvent) => {
+      e.fetched_at = now()
+      repository.publish(e)
+      console.log(e)
+      resolve(e)
+    })
+
+    sub.emitter.on('close', () => resolve(null))
+  })
+}
+
+// Mutes
+
+export const getMutes = (pubkey: string, relays = []) => {
+  const mutes = get(mutesByPubkey).get(pubkey)
+
+  if (mutes?.event.fetched_at > now() - 3600) {
+    return mutes
+  }
+
+  return new Promise(resolve => {
+    const sub = subscribe({
+      relays: [...relays, ...INDEXER_RELAYS],
+      filters: [{kinds: [MUTES], authors: [pubkey]}],
+      closeOnEose: true,
+    })
+
+    sub.emitter.on('event', (url: string, e: SignedEvent) => {
+      e.fetched_at = now()
+      repository.publish(e)
+      console.log(e)
+      resolve(e)
+    })
+
+    sub.emitter.on('close', () => resolve(null))
+  })
+}

src/app/components/InfoNip29.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import Button from "@lib/components/Button.svelte"
   import Link from '@lib/components/Link.svelte'
   import Icon from '@lib/components/Icon.svelte'
   import {clip} from '@app/toast'
 </script>
 
 <div class="column gap-4">
-  <h1 class="heading">What is a relay?</h1>
+  <div class="py-2">
+    <h1 class="heading">What is a relay?</h1>
+  </div>
   <p>
     Flotilla hosts spaces on the <Link external href="https://nostr.com/">Nostr protocol</Link>.
     Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's language.
@@ -19,11 +22,11 @@
   </p>
   <div class="card flex-row justify-between">
     devrelay.highlighter.com
-    <button on:click={() => clip('devrelay.highlighter.com')}>
+    <Button on:click={() => clip('devrelay.highlighter.com')}>
       <Icon icon="copy" />
-    </button>
+    </Button>
   </div>
-  <button class="btn btn-primary" on:click={() => history.back()}>
+  <Button class="btn btn-primary" on:click={() => history.back()}>
     Got it
-  </button>
+  </Button>
 </div>

src/app/components/InfoNostr.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Link from '@lib/components/Link.svelte'
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from "@lib/components/Button.svelte"
+  import {clip} from '@app/toast'
+</script>
+
+<div class="column gap-4">
+  <div class="py-2">
+    <h1 class="heading">What is Nostr?</h1>
+  </div>
+  <p>
+    <Link external href="https://nostr.com/">Nostr</Link> is way to build social apps that talk to eachother.
+    Users own their social identity instead of renting it from a tech company, and can bring it with them from
+    app to app.
+  </p>
+  <p>
+    This can be a little confusing when you're just getting started, but as long as you're using Flotilla, it
+    will work just like a normal app. When you're ready to start exploring nostr, visit your settings page to
+    learn more.
+  </p>
+  <Button class="btn btn-primary" on:click={() => history.back()}>
+    Got it
+  </Button>
+</div>

src/app/components/Landing.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import CardButton from '@lib/components/CardButton.svelte'
+  import LogIn from '@app/components/LogIn.svelte'
+  import SignUp from '@app/components/SignUp.svelte'
+  import {pushModal} from '@app/modal'
+
+  const logIn = () => pushModal(LogIn)
+
+  const signUp = () => pushModal(SignUp)
+</script>
+
+<div class="column gap-4">
+  <div class="py-2">
+    <h1 class="heading">Welcome to Flotilla!</h1>
+    <p class="text-center">The chat app built for sovereign communities.</p>
+  </div>
+  <CardButton icon="login-2" title="Log in" on:click={logIn}>
+    If you've been here before, you know the drill.
+  </CardButton>
+  <CardButton icon="add-circle" title="Create an account" on:click={signUp}>
+    Just a few questions and you'll be on your way.
+  </CardButton>
+</div>

src/app/components/LogIn.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import {nip19} from 'nostr-tools'
+  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 CardButton from '@lib/components/CardButton.svelte'
+  import InfoNostr from '@app/components/LogIn.svelte'
+  import {pushModal, clearModal} from '@app/modal'
+  import {pushToast} from '@app/toast'
+  import {getProfile, getFollows, getMutes, getHandleInfo, addSession} from '@app/commands'
+
+  const back = () => history.back()
+
+  const tryLogin = async () => {
+    const secret = makeSecret()
+    const handle = await getHandleInfo(`${username}@${handler.domain}`)
+
+    if (!handle?.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 broker = Nip46Broker.get(pubkey, secret, handler)
+    const [profile, success] = await Promise.all([
+      getProfile(pubkey, relays),
+      getFollows(pubkey, relays),
+      getMutes(pubkey, relays),
+      broker.connect(),
+    ])
+
+    if (success) {
+      addSession({method: "nip46", pubkey, secret, handler})
+      pushToast({message: "Successfully logged in!"})
+      clearModal()
+    } else {
+      pushToast({
+        theme: "error",
+        message: "Something went wrong! Please try again."
+      })
+    }
+  }
+
+  const login = async () => {
+    loading = true
+
+    try {
+      await tryLogin()
+    } 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={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>
+  <Field>
+    <div class="flex gap-2 items-center" slot="input">
+      <label class="input input-bordered w-full flex 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={loading}>
+      <span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
+      Log In
+      <Icon icon="alt-arrow-right" />
+    </Button>
+    <div class="text-sm">
+      Need an account?
+      <Button class="link" on:click={back}>
+        Register
+      </Button>
+    </div>
+  </div>
+</form>

src/app/components/PrimaryNav.svelte

@@ -10,32 +10,32 @@
   import Icon from "@lib/components/Icon.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from '@app/components/SpaceAdd.svelte'
-  import {getGroupName, getGroupPicture, makeGroupId} from "@app/domain"
-  import {userGroupRelaysByNom, groupsById} from "@app/state"
+  import {makeGroupId} from "@app/domain"
+  import {session} from "@app/base"
+  import {userGroupRelaysByNom, groupsById, deriveProfile} from "@app/state"
   import {pushModal} from "@app/modal"
 
   export const addSpace = () => pushModal(SpaceAdd)
 
   export const browseSpaces = () => goto("/browse")
+
+  const profile = deriveProfile($session?.pubkey)
 </script>
 
 <div class="relative w-14 bg-base-100">
   <div class="absolute -top-[44px] z-nav-active ml-2 h-[144px] w-12 bg-base-300" />
   <div class="flex h-full flex-col justify-between">
     <div>
-      <PrimaryNavItem title="Hodlbod">
+      <PrimaryNavItem title={$profile?.name}>
         <div class="w-10 rounded-full border border-solid border-base-300">
-          <img
-            alt=""
-            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+          <img alt="" src={$profile?.picture} />
         </div>
       </PrimaryNavItem>
       {#each $userGroupRelaysByNom.entries() as [nom, relays] (nom)}
-        {@const event = $groupsById.get(makeGroupId(relays[0], nom))}
-        {@const name = getGroupName(event)}
-        <PrimaryNavItem title={name}>
+        {@const group = $groupsById.get(makeGroupId(relays[0], nom))}
+        <PrimaryNavItem title={group.name}>
           <div class="w-10 rounded-full border border-solid border-base-300">
-            <img alt={name} src={getGroupPicture(event)} />
+            <img alt={group.name} src={group.picture} />
           </div>
         </PrimaryNavItem>
       {/each}

src/app/components/SignUp.svelte

@@ -0,0 +1 @@
+

src/app/components/SpaceAdd.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Button from "@lib/components/Button.svelte"
   import CardButton from '@lib/components/CardButton.svelte'
   import SpaceCreate from '@app/components/SpaceCreate.svelte'
   import SpaceJoin from '@app/components/SpaceJoin.svelte'
@@ -10,15 +11,17 @@
 </script>
 
 <div class="column gap-4">
-  <h1 class="heading">Add a Space</h1>
-  <p class="text-center">Spaces are places where communities come together to work, play, and hang out.</p>
+  <div class="py-2">
+    <h1 class="heading">Add a Space</h1>
+    <p class="text-center">Spaces are places where communities come together to work, play, and hang out.</p>
+  </div>
   <CardButton icon="add-circle" title="Get started" on:click={startCreate}>
     Just a few questions and you'll be on your way.
   </CardButton>
   <div class="card column gap-4">
     <h2 class="subheading">Have an invite?</h2>
-    <button class="btn btn-primary" on:click={startJoin}>
+    <Button class="btn btn-primary" on:click={startJoin}>
       Join a Space
-    </button>
+    </Button>
   </div>
 </div>

src/app/components/SpaceCreate.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import InputProfilePicture from '@lib/components/InputProfilePicture.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'
@@ -10,18 +11,18 @@
 
   const next = () => pushModal(SpaceCreateFinish)
 
-  const showNip29Info = () => pushModal(InfoNip29)
-
   let file: File
   let name = ""
   let relay = ""
 </script>
 
-<div class="column gap-4">
-  <h1 class="heading">Customize your Space</h1>
-  <p class="text-center">
-    Give people a few details to go on. You can always change this later.
-  </p>
+<form class="column gap-4" on:submit|preventDefault={next}>
+  <div class="py-2">
+    <h1 class="heading">Customize your Space</h1>
+    <p class="text-center">
+      Give people a few details to go on. You can always change this later.
+    </p>
+  </div>
   <div class="flex justify-center py-2">
     <InputProfilePicture bind:file />
   </div>
@@ -40,19 +41,19 @@
     </label>
     <p slot="info">
       This should be a NIP-29 compatible nostr relay where you'd like to host your space.
-      <button class="text-primary underline cursor-pointer" on:click={showNip29Info}>
+      <Button class="link" on:click={() => pushModal(InfoNip29)}>
         More information
-      </button>
+      </Button>
     </p>
   </Field>
   <div class="flex flex-row justify-between items-center gap-4">
-    <button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
-    </button>
-    <button class="btn btn-primary" on:click={next}>
+    </Button>
+    <Button type="submit" class="btn btn-primary">
       Next
       <Icon icon="alt-arrow-right" class="!bg-base-300" />
-    </button>
+    </Button>
   </div>
-</div>
+</form>

src/app/components/SpaceJoin.svelte

@@ -1,45 +1,85 @@
 <script lang="ts">
   import {goto} from '$app/navigation'
   import CardButton from '@lib/components/CardButton.svelte'
+  import Button from "@lib/components/Button.svelte"
   import Field from '@lib/components/Field.svelte'
   import Icon from '@lib/components/Icon.svelte'
   import SpaceCreateFinish from '@app/components/SpaceCreateFinish.svelte'
+  import {splitGroupId, GROUP_DELIMITER} from '@app/domain'
+  import {getRelayInfo, getGroup} from '@app/commands'
   import {pushModal} from '@app/modal'
+  import {pushToast} from '@app/toast'
+  import {relayInfo} from '@app/state'
 
   const back = () => history.back()
 
   const browse = () => goto("/browse", {state: {}})
 
-  const join = () => {}
+  const tryJoin = async () => {
+    const [url, nom] = splitGroupId(id)
 
-  let link = ""
+    const info = await getRelayInfo(url)
 
-  $: linkIsValid = Boolean(link.match(/.+\..+'.+/))
+    if (!info) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, we weren't able to find that relay."
+      })
+    }
+
+    if (!info.supported_nips?.includes(29)) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like that relay doesn't support nostr groups."
+      })
+    }
+
+    const group = await getGroup(id)
+    console.log(info, group)
+  }
+
+  const join = async () => {
+    loading = true
+
+    try {
+      await tryJoin()
+    } finally {
+      loading = false
+    }
+  }
+
+  let id = "wss://devrelay.highlighter.com'group628195"
+  let loading = false
+
+  $: linkIsValid = Boolean(id.match(/.+\..+'.+/))
 </script>
 
-<div class="column gap-4">
-  <h1 class="heading">Join a Space</h1>
-  <p class="text-center">
-    Enter an invite link below to join an existing space.
-  </p>
+<form class="column gap-4" on:submit|preventDefault={join}>
+  <div class="py-2">
+    <h1 class="heading">Join a Space</h1>
+    <p class="text-center">
+      Enter an invite link below to join an existing space.
+    </p>
+  </div>
   <Field>
     <p slot="label">Invite Link*</p>
     <label class="input input-bordered w-full flex items-center gap-2" slot="input">
       <Icon icon="link-round" />
-      <input bind:value={link} class="grow" type="text" />
+      <input bind:value={id} class="grow" type="text" />
     </label>
   </Field>
   <CardButton icon="compass" title="Don't have an invite?" on:click={browse}>
     Browse other spaces on the discover page.
   </CardButton>
   <div class="flex flex-row justify-between items-center gap-4">
-    <button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
-    </button>
-    <button class="btn btn-primary" on:click={join} disabled={!linkIsValid}>
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={!linkIsValid || loading}>
+      <span class="loading loading-spinner opacity-0" class:opacity-100={loading} />
       Join Space
-      <Icon icon="alt-arrow-right" class="!bg-base-300" />
-    </button>
+      <Icon icon="alt-arrow-right" />
+    </Button>
   </div>
-</div>
+</form>

src/app/components/Toast.svelte

@@ -6,7 +6,7 @@
 {#if $toast}
   {#key $toast.id}
     <div transition:fly class="toast z-toast">
-      <div role="alert" class="alert flex justify-center">
+      <div role="alert" class="alert flex justify-center" class:alert-error={$toast.theme === "error"}>
         {$toast.message}
       </div>
     </div>

src/app/domain.ts

@@ -7,6 +7,12 @@ export const GROUP_DELIMITER = `'`
 export const makeGroupId = (url: string, nom: string) =>
   [stripProtocol(url), nom].join(GROUP_DELIMITER)
 
+export const splitGroupId = (groupId: string) => {
+  const [url, nom] = groupId.split(GROUP_DELIMITER)
+
+  return [normalizeRelayUrl(url), nom]
+}
+
 export const getGroupNom = (e: TrustedEvent) => getIdentifier(e)?.split(GROUP_DELIMITER)[1]
 
 export const getGroupUrl = (e: TrustedEvent) => {

src/app/modal.ts

@@ -1,7 +1,9 @@
 import type {ComponentType} from "svelte"
-import {randomId} from "@welshman/lib"
+import {randomId, Emitter} from "@welshman/lib"
 import {goto} from "$app/navigation"
 
+export const emitter = new Emitter()
+
 export const modals = new Map()
 
 export const pushModal = (component: ComponentType, props: Record<string, any> = {}) => {
@@ -14,4 +16,7 @@ export const pushModal = (component: ComponentType, props: Record<string, any> =
   return id
 }
 
-export const clearModal = () => goto('#')
+export const clearModal = () => {
+  goto('#')
+  emitter.emit('close')
+}

src/app/state.ts

@@ -1,27 +1,66 @@
 import {writable, derived} from "svelte/store"
 import {pushToMapKey, indexBy} from "@welshman/lib"
-import {getIdentifier, GROUP_META, GROUPS, getGroupTagValues} from "@welshman/util"
+import {getIdentifier, getPubkeyTagValues, GROUP_META, PROFILE, FOLLOWS, MUTES, GROUPS, getGroupTagValues} from "@welshman/util"
 import {deriveEvents} from "@welshman/store"
-import {repository} from "@app/base"
-import {getGroupUrl, GROUP_DELIMITER} from "@app/domain"
-
-export const pk = writable<string | null>(null)
-
-export const sessions = writable(new Map())
-
-export const session = derived([pk, sessions], ([$pk, $sessions]) => $sessions.get($pk))
+import {synced, parseJson} from '@lib/util'
+import type {Session} from '@app/types'
+import {repository, pk} from "@app/base"
+import {getGroupNom, getGroupUrl, getGroupName, getGroupPicture, GROUP_DELIMITER} from "@app/domain"
 
 export const relayInfo = writable(new Map())
 
+export const handleInfo = writable(new Map())
+
+export const profileEvents = deriveEvents(repository, {
+  filters: [{kinds: [PROFILE]}],
+})
+
+export const profiles = derived(profileEvents, $profileEvents =>
+  $profileEvents.map(event => ({...parseJson(event.content), event}))
+)
+
+export const profilesByPubkey = derived(profiles, $profiles => indexBy(profile => profile.event.pubkey, $profiles))
+
+export const deriveProfile = (pubkey: string) => derived(profilesByPubkey, $m => $m.get(pubkey))
+
+export const followEvents = deriveEvents(repository, {
+  filters: [{kinds: [FOLLOWS]}],
+})
+
+export const follows = derived(followEvents, $followEvents =>
+  $followEvents.map(event => ({pubkeys: new Set(getPubkeyTagValues(event.tags)), event}))
+)
+
+export const followsByPubkey = derived(follows, $follows => indexBy(follow => follow.event.pubkey, $follows))
+
+export const muteEvents = deriveEvents(repository, {
+  filters: [{kinds: [MUTES]}],
+})
+
+export const mutes = derived(muteEvents, $muteEvents =>
+  $muteEvents.map(event => ({pubkeys: new Set(getPubkeyTagValues(event.tags)), event}))
+)
+
+export const mutesByPubkey = derived(mutes, $mutes => indexBy(mute => mute.event.pubkey, $mutes))
+
 export const groupEvents = deriveEvents(repository, {
   filters: [{kinds: [GROUP_META]}],
 })
 
 export const groups = derived([relayInfo, groupEvents], ([$relayInfo, $groupEvents]) =>
-  $groupEvents.filter(e => $relayInfo.get(getGroupUrl(e))?.pubkey === e.pubkey),
+  $groupEvents
+    .map(event => ({
+      event,
+      id: getIdentifier(event),
+      nom: getGroupNom(event),
+      url: getGroupUrl(event),
+      name: getGroupName(event),
+      picture: getGroupPicture(event),
+    }))
+    .filter(group => $relayInfo.get(group.url)?.pubkey === group.event.pubkey)
 )
 
-export const groupsById = derived(groups, $groups => indexBy(getIdentifier, $groups))
+export const groupsById = derived(groups, $groups => indexBy(group => group.id, $groups))
 
 export const groupsEvents = deriveEvents(repository, {
   filters: [{kinds: [GROUPS]}],

src/app/toast.ts

@@ -2,25 +2,24 @@ import {writable} from "svelte/store"
 import {randomId} from "@welshman/lib"
 import {copyToClipboard} from '@lib/html'
 
-export type Toast = {
-  id: string
+export type ToastParams = {
   message: string
-  options: ToastOptions
+  timeout?: number
+  theme?: "error"
 }
 
-export type ToastOptions = {
-  timeout?: number
+export type Toast = ToastParams & {
+  id: string
 }
 
 export const toast = writable<Toast | null>(null)
 
-export const pushToast = (
-  {message = "", id = randomId()}: Partial<Toast>,
-  options: ToastOptions = {},
-) => {
-  toast.set({id, message, options})
+export const pushToast = (params: ToastParams) => {
+  const id = randomId()
 
-  setTimeout(() => popToast(id), options.timeout || 5000)
+  toast.set({id, ...params})
+
+  setTimeout(() => popToast(id), params.timeout || 5000)
 
   return id
 }

src/app/types.ts

@@ -0,0 +1,20 @@
+import type {Nip46Handler} from "@welshman/signer"
+
+export type Session = {
+  method: string
+  pubkey: string
+  secret?: string
+  handler?: Nip46Handler
+}
+
+export type RelayInfo = {
+  fetched_at: number
+}
+
+export type HandleInfo = {
+  pubkey: string
+  nip05: string
+  nip46: string[]
+  relays: string[]
+  fetched_at: number
+}