Move layout around a bit more

.env

@@ -1 +1,2 @@
 VITE_DEFAULT_PUBKEYS=fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9
+VITE_PLATFORM_RELAY=wss://coracle-dev.nostr1.com

src/app/components/ContentQuote.svelte

@@ -10,12 +10,13 @@
   export let depth = 0
 
   const {id, identifier, kind, pubkey, relays} = value
-  const idOrAddress = id || new Address(kind, pubkey, identifier).toString()
+  const addr = new Address(kind, pubkey, identifier)
+  const idOrAddress = id || addr.toString()
   const event = deriveEvent(idOrAddress, relays)
-  const nevent = nip19.neventEncode({id, relays})
+  const entity = id ? nip19.neventEncode({id, relays}) : addr.toNaddr()
 </script>
 
-<Link external href={entityLink(nevent)} class="my-2 block max-w-full text-left">
+<Link external href={entityLink(entity)} class="my-2 block max-w-full text-left">
   {#if $event}
     <NoteCard event={$event} class="bg-alt rounded-box p-4">
       <slot name="note-content" event={$event} {depth} />

src/app/components/MenuSettings.svelte

@@ -12,7 +12,7 @@
 <div class="column menu gap-2">
   <Link href="/settings/relays">
     <CardButton>
-      <div slot="icon"><Icon icon="remote-controller-minimalistic" size={7} /></div>
+      <div slot="icon"><Icon icon="server" size={7} /></div>
       <div slot="title">Relays</div>
       <div slot="info">Control how Flotilla talks to the network</div>
     </CardButton>

src/app/components/PrimaryNav.svelte

@@ -21,37 +21,63 @@
   const showSettingsMenu = () => pushModal(MenuSettings)
 </script>
 
-<div class="relative hidden w-14 flex-shrink-0 bg-base-100 pt-4 md:block">
+{#if import.meta.env.VITE_PLATFORM_RELAY}
-  <div class="flex h-full flex-col justify-between">
+  <div class="relative hidden w-14 flex-shrink-0 bg-base-100 pt-4 md:block">
-    <div>
+    <div class="flex h-full flex-col justify-between">
-      <PrimaryNavItem href="/home/people" class="tooltip-right">
+      <div>
-        <Avatar icon="home-smile" class="!h-10 !w-10" />
+        <PrimaryNavItem href="/home/people" class="tooltip-right">
-      </PrimaryNavItem>
+          <Avatar icon="home-smile" class="!h-10 !w-10" />
-      {#each getMembershipUrls($userMembership) as url (url)}
-        <PrimaryNavItem
-          title={displayRelayUrl(url)}
-          href={makeSpacePath(url)}
-          class="tooltip-right">
-          <SpaceAvatar {url} />
         </PrimaryNavItem>
-      {/each}
+        <PrimaryNavItem
-      <PrimaryNavItem title="Add Space" on:click={addSpace} class="tooltip-right">
+          title={displayRelayUrl(import.meta.env.VITE_PLATFORM_RELAY)}
-        <Avatar icon="add-circle" class="!h-10 !w-10" />
+          href={makeSpacePath(import.meta.env.VITE_PLATFORM_RELAY)}
-      </PrimaryNavItem>
+          class="tooltip-right">
-      <PrimaryNavItem title="Discover Spaces" href="/discover" class="tooltip-right">
+          <SpaceAvatar url={import.meta.env.VITE_PLATFORM_RELAY} />
-        <Avatar icon="compass-big" class="!h-10 !w-10" />
+        </PrimaryNavItem>
-      </PrimaryNavItem>
+      </div>
-    </div>
+      <div>
-    <div>
+        <PrimaryNavItem title="Profile" href="/settings/profile" class="tooltip-right">
-      <PrimaryNavItem title="Profile" href="/settings/profile" class="tooltip-right">
+          <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
-        <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
+        </PrimaryNavItem>
-      </PrimaryNavItem>
+        <PrimaryNavItem title="Settings" href="/settings/relays" class="tooltip-right">
-      <PrimaryNavItem title="Settings" href="/settings/relays" class="tooltip-right">
+          <Avatar icon="settings" class="!h-10 !w-10" />
-        <Avatar icon="settings" class="!h-10 !w-10" />
+        </PrimaryNavItem>
-      </PrimaryNavItem>
+      </div>
     </div>
   </div>
-</div>
+{:else}
+  <div class="relative hidden w-14 flex-shrink-0 bg-base-100 pt-4 md:block">
+    <div class="flex h-full flex-col justify-between">
+      <div>
+        <PrimaryNavItem href="/home/people" class="tooltip-right">
+          <Avatar icon="home-smile" class="!h-10 !w-10" />
+        </PrimaryNavItem>
+        {#each getMembershipUrls($userMembership) as url (url)}
+          <PrimaryNavItem
+            title={displayRelayUrl(url)}
+            href={makeSpacePath(url)}
+            class="tooltip-right">
+            <SpaceAvatar {url} />
+          </PrimaryNavItem>
+        {/each}
+        <PrimaryNavItem title="Add Space" on:click={addSpace} class="tooltip-right">
+          <Avatar icon="add-circle" class="!h-10 !w-10" />
+        </PrimaryNavItem>
+        <PrimaryNavItem title="Discover Spaces" href="/discover" class="tooltip-right">
+          <Avatar icon="compass-big" class="!h-10 !w-10" />
+        </PrimaryNavItem>
+      </div>
+      <div>
+        <PrimaryNavItem title="Profile" href="/settings/profile" class="tooltip-right">
+          <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
+        </PrimaryNavItem>
+        <PrimaryNavItem title="Settings" href="/settings/relays" class="tooltip-right">
+          <Avatar icon="settings" class="!h-10 !w-10" />
+        </PrimaryNavItem>
+      </div>
+    </div>
+  </div>
+{/if}
 
 <slot />
 
@@ -68,7 +94,7 @@
         <Avatar icon="settings" class="!h-10 !w-10" />
       </PrimaryNavItem>
     </div>
-    <PrimaryNavItem title="Settings" href="/settings/profile">
+    <PrimaryNavItem noActive title="Settings" href="/settings/profile">
       <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>

src/app/components/RelayItem.svelte

@@ -15,7 +15,7 @@
 <div class="card2 card2-sm bg-alt column gap-2">
   <div class="flex items-center justify-between gap-4">
     <div class="ellipsize flex items-center gap-2">
-      <Icon icon="remote-controller-minimalistic" />
+      <Icon icon="server" />
       <p class="ellipsize">{displayRelayUrl(url)}</p>
     </div>
     <slot />

src/app/components/SpaceCreate.svelte

@@ -36,7 +36,7 @@
   <Field>
     <p slot="label">Relay</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">
-      <Icon icon="remote-controller-minimalistic" />
+      <Icon icon="server" />
       <input bind:value={relay} class="grow" type="text" />
     </label>
     <p slot="info">

src/assets/icons/Server.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 17C2 15.1144 2 14.1716 2.58579 13.5858C3.17157 13 4.11438 13 6 13H18C19.8856 13 20.8284 13 21.4142 13.5858C22 14.1716 22 15.1144 22 17C22 18.8856 22 19.8284 21.4142 20.4142C20.8284 21 19.8856 21 18 21H6C4.11438 21 3.17157 21 2.58579 20.4142C2 19.8284 2 18.8856 2 17Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2H18C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6C22 7.88562 22 8.82843 21.4142 9.41421C20.8284 10 19.8856 10 18 10H6C4.11438 10 3.17157 10 2.58579 9.41421C2 8.82843 2 7.88562 2 6Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M11 6H18" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6 6H8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M11 17H18" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6 17H8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/lib/components/Icon.svelte

@@ -61,6 +61,7 @@
   import Plain from "@assets/icons/Plain.svg?dataurl"
   import RemoteControllerMinimalistic from "@assets/icons/Remote Controller Minimalistic.svg?dataurl"
   import Reply from "@assets/icons/Reply.svg?dataurl"
+  import Server from "@assets/icons/Server.svg?dataurl"
   import Settings from "@assets/icons/Settings.svg?dataurl"
   import TagHorizontal from "@assets/icons/Tag Horizontal.svg?dataurl"
   import ShareCircle from "@assets/icons/Share Circle.svg?dataurl"
@@ -138,6 +139,7 @@
     "share-circle": ShareCircle,
     "shop-minimalistic": ShopMinimalistic,
     "smile-circle": SmileCircle,
+    server: Server,
     settings: Settings,
     "tag-horizontal": TagHorizontal,
     "trash-bin-2": TrashBin2,

src/lib/components/PrimaryNavItem.svelte

@@ -4,10 +4,11 @@
 
   export let title = ""
   export let href = ""
+  export let noActive = false
 
   $: itemSegment = href.split("/")[1]
   $: currentSegment = $page.route?.id?.split("/")[1]
-  $: active = itemSegment === currentSegment
+  $: active = itemSegment === currentSegment && !noActive
 </script>
 
 {#if href}

src/routes/settings/+layout.svelte

@@ -20,7 +20,7 @@
     </div>
     <div in:fly|local={{delay: 50}}>
       <SecondaryNavItem href="/settings/relays">
-        <Icon icon="remote-controller-minimalistic" /> Relays
+        <Icon icon="server" /> Relays
       </SecondaryNavItem>
     </div>
     <div in:fly|local={{delay: 100}}>

src/routes/settings/profile/+page.svelte

@@ -113,7 +113,7 @@
       <Field>
         <p slot="label">Nostr Address</p>
         <label class="input input-bordered flex w-full items-center gap-2" slot="input">
-          <Icon icon="remote-controller-minimalistic" />
+          <Icon icon="map-point" />
           <input bind:value={values.nip05} class="grow" type="text" />
         </label>
         <p slot="info">

src/routes/spaces/[nrelay]/+layout.svelte

@@ -5,6 +5,7 @@
   import {fly, slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
+  import Delay from "@lib/components/Delay.svelte"
   import Button from "@lib/components/Button.svelte"
   import Popover from "@lib/components/Popover.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
@@ -71,102 +72,106 @@
 </script>
 
 {#key url}
-  <SecondaryNav>
+  <Delay>
-    <SecondaryNavSection>
+    <SecondaryNav>
-      <div>
+      <SecondaryNavSection>
-        <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
+        <div>
-          <strong>{displayRelayUrl(url)}</strong>
+          <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
-          <Icon icon="alt-arrow-down" />
+            <strong>{displayRelayUrl(url)}</strong>
-        </SecondaryNavItem>
+            <Icon icon="alt-arrow-down" />
-        {#if showMenu}
+          </SecondaryNavItem>
-          <Popover hideOnClick onClose={toggleMenu}>
+          {#if showMenu}
-            <ul
+            <Popover hideOnClick onClose={toggleMenu}>
-              transition:fly
+              <ul
-              class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+                transition:fly
-              <li>
+                class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-                <Button on:click={createInvite}>
+                <li>
-                  <Icon icon="link-round" />
+                  <Button on:click={createInvite}>
-                  Create Invite
+                    <Icon icon="link-round" />
-                </Button>
+                    Create Invite
-              </li>
-              <li>
-                {#if getMembershipUrls($userMembership).includes(url)}
-                  <Button on:click={leaveSpace} class="text-error">
-                    <Icon icon="exit" />
-                    Leave Space
-                  </Button>
-                {:else}
-                  <Button on:click={joinSpace}>
-                    <Icon icon="login-2" />
-                    Join Space
                   </Button>
+                </li>
+                {#if !import.meta.env.VITE_PLATFORM_RELAY}
+                  <li>
+                    {#if getMembershipUrls($userMembership).includes(url)}
+                      <Button on:click={leaveSpace} class="text-error">
+                        <Icon icon="exit" />
+                        Leave Space
+                      </Button>
+                    {:else}
+                      <Button on:click={joinSpace}>
+                        <Icon icon="login-2" />
+                        Join Space
+                      </Button>
+                    {/if}
+                  </li>
                 {/if}
-              </li>
+              </ul>
-            </ul>
+            </Popover>
-          </Popover>
+          {/if}
+        </div>
+        <div class="my-3 h-px bg-base-200" />
+        <div in:fly>
+          <SecondaryNavItem href={makeSpacePath(url)}>
+            <Icon icon="chat-round" /> Chat
+          </SecondaryNavItem>
+        </div>
+        <div in:fly={{delay: getDelay(true)}}>
+          <SecondaryNavItem href={makeSpacePath(url, "threads")}>
+            <Icon icon="notes-minimalistic" /> Threads
+          </SecondaryNavItem>
+        </div>
+        <div in:fly={{delay: getDelay()}}>
+          <SecondaryNavItem href={makeSpacePath(url, "calendar")}>
+            <Icon icon="calendar-minimalistic" /> Calendar
+          </SecondaryNavItem>
+        </div>
+        {#if rooms.length > 0}
+          <div transition:slide={{delay: getDelay()}}>
+            <div class="h-2" />
+            <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
+          </div>
         {/if}
-      </div>
+        {#each rooms as room, i (room)}
-      <div class="my-3 h-px bg-base-200" />
+          <div transition:slide={{delay: getDelay()}}>
-      <div in:fly>
+            <SecondaryNavItem href={makeSpacePath(url, room)}>
-        <SecondaryNavItem href={makeSpacePath(url)}>
+              <Icon icon="hashtag" />
-          <Icon icon="chat-round" /> Chat
+              {room}
-        </SecondaryNavItem>
+            </SecondaryNavItem>
-      </div>
+          </div>
-      <div in:fly={{delay: getDelay(true)}}>
+        {/each}
-        <SecondaryNavItem href={makeSpacePath(url, "threads")}>
+        {#if otherRooms.length > 0}
-          <Icon icon="notes-minimalistic" /> Threads
+          <div transition:slide={{delay: getDelay()}}>
-        </SecondaryNavItem>
+            <div class="h-2" />
-      </div>
+            <SecondaryNavHeader>
-      <div in:fly={{delay: getDelay()}}>
+              {#if rooms.length > 0}
-        <SecondaryNavItem href={makeSpacePath(url, "calendar")}>
+                Other Rooms
-          <Icon icon="calendar-minimalistic" /> Calendar
+              {:else}
-        </SecondaryNavItem>
+                Rooms
-      </div>
+              {/if}
-      {#if rooms.length > 0}
+            </SecondaryNavHeader>
-        <div transition:slide={{delay: getDelay()}}>
+          </div>
-          <div class="h-2" />
+        {/if}
-          <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
+        {#each otherRooms as room, i (room)}
-        </div>
+          <div transition:slide={{delay: getDelay()}}>
-      {/if}
+            <SecondaryNavItem href={makeSpacePath(url, room)}>
-      {#each rooms as room, i (room)}
+              <Icon icon="hashtag" />
-        <div transition:slide={{delay: getDelay()}}>
+              {room}
-          <SecondaryNavItem href={makeSpacePath(url, room)}>
+            </SecondaryNavItem>
-            <Icon icon="hashtag" />
+          </div>
-            {room}
+        {/each}
+        <div in:fly={{delay: getDelay()}}>
+          <SecondaryNavItem on:click={addRoom}>
+            <Icon icon="add-circle" />
+            Create room
           </SecondaryNavItem>
         </div>
-      {/each}
+      </SecondaryNavSection>
-      {#if otherRooms.length > 0}
+    </SecondaryNav>
-        <div transition:slide={{delay: getDelay()}}>
+    <Page>
-          <div class="h-2" />
+      {#key $page.params.room}
-          <SecondaryNavHeader>
+        <slot />
-            {#if rooms.length > 0}
+      {/key}
-              Other Rooms
+    </Page>
-            {:else}
+  </Delay>
-              Rooms
-            {/if}
-          </SecondaryNavHeader>
-        </div>
-      {/if}
-      {#each otherRooms as room, i (room)}
-        <div transition:slide={{delay: getDelay()}}>
-          <SecondaryNavItem href={makeSpacePath(url, room)}>
-            <Icon icon="hashtag" />
-            {room}
-          </SecondaryNavItem>
-        </div>
-      {/each}
-      <div in:fly={{delay: getDelay()}}>
-        <SecondaryNavItem on:click={addRoom}>
-          <Icon icon="add-circle" />
-          Create room
-        </SecondaryNavItem>
-      </div>
-    </SecondaryNavSection>
-  </SecondaryNav>
-  <Page>
-    {#key $page.params.room}
-      <slot />
-    {/key}
-  </Page>
 {/key}