Show warning when inbox relays aren't configured

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>