Tweaks to navigation

src/app/components/ChannelCompose.svelte

@@ -33,7 +33,7 @@
 <div class="relative z-feature flex gap-2 p-2">
   <Button
     data-tip="Add an image"
-    class="center tooltip h-10 w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
+    class="center tooltip h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
     on:click={() => addFile($editor)}>
     {#if $loading}
       <span class="loading loading-spinner loading-xs"></span>

src/app/components/Chat.svelte

@@ -0,0 +1,177 @@
+<script lang="ts" context="module">
+  type Element = {
+    id: string
+    type: "date" | "note"
+    value: string | TrustedEvent
+    showPubkey: boolean
+  }
+</script>
+
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {derived, writable} from "svelte/store"
+  import {assoc, sortBy, remove} from "@welshman/lib"
+  import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
+  import {
+    pubkey,
+    formatTimestampAsDate,
+    inboxRelaySelectionsByPubkey,
+    loadInboxRelaySelections,
+    tagPubkey,
+  } from "@welshman/app"
+  import type {MergedThunk} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import ProfileList from "@app/components/ProfileList.svelte"
+  import ChatMessage from "@app/components/ChatMessage.svelte"
+  import ChatCompose from "@app/components/ChannelCompose.svelte"
+  import {deriveChat, splitChatId, PLATFORM_NAME} from "@app/state"
+  import {pushModal} from "@app/modal"
+  import {sendWrapped} from "@app/commands"
+
+  export let id
+
+  const chat = deriveChat(id)
+  const pubkeys = splitChatId(id)
+  const others = remove($pubkey!, pubkeys)
+  const thunks = writable({} as Record<string, MergedThunk>)
+  const missingInboxes = derived(inboxRelaySelectionsByPubkey, $m =>
+    pubkeys.filter(pk => !$m.has(pk)),
+  )
+
+  const assertEvent = (e: any) => e as TrustedEvent
+
+  const assertNotNil = <T,>(x: T | undefined) => x!
+
+  const showMembers = () =>
+    pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
+
+  const onSubmit = async ({content, ...params}: EventContent) => {
+    const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
+    const template = createEvent(DIRECT_MESSAGE, {content, tags})
+    const thunk = await sendWrapped({template, pubkeys, delay: 2000})
+
+    thunks.update(assoc(thunk.thunks[0].event.id, thunk))
+  }
+
+  let loading = true
+  let elements: Element[] = []
+
+  $: {
+    elements = []
+
+    let previousDate
+    let previousPubkey
+
+    for (const event of sortBy(e => e.created_at, $chat?.messages || [])) {
+      const {id, pubkey, created_at} = event
+      const date = formatTimestampAsDate(created_at)
+
+      if (date !== previousDate) {
+        elements.push({type: "date", value: date, id: date, showPubkey: false})
+      }
+
+      elements.push({
+        id,
+        type: "note",
+        value: event,
+        showPubkey: date !== previousDate || previousPubkey !== pubkey,
+      })
+
+      previousDate = date
+      previousPubkey = pubkey
+    }
+
+    elements.reverse()
+  }
+
+  onMount(async () => {
+    await Promise.all(others.map(pk => loadInboxRelaySelections(pk)))
+  })
+
+  setTimeout(() => {
+    loading = false
+  }, 3000)
+</script>
+
+<div class="relative flex h-full w-full flex-col">
+  {#if others.length > 0}
+    <PageBar>
+      <div slot="title" class="row-2">
+        {#if others.length === 1}
+          {@const pubkey = others[0]}
+          {@const showProfile = () => pushModal(ProfileDetail, {pubkey}, {drawer: true})}
+          <Button on:click={showProfile} class="row-2">
+            <ProfileCircle {pubkey} size={5} />
+            <ProfileName {pubkey} />
+          </Button>
+        {:else}
+          <ProfileCircles pubkeys={others} size={5} />
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+            <ProfileName pubkey={others[0]} />
+            and {others.length - 1}
+            {others.length > 2 ? "others" : "other"}
+            <Button on:click={showMembers} class="btn btn-link">Show all members</Button>
+          </p>
+        {/if}
+      </div>
+      <div slot="action">
+        {#if remove($pubkey, $missingInboxes).length > 0}
+          {@const count = remove($pubkey, $missingInboxes).length}
+          {@const label = count > 1 ? "inboxes are" : "inbox is"}
+          <div
+            class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+            data-tip="{count} {label} not configured.">
+            <Icon icon="danger" />
+            {count}
+          </div>
+        {/if}
+      </div>
+    </PageBar>
+  {/if}
+  <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">
+    {#if $missingInboxes.includes(assertNotNil($pubkey))}
+      <div class="py-12">
+        <div class="card2 col-2 m-auto max-w-md items-center text-center">
+          <p class="row-2 text-lg text-error">
+            <Icon icon="danger" />
+            Your inbox is not configured.
+          </p>
+          <p>
+            In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
+            your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your
+            inbox.
+          </p>
+        </div>
+      </div>
+    {/if}
+    {#each elements as { type, id, value, showPubkey } (id)}
+      {#if type === "date"}
+        <Divider>{value}</Divider>
+      {:else}
+        {@const event = assertEvent(value)}
+        {@const thunk = $thunks[event.id]}
+        <ChatMessage {event} {thunk} {pubkeys} {showPubkey} />
+      {/if}
+    {/each}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for messages...
+        {:else}
+          End of message history
+        {/if}
+      </Spinner>
+    </p>
+  </div>
+  <ChatCompose {onSubmit} />
+</div>

src/app/components/ChatMessage.svelte

@@ -51,6 +51,9 @@
   let popoverIsVisible = false
 </script>
 
+{#if thunk}
+  <ThunkStatus {thunk} />
+{/if}
 <div
   class="group chat flex items-center justify-end gap-1 px-2"
   class:chat-start={event.pubkey !== $pubkey}
@@ -96,9 +99,6 @@
           {/if}
           <div class="text-sm">
             <Content showEntire {event} />
-            {#if thunk}
-              <ThunkStatus {thunk} />
-            {/if}
           </div>
         </div>
       </div>

src/app/components/MenuSettings.svelte

@@ -11,6 +11,13 @@
 </script>
 
 <div class="column menu gap-2">
+  <Link href="/settings/profile">
+    <CardButton>
+      <div slot="icon"><Icon icon="user-rounded" size={7} /></div>
+      <div slot="title">Profile</div>
+      <div slot="info">Customize your user profile</div>
+    </CardButton>
+  </Link>
   <Link href="/settings/relays">
     <CardButton>
       <div slot="icon"><Icon icon="server" size={7} /></div>

src/app/components/MenuSpaces.svelte

@@ -7,15 +7,12 @@
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
-  import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
-  import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
+  import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import {userMembership, getMembershipUrls, PLATFORM_RELAY} from "@app/state"
   import {makeSpacePath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
-  const startCreate = () => pushModal(SpaceCreateExternal)
-
-  const startJoin = () => pushModal(SpaceInviteAccept)
+  const addSpace = () => pushModal(SpaceAdd)
 </script>
 
 <div class="column menu gap-2">
@@ -28,7 +25,7 @@
       </CardButton>
     </Link>
     <Divider />
-  {:else}
+  {:else if getMembershipUrls($userMembership).length > 0}
     {#each getMembershipUrls($userMembership) as url (url)}
       <Link href={makeSpacePath(url)}>
         <CardButton>
@@ -38,29 +35,13 @@
         </CardButton>
       </Link>
     {/each}
-    {#if getMembershipUrls($userMembership).length > 0}
-      <Divider />
-    {/if}
+    <Divider />
   {/if}
-  <Button on:click={startJoin}>
+  <Button on:click={addSpace}>
     <CardButton>
       <div slot="icon"><Icon icon="login-2" size={7} /></div>
-      <div slot="title">Join a space</div>
-      <div slot="info">Enter an invite code or url to join an existing space.</div>
-    </CardButton>
-  </Button>
-  <Link href="/discover">
-    <CardButton>
-      <div slot="icon"><Icon icon="compass" size={7} /></div>
-      <div slot="title">Find a space</div>
-      <div slot="info">Browse spaces on the discover page.</div>
-    </CardButton>
-  </Link>
-  <Button on:click={startCreate}>
-    <CardButton>
-      <div slot="icon"><Icon icon="add-circle" size={7} /></div>
-      <div slot="title">Create a space</div>
-      <div slot="info">Just a few questions and you'll be on your way.</div>
+      <div slot="title">Add a space</div>
+      <div slot="info">Join or create a new space</div>
     </CardButton>
   </Button>
 </div>

src/app/components/PrimaryNav.svelte

@@ -14,7 +14,8 @@
 
   const addSpace = () => pushModal(SpaceAdd)
 
-  const showSpacesMenu = () => pushModal(MenuSpaces)
+  const showSpacesMenu = () =>
+    getMembershipUrls($userMembership).length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd)
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 </script>
@@ -58,6 +59,9 @@
         class="tooltip-right">
         <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Notes" href="/notes" class="tooltip-right">
+        <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
+      </PrimaryNavItem>
       <PrimaryNavItem title="Messages" href="/chat" class="tooltip-right">
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>
@@ -73,10 +77,13 @@
 <div
   class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
-    <div class="flex gap-4 sm:gap-8">
+    <div class="flex gap-2 sm:gap-8">
       <PrimaryNavItem title="Search" href="/people">
         <Avatar icon="magnifer" class="!h-10 !w-10" />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Notes" href="/notes">
+        <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
+      </PrimaryNavItem>
       <PrimaryNavItem title="Messages" href="/chat">
         <Avatar icon="letter" class="!h-10 !w-10" />
       </PrimaryNavItem>

src/app/components/ThunkStatus.svelte

@@ -28,23 +28,25 @@
   $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
 </script>
 
-{#if canCancel || isPending}
-  <span class="mt-2 flex items-center gap-1">
-    <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
-    <span class="opacity-50">Sending...</span>
-    {#if canCancel}
-      <Button class="link" on:click={abort}>Cancel</Button>
-    {/if}
-  </span>
-{:else if isFailure && failure}
-  {@const [url, {message, status}] = failure}
-  <Tippy
-    component={ThunkStatusDetail}
-    props={{url, message, status, retry}}
-    params={{interactive: true}}>
-    <span class="tooltip mt-2 flex cursor-pointer items-center gap-1">
-      <Icon icon="danger" size={3} />
-      <span class="opacity-50">Failed to send!</span>
+<div class="flex justify-end text-xs">
+  {#if canCancel || isPending}
+    <span class="mt-2 flex items-center gap-1">
+      <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
+      <span class="opacity-50">Sending...</span>
+      {#if canCancel}
+        <Button class="link" on:click={abort}>Cancel</Button>
+      {/if}
     </span>
-  </Tippy>
-{/if}
+  {:else if isFailure && failure}
+    {@const [url, {message, status}] = failure}
+    <Tippy
+      component={ThunkStatusDetail}
+      props={{url, message, status, retry}}
+      params={{interactive: true}}>
+      <span class="tooltip mt-2 flex cursor-pointer items-center gap-1">
+        <Icon icon="danger" size={3} />
+        <span class="opacity-50">Failed to send!</span>
+      </span>
+    </Tippy>
+  {/if}
+</div>