Add remove group, format

src/app/components/GroupNote.svelte

@@ -1,35 +1,37 @@
 <script lang="ts">
-  import {readable} from 'svelte/store'
-  import type {CustomEvent} from '@welshman/util'
-  import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from '@welshman/util'
-  import {deriveEvent} from '@welshman/store'
-  import {fly} from '@lib/transition'
-  import Icon from '@lib/components/Icon.svelte'
-  import Avatar from '@lib/components/Avatar.svelte'
-  import {repository} from '@app/base'
-  import {deriveProfile} from '@app/state'
+  import {readable} from "svelte/store"
+  import type {CustomEvent} from "@welshman/util"
+  import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from "@welshman/util"
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Avatar from "@lib/components/Avatar.svelte"
+  import {repository} from "@app/base"
+  import {deriveProfile, deriveEvent} from "@app/state"
 
   export let event: CustomEvent
   export let showPubkey: boolean
 
   const profile = deriveProfile(event.pubkey)
   const {replies} = getAncestorTags(event.tags)
-  const parentEvent = replies.length > 0
-    ? deriveEvent(repository, replies[0][1])
-    : readable(null)
+  const parentEvent =
+    replies.length > 0 ? deriveEvent(replies[0][1], [replies[0][2]]) : readable(null)
 
-  $: parentProfile = deriveProfile($parentEvent?.pubkey)
+  $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
+  $: parentProfile = deriveProfile(parentPubkey)
 </script>
 
