Show warning when inbox relays aren't configured

src/app.css

@@ -56,7 +56,7 @@
 .hover\:bg-alt:hover,
 .bg-alt .bg-alt .hover\:bg-alt:hover,
 .bg-alt .bg-alt.hover\:bg-alt:hover {
-  @apply bg-base-100 transition-colors text-base-content;
+  @apply bg-base-100 text-base-content transition-colors;
 }
 
 .bg-alt .bg-alt,
@@ -65,7 +65,7 @@
 .bg-alt .bg-alt .bg-alt .hover\:bg-alt:hover,
 .bg-alt.hover\:bg-alt:hover,
 .bg-alt .bg-alt .bg-alt.hover\:bg-alt:hover {
-  @apply bg-base-300 transition-colors text-base-content;
+  @apply bg-base-300 text-base-content transition-colors;
 }
 
 .card2 {
@@ -84,6 +84,30 @@
   @apply flex items-center justify-center;
 }
 
+.row-2 {
+  @apply flex items-center gap-2;
+}
+
+.row-3 {
+  @apply flex items-center gap-3;
+}
+
+.row-4 {
+  @apply flex items-center gap-4;
+}
+
+.col-2 {
+  @apply flex flex-col gap-2;
+}
+
+.col-3 {
+  @apply flex flex-col gap-3;
+}
+
+.col-4 {
+  @apply flex flex-col gap-4;
+}
+
 .content {
   @apply m-auto w-full max-w-3xl p-4 sm:p-8 md:p-12;
 }

