Set up default messaging relays

src/app/components/Chat.svelte

@@ -35,13 +35,13 @@
   } from "@welshman/app"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   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 PageContent from "@lib/components/PageContent.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Button from "@lib/components/Button.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
@@ -51,7 +51,7 @@
   import ChatComposeEdit from "@app/components/ChatComposeEdit.svelte"
   import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
-  import {userSettingsValues, PLATFORM_NAME, deriveChat} from "@app/core/state"
+  import {userSettingsValues, deriveChat} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {makeDelete, prependParent} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
@@ -289,12 +289,14 @@
       <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} />
-          {missingRelayLists.length} messaging
-          {missingRelayLists.length > 1 ? "lists are" : "list is"} not configured.
+          Direct messages are not enabled
         </p>
         <p>
-          In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please make
-          sure everyone in this conversation has set up their messaging relays.
+          Ask
+          {#each missingRelayLists as pubkey (pubkey)}
+            <ProfileLink {pubkey} />
+          {/each}
+          to enable direct messaging by opening this conversation in their app.
         </p>
       </div>
     </div>
@@ -339,6 +341,7 @@
       {onSubmit}
       {onEscape}
       {onEditPrevious}
-      content={eventToEdit?.content} />
+      content={eventToEdit?.content}
+      disabled={Boolean(missingRelayLists.length)} />
   {/key}
 </div>

src/app/components/ChatCompose.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onDestroy, onMount} from "svelte"
   import {writable} from "svelte/store"
+  import cx from "classnames"
   import type {EventContent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
@@ -12,17 +13,24 @@
 
   type Props = {
     content?: string
+    disabled?: boolean
     onEscape?: () => void
     onEditPrevious?: () => void
     onSubmit: (event: EventContent) => void
   }
 
-  const {content, onEscape, onEditPrevious, onSubmit}: Props = $props()
+  const {content, disabled = false, onEscape, onEditPrevious, onSubmit}: Props = $props()
 
-  const autofocus = !isMobile
+  const autofocus = !isMobile && !disabled
 
   const uploading = writable(false)
 
+  const editorClass = $derived(
+    cx("chat-editor flex-grow overflow-hidden", {
+      "pointer-events-none opacity-50": disabled,
+    }),
+  )
+
   export const focus = () => editor.then(ed => ed.chain().focus().run())
 
   export const canEnterEditPrevious = () =>
@@ -41,7 +49,7 @@
   const uploadFiles = () => editor.then(ed => ed.chain().selectFiles().run())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || disabled) return
 
     const ed = await editor
     const content = ed.getText({blockSeparator: "\n"}).trim()
@@ -78,7 +86,7 @@
   <Button
     data-tip="Add an image"
     class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
-    disabled={$uploading}
+    disabled={$uploading || disabled}
     onclick={uploadFiles}>
     {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
@@ -86,13 +94,13 @@
       <Icon icon={GallerySend} />
     {/if}
   </Button>
-  <div class="chat-editor flex-grow overflow-hidden">
+  <div class={editorClass} aria-disabled={disabled}>
     <EditorContent {editor} />
   </div>
   <Button
     data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
     class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
-    disabled={$uploading}
+    disabled={$uploading || disabled}
     onclick={submit}>
     <Icon icon={Plane} />
   </Button>

src/app/components/ChatEnable.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import {getRelaysFromList} from "@welshman/util"
+  import {waitForThunkError, setMessagingRelays, userRelayList, setRelays} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {DEFAULT_RELAYS, DEFAULT_MESSAGING_RELAYS} from "@app/core/state"
+  import {pushToast} from "@app/util/toast"
+
+  type Props = {
+    next: () => void
+  }
+
+  const {next}: Props = $props()
+
+  let loading = $state(false)
+
+  const back = () => history.back()
+
+  const enable = async () => {
+    loading = true
+
+    try {
+      if (getRelaysFromList($userRelayList).length === 0) {
+        const error = await waitForThunkError(await setRelays(DEFAULT_RELAYS.map(r => ["r", r])))
+
+        if (error) {
+          pushToast({theme: "error", message: error})
+          return
+        }
+      }
+
+      const error = await waitForThunkError(await setMessagingRelays(DEFAULT_MESSAGING_RELAYS))
+
+      if (error) {
+        pushToast({theme: "error", message: error})
+        return
+      }
+
+      await next()
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(enable)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Enable direct messaging?</ModalTitle>
+    </ModalHeader>
+    <p>Direct messaging isn't currently enabled. Would you like to turn it on?</p>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Enable direct messaging</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/ChatItem.svelte

@@ -5,11 +5,11 @@
   import type {TrustedEvent} from "@welshman/util"
   import {pubkey, loadMessagingRelayList} from "@welshman/app"
   import {fade} from "@lib/transition"
-  import Link from "@lib/components/Link.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 {makeChatPath} from "@app/util/routes"
+  import {makeChatPath, goToChat} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
 
   interface Props {
@@ -24,6 +24,7 @@
   const others = uniq(remove($pubkey!, props.pubkeys))
   const active = $derived($page.params.chat === props.id)
   const path = makeChatPath(props.pubkeys)
+  const openChat = () => goToChat(props.pubkeys)
 
   onMount(() => {
     for (const pk of others) {
@@ -32,7 +33,7 @@
   })
 </script>
 
-<Link class="flex flex-col justify-start gap-1" href={makeChatPath(props.pubkeys)}>
+<Button class="flex flex-col justify-start gap-1" onclick={openChat}>
   <div
     class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {props.class}"
     class:bg-base-100={active}>
@@ -71,4 +72,4 @@
       </p>
     </div>
   </div>
-</Link>
+</Button>

src/app/components/ChatStart.svelte

@@ -2,7 +2,6 @@
   import * as nip19 from "nostr-tools/nip19"
   import {onMount} from "svelte"
   import {writable} from "svelte/store"
-  import {goto} from "$app/navigation"
   import {tryCatch, uniq} from "@welshman/lib"
   import {fromNostrURI} from "@welshman/util"
   import {loadMessagingRelayList} from "@welshman/app"
@@ -19,11 +18,11 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
-  import {makeChatPath} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   const back = () => history.back()
 
-  const onSubmit = () => goto(makeChatPath(pubkeys))
+  const onSubmit = () => goToChat(pubkeys)
 
   const addPubkey = (pubkey: string) => {
     pubkeys = uniq([...pubkeys, pubkey])

src/app/components/PrimaryNav.svelte

@@ -14,7 +14,7 @@
   import {userSpaceUrls, PLATFORM_RELAYS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {notifications} from "@app/util/notifications"
-  import {goToLastChat} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   type Props = {
     children?: Snippet
@@ -22,6 +22,8 @@
 
   const {children}: Props = $props()
 
+  const chatHandler = () => goToChat()
+
   const showSettingsMenu = () => pushModal(MenuSettings)
 
   const anySpaceNotifications = $derived($userSpaceUrls.some(p => $notifications.has(p)))
@@ -48,7 +50,7 @@
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
-        onclick={goToLastChat}
+        onclick={chatHandler}
         class="tooltip-right"
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
@@ -76,7 +78,7 @@
       <PrimaryNavItem
         title="Messages"
         href="/chat"
-        onclick={goToLastChat}
+        onclick={chatHandler}
         notification={$notifications.has("/chat")}>
         <ImageIcon alt="Messages" src={Letter} size={8} />
       </PrimaryNavItem>

src/app/components/ProfileDetail.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {goto} from "$app/navigation"
   import {removeUndefined} from "@welshman/lib"
   import {ManagementMethod} from "@welshman/util"
   import {
@@ -33,7 +32,7 @@
   import {addSpaceMembers} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
-  import {makeChatPath} from "@app/util/routes"
+  import {goToChat} from "@app/util/routes"
 
   export type Props = {
     pubkey: string
@@ -52,11 +51,9 @@
 
   const back = () => history.back()
 
-  const chatPath = makeChatPath([pubkey])
-
   const showInfo = () => pushModal(EventInfo, {url, event: $profile!.event})
 
-  const openChat = () => goto(chatPath)
+  const openChat = () => goToChat([pubkey])
 
   const toggleMenu = (pubkey: string) => {
     showMenu = !showMenu

src/app/components/RelayList.svelte

@@ -6,6 +6,7 @@
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
   import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -70,6 +71,11 @@
           Remove
         </Button>
       </RelayItem>
+    {:else}
+      <p class="text-center py-12 flex justify-center items-center gap-2">
+        <Icon icon={DangerTriangle} />
+        No relay selections found.
+      </p>
     {/each}
   </ModalBody>
   <ModalFooter>

src/app/components/SpaceMenu.svelte

@@ -59,7 +59,7 @@
   } from "@app/core/state"
   import {setSpaceNotifications} from "@app/core/commands"
   import {pushModal} from "@app/util/modal"
-  import {makeSpacePath, makeChatPath} from "@app/util/routes"
+  import {makeSpacePath, goToChat} from "@app/util/routes"
 
   const {url} = $props()
 
@@ -115,6 +115,8 @@
 
   const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
+  const contactOwner = () => goToChat([$relay!.pubkey!])
+
   const shouldNotify = deriveShouldNotify(url)
 
   const toggleSpaceNotifications = () => {
@@ -194,10 +196,10 @@
             {/if}
             {#if $relay?.pubkey && $relay.pubkey !== $pubkey}
               <li>
-                <Link href={makeChatPath([$relay.pubkey])}>
+                <Button onclick={contactOwner}>
                   <Icon icon={Letter} />
                   Contact Owner
-                </Link>
+                </Button>
               </li>
             {/if}
             <li>

src/app/util/routes.ts

@@ -1,4 +1,3 @@
-import type {Page} from "@sveltejs/kit"
 import theme from "tailwindcss/defaultTheme"
 import {get} from "svelte/store"
 import * as nip19 from "nostr-tools/nip19"
@@ -7,7 +6,7 @@ import {page} from "$app/stores"
 import {nthEq} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {getAddress} from "@welshman/util"
-import {tracker} from "@welshman/app"
+import {tracker, userMessagingRelayList} from "@welshman/app"
 import {identity} from "@welshman/lib"
 import {
   getTagValue,
@@ -17,17 +16,32 @@ import {
   ZAP_GOAL,
   EVENT_TIME,
   getPubkeyTagValues,
+  getRelaysFromList,
 } from "@welshman/util"
-import {
-  makeChatId,
-  entityLink,
-  decodeRelay,
-  encodeRelay,
-  userSpaceUrls,
-  DM_KINDS,
-  ROOM,
-} from "@app/core/state"
+import {makeChatId, entityLink, encodeRelay, DM_KINDS, ROOM} from "@app/core/state"
+import {pushModal} from "@app/util/modal"
 import {lastPageBySpaceUrl, lastChatUrl} from "@app/util/history"
+import ChatEnable from "@app/components/ChatEnable.svelte"
+
+// Chat
+
+export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}`
+
+export const makeRoomPath = (url: string, h: string) => `/spaces/${encodeRelay(url)}/${h}`
+
+export const makeSpaceChatPath = (url: string) => makeRoomPath(url, "chat")
+
+export const goToChat = (pubkeys: string[] = []) => {
+  if (getRelaysFromList(get(userMessagingRelayList)).length === 0) {
+    pushModal(ChatEnable, {next: () => goToChat(pubkeys)})
+  } else if (pubkeys.length === 0) {
+    goto(lastChatUrl ?? "/chat")
+  } else {
+    goto(makeChatPath(pubkeys))
+  }
+}
+
+// Spaces
 
 export const makeSpacePath = (url: string, ...extra: (string | undefined)[]) => {
   let path = `/spaces/${encodeRelay(url)}`
@@ -56,15 +70,7 @@ export const goToSpace = async (url: string) => {
   }
 }
 
-export const goToLastChat = () => {
-  goto(lastChatUrl ?? "/chat")
-}
-
-export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}`
-
-export const makeRoomPath = (url: string, h: string) => `/spaces/${encodeRelay(url)}/${h}`
-
-export const makeSpaceChatPath = (url: string) => makeRoomPath(url, "chat")
+// Content types, events
 
 export const makeMessagePath = (url: string, event: TrustedEvent) => {
   const h = getTagValue(ROOM, event.tags)
@@ -84,26 +90,6 @@ export const makeClassifiedPath = (url: string, address?: string) =>
 export const makeCalendarPath = (url: string, address?: string) =>
   makeSpacePath(url, "calendar", address)
 
-export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]
-
-export const getPrimaryNavItemIndex = ($page: Page) => {
-  const urls = get(userSpaceUrls)
-
-  switch (getPrimaryNavItem($page)) {
-    case "discover":
-      return urls.length + 2
-    case "spaces": {
-      const routeUrl = decodeRelay($page.params.relay || "")
-
-      return urls.findIndex(url => url === routeUrl) + 1
-    }
-    case "settings":
-      return urls.length + 3
-    default:
-      return 0
-  }
-}
-
 export const scrollToEvent = (id: string) => {
   const element = document.querySelector(`[data-event="${id}"]`) as any
 

src/routes/settings/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
   import {Capacitor} from "@capacitor/core"
-  import {fly} from "@lib/transition"
   import UserCircle from "@assets/icons/user-circle.svg?dataurl"
   import Wallet from "@assets/icons/wallet.svg?dataurl"
   import Server from "@assets/icons/server.svg?dataurl"
@@ -36,51 +35,35 @@
     <SecondaryNavItem class="w-full !justify-between">
       <strong class="ellipsize flex items-center gap-3"> Your Settings </strong>
     </SecondaryNavItem>
-    <div in:fly|local>
-      <SecondaryNavItem href="/settings/profile">
-        <Icon icon={UserCircle} /> Profile
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 50}}>
-      <SecondaryNavItem href="/settings/alerts">
-        <Icon icon={Bell} /> Alerts
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 100}} class:hidden={Capacitor.getPlatform() === "ios"}>
+    <SecondaryNavItem href="/settings/profile">
+      <Icon icon={UserCircle} /> Profile
+    </SecondaryNavItem>
+    <SecondaryNavItem href="/settings/alerts">
+      <Icon icon={Bell} /> Alerts
+    </SecondaryNavItem>
+    {#if Capacitor.getPlatform() !== "ios"}
       <SecondaryNavItem href="/settings/wallet">
         <Icon icon={Wallet} /> Wallet
       </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 150}}>
-      <SecondaryNavItem href="/settings/relays">
-        <Icon icon={Server} /> Relays
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 200}}>
-      <SecondaryNavItem href="/settings/content">
-        <Icon icon={GalleryMinimalistic} /> Content
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 250}}>
-      <SecondaryNavItem href="/settings/privacy">
-        <Icon icon={Shield} /> Privacy
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 300}}>
-      <SecondaryNavItem onclick={toggleTheme}>
-        <Icon icon={Moon} /> Theme
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 350}}>
-      <SecondaryNavItem href="/settings/about">
-        <Icon icon={Code2} /> About
-      </SecondaryNavItem>
-    </div>
-    <div in:fly|local={{delay: 400}}>
-      <SecondaryNavItem class="text-error hover:text-error" onclick={logout}>
-        <Icon icon={Exit} /> Log Out
-      </SecondaryNavItem>
-    </div>
+    {/if}
+    <SecondaryNavItem href="/settings/relays">
+      <Icon icon={Server} /> Relays
+    </SecondaryNavItem>
+    <SecondaryNavItem href="/settings/content">
+      <Icon icon={GalleryMinimalistic} /> Content
+    </SecondaryNavItem>
+    <SecondaryNavItem href="/settings/privacy">
+      <Icon icon={Shield} /> Privacy
+    </SecondaryNavItem>
+    <SecondaryNavItem onclick={toggleTheme}>
+      <Icon icon={Moon} /> Theme
+    </SecondaryNavItem>
+    <SecondaryNavItem href="/settings/about">
+      <Icon icon={Code2} /> About
+    </SecondaryNavItem>
+    <SecondaryNavItem class="text-error hover:text-error" onclick={logout}>
+      <Icon icon={Exit} /> Log Out
+    </SecondaryNavItem>
   </SecondaryNavSection>
 </SecondaryNav>