Add dvms to feed form

src/app/shared/DVMField.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import {pluck} from "ramda"
+  import {append, randomId} from "@welshman/lib"
+  import {fuzzy} from "src/util/misc"
+  import Input from "src/partials/Input.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
+  import Field from "src/partials/Field.svelte"
+  import SearchSelect from "src/partials/SearchSelect.svelte"
+  import FlexColumn from "src/partials/FlexColumn.svelte"
+  import {searchRelayUrls, displayRelayUrl} from "src/engine"
+
+  export let dvmItem
+  export let onChange
+  export let onRemove
+
+  const removeTag = i => {
+    onChange({...dvmItem, tags: dvmItem.tags.toSpliced(i, 1)})
+    key = randomId()
+  }
+
+  const addTag = () => {
+    onChange({...dvmItem, tags: append(dvmItem.tags, ["", ""])})
+    key = randomId()
+  }
+
+  const setKind = kind => onChange({...dvmItem, kind: parseInt(kind)})
+
+  const kinds = [
+    {label: "Content discovery", kind: 5300},
+    {label: "Person discovery", kind: 5301},
+    {label: "Content search", kind: 5302},
+  ]
+
+  const searchKindItems = fuzzy(kinds, {keys: ["kind", "label"]})
+
+  const searchKinds = term => pluck("kind", searchKindItems(term.toString()))
+
+  let key = randomId()
+</script>
+
+<FlexColumn class="relative">
+  <Field label="Kind">
+    <SearchSelect search={searchKinds} value={dvmItem.kind} onChange={setKind}>
+      <div slot="item" let:item>{kinds.find(k => k.kind === item)?.label} (kind {item})</div>
+    </SearchSelect>
+  </Field>
+  <Field label="Relays">
+    <SearchSelect
+      multiple
+      value={dvmItem.relays}
+      search={$searchRelayUrls}
+      onChange={relays => onChange({...dvmItem, relays})}>
+      <span slot="item" let:item>{displayRelayUrl(item)}</span>
+    </SearchSelect>
+    <p slot="info">Select which relays requests to this DVM should be sent to.</p>
+  </Field>
+  {#each dvmItem.tags as [type, value], i (i + key)}
+    <div class="flex gap-2 items-center justify-between">
+      <i class="fa fa-trash cursor-pointer" on:click={() => removeTag(i)} />
+      <div class="flex gap-2 items-center justify-end">
+        <div class="flex gap-3 items-center">
+          <label>Type</label>
+          <Input bind:value={type} on:change={() => onChange(dvmItem)} />
+        </div>
+        <div class="flex gap-3 items-center">
+          <label>Value</label>
+          <Input bind:value={value} on:change={() => onChange(dvmItem)} />
+        </div>
+      </div>
+    </div>
+  {/each}
+  <Anchor on:click={addTag} class="cursor-pointer">
+    <i class="fa fa-plus" /> Add tag
+  </Anchor>
+  <div class="absolute -right-4 -top-2 flex h-4 w-4 cursor-pointer items-center justify-center" on:click={onRemove}>
+    <i class="fa fa-times fa-lg" />
+  </div>
+</FlexColumn>

src/app/shared/FeedForm.svelte

@@ -2,7 +2,6 @@
   import {assocPath} from "ramda"
   import {quantify, switcherFn, updatePath} from "hurdak"
   import {inc} from "@welshman/lib"
-  import {getFilterId} from "@welshman/util"
   import {FeedType, hasSubFeeds, getSubFeeds} from "@welshman/feeds"
   import Card from "src/partials/Card.svelte"
   import Popover from "src/partials/Popover.svelte"
@@ -14,6 +13,7 @@
   import Select from "src/partials/Select.svelte"
   import SearchSelect from "src/partials/SearchSelect.svelte"
   import FilterField from "src/app/shared/FilterField.svelte"
+  import DVMField from "src/app/shared/DVMField.svelte"
   import {searchRelayUrls, searchListAddrs, displayListByAddress, displayRelayUrl} from "src/engine"
 
   export let feed
@@ -90,7 +90,7 @@
       <p slot="info">Select which relays you'd like to limit loading feeds from.</p>
     </Field>
   {:else if feedType === FeedType.Filter}
-    {#each current.slice(1) as filter, filterIdx ([current.length, filterIdx].join(':'))}
+    {#each current.slice(1) as filter, filterIdx ([current.length, filterIdx].join(":"))}
       {@const feedIdx = inc(filterIdx)}
       <Card>
         <FilterField
@@ -119,6 +119,23 @@
       <p slot="info">Select which lists you'd like to view.</p>
     </Field>
   {:else if feedType === FeedType.DVM}
+    {#each current.slice(1) as item, itemIdx ([current.length, itemIdx].join(":"))}
+      {@const feedIdx = inc(itemIdx)}
+      <Card>
+        <DVMField
+          dvmItem={item}
+          onChange={item => setAtCursor(item, [feedIdx])}
+          onRemove={() => updateAtCursor(feed => feed.toSpliced(feedIdx, 1))} />
+      </Card>
+      {#if feedIdx < current.length - 1}
+        <p class="staatliches text-center">— OR —</p>
+      {/if}
+    {/each}
+    <div class="flex">
+      <Anchor button on:click={() => setAtCursor([...current, {kind: 5300, tags: [], relays: []}])}>
+        <i class="fa fa-plus" /> Add DVM
+      </Anchor>
+    </div>
   {/if}
   {#each subFeeds as subFeed, i (displayFeed(subFeed) + i)}
     <Card class="flex items-center justify-between">

src/app/shared/FilterField.svelte

@@ -1,13 +1,13 @@
 <script context="module" lang="ts">
-  import {LRUCache} from '@welshman/lib'
+  import {LRUCache} from "@welshman/lib"
+  import type {Filter} from "@welshman/util"
 
   // Keep track of filter part order, even when we re-render
-  const sectionsByFilter = new LRUCache(30)
+  const sectionsByFilter = new LRUCache<Filter, string[]>(30)
 </script>
 
 <script lang="ts">
   import {omit, without} from "ramda"
-  import {onDestroy} from 'svelte'
   import Popover from "src/partials/Popover.svelte"
   import Menu from "src/partials/Menu.svelte"
   import MenuItem from "src/partials/MenuItem.svelte"
@@ -24,7 +24,7 @@
   export let onRemove
 
   const getSections = () => {
-    const sections = []
+    const sections: string[] = []
 
     if (filter.kinds) sections.push("kinds")
     if (filter.search) sections.push("search")
@@ -72,7 +72,7 @@
     sections = [...sections, section]
   }
 
-  let sections = sectionsByFilter.get(filter) || getSections()
+  let sections: string[] = sectionsByFilter.get(filter) || getSections()
 
   $: sectionsByFilter.set(filter, sections)
 </script>

src/app/views/ThreadDetail.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {quantify, defer} from "hurdak"
-  import {fly} from "src/util/transition"
   import {ThreadLoader} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import Spinner from "src/partials/Spinner.svelte"

src/engine/events/requests.ts

@@ -67,9 +67,9 @@ export const feedLoader = new FeedLoader<Event | Rumor>({
       )
     }
   },
-  requestDvm: async ({kind, tags = [], onEvent}) => {
+  requestDvm: async ({kind, tags = [], relays = [], onEvent}) => {
     const sk = generatePrivateKey()
-    const event = await dvmRequest({kind, tags, sk, timeout: 3000})
+    const event = await dvmRequest({kind, tags, relays, sk, timeout: 3000})
 
     if (event) {
       onEvent(event)

src/engine/network/utils/dvms.ts

@@ -24,12 +24,12 @@ export const dvmRequest = async ({
   inputOpts = [],
   tags = [],
   timeout = 30_000,
-  relays = null,
+  relays = [],
   onPublish = null,
   onProgress = null,
   sk = null,
 }: DVMRequestOpts): Promise<Event> => {
-  if (!relays) {
+  if (relays.length === 0) {
     relays = hints.merge([hints.WriteRelays(), hints.fromRelays(env.get().DVM_RELAYS)]).getUrls()
   }
 

src/util/misc.ts

@@ -88,21 +88,11 @@ export const createScroller = (
   loadMore: () => Promise<void>,
   {delay = 1000, threshold = 2000, reverse = false, element}: ScrollerOpts = {},
 ) => {
-  const getScrollElement = () => {
-    let e = element
-
-    while (e.parentElement && e.scrollTop === 0) {
-      e = e.parentElement
-    }
-
-    return e
-  }
-
   let done = false
   const check = async () => {
     // While we have empty space, fill it
     const {scrollY, innerHeight} = window
-    const {scrollHeight, scrollTop} = getScrollElement()
+    const {scrollHeight, scrollTop} = element
     const offset = Math.abs(scrollTop || scrollY)
     const shouldLoad = offset + innerHeight + threshold > scrollHeight