src/app/components/ChatItem.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {derived} from "svelte/store"
+  import {page} from "$app/stores"
+  import {remove} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {pubkey, inboxRelaySelectionsByPubkey, loadInboxRelaySelections} from "@welshman/app"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Name from "@app/components/Name.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+
+  export let id: string
+  export let pubkeys: string[]
+  export let messages: TrustedEvent[]
+
+  const message = messages[0]
+  const others = remove($pubkey, pubkeys)
+  const active = $page.params.chat === id
+  const missingInbox = derived(inboxRelaySelectionsByPubkey, $m => others.some(pk => !$m.has(pk)))
+
+  onMount(() => {
+    for (const pk of others) {
+      loadInboxRelaySelections(pk)
+    }
+  })
+</script>
+
+<div
+  class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100"
+  class:bg-base-100={active}>
+  <Link class="flex flex-col justify-start gap-1" href="/home/{id}">
+    <div class="flex justify-between gap-2">
+      <div class="flex min-w-0 items-center gap-2">
+        {#if others.length === 1}
+          <ProfileCircle pubkey={others[0]} size={5} />
+          <Name pubkey={others[0]} />
+        {:else}
+          <ProfileCircles pubkeys={others} size={5} />
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+            <Name pubkey={others[0]} />
+            and {others.length - 1}
+            {others.length > 2 ? "others" : "other"}
+          </p>
+        {/if}
+      </div>
+      {#if $missingInbox}
+        <Icon icon="danger" class="text-error" />
+      {/if}
+    </div>
+    <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+      {message.content}
+    </p>
+  </Link>
+</div>

src/app/components/ProfileDetail.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {sleep, sortBy, flatten} from "@welshman/lib"
+  import {nip19} from "nostr-tools"
+  import {ctx, sleep, sortBy, flatten} from "@welshman/lib"
   import {feedFromFilter} from "@welshman/feeds"
   import {NOTE, displayProfile, displayPubkey, getAncestorTags} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
   import {repository, deriveProfile, displayNip05, feedLoader} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import {fly} from "@lib/transition"
+  import Link from "@lib/components/Link.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Content from "@app/components/Content.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
+  import {entityLink} from "@app/state"
 
   export let pubkey
 
@@ -19,6 +22,8 @@
   const filter = {kinds: [NOTE], authors: [pubkey]}
   const events = deriveEvents(repository, {filters: [filter]})
   const loader = feedLoader.getLoader(feedFromFilter(filter), {})
+  const relays = ctx.app.router.FromPubkeys([pubkey]).getUrls()
+  const nprofile = nip19.nprofileEncode({pubkey, relays})
 
   let element: Element
 
@@ -38,7 +43,7 @@
 
 <div class="flex max-w-full flex-col gap-4 p-4" bind:this={element}>
   {#if $profile}
-    <div class="flex max-w-full gap-3">
+    <Link external href={entityLink(nprofile)} class="flex max-w-full gap-3">
       <div class="py-1">
         <Avatar src={$profile?.picture} size={10} />
       </div>
@@ -52,7 +57,7 @@
           {$profile?.nip05 ? displayNip05($profile.nip05) : pubkeyDisplay}
         </div>
       </div>
-    </div>
+    </Link>
     <Content event={{content: $profile.about, tags: []}} hideMedia />
     <div class="flex flex-col gap-2">
       {#each sortBy(e => -e.created_at, $events) as event (event.id)}

src/app/components/SpaceJoin.svelte

@@ -23,7 +23,7 @@
 
     try {
       await tryJoin()
-    } finally {
+    } catch (e) {
       loading = false
     }
   }

src/lib/components/Drawer.svelte

@@ -30,7 +30,7 @@
   </div>
   <div class="drawer-side z-modal">
     <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="menu h-full w-80 overflow-auto bg-base-200 p-0 text-base-content">
+    <div class="menu h-full w-80 overflow-auto bg-base-200 p-0 text-base-content lg:w-96">
       <slot />
     </div>
   </div>

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="mb-2 max-h-screen flex-grow overflow-auto bg-base-200 pb-12 sm:mb-0 sm:pb-0">
+<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-14 sm:pb-0">
   <slot />
 </div>

src/routes/+layout.svelte

@@ -187,9 +187,7 @@
   <div data-theme={$theme}>
     <div class="flex h-screen overflow-hidden">
       <PrimaryNav>
-        {#key JSON.stringify($page.params)}
-          <slot />
-        {/key}
+        <slot />
       </PrimaryNav>
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">

src/routes/home/+layout.svelte

@@ -1,22 +1,19 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {ctx, ago, remove} from "@welshman/lib"
+  import {ctx, ago} from "@welshman/lib"
   import {WRAP} from "@welshman/util"
   import {pubkey, subscribe} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
-  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
-  import Name from "@app/components/Name.svelte"
-  import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
+  import ChatItem from "@app/components/ChatItem.svelte"
   import {chatSearch, pullConservatively} from "@app/state"
   import {pushModal} from "@app/modal"
 
@@ -72,36 +69,14 @@
     <input bind:value={term} class="grow" type="text" />
   </label>
   <div class="overflow-auto">
-    {#each chats as { id, pubkeys, messages }, i (id)}
-      {@const message = messages[0]}
-      {@const others = remove($pubkey, pubkeys)}
-      {@const active = $page.params.chat === id}
-      <div
-        class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100"
-        class:bg-base-100={active}>
-        <Link class="flex flex-col justify-start gap-1" href="/home/{id}">
-          <div class="flex items-center gap-2">
-            {#if others.length === 1}
-              <ProfileCircle pubkey={others[0]} size={5} />
-              <Name pubkey={others[0]} />
-            {:else}
-              <ProfileCircles pubkeys={others} size={5} />
-              <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-                <Name pubkey={others[0]} />
-                and {others.length - 1}
-                {others.length > 2 ? "others" : "other"}
-              </p>
-            {/if}
-          </div>
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-            {message.content}
-          </p>
-        </Link>
-      </div>
+    {#each chats as {id, pubkeys, messages} (id)}
+      <ChatItem {id} {pubkeys} {messages} />
     {/each}
   </div>
 </SecondaryNav>
 
 <Page>
-  <slot />
+  {#key JSON.stringify($page.params)}
+    <slot />
+  {/key}
 </Page>

src/routes/home/[chat]/+page.svelte

@@ -8,13 +8,24 @@
 </script>
 
 <script lang="ts">
+  import {onMount} from "svelte"
   import {page} from "$app/stores"
+  import {derived} from "svelte/store"
   import {sortBy, remove} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
-  import {pubkey, formatTimestampAsDate, tagPubkey} from "@welshman/app"
+  import {
+    pubkey,
+    formatTimestampAsDate,
+    inboxRelaySelectionsByPubkey,
+    loadInboxRelaySelections,
+    tagPubkey,
+  } from "@welshman/app"
   import {fly} from "@lib/transition"
+  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 Name from "@app/components/Name.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
@@ -28,9 +39,14 @@
   const chat = deriveChat(id)
   const pubkeys = splitChatId(id)
   const others = remove($pubkey, pubkeys)
+  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 onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
     const template = createEvent(DIRECT_MESSAGE, {content, tags})
@@ -69,33 +85,64 @@
     elements.reverse()
   }
 
+  onMount(() => {
+    for (const pk of others) {
+      loadInboxRelaySelections(pk)
+    }
+  })
+
   setTimeout(() => {
     loading = false
   }, 3000)
 </script>
 
-<div class="relative flex h-screen flex-col">
+<div class="relative flex h-full flex-col">
   {#if others.length > 0}
-    <div class="relative z-feature mx-2 rounded-xl pt-4">
-      <div
-        class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
-        <div class="flex items-center gap-2">
-          {#if others.length === 1}
-            <ProfileCircle pubkey={others[0]} size={5} />
+    <PageBar>
+      <div slot="title" class="row-2">
+        {#if others.length === 1}
+          <ProfileCircle pubkey={others[0]} size={5} />
+          <Name pubkey={others[0]} />
+        {:else}
+          <ProfileCircles pubkeys={others} size={5} />
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
             <Name pubkey={others[0]} />
-          {:else}
-            <ProfileCircles pubkeys={others} size={5} />
-            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-              <Name pubkey={others[0]} />
-              and {others.length - 1}
-              {others.length > 2 ? "others" : "other"}
-            </p>
-          {/if}
-        </div>
+            and {others.length - 1}
+            {others.length > 2 ? "others" : "other"}
+          </p>
+        {/if}
       </div>
-    </div>
+      <div slot="action">
+        {#if $missingInboxes.length > 0}
+          {@const plural = $missingInboxes.length > 0}
+          <div
+            class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+            data-tip="{$missingInboxes.length} {plural
+              ? 'inboxes are'
+              : 'inbox is'} not configured.">
+            <Icon icon="danger" />
+            {$missingInboxes.length}
+          </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, Flotilla 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>

src/routes/home/chats/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {ctx, ago, remove} from "@welshman/lib"
+  import {ctx, ago} from "@welshman/lib"
   import {WRAP} from "@welshman/util"
   import {pubkey, subscribe} from "@welshman/app"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
-  import Name from "@app/components/Name.svelte"
-  import ProfileCircle from "@app/components/ProfileCircle.svelte"
-  import ProfileCircles from "@app/components/ProfileCircles.svelte"
+  import ChatItem from "@app/components/ChatItem.svelte"
   import {chatSearch, pullConservatively} from "@app/state"
 
   let term = ""
@@ -34,29 +31,8 @@
     <input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
   </label>
   <div class="column gap-2 overflow-auto">
-    {#each chats as { id, pubkeys, messages }, i (id)}
-      {@const message = messages[0]}
-      {@const others = remove($pubkey, pubkeys)}
-      <div class="card2 bg-alt hover:bg-alt cursor-pointer px-6 py-2 transition-colors">
-        <Link class="flex flex-col justify-start gap-1" href="/home/{id}">
-          <div class="flex items-center gap-2">
-            {#if others.length === 1}
-              <ProfileCircle pubkey={others[0]} size={5} />
-              <Name pubkey={others[0]} />
-            {:else}
-              <ProfileCircles pubkeys={others} size={5} />
-              <p class="overflow-hidden text-ellipsis whitespace-nowrap">
-                <Name pubkey={others[0]} />
-                and {others.length - 1}
-                {others.length > 2 ? "others" : "other"}
-              </p>
-            {/if}
-          </div>
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-            {message.content}
-          </p>
-        </Link>
-      </div>
+    {#each chats as {id, pubkeys, messages} (id)}
+      <ChatItem {id} {pubkeys} {messages} />
     {/each}
   </div>
 </div>