Allow for multiple platform relays

.env.template

@@ -5,7 +5,7 @@ VITE_PLATFORM_TERMS=https://flotilla.social/terms
 VITE_PLATFORM_PRIVACY=https://flotilla.social/privacy
 VITE_PLATFORM_NAME=Flotilla
 VITE_PLATFORM_LOGO=static/flotilla.png
-VITE_PLATFORM_RELAY=
+VITE_PLATFORM_RELAYS=
 VITE_PLATFORM_ACCENT="#7161FF"
 VITE_PLATFORM_SECONDARY="#EB5E28"
 VITE_PLATFORM_DESCRIPTION="Flotilla is nostr — for communities."

README.md

@@ -12,7 +12,7 @@ You can also optionally create an `.env` file and populate it with the following
 - `VITE_PLATFORM_URL` - The url where the app will be hosted. This is only used for build-time population of meta tags.
 - `VITE_PLATFORM_NAME` - The name of the app
 - `VITE_PLATFORM_LOGO` - A logo url for the app
-- `VITE_PLATFORM_RELAY` - A relay url that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the platform relay the home page.
+- `VITE_PLATFORM_RELAYS` - A list of comma-separated relay urls that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the first platform relay the home page.
 - `VITE_PLATFORM_ACCENT` - A hex color for the app's accent color
 - `VITE_PLATFORM_DESCRIPTION` - A description of the app
 - `VITE_GLITCHTIP_API_KEY` - A Sentry DSN for use with glitchtip (error reporting)

src/app/components/MenuSpaces.svelte

@@ -5,30 +5,34 @@
   import CardButton from "@lib/components/CardButton.svelte"
   import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
-  import {userRoomsByUrl} from "@app/state"
+  import {userRoomsByUrl, PLATFORM_RELAYS} from "@app/state"
   import {pushModal} from "@app/modal"
 
   const addSpace = () => pushModal(SpaceAdd)
 </script>
 
 <div class="column menu gap-2">
-  {#if $userRoomsByUrl.size > 0}
-    {#each $userRoomsByUrl.keys() as url (url)}
-      <MenuSpacesItem {url} />
-    {/each}
-    <Divider />
-  {/if}
-  <Button onclick={addSpace}>
-    <CardButton>
-      {#snippet icon()}
-        <div><Icon icon="login-2" size={7} /></div>
-      {/snippet}
-      {#snippet title()}
-        <div>Add a space</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Join or create a new space</div>
-      {/snippet}
-    </CardButton>
-  </Button>
+  {#each PLATFORM_RELAYS as url (url)}
+    <MenuSpacesItem {url} />
+  {:else}
+    {#if $userRoomsByUrl.size > 0}
+      {#each $userRoomsByUrl.keys() as url (url)}
+        <MenuSpacesItem {url} />
+      {/each}
+      <Divider />
+    {/if}
+    <Button onclick={addSpace}>
+      <CardButton>
+        {#snippet icon()}
+          <div><Icon icon="login-2" size={7} /></div>
+        {/snippet}
+        {#snippet title()}
+          <div>Add a space</div>
+        {/snippet}
+        {#snippet info()}
+          <div>Join or create a new space</div>
+        {/snippet}
+      </CardButton>
+    </Button>
+  {/each}
 </div>

src/app/components/PrimaryNav.svelte

@@ -13,7 +13,7 @@
   import MenuOtherSpaces from "@app/components/MenuOtherSpaces.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
   import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
-  import {userRoomsByUrl, canDecrypt, PLATFORM_RELAY, PLATFORM_LOGO} from "@app/state"
+  import {userRoomsByUrl, canDecrypt, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
   import {notifications} from "@app/notifications"
@@ -57,8 +57,8 @@
   class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
   <div class="flex h-full flex-col justify-between">
     <div>
-      {#if PLATFORM_RELAY}
-        <PrimaryNavItemSpace url={PLATFORM_RELAY} />
+      {#each PLATFORM_RELAYS as url (url)}
+        <PrimaryNavItemSpace {url} />
       {:else}
         <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
           <Avatar src={PLATFORM_LOGO} class="!h-10 !w-10" />
@@ -79,7 +79,7 @@
         <PrimaryNavItem title="Add Space" onclick={addSpace} class="tooltip-right">
           <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
         </PrimaryNavItem>
-      {/if}
+      {/each}
     </div>
     <div>
       <PrimaryNavItem
@@ -120,7 +120,7 @@
         notification={$notifications.has("/chat")}>
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      {#if !PLATFORM_RELAY}
+      {#if PLATFORM_RELAYS.length !== 1}
         <PrimaryNavItem
           title="Spaces"
           onclick={showSpacesMenu}

src/app/state.ts

@@ -102,7 +102,7 @@ export const PLATFORM_LOGO = PLATFORM_URL + "/pwa-192x192.png"
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
 
-export const PLATFORM_RELAY = import.meta.env.VITE_PLATFORM_RELAY
+export const PLATFORM_RELAYS = fromCsv(import.meta.env.VITE_PLATFORM_RELAYS)
 
 export const PLATFORM_ACCENT = import.meta.env.VITE_PLATFORM_ACCENT
 

src/routes/home/+page.svelte

@@ -8,65 +8,63 @@
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
-  import {PLATFORM_NAME, PLATFORM_RELAY} from "@app/state"
+  import {PLATFORM_NAME, PLATFORM_RELAYS} from "@app/state"
 
   const addSpace = () => pushModal(SpaceAdd)
 
   onMount(() => {
-    if (PLATFORM_RELAY) {
-      goto(makeSpacePath(PLATFORM_RELAY))
+    if (PLATFORM_RELAYS.length > 0) {
+      goto(makeSpacePath(PLATFORM_RELAYS[0]))
     }
   })
 </script>
 
-{#if !PLATFORM_RELAY}
-  <div class="hero min-h-screen overflow-auto pb-8">
-    <div class="hero-content">
-      <div class="column content gap-4">
-        <h1 class="text-center text-5xl">Welcome to</h1>
-        <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
-        <div class="col-3">
-          <Button onclick={addSpace}>
-            <CardButton>
-              {#snippet icon()}
-                <div><Icon icon="add-circle" size={7} /></div>
-              {/snippet}
-              {#snippet title()}
-                <div>Add a space</div>
-              {/snippet}
-              {#snippet info()}
-                <div>Use an invite link, or create your own space.</div>
-              {/snippet}
-            </CardButton>
-          </Button>
-          <Link href="/discover">
-            <CardButton>
-              {#snippet icon()}
-                <div><Icon icon="compass" size={7} /></div>
-              {/snippet}
-              {#snippet title()}
-                <div>Browse the network</div>
-              {/snippet}
-              {#snippet info()}
-                <div>Find communities on the nostr network.</div>
-              {/snippet}
-            </CardButton>
-          </Link>
-          <Link href="/chat">
-            <CardButton>
-              {#snippet icon()}
-                <div><Icon icon="chat-round" size={7} /></div>
-              {/snippet}
-              {#snippet title()}
-                <div>Start a conversation</div>
-              {/snippet}
-              {#snippet info()}
-                <div>Use nostr's encrypted group chats to stay in touch.</div>
-              {/snippet}
-            </CardButton>
-          </Link>
-        </div>
+<div class="hero min-h-screen overflow-auto pb-8">
+  <div class="hero-content">
+    <div class="column content gap-4">
+      <h1 class="text-center text-5xl">Welcome to</h1>
+      <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
+      <div class="col-3">
+        <Button onclick={addSpace}>
+          <CardButton>
+            {#snippet icon()}
+              <div><Icon icon="add-circle" size={7} /></div>
+            {/snippet}
+            {#snippet title()}
+              <div>Add a space</div>
+            {/snippet}
+            {#snippet info()}
+              <div>Use an invite link, or create your own space.</div>
+            {/snippet}
+          </CardButton>
+        </Button>
+        <Link href="/discover">
+          <CardButton>
+            {#snippet icon()}
+              <div><Icon icon="compass" size={7} /></div>
+            {/snippet}
+            {#snippet title()}
+              <div>Browse the network</div>
+            {/snippet}
+            {#snippet info()}
+              <div>Find communities on the nostr network.</div>
+            {/snippet}
+          </CardButton>
+        </Link>
+        <Link href="/chat">
+          <CardButton>
+            {#snippet icon()}
+              <div><Icon icon="chat-round" size={7} /></div>
+            {/snippet}
+            {#snippet title()}
+              <div>Start a conversation</div>
+            {/snippet}
+            {#snippet info()}
+              <div>Use nostr's encrypted group chats to stay in touch.</div>
+            {/snippet}
+          </CardButton>
+        </Link>
       </div>
     </div>
   </div>
-{/if}
+</div>

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -299,7 +299,25 @@
   {/snippet}
   {#snippet action()}
     <div class="row-2">
-      {#if $membershipStatus !== MembershipStatus.Initial}
+      {#if $membershipStatus === MembershipStatus.Initial}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Request to be added to the member list"
+          disabled={joining}
+          onclick={join}>
+          {#if joining}
+            <span class="loading loading-spinner loading-sm"></span>
+          {:else}
+            <Icon size={4} icon="login-2" />
+          {/if}
+        </Button>
+      {:else if $membershipStatus === MembershipStatus.Pending}
+        <Button
+          class="btn btn-neutral btn-sm tooltip tooltip-left"
+          data-tip="Membership is pending">
+          <Icon size={4} icon="clock-circle" />
+        </Button>
+      {:else}
         <Button
           class="btn btn-neutral btn-sm tooltip tooltip-left"
           data-tip="Request to be removed from member list"