Use new collection pattern

src/app/components/LogIn.svelte

@@ -8,13 +8,14 @@
   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'
+  import {addSession} from '@app/base'
+  import {loadProfile, loadFollows, loadMutes, loadHandle} from '@app/state'
 
   const back = () => history.back()
 
   const tryLogin = async () => {
     const secret = makeSecret()
-    const handle = await getHandleInfo(`${username}@${handler.domain}`)
+    const handle = await loadHandle(`${username}@${handler.domain}`)
 
     if (!handle?.pubkey) {
       return pushToast({
@@ -26,9 +27,9 @@
     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),
+      loadProfile(pubkey, relays),
+      loadFollows(pubkey, relays),
+      loadMutes(pubkey, relays),
       broker.connect(),
     ])
 

src/app/components/PrimaryNav.svelte

@@ -10,16 +10,16 @@
   import Icon from "@lib/components/Icon.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import SpaceAdd from '@app/components/SpaceAdd.svelte'
-  import {makeGroupId} from "@app/domain"
   import {session} from "@app/base"
-  import {userGroupRelaysByNom, groupsById, deriveProfile} from "@app/state"
+  import {deriveGroupMembership, makeGroupId, getGroup, deriveProfile} from "@app/state"
   import {pushModal} from "@app/modal"
 
   export const addSpace = () => pushModal(SpaceAdd)
 
   export const browseSpaces = () => goto("/browse")
 
-  const profile = deriveProfile($session?.pubkey)
+  $: profile = deriveProfile($session?.pubkey)
+  $: membership = deriveGroupMembership($session?.pubkey)
 </script>
 
 <div class="relative w-14 bg-base-100">
@@ -27,17 +27,24 @@
   <div class="flex h-full flex-col justify-between">
     <div>
       <PrimaryNavItem title={$profile?.name}>
-        <div class="w-10 rounded-full border border-solid border-base-300">
-          <img alt="" src={$profile?.picture} />
+        <div class="!flex w-10 items-center justify-center rounded-full border border-solid border-base-300">
+          {#if $profile?.picture}
+            <img alt="" src={$profile.picture} />
+          {:else}
+            <Icon icon="user-rounded" size={7} />
+          {/if}
         </div>
       </PrimaryNavItem>
-      {#each $userGroupRelaysByNom.entries() as [nom, relays] (nom)}
-        {@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={group.name} src={group.picture} />
-          </div>
-        </PrimaryNavItem>
+      {#each Array.from($membership?.ids || []) as groupId (groupId)}
+        {#await getGroup(groupId)}
+          <!-- pass -->
+        {:then group}
+          <PrimaryNavItem title={group?.name}>
+            <div class="w-10 rounded-full border border-solid border-base-300">
+              <img alt={group?.name} src={group?.picture} />
+            </div>
+          </PrimaryNavItem>
+        {/await}
       {/each}
       <PrimaryNavItem title="Add Space" on:click={addSpace}>
         <div class="!flex w-10 items-center justify-center">

src/app/components/SpaceJoin.svelte

@@ -5,11 +5,9 @@
   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'
+  import {GROUP_DELIMITER, splitGroupId, loadRelay, loadGroup} from '@app/state'
 
   const back = () => history.back()
 
@@ -18,7 +16,7 @@
   const tryJoin = async () => {
     const [url, nom] = splitGroupId(id)
 
-    const info = await getRelayInfo(url)
+    const info = await loadRelay(url)
 
     if (!info) {
       return pushToast({
@@ -34,8 +32,7 @@
       })
     }
 
-    const group = await getGroup(id)
-    console.log(info, group)
+    const group = await loadGroup(id)
   }
 
   const join = async () => {