Generate username color based on hash

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
   import "@src/app.css"
   import {onMount} from "svelte"
   import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
+  import {browser} from "$app/environment"
   import {createEventStore} from "@welshman/store"
   import ModalBox from "@lib/components/ModalBox.svelte"
   import Toast from "@app/components/Toast.svelte"
@@ -9,8 +11,8 @@
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
   import {theme} from "@app/theme"
-  import {pk, session, repository} from "@app/base"
-  import {relays, handles} from "@app/state"
+  import {pk, session, repository, DEFAULT_RELAYS} from "@app/base"
+  import {relays, handles, loadRelay} from "@app/state"
   import {initStorage} from "@app/storage"
   import {loadUserData} from "@app/commands"
 
@@ -24,6 +26,10 @@
   $: {
     if (!modal && !$session) {
       modal = {component: Landing}
+
+      if (browser && $page.route?.id !== "/home") {
+        goto("/home")
+      }
     }
 
     if (modal) {
@@ -35,6 +41,10 @@
   }
 
   onMount(() => {
+    for (const url of DEFAULT_RELAYS) {
+      loadRelay(url)
+    }
+
     if ($pk) {
       loadUserData($pk)
     }

src/routes/discover/+page.svelte

@@ -4,7 +4,15 @@
   import {GROUP_META, displayRelayUrl} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import {makeSpacePath} from "@app/routes"
-  import {load, displayGroup, relays, searchGroups, relayUrlsByNom, userMembership} from "@app/state"
+  import {DEFAULT_RELAYS} from "@app/base"
+  import {
+    load,
+    displayGroup,
+    relays,
+    searchGroups,
+    relayUrlsByNom,
+    userMembership,
+  } from "@app/state"
 
   const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
 
@@ -12,7 +20,7 @@
 
   onMount(() => {
     load({
-      relays: $relays.map(r => r.url),
+      relays: [...DEFAULT_RELAYS, ...$relays.map(r => r.url)],
       filters: [{kinds: [GROUP_META]}],
     })
   })

src/routes/settings/+layout.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import LogOut from "@app/components/LogOut.svelte"
+  import {pushModal} from "@app/modal"
+
+  const logout = () => pushModal(LogOut)
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly|local>
+      <SecondaryNavItem href="/settings">
+        <Icon icon="settings" /> Settings
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem class="text-error hover:text-error" on:click={logout}>
+        <Icon icon="exit" /> Log Out
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>

src/routes/settings/+page.svelte

@@ -0,0 +1 @@
+Settings: who needs em?

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {page} from '$app/stores'
+  import {page} from "$app/stores"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -67,18 +67,13 @@
       <div class="h-2" />
       <SecondaryNavHeader>
         Rooms
-        <div class="cursor-pointer">
+        <Button on:click={() => alert("Uh, I don't know how to do rooms on NIP 29")}>
           <Icon icon="add-circle" />
-        </div>
+        </Button>
       </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 href="/spaces/{nom}/general">
+          <Icon icon="hashtag" /> General
         </SecondaryNavItem>
       </div>
     </SecondaryNavSection>

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

@@ -1,22 +1,26 @@
-<script lang="ts">
-  import {sortBy} from "@welshman/lib"
-  import type {CustomEvent} from "@welshman/util"
-  import {page} from "$app/stores"
-  import {formatTimestampAsDate} from "@lib/util"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import GroupNote from "@app/components/GroupNote.svelte"
-  import {deriveGroupConversation} from "@app/state"
-
-  $: conversation = deriveGroupConversation($page.params.nom)
-
-  const assertEvent = (e: any) => e as CustomEvent
-
+<script lang="ts" context="module">
   type Element = {
     id: string
     type: "date" | "note"
     value: string | CustomEvent
     showPubkey: boolean
   }
+</script>
+
+<script lang="ts">
+  import {sortBy} from "@welshman/lib"
+  import type {CustomEvent} from "@welshman/util"
+  import {page} from "$app/stores"
+  import {formatTimestampAsDate} from "@lib/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import GroupNote from "@app/components/GroupNote.svelte"
+  import {deriveGroupConversation} from "@app/state"
+
+  const {nom} = $page.params
+  const conversation = deriveGroupConversation(nom)
+
+  const assertEvent = (e: any) => e as CustomEvent
 
   let loading = true
   let elements: Element[] = []
@@ -54,15 +58,22 @@
   }, 3000)
 </script>
 
-<div class="flex h-screen flex-col">
-  <div class="min-h-24 bg-base-100 shadow-xl"></div>
+<div class="relative flex h-screen flex-col">
+  <div class="relative z-feature px-2 pt-4">
+    <div class="flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+      <div class="flex items-center gap-2">
+        <Icon icon="hashtag" />
+        <strong>General</strong>
+      </div>
+    </div>
+  </div>
   <div class="flex flex-grow flex-col-reverse overflow-auto">
     {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "date"}
-        <div class="flex items-center gap-2 py-2 text-xs opacity-50">
-          <div class="h-px flex-grow bg-base-content" />
+        <div class="flex items-center gap-2 p-2 text-xs opacity-50">
+          <div class="h-px flex-grow bg-base-content opacity-25" />
           <p>{value}</p>
-          <div class="h-px flex-grow bg-base-content" />
+          <div class="h-px flex-grow bg-base-content opacity-25" />
         </div>
       {:else}
         <GroupNote event={assertEvent(value)} {showPubkey} />
@@ -78,5 +89,7 @@
       </Spinner>
     </p>
   </div>
-  <div class="shadow-top-xl min-h-32 bg-base-100"></div>
+  <div class="relative z-feature border-t border-solid border-base-100 px-2 py-2">
+    <div class="shadow-top-xl flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4"></div>
+  </div>
 </div>