Add remove group, format

src/routes/spaces/+page.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
-  import Masonry from 'svelte-bricks'
-  import {append, remove} from '@welshman/lib'
-  import {GROUP_META, displayRelayUrl} from '@welshman/util'
-  import Icon from '@lib/components/Icon.svelte'
-  import {makeSpacePath} from '@app/routes'
-  import {load, relays, groups, searchGroups, relayUrlsByNom, userMembership} from '@app/state'
-  import {updateGroupMemberships} from '@app/commands'
+  import {onMount} from "svelte"
+  import Masonry from "svelte-bricks"
+  import {append, remove} from "@welshman/lib"
+  import {GROUP_META, displayRelayUrl} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import {makeSpacePath} from "@app/routes"
+  import {load, relays, groups, searchGroups, relayUrlsByNom, userMembership} from "@app/state"
+  import {addGroupMemberships} from "@app/commands"
 
   const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
 
@@ -23,14 +23,24 @@
 <div class="content column gap-4">
   <h1 class="superheading mt-20">Discover Spaces</h1>
   <p class="text-center">Find communities all across the nostr network</p>
-  <label class="input input-bordered w-full flex items-center gap-2">
+  <label class="input input-bordered flex w-full items-center gap-2">
     <Icon icon="magnifer" />
     <input bind:value={term} class="grow" type="text" placeholder="Search for spaces..." />
   </label>
-  <Masonry animate={false} items={$searchGroups.searchOptions(term)} minColWidth={250} maxColWidth={800} gap={16} idKey="nom" let:item={group}>
-    <a href={makeSpacePath(group.nom)} class="card bg-base-100 shadow-xl hover:shadow-2xl hover:brightness-[1.1] transition-all">
-      <div class="avatar center mt-8">
-        <div class="w-20 rounded-full bg-base-300 border-2 border-solid border-base-300 !flex center relative">
+  <Masonry
+    animate={false}
+    items={$searchGroups.searchOptions(term)}
+    minColWidth={250}
+    maxColWidth={800}
+    gap={16}
+    idKey="nom"
+    let:item={group}>
+    <a
+      href={makeSpacePath(group.nom)}
+      class="card bg-base-100 shadow-xl transition-all hover:shadow-2xl hover:brightness-[1.1]">
+      <div class="center avatar mt-8">
+        <div
+          class="center relative !flex w-20 rounded-full border-2 border-solid border-base-300 bg-base-300">
           {#if group?.picture}
             <img alt="" src={group.picture} />
           {:else}
@@ -39,20 +49,22 @@
         </div>
       </div>
       {#if $userMembership?.noms.has(group.nom)}
-        <div class="absolute flex center w-full">
-          <div class="bg-primary rounded-full relative top-[38px] left-8 tooltip" data-tip="You are already a member of this space.">
+        <div class="center absolute flex w-full">
+          <div
+            class="tooltip relative left-8 top-[38px] rounded-full bg-primary"
+            data-tip="You are already a member of this space.">
             <Icon icon="check-circle" class="scale-110" />
           </div>
         </div>
       {/if}
       <div class="card-body">
         <h2 class="card-title justify-center">{group.name}</h2>
-        <div class="text-sm text-center">
+        <div class="text-center text-sm">
           {#each getRelayUrls(group.nom) as url}
             <div class="badge badge-neutral">{displayRelayUrl(url)}</div>
           {/each}
         </div>
-        <p class="text-sm py-4">{group.about}</p>
+        <p class="py-4 text-sm">{group.about}</p>
       </div>
     </a>
   </Masonry>

src/routes/spaces/[nom]/+page.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import {sleep, sortBy} from '@welshman/lib'
-  import type {CustomEvent} from '@welshman/util'
-  import {page} from '$app/stores'
-  import {fly} from '@lib/transition'
-  import {formatTimestampAsDate} from '@lib/util'
-  import Spinner from '@lib/components/Spinner.svelte'
-  import Avatar from '@lib/components/Avatar.svelte'
-  import GroupNote from '@app/components/GroupNote.svelte'
-  import {deriveGroup, deriveGroupConversation} from '@app/state'
+  import {sleep, sortBy} from "@welshman/lib"
+  import type {CustomEvent} from "@welshman/util"
+  import {page} from "$app/stores"
+  import {fly} from "@lib/transition"
+  import {formatTimestampAsDate} from "@lib/util"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Avatar from "@lib/components/Avatar.svelte"
+  import GroupNote from "@app/components/GroupNote.svelte"
+  import {deriveGroup, deriveGroupConversation} from "@app/state"
 
-  const group = deriveGroup($page.params.nom)
-  const conversation = deriveGroupConversation($page.params.nom)
+  $: group = deriveGroup($page.params.nom)
+  $: conversation = deriveGroupConversation($page.params.nom)
 
   const assertEvent = (e: any) => e as CustomEvent
 
   type Element = {
     id: string
-    type: 'date' | 'note',
+    type: "date" | "note"
     value: string | CustomEvent
     showPubkey: boolean
   }
@@ -35,12 +35,12 @@
       const date = formatTimestampAsDate(created_at)
 
       if (date !== previousDate) {
-        elements.push({type: 'date', value: date, id: date, showPubkey: false})
+        elements.push({type: "date", value: date, id: date, showPubkey: false})
       }
 
       elements.push({
         id,
-        type: 'note',
+        type: "note",
         value: event,
         showPubkey: date !== previousDate || previousPubkey !== pubkey,
       })
@@ -57,13 +57,12 @@
   }, 3000)
 </script>
 
-<div class="h-screen flex flex-col">
-  <div class="min-h-24 bg-base-100 shadow-xl">
-  </div>
-  <div class="flex-grow overflow-auto flex flex-col-reverse gap-2 p-2">
-    {#each elements as {type, id, value, showPubkey} (id)}
+<div class="flex h-screen flex-col">
+  <div class="min-h-24 bg-base-100 shadow-xl"></div>
+  <div class="flex flex-grow flex-col-reverse overflow-auto">
+    {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "date"}
-        <div class="flex gap-2 items-center text-xs opacity-50">
+        <div class="flex items-center gap-2 py-2 text-xs opacity-50">
           <div class="h-px flex-grow bg-base-content" />
           <p>{value}</p>
           <div class="h-px flex-grow bg-base-content" />
@@ -72,7 +71,7 @@
         <GroupNote event={assertEvent(value)} {showPubkey} />
       {/if}
     {/each}
-    <p class="flex justify-center items-center py-20 h-10">
+    <p class="flex h-10 items-center justify-center py-20">
       <Spinner {loading}>
         {#if loading}
           Looking for messages...
@@ -82,7 +81,5 @@
       </Spinner>
     </p>
   </div>
-  <div class="min-h-32 bg-base-100 shadow-top-xl">
-  </div>
+  <div class="shadow-top-xl min-h-32 bg-base-100"></div>
 </div>
-