-<div in:fly>
+<div in:fly class="group relative flex flex-col gap-1 p-2 transition-colors hover:bg-base-300">
   {#if event.kind === GROUP_REPLY}
-    <div class="pl-12">
-      <div class="text-xs flex gap-1">
-        <Icon icon="arrow-right" />
-        <Avatar src={$parentProfile?.picture} size={4}/>
-        <p class="text-primary">{displayProfile($parentProfile, displayPubkey($parentEvent.pubkey))}<p>
-        <p class="whitespace-nowrap overflow-hidden text-ellipsis">{$parentEvent.content}</p>
-      </div>
+    <div class="flex items-center gap-1 pl-12 text-xs">
+      <Icon icon="arrow-right" />
+      <Avatar src={$parentProfile?.picture} size={4} />
+      <p class="text-primary">{displayProfile($parentProfile, displayPubkey(parentPubkey))}</p>
+      <p></p>
+      <p
+        class="flex cursor-pointer items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
+        <Icon icon="square-share-line" size={3} />
+        {$parentEvent?.content || "View note"}
+      </p>
     </div>
   {/if}
   <div class="flex gap-2">
@@ -40,9 +42,22 @@
     {/if}
     <div class="-mt-1">
       {#if showPubkey}
-        <strong class="text-sm text-primary">{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
+        <strong class="text-sm text-primary"
+          >{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
       {/if}
       <p class="text-sm">{event.content}</p>
     </div>
   </div>
+  <div
+    class="join absolute -top-2 right-0 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100">
+    <button class="btn join-item btn-xs">
+      <Icon icon="reply" size={4} />
+    </button>
+    <button class="btn join-item btn-xs">
+      <Icon icon="smile-circle" size={4} />
+    </button>
+    <button class="btn join-item btn-xs">
+      <Icon icon="menu-dots" size={4} />
+    </button>
+  </div>
 </div>

src/app/components/InfoNip29.svelte

@@ -1,8 +1,8 @@
 <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'
+  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">
@@ -15,18 +15,17 @@
     This means that anyone can host their own data, making the web more decentralized and resilient.
   </p>
   <p>
-    Only some relays support spaces. You can find a list of suggested relays below,
-    or you can <Link external href="https://coracle.tools">host your own</Link>.
-    If you do decide to join someone else's, make sure to follow their directions for registering
+    Only some relays support spaces. You can find a list of suggested relays below, or you can <Link
+      external
+      href="https://coracle.tools">host your own</Link
+    >. If you do decide to join someone else's, make sure to follow their directions for registering
     as a user.
   </p>
   <div class="card2 flex-row justify-between">
     groups.fiatjaf.com
-    <Button on:click={() => clip('groups.fiatjaf.com')}>
+    <Button on:click={() => clip("groups.fiatjaf.com")}>
       <Icon icon="copy" />
     </Button>
   </div>
-  <Button class="btn btn-primary" on:click={() => history.back()}>
-    Got it
-  </Button>
+  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/InfoNostr.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Link from '@lib/components/Link.svelte'
-  import Icon from '@lib/components/Icon.svelte'
+  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'
+  import {clip} from "@app/toast"
 </script>
 
 <div class="column gap-4">
@@ -11,15 +11,13 @@
   </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.
+    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.
+    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>
+  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/Landing.svelte

@@ -1,8 +1,8 @@
 <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'
+  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)
 

src/app/components/LogIn.svelte

@@ -1,16 +1,16 @@
 <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 Spinner from '@lib/components/Spinner.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 {addSession} from '@app/base'
-  import {loadHandle} from '@app/state'
+  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 Spinner from "@lib/components/Spinner.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 {addSession} from "@app/base"
+  import {loadHandle} from "@app/state"
 
   const back = () => history.back()
 
@@ -22,7 +22,7 @@
     if (!handle?.pubkey) {
       return pushToast({
         theme: "error",
-        message: "Sorry, it looks like you don't have an account yet. Try signing up instead."
+        message: "Sorry, it looks like you don't have an account yet. Try signing up instead.",
       })
     }
 
@@ -36,7 +36,7 @@
     } else {
       pushToast({
         theme: "error",
-        message: "Something went wrong! Please try again."
+        message: "Something went wrong! Please try again.",
       })
     }
   }
@@ -66,14 +66,13 @@
     <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.
+      <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">
+    <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>
@@ -87,9 +86,7 @@
     </Button>
     <div class="text-sm">
       Need an account?
-      <Button class="link" on:click={back}>
-        Register
-      </Button>
+      <Button class="link" on:click={back}>Register</Button>
     </div>
   </div>
 </form>

src/app/components/PrimaryNav.svelte

@@ -7,24 +7,32 @@
 
 <script lang="ts">
   import {page} from "$app/stores"
-  import {goto} from '$app/navigation'
-  import {derived} from 'svelte/store'
-	import {tweened} from 'svelte/motion'
-	import {quintOut} from 'svelte/easing'
-  import {identity, nth} from '@welshman/lib'
+  import {goto} from "$app/navigation"
+  import {derived} from "svelte/store"
+  import {tweened} from "svelte/motion"
+  import {quintOut} from "svelte/easing"
+  import {identity, nth} from "@welshman/lib"
   import Icon from "@lib/components/Icon.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
-  import SpaceAdd from '@app/components/SpaceAdd.svelte'
+  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import {session} from "@app/base"
-  import {userProfile, userGroupsByNom, makeGroupId, loadGroup, deriveProfile, qualifiedGroupsById, splitGroupId} from "@app/state"
+  import {
+    userProfile,
+    userGroupsByNom,
+    makeGroupId,
+    loadGroup,
+    deriveProfile,
+    qualifiedGroupsById,
+    splitGroupId,
+  } from "@app/state"
   import {pushModal} from "@app/modal"
   import {getPrimaryNavItemIndex} from "@app/routes"
 
   const activeOffset = tweened(-44, {
-		duration: 300,
-		easing: quintOut
-	})
+    duration: 300,
+    easing: quintOut,
+  })
 
   const addSpace = () => pushModal(SpaceAdd)
 
@@ -42,7 +50,7 @@
   $: {
     if (element) {
       const index = getPrimaryNavItemIndex($page)
-      const navItems: any = Array.from(element.querySelectorAll('.z-nav-item') || [])
+      const navItems: any = Array.from(element.querySelectorAll(".z-nav-item") || [])
 
       activeOffset.set(navItems[index].offsetTop - 44)
     }
@@ -50,11 +58,16 @@
 </script>
 
 <div class="relative w-14 bg-base-100" bind:this={element}>
-  <div class="absolute z-nav-active ml-2 h-[144px] w-12 bg-base-300" style={`top: ${$activeOffset}px`} />
+  <div
+    class="absolute z-nav-active ml-2 h-[144px] w-12 bg-base-300"
+    style={`top: ${$activeOffset}px`} />
   <div class="flex h-full flex-col justify-between">
     <div>
       <PrimaryNavItem on:click={gotoHome}>
-        <Avatar src={$userProfile?.picture} class="border border-solid border-base-300 !w-10 !h-10" size={7} />
+        <Avatar
+          src={$userProfile?.picture}
+          class="!h-10 !w-10 border border-solid border-base-300"
+          size={7} />
       </PrimaryNavItem>
       {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
         {@const qualifiedGroup = qualifiedGroups[0]}

src/app/components/SecondaryNav.svelte

@@ -1,50 +1,59 @@
 <script lang="ts">
   import {page} from "$app/stores"
-  import {fly} from '@lib/transition'
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
-  import {getPrimaryNavItem} from '@app/routes'
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import SecondaryNavForSpace from "@app/components/SecondaryNavForSpace.svelte"
+  import {getPrimaryNavItem} from "@app/routes"
 </script>
 
-<div class="flex w-60 flex-col gap-1 bg-base-300 px-2 py-4">
-  {#if getPrimaryNavItem($page) === 'discover'}
-    <div in:fly>
-      <SecondaryNavItem href="/spaces">
-        <Icon icon="widget" /> Spaces
-      </SecondaryNavItem>
-    </div>
-    <div in:fly={{delay: 50}}>
-      <SecondaryNavItem href="/themes">
-        <Icon icon="pallete-2" /> Themes
-      </SecondaryNavItem>
-    </div>
-  {:else if getPrimaryNavItem($page) === 'space'}
-    <!-- pass -->
-  {:else if getPrimaryNavItem($page) === 'settings'}
+<div class="flex w-60 flex-col gap-1 bg-base-300">
+  {#if getPrimaryNavItem($page) === "discover"}
+    <SecondaryNavSection>
+      <div in:fly>
+        <SecondaryNavItem href="/spaces">
+          <Icon icon="widget" /> Spaces
+        </SecondaryNavItem>
+      </div>
+      <div in:fly={{delay: 50}}>
+        <SecondaryNavItem href="/themes">
+          <Icon icon="pallete-2" /> Themes
+        </SecondaryNavItem>
+      </div>
+    </SecondaryNavSection>
+  {:else if getPrimaryNavItem($page) === "space"}
+    {#key $page.params.nom}
+      <SecondaryNavForSpace nom={$page.params.nom} />
+    {/key}
+  {:else if getPrimaryNavItem($page) === "settings"}
     <!-- pass -->
   {:else}
-    <div in:fly>
-      <SecondaryNavItem href="/home">
-        <Icon icon="home-smile" /> Home
-      </SecondaryNavItem>
-    </div>
-    <div in:fly={{delay: 50}}>
-      <SecondaryNavItem href="/people">
-        <Icon icon="user-heart" /> People
-      </SecondaryNavItem>
-    </div>
-    <div in:fly={{delay: 100}}>
-      <SecondaryNavItem href="/notes">
-        <Icon icon="clipboard-text" /> Saved Notes
-      </SecondaryNavItem>
-    </div>
-    <div
-      in:fly={{delay: 150}}
-      class="flex items-center justify-between px-4 py-2 text-sm font-bold uppercase">
-      Conversations
-      <div class="cursor-pointer">
-        <Icon icon="add-circle" />
+    <SecondaryNavSection>
+      <div in:fly>
+        <SecondaryNavItem href="/home">
+          <Icon icon="home-smile" /> Home
+        </SecondaryNavItem>
       </div>
-    </div>
+      <div in:fly={{delay: 50}}>
+        <SecondaryNavItem href="/people">
+          <Icon icon="user-heart" /> People
+        </SecondaryNavItem>
+      </div>
+      <div in:fly={{delay: 100}}>
+        <SecondaryNavItem href="/notes">
+          <Icon icon="clipboard-text" /> Saved Notes
+        </SecondaryNavItem>
+      </div>
+      <div in:fly={{delay: 150}}>
+        <SecondaryNavHeader>
+          Conversations
+          <div class="cursor-pointer">
+            <Icon icon="add-circle" />
+          </div>
+        </SecondaryNavHeader>
+      </div>
+    </SecondaryNavSection>
   {/if}
 </div>

src/app/components/SecondaryNavForSpace.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import SpaceExit from "@app/components/SpaceExit.svelte"
+  import {deriveGroup} from "@app/state"
+  import {pushModal} from "@app/modal"
+  import {removeGroupMemberships} from "@app/commands"
+
+  export let nom
+
+  const group = deriveGroup(nom)
+
+  const openMenu = () => {
+    showMenu = true
+  }
+
+  const toggleMenu = () => {
+    showMenu = !showMenu
+  }
+
+  const leaveSpace = () => pushModal(SpaceExit, {nom})
+
+  let showMenu = false
+</script>
+
+<SecondaryNavSection>
+  <div>
+    <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
+      <strong>{$group?.name || "[no name]"}</strong>
+      <Icon icon="alt-arrow-down" />
+    </SecondaryNavItem>
+    {#if showMenu}
+      <Popover onClose={toggleMenu}>
+        <ul
+          transition:fly|local
+          class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+          <li class="text-error">
+            <Button on:click={leaveSpace}>
+              <Icon icon="exit" />
+              Leave Space
+            </Button>
+          </li>
+        </ul>
+      </Popover>
+    {/if}
+  </div>
+  <div class="h-2" />
+  <SecondaryNavHeader>
+    Rooms
+    <div class="cursor-pointer">
+      <Icon icon="add-circle" />
+    </div>
+  </SecondaryNavHeader>
+  <div in:fly>
+    <SecondaryNavItem href="/spaces">
+      <Icon icon="hashtag" /> Spaces
+    </SecondaryNavItem>
+  </div>
+  <div in:fly={{delay: 50}}>
+    <SecondaryNavItem href="/themes">
+      <Icon icon="hashtag" /> Themes
+    </SecondaryNavItem>
+  </div>
+</SecondaryNavSection>

src/app/components/SignUp.svelte

@@ -1 +0,0 @@
-

src/app/components/SpaceAdd.svelte

@@ -1,9 +1,9 @@
 <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'
-  import {pushModal} from '@app/modal'
+  import CardButton from "@lib/components/CardButton.svelte"
+  import SpaceCreate from "@app/components/SpaceCreate.svelte"
+  import SpaceJoin from "@app/components/SpaceJoin.svelte"
+  import {pushModal} from "@app/modal"
 
   const startCreate = () => pushModal(SpaceCreate)
 
@@ -13,15 +13,15 @@
 <div class="column gap-4">
   <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>
+    <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="card2 column gap-4">
     <h2 class="subheading">Have an invite?</h2>
-    <Button class="btn btn-primary" on:click={startJoin}>
-      Join a Space
-    </Button>
+    <Button class="btn btn-primary" on:click={startJoin}>Join a Space</Button>
   </div>
 </div>

src/app/components/SpaceCreate.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import InputProfilePicture from '@lib/components/InputProfilePicture.svelte'
+  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'
-  import SpaceCreateFinish from '@app/components/SpaceCreateFinish.svelte'
-  import {pushModal} from '@app/modal'
+  import Field from "@lib/components/Field.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import InfoNip29 from "@app/components/InfoNip29.svelte"
+  import SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
+  import {pushModal} from "@app/modal"
 
   const back = () => history.back()
 
@@ -19,34 +19,30 @@
 <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>
+    <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>
   <Field>
     <p slot="label">Space Name</p>
-    <label class="input input-bordered w-full flex items-center gap-2" slot="input">
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
       <Icon icon="fire-minimalistic" />
       <input bind:value={name} class="grow" type="text" />
     </label>
   </Field>
   <Field>
     <p slot="label">Relay</p>
-    <label class="input input-bordered w-full flex items-center gap-2" slot="input">
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
       <Icon icon="remote-controller-minimalistic" />
       <input bind:value={relay} class="grow" type="text" />
     </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)}>More information</Button>
     </p>
   </Field>
-  <div class="flex flex-row justify-between items-center gap-4">
+  <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

src/app/components/SpaceExit.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import {append, uniqBy} from "@welshman/lib"
+  import {GROUPS} from "@welshman/util"
+  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 SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
+  import {pushModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+  import {GROUP_DELIMITER, splitGroupId, loadRelay, loadGroup, deriveGroup} from "@app/state"
+  import {removeGroupMemberships} from "@app/commands"
+
+  export let nom
+
+  const group = deriveGroup(nom)
+
+  const back = () => history.back()
+
+  const exit = async () => {
+    loading = true
+
+    try {
+      await removeGroupMemberships([nom])
+    } finally {
+      loading = false
+    }
+
+    goto("/home")
+  }
+
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={exit}>
+  <h1 class="heading">
+    You are leaving <span class="text-primary">{$group?.name || "[no name]"}</span>
+  </h1>
+  <p class="text-center">
+    Are you sure you want to leave?
+  </p>
+  <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}>Confirm</Spinner>
+    </Button>
+  </div>
+</form>

src/app/components/SpaceJoin.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-  import {goto} from '$app/navigation'
-  import {append, uniqBy} from '@welshman/lib'
-  import {GROUPS} from '@welshman/util'
-  import CardButton from '@lib/components/CardButton.svelte'
-  import Spinner from '@lib/components/Spinner.svelte'
+  import {goto} from "$app/navigation"
+  import {append, uniqBy} from "@welshman/lib"
+  import {GROUPS} from "@welshman/util"
+  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 SpaceCreateFinish from '@app/components/SpaceCreateFinish.svelte'
-  import {pushModal} from '@app/modal'
-  import {pushToast} from '@app/toast'
-  import {GROUP_DELIMITER, splitGroupId, loadRelay, loadGroup} from '@app/state'
-  import {updateGroupMemberships} from '@app/commands'
+  import Field from "@lib/components/Field.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import SpaceCreateFinish from "@app/components/SpaceCreateFinish.svelte"
+  import {pushModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+  import {GROUP_DELIMITER, splitGroupId, loadRelay, loadGroup} from "@app/state"
+  import {addGroupMemberships} from "@app/commands"
 
   const back = () => history.back()
 
@@ -24,14 +24,14 @@
     if (!relay) {
       return pushToast({
         theme: "error",
-        message: "Sorry, we weren't able to find that relay."
+        message: "Sorry, we weren't able to find that relay.",
       })
     }
 
     if (!relay.supported_nips?.includes(29)) {
       return pushToast({
         theme: "error",
-        message: "Sorry, it looks like that relay doesn't support nostr spaces."
+        message: "Sorry, it looks like that relay doesn't support nostr spaces.",
       })
     }
 
@@ -40,15 +40,15 @@
     if (!group) {
       return pushToast({
         theme: "error",
-        message: "Sorry, we weren't able to find that space."
+        message: "Sorry, we weren't able to find that space.",
       })
     }
 
-    await updateGroupMemberships([["group", nom, url]])
+    await addGroupMemberships([["group", nom, url]])
 
     goto(`/spaces/${nom}`)
     pushToast({
-      message: "Welcome to the space!"
+      message: "Welcome to the space!",
     })
   }
 
@@ -71,13 +71,11 @@
 <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>
+    <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">
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
       <Icon icon="link-round" />
       <input bind:value={id} class="grow" type="text" />
     </label>
@@ -85,7 +83,7 @@
   <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">
+  <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

src/app/components/Toast.svelte

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