Show relay-filtered feed in modal

ROADMAP.md

@@ -1,8 +1,11 @@
 # Current
 
+- [ ] Fix scrolling with embedded modals by registering open modals in the component
 - [ ] Relays bounty
   - [x] Ability to click into a relay's global feed
-  - [x] Ability to filter feeds by relay
+  - [ ] Ability to filter feeds by relay
+    - Global Mutes? Global Whitelist?
+    - Open in modal with "here's what this feed would look like with only this relay"
   - [ ] Ability to create custom feeds
 - [ ] Fix tag-style event mentions. Probably transform all mentions into entities in parse
 - [ ] Fix performance issues

src/App.svelte

@@ -64,8 +64,6 @@
   import PersonProfileInfo from "src/views/person/PersonProfileInfo.svelte"
   import PersonShare from "src/views/person/PersonShare.svelte"
   import AddRelay from "src/views/relays/AddRelay.svelte"
-  import RelayModal from "src/views/relays/RelayModal.svelte"
-  import MuteRelays from "src/views/relays/MuteRelays.svelte"
 
   Object.assign(window, {cmd, user, keys, network, pool, sync, tables, bech32ToHex, hexToBech32})
 
@@ -279,10 +277,6 @@
           <NoteCreate pubkey={$modal.pubkey} nevent={$modal.nevent} />
         {:else if $modal.type === "relay/add"}
           <AddRelay />
-        {:else if $modal.type === "relays/mute"}
-          <MuteRelays />
-        {:else if $modal.type === "relays/modal"}
-          <RelayModal url={$modal.url} />
         {:else if $modal.type === "onboarding"}
           <Onboarding stage={$modal.stage} />
         {:else if $modal.type === "room/edit"}

src/app/ui.ts

@@ -148,7 +148,3 @@ export const getThemeVariables = $theme =>
   Object.entries(getThemeColors($theme))
     .map(([k, v]) => `--${k}: ${v};`)
     .join("\n")
-
-// Global relay setting
-
-export const muteRelays = new WritableList([])

src/routes/RelayDetail.svelte

@@ -6,7 +6,6 @@
   import RelayTitle from "src/views/relays/RelayTitle.svelte"
   import RelayJoin from "src/views/relays/RelayJoin.svelte"
   import {relays} from "src/agent/tables"
-  import {muteRelays} from "src/app/ui"
 
   export let url
 
@@ -25,13 +24,6 @@
   {/if}
 </Content>
 <div class="border-b border-solid border-gray-6" />
-{#if $muteRelays.includes(relay.url)}
-  <Content size="lg" class="text-center">
-    This relay has been muted.
-    <Anchor on:click={() => muteRelays.remove(relay.url)}>Unmute</Anchor>
-  </Content>
-{:else}
-  <Content>
-    <Feed relays={[relay]} filter={{kinds: [1]}} />
-  </Content>
-{/if}
+<Content>
+  <Feed relays={[relay]} filter={{kinds: [1]}} />
+</Content>

src/views/feed/Feed.svelte

@@ -4,13 +4,16 @@
   import {fly} from "svelte/transition"
   import {quantify} from "hurdak/lib/hurdak"
   import {createScroller, now, timedelta, Cursor} from "src/util/misc"
-  import {asDisplayEvent, mergeFilter} from "src/util/nostr"
+  import {asDisplayEvent, mergeFilter, displayRelay} from "src/util/nostr"
   import Spinner from "src/partials/Spinner.svelte"
+  import Modal from "src/partials/Modal.svelte"
   import Content from "src/partials/Content.svelte"
+  import RelayTitle from "src/views/relays/RelayTitle.svelte"
+  import RelayJoin from "src/views/relays/RelayJoin.svelte"
   import Note from "src/views/notes/Note.svelte"
   import user from "src/agent/user"
   import network from "src/agent/network"
-  import {modal, muteRelays} from "src/app/ui"
+  import {modal} from "src/app/ui"
   import {mergeParents} from "src/app"
 
   export let filter
@@ -21,6 +24,7 @@
 
   let notes = []
   let notesBuffer = []
+  let feedRelay = null
 
   // Add a short buffer so we can get the most possible results for recent notes
   const since = now()
@@ -28,6 +32,10 @@
   const cursor = new Cursor({delta})
   const seen = new Set()
 
+  const setFeedRelay = relay => {
+    feedRelay = relay
+  }
+
   const loadBufferedNotes = () => {
     // Drop notes at the end if there are a lot
     notes = uniqBy(prop("id"), notesBuffer.concat(notes).slice(0, maxNotes))
@@ -89,7 +97,7 @@
 
   onMount(() => {
     const sub = network.listen({
-      relays: relays.filter(url => !$muteRelays.includes(url)),
+      relays,
       filter: mergeFilter(filter, {since}),
       onChunk,
     })
@@ -101,7 +109,7 @@
 
       // Wait for this page to load before trying again
       await network.load({
-        relays: relays.filter(url => !$muteRelays.includes(url)),
+        relays: feedRelay ? [feedRelay] : relays,
         filter: mergeFilter(filter, cursor.getFilter()),
         onChunk,
       })
@@ -133,11 +141,34 @@
 
   <div class="flex flex-col gap-4">
     {#each notes as note (note.id)}
-      {#if find(url => !$muteRelays.includes(url), note.seen_on)}
-        <Note depth={2} {note} />
-      {/if}
+      <Note depth={2} {note} setFeedRelay={setFeedRelay} />
     {/each}
   </div>
 
   <Spinner />
 </Content>
+
+{#if feedRelay}
+<Modal onEscape={() => setFeedRelay(null)}>
+  <Content>
+    <div class="flex items-center justify-between gap-2">
+      <RelayTitle relay={feedRelay} />
+      <RelayJoin relay={feedRelay} />
+    </div>
+    {#if feedRelay.description}
+      <p>{feedRelay.description}</p>
+    {/if}
+    <p class="text-gray-4">
+      <i class="fa fa-info-circle" />
+      Below is your current feed including only notes seen on {displayRelay(feedRelay)}
+    </p>
+    <div class="flex flex-col gap-4">
+      {#each notes as note (note.id)}
+        {#if note.seen_on.includes(feedRelay.url)}
+          <Note depth={2} {note} />
+        {/if}
+      {/each}
+    </div>
+  </Content>
+</Modal>
+{/if}

src/views/notes/ForegroundButtons.svelte

@@ -1,31 +1,14 @@
 <script lang="ts">
   import {fly} from "svelte/transition"
-  import Anchor from "src/partials/Anchor.svelte"
   import user from "src/agent/user"
-  import {modal, muteRelays} from "src/app/ui"
+  import {modal} from "src/app/ui"
 
   export let pubkey = null
 
   const {canPublish} = user
-
-  const openModal = () => {
-    modal.set({type: "relays/mute"})
-  }
 </script>
 
 <div class="fixed bottom-0 right-0 z-10 m-8 flex flex-col items-center gap-3">
-  <div transition:fly|local={{y: 20}} class="relative transition-transform hover:scale-105">
-    <Anchor type="button-circle-dark" on:click={openModal}>
-      <i class="fa fa-filter mt-1" />
-      <span
-        class="absolute bottom-0 right-0 -mr-1 flex h-5 w-5 items-center
-                   justify-center rounded-full border border-solid border-gray-7 bg-gray-8
-                   text-xs">
-        {$muteRelays.length}
-      </span>
-    </Anchor>
-  </div>
-
   {#if $canPublish}
     <button
       class="color-white flex h-16 w-16 items-center justify-center rounded-full

src/views/notes/Note.svelte

@@ -50,6 +50,7 @@
   import NoteContent from "src/views/notes/NoteContent.svelte"
 
   export let note
+  export let setFeedRelay
   export let depth = 0
   export let anchorId = null
   export let showParent = true
@@ -475,7 +476,7 @@
                         <div
                           class="h-3 w-3 rounded-full border border-solid border-gray-6"
                           style={`background: ${hsl(stringToHue(url))}`}
-                          on:click={() => modal.set({type: "relays/modal", url})} />
+                          on:click={() => setFeedRelay({url})} />
                       </div>
                       <div slot="tooltip">{displayRelay({url})}</div>
                     </Popover>

src/views/relays/MuteRelays.svelte

@@ -1,50 +0,0 @@
-<script>
-  import {sortBy, identity, uniq, pluck} from 'ramda'
-  import {fly} from "svelte/transition"
-  import Toggle from "src/partials/Toggle.svelte"
-  import Content from "src/partials/Content.svelte"
-  import RelayCard from "src/partials/RelayCard.svelte"
-  import user from "src/agent/user"
-  import {muteRelays} from "src/app/ui"
-
-  const {relays} = user
-  const isMuted = url => $muteRelays.includes(url)
-  const toggle = url => muteRelays.toggle(url)
-
-  $: allUrls = sortBy(identity, uniq($muteRelays.concat(pluck('url', $relays))))
-</script>
-
-<div in:fly={{y: 20}}>
-  <Content>
-    <div class="flex justify-between">
-      <div class="flex items-center gap-2">
-        <i class="fa fa-server fa-lg" />
-        <h2 class="staatliches text-2xl">Mute relays</h2>
-      </div>
-    </div>
-    <div class="flex items-center gap-2 text-gray-4">
-      <i class="fa fa-warning" /> Advanced Feature
-    </div>
-    <p>
-      Select relays to temporarily mute. This is separate from your main relay selections,
-      and is just to help you explore what different relays have to offer.
-      Muted relays may sometimes still be used to load context for other notes.
-    </p>
-    {#if allUrls.length === 0}
-      <div class="mt-8 flex items-center justify-center gap-2 text-center">
-        <i class="fa fa-triangle-exclamation" />
-        No relays connected
-      </div>
-    {/if}
-    <div class="grid grid-cols-1 gap-4">
-      {#each allUrls as url}
-        <RelayCard relay={{url}}>
-          <div slot="controls" class="flex justify-between gap-2">
-            <span>Mute this relay?</span>
-            <Toggle value={isMuted(url)} on:change={() => toggle(url)} />
-          </div>
-        </RelayCard>
-      {/each}
-    </div>
-  </Content>
-</div>

src/views/relays/RelayModal.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import Content from "src/partials/Content.svelte"
-  import RelayTitle from "src/views/relays/RelayTitle.svelte"
-  import RelayJoin from "src/views/relays/RelayJoin.svelte"
-  import {relays} from "src/agent/tables"
-
-  export let url
-
-  const relay = relays.get(url) || {url}
-</script>
-
-<Content>
-  <div class="flex items-center justify-between gap-2">
-    <RelayTitle {relay} />
-    <RelayJoin {relay} />
-  </div>
-  {#if relay.description}
-    <p>{relay.description}</p>
-  {/if}
-</Content>