Rework navigation

src/routes/spaces/+layout.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.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>
+
+<SecondaryNav>
+  <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|local>
+      <SecondaryNavItem href="/invalid">
+        <Icon icon="hashtag" /> Spaces
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem href="/invalid">
+        <Icon icon="hashtag" /> Themes
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>

src/routes/spaces/+page.svelte

@@ -1,71 +0,0 @@
-<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 {addGroupMemberships} from "@app/commands"
-
-  const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
-
-  let term = ""
-
-  onMount(() => {
-    load({
-      relays: $relays.map(r => r.url),
-      filters: [{kinds: [GROUP_META]}],
-    })
-  })
-</script>
-
-<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 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 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}
-            <Icon icon="ghost" size={7} />
-          {/if}
-        </div>
-      </div>
-      {#if $userMembership?.noms.has(group.nom)}
-        <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-center text-sm">
-          {#each getRelayUrls(group.nom) as url}
-            <div class="badge badge-neutral">{displayRelayUrl(url)}</div>
-          {/each}
-        </div>
-        <p class="py-4 text-sm">{group.about}</p>
-      </div>
-    </a>
-  </Masonry>
-</div>