Make the forced-relay experience more seamless, split modal routes out

ROADMAP.md

@@ -1,12 +1,10 @@
 # Current
 
-- [ ] Fix cursor
 - [ ] Image classification
   - https://github.com/bhky/opennsfw2
 
 # Core
 
-- [ ] Key login should accept bech32 and hex
 - [ ] Make mutes private
 - [ ] Write multi-relay pagination into paravel and open source it
   - https://github.com/nostr-protocol/nips/pull/408

src/agent/pool.ts

@@ -94,6 +94,7 @@ const Meta = {
 }
 
 const forceUrls = (import.meta.env.VITE_FORCE_RELAYS || "").split(",").filter(identity)
+const forceRelays = forceUrls.map(url => ({url, write: true}))
 
 const countRelay = forceUrls[0] || "wss://rbr.bio"
 
@@ -402,6 +403,7 @@ export default {
   Config,
   Meta,
   forceUrls,
+  forceRelays,
   defaultUrls,
   disconnect,
   getQuality,

src/agent/relays.ts

@@ -28,13 +28,15 @@ export const initializeRelayList = async () => {
   await relays.patch(pool.defaultUrls.map(objOf("url")))
 
   // Load relays from nostr.watch via dufflepud
-  try {
-    const url = import.meta.env.VITE_DUFFLEPUD_URL + "/relay"
-    const json = await fetchJson(url)
+  if (pool.forceUrls.length === 0) {
+    try {
+      const url = import.meta.env.VITE_DUFFLEPUD_URL + "/relay"
+      const json = await fetchJson(url)
 
-    await relays.patch(json.relays.filter(isRelay).map(objOf("url")))
-  } catch (e) {
-    warn("Failed to fetch relays list", e)
+      await relays.patch(json.relays.filter(isRelay).map(objOf("url")))
+    } catch (e) {
+      warn("Failed to fetch relays list", e)
+    }
   }
 }
 

src/agent/user.ts

@@ -47,7 +47,9 @@ const settings = derived(profile, prop("settings"))
 const roomsJoined = derived(profile, prop("rooms_joined")) as Readable<string>
 const lastChecked = derived(profile, prop("last_checked")) as Readable<Record<string, number>>
 const petnames = derived(profile, prop("petnames")) as Readable<Array<Array<string>>>
-const relays = derived(profile, prop("relays")) as Readable<Array<Relay>>
+const relays = derived(profile, p =>
+  pool.forceRelays.length > 0 ? pool.forceRelays : p.relays
+) as Readable<Array<Relay>>
 const mutes = derived(profile, prop("mutes")) as Readable<Array<[string, string]>>
 const lists = derived(profile, prop("lists")) as Readable<Array<MyEvent>>
 

src/app/Modal.svelte

@@ -3,85 +3,20 @@
   import {menuIsOpen} from "src/app/state"
   import {modal} from "src/partials/state"
   import Modal from "src/partials/Modal.svelte"
-  import Content from "src/partials/Content.svelte"
-  import Spinner from "src/partials/Spinner.svelte"
-  import ChatEdit from "src/app/views/ChatEdit.svelte"
-  import LoginConnect from "src/app/views/LoginConnect.svelte"
-  import LoginPrivKey from "src/app/views/LoginPrivKey.svelte"
-  import LoginPubKey from "src/app/views/LoginPubKey.svelte"
-  import Onboarding from "src/app/views/Onboarding.svelte"
-  import NoteCreate from "src/app/views/NoteCreate.svelte"
-  import NoteZap from "src/app/views/NoteZap.svelte"
-  import NoteDetail from "src/app/views/NoteDetail.svelte"
-  import PersonFeed from "src/app/views/PersonFeed.svelte"
-  import PersonList from "src/app/shared/PersonList.svelte"
-  import PersonProfileInfo from "src/app/views/PersonProfileInfo.svelte"
-  import PersonShare from "src/app/views/PersonShare.svelte"
-  import TopicFeed from "src/app/views/TopicFeed.svelte"
-  import ListList from "src/app/views/ListList.svelte"
-  import ListSelect from "src/app/views/ListSelect.svelte"
-  import ListEdit from "src/app/views/ListEdit.svelte"
-  import RelayAdd from "src/app/views/RelayAdd.svelte"
+  import ModalRoutes from "src/app/ModalRoutes.svelte"
 
   const {stack} = modal
 
+  $: nonVirtual = $stack.filter(m => !m.virtual)
+
   const closeModal = async () => {
     modal.pop()
     menuIsOpen.set(false)
   }
 </script>
 
-{#each $stack as m}
-  {#if !m.virtual}
-    <Modal virtual={false} onEscape={m.noEscape || m !== last($stack) ? null : closeModal}>
-      {#if m.type === "note/detail"}
-        {#key m.note.id}
-          <NoteDetail {...m} invertColors />
-        {/key}
-      {:else if m.type === "note/create"}
-        <NoteCreate pubkey={m.pubkey} nevent={m.nevent} />
-      {:else if m.type === "note/zap"}
-        <NoteZap note={m.note} />
-      {:else if m.type === "relay/add"}
-        <RelayAdd url={m.url} />
-      {:else if m.type === "onboarding"}
-        <Onboarding stage={m.stage} />
-      {:else if m.type === "room/edit"}
-        <ChatEdit {...m} />
-      {:else if m.type === "login/privkey"}
-        <LoginPrivKey />
-      {:else if m.type === "login/pubkey"}
-        <LoginPubKey />
-      {:else if m.type === "login/connect"}
-        <LoginConnect />
-      {:else if m.type === "person/feed"}
-        <PersonFeed pubkey={m.pubkey} />
-      {:else if m.type === "person/info"}
-        <PersonProfileInfo person={m.person} />
-      {:else if m.type === "person/share"}
-        <PersonShare person={m.person} />
-      {:else if m.type === "person/follows"}
-        <PersonList type="follows" pubkey={m.pubkey} />
-      {:else if m.type === "person/followers"}
-        <PersonList type="followers" pubkey={m.pubkey} />
-      {:else if m.type === "topic/feed"}
-        {#key m.topic}
-          <TopicFeed topic={m.topic} />
-        {/key}
-      {:else if m.type === "list/list"}
-        <ListList />
-      {:else if m.type === "list/select"}
-        <ListSelect item={m.item} />
-      {:else if m.type === "list/edit"}
-        <ListEdit list={m.list} />
-      {:else if m.type === "message"}
-        <Content size="lg">
-          <div class="text-center">{m.message}</div>
-          {#if m.spinner}
-            <Spinner delay={0} />
-          {/if}
-        </Content>
-      {/if}
-    </Modal>
-  {/if}
+{#each nonVirtual as m}
+  <Modal virtual={false} onEscape={!m.noEscape && m === last($stack) ? closeModal : null}>
+    <ModalRoutes {m} />
+  </Modal>
 {/each}

src/app/ModalRoutes.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import Content from "src/partials/Content.svelte"
+  import Spinner from "src/partials/Spinner.svelte"
+  import ChatEdit from "src/app/views/ChatEdit.svelte"
+  import LoginConnect from "src/app/views/LoginConnect.svelte"
+  import LoginPrivKey from "src/app/views/LoginPrivKey.svelte"
+  import LoginPubKey from "src/app/views/LoginPubKey.svelte"
+  import Onboarding from "src/app/views/Onboarding.svelte"
+  import NoteCreate from "src/app/views/NoteCreate.svelte"
+  import NoteZap from "src/app/views/NoteZap.svelte"
+  import NoteDetail from "src/app/views/NoteDetail.svelte"
+  import PersonFeed from "src/app/views/PersonFeed.svelte"
+  import PersonList from "src/app/shared/PersonList.svelte"
+  import PersonProfileInfo from "src/app/views/PersonProfileInfo.svelte"
+  import PersonShare from "src/app/views/PersonShare.svelte"
+  import TopicFeed from "src/app/views/TopicFeed.svelte"
+  import ListList from "src/app/views/ListList.svelte"
+  import ListSelect from "src/app/views/ListSelect.svelte"
+  import ListEdit from "src/app/views/ListEdit.svelte"
+  import RelayAdd from "src/app/views/RelayAdd.svelte"
+
+  export let m
+</script>
+
+{#if m.type === "note/detail"}
+  {#key m.note.id}
+    <NoteDetail {...m} invertColors />
+  {/key}
+{:else if m.type === "note/create"}
+  <NoteCreate pubkey={m.pubkey} nevent={m.nevent} />
+{:else if m.type === "note/zap"}
+  <NoteZap note={m.note} />
+{:else if m.type === "relay/add"}
+  <RelayAdd url={m.url} />
+{:else if m.type === "onboarding"}
+  <Onboarding stage={m.stage} />
+{:else if m.type === "room/edit"}
+  <ChatEdit {...m} />
+{:else if m.type === "login/privkey"}
+  <LoginPrivKey />
+{:else if m.type === "login/pubkey"}
+  <LoginPubKey />
+{:else if m.type === "login/connect"}
+  <LoginConnect />
+{:else if m.type === "person/feed"}
+  <PersonFeed pubkey={m.pubkey} />
+{:else if m.type === "person/info"}
+  <PersonProfileInfo person={m.person} />
+{:else if m.type === "person/share"}
+  <PersonShare person={m.person} />
+{:else if m.type === "person/follows"}
+  <PersonList type="follows" pubkey={m.pubkey} />
+{:else if m.type === "person/followers"}
+  <PersonList type="followers" pubkey={m.pubkey} />
+{:else if m.type === "topic/feed"}
+  {#key m.topic}
+    <TopicFeed topic={m.topic} />
+  {/key}
+{:else if m.type === "list/list"}
+  <ListList />
+{:else if m.type === "list/select"}
+  <ListSelect item={m.item} />
+{:else if m.type === "list/edit"}
+  <ListEdit list={m.list} />
+{:else if m.type === "message"}
+  <Content size="lg">
+    <div class="text-center">{m.message}</div>
+    {#if m.spinner}
+      <Spinner delay={0} />
+    {/if}
+  </Content>
+{/if}

src/app/state.ts

@@ -7,7 +7,7 @@ import {writable} from "svelte/store"
 import {max, omit, pluck, sortBy, find, slice, propEq} from "ramda"
 import {createMap, doPipe, first} from "hurdak/lib/hurdak"
 import {warn} from "src/util/logger"
-import {hash} from "src/util/misc"
+import {hash, sleep} from "src/util/misc"
 import {now, timedelta} from "src/util/misc"
 import {Tags, isNotification, userKinds} from "src/util/nostr"
 import {findReplyId} from "src/util/nostr"
@@ -227,10 +227,26 @@ export const loadAppData = async pubkey => {
   }
 }
 
-export const login = (method, key) => {
+export const login = async (method, key) => {
   keys.login(method, key)
 
-  modal.push({type: "login/connect", noEscape: true})
+  if (pool.forceUrls.length > 0) {
+    modal.replace({
+      type: "message",
+      message: "Logging you in...",
+      spinner: true,
+      noEscape: true,
+    })
+
+    await Promise.all([
+      sleep(1500),
+      network.loadPeople([user.getPubkey()], {force: true, kinds: userKinds}),
+    ])
+
+    navigate("/notes")
+  } else {
+    modal.push({type: "login/connect", noEscape: true})
+  }
 }
 
 export const mergeParents = (notes: Array<DisplayEvent>) => {