Drag and drop space icons (#17) (#78)

Closes #17

Co-authored-by: Jon Staab <shtaab@gmail.com>
Reviewed-on: coracle/flotilla#78
Co-authored-by: triesap <tyson@radroots.org>
Co-committed-by: triesap <tyson@radroots.org>

src/app/components/MenuOtherSpaces.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
-
-  type Props = {
-    urls: string[]
-  }
-
-  const {urls}: Props = $props()
-</script>
-
-<div class="column menu gap-2">
-  {#each urls as url (url)}
-    <MenuSpacesItem {url} />
-  {/each}
-</div>

src/app/components/MenuSpacesItem.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <Link replaceState href={path}>
-  <CardButton class="btn-neutral shadow-md bg-alt">
+  <CardButton class="btn-neutral shadow-md bg-alt rounded-box border-none">
     {#snippet icon()}
       <RelayIcon {url} size={12} class="rounded-full" />
     {/snippet}

src/app/components/PrimaryNav.svelte

@@ -15,7 +15,6 @@
   import Divider from "@lib/components/Divider.svelte"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import ChatEnable from "@app/components/ChatEnable.svelte"
-  import MenuOtherSpaces from "@app/components/MenuOtherSpaces.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
   import {userSpaceUrls, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/core/state"
@@ -28,8 +27,6 @@
 
   const {children}: Props = $props()
 
-  const showOtherSpacesMenu = () => pushModal(MenuOtherSpaces, {urls: secondarySpaceUrls})
-
   const showSettingsMenu = () => pushModal(MenuSettings)
 
   const openChat = () => ($shouldUnwrap ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
@@ -60,15 +57,13 @@
         {#each primarySpaceUrls as url (url)}
           <PrimaryNavItemSpace {url} />
         {/each}
-        {#if secondarySpaceUrls.length > 0}
-          <PrimaryNavItem
-            title="Other Spaces"
-            class="tooltip-right"
-            onclick={showOtherSpacesMenu}
-            notification={otherSpaceNotifications}>
-            <ImageIcon alt="Other Spaces" src={Widget} size={8} />
-          </PrimaryNavItem>
-        {/if}
+        <PrimaryNavItem
+          href="/spaces"
+          title="All Spaces"
+          class="tooltip-right"
+          notification={otherSpaceNotifications}>
+          <ImageIcon alt="All Spaces" src={Widget} size={8} />
+        </PrimaryNavItem>
         <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
           <ImageIcon alt="Add a Space" src={Compass} size={8} />
         </PrimaryNavItem>

src/app/core/commands.ts

@@ -37,6 +37,7 @@ import {
   makeList,
   addToListPublicly,
   removeFromListByPredicate,
+  updateList,
   getTag,
   getListTags,
   getRelayTagValues,
@@ -148,6 +149,20 @@ export const removeSpaceMembership = async (url: string) => {
   return publishThunk({event, relays})
 }
 
+export const setSpaceMembershipOrder = async (urls: string[]) => {
+  const list = get(userGroupList) || makeList({kind: ROOMS})
+  const orderedUrls = uniq(urls.map(normalizeRelayUrl))
+  const relayTags = list.publicTags.filter(t => t[0] === "r")
+  const otherPublicTags = list.publicTags.filter(t => t[0] !== "r")
+  const relayTagByUrl = new Map(relayTags.map(t => [normalizeRelayUrl(t[1]), t]))
+  const orderedRelayTags = orderedUrls.map(url => relayTagByUrl.get(url) || ["r", url])
+  const publicTags = [...orderedRelayTags, ...otherPublicTags]
+  const event = await updateList(list, {publicTags}).reconcile(nip44EncryptToSelf)
+  const relays = uniq([...Router.get().FromUser().getUrls(), ...getRelayTagValues(event.tags)])
+
+  return publishThunk({event, relays})
+}
+
 export const addRoomMembership = async (url: string, h: string) => {
   const list = get(userGroupList) || makeList({kind: ROOMS})
   const newTags = [