Tweak navigation to improve white labeled instances

src/app.css

@@ -388,6 +388,10 @@ progress[value]::-webkit-progress-value {
   @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
 }
 
+.cw-full {
+  @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
+}
+
 .cb {
   @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
 }

src/app/components/MenuSpaces.svelte

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

src/app/components/PeopleItem.svelte

@@ -10,7 +10,7 @@
   import Link from "@lib/components/Link.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
-  import {makeChatPath} from "@app/routes"
+  import {pubkeyLink} from "@app/state"
 
   type Props = {
     pubkey: string
@@ -37,9 +37,9 @@
 <div class="card2 bg-alt col-2 shadow-xl">
   <div class="flex justify-between">
     <Profile {pubkey} {url} />
-    <Link class="btn btn-primary hidden sm:flex" href={makeChatPath([pubkey])}>
+    <Link external href={pubkeyLink(pubkey)} class="btn btn-primary hidden sm:flex">
-      <Icon icon="letter" />
+      <Icon icon="user-circle" />
-      Start a Chat
+      See Complete Profile
     </Link>
   </div>
   <ProfileInfo {pubkey} {url} />
@@ -48,8 +48,8 @@
       Last active {formatTimestampRelative($events[0].created_at)}
     </div>
   {/if}
-  <Link class="btn btn-primary sm:hidden" href={makeChatPath([pubkey])}>
+  <Link external href={pubkeyLink(pubkey)} class="btn btn-primary sm:hidden">
-    <Icon icon="letter" />
+    <Icon icon="user-circle" />
-    Start a Chat
+    See Complete Profile
   </Link>
 </div>

src/app/components/PrimaryNav.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import {splitAt} from "@welshman/lib"
@@ -16,8 +17,9 @@
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
   import {notifications} from "@app/notifications"
-  interface Props {
+
-    children?: import("svelte").Snippet
+  type Props = {
+    children?: Snippet
   }
 
   const {children}: Props = $props()
@@ -118,9 +120,14 @@
         notification={$notifications.has("/chat")}>
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
-      <PrimaryNavItem title="Spaces" onclick={showSpacesMenu} notification={anySpaceNotifications}>
+      {#if !PLATFORM_RELAY}
-        <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
+        <PrimaryNavItem
-      </PrimaryNavItem>
+          title="Spaces"
+          onclick={showSpacesMenu}
+          notification={anySpaceNotifications}>
+          <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
+        </PrimaryNavItem>
+      {/if}
     </div>
     <PrimaryNavItem title="Settings" onclick={showSettingsMenu}>
       <Avatar icon="settings" src={$userProfile?.picture} class="!h-10 !w-10" />

src/lib/components/ContentSearch.svelte

@@ -14,9 +14,7 @@
       {@render props.input?.()}
     </div>
   </div>
-  <div class="scroll-container overflow-auto">
+  <div class="scroll-container content-sizing overflow-auto pt-2">
-    <div class="content-sizing">
+    {@render props.content?.()}
-      {@render props.content?.()}
-    </div>
   </div>
 </div>

src/routes/home/+page.svelte

@@ -52,7 +52,7 @@
               {/snippet}
             </CardButton>
           </Link>
-          <Link href="/people">
+          <Link href="/chat">
             <CardButton>
               {#snippet icon()}
                 <div><Icon icon="chat-round" size={7} /></div>

src/routes/people/+page.svelte

@@ -28,7 +28,7 @@
   })
 </script>
 
-<Page>
+<Page class="cw-full">
   <ContentSearch>
     {#snippet input()}
       <label class="row-2 input input-bordered">