Add relay detail view

src/App.svelte

@@ -53,6 +53,7 @@
   import Profile from "src/views/Profile.svelte"
   import PubKeyLogin from "src/views/login/PubKeyLogin.svelte"
   import RelayCard from "src/views/relays/RelayCard.svelte"
+  import RelayDetail from "src/views/relays/RelayDetail.svelte"
   import RelayList from "src/views/relays/RelayList.svelte"
   import Search from "src/views/search/Search.svelte"
   import Settings from "src/views/Settings.svelte"
@@ -201,6 +202,11 @@
       </Route>
       <Route path="/keys" component={Keys} />
       <Route path="/relays" component={RelayList} />
+      <Route path="/relays/:b64url" let:params>
+        {#key params.b64url}
+        <RelayDetail url={atob(params.b64url)} />
+        {/key}
+      </Route>
       <Route path="/profile" component={Profile} />
       <Route path="/settings" component={Settings} />
       <Route path="/login" component={Login} />

src/agent/network.ts

@@ -62,8 +62,8 @@ const load = ({relays, filter, onChunk = null, shouldProcess = true, timeout = 6
           timedOutRelays
         )
 
-        timedOutRelays.forEach(url => {
-          const conn = pool.getConnection(url)
+        timedOutRelays.forEach(relay => {
+          const conn = pool.getConnection(relay.url)
 
           if (conn) {
             conn.stats.timeouts += 1

src/agent/pool.ts

@@ -88,8 +88,8 @@ class Connection {
     }
 
     const {timeouts, subCount, eoseTimer, eoseCount} = this.stats
-    const timeoutRate = subCount > 10 ? timeouts / subCount : null
-    const eoseQuality = eoseCount > 10 ? Math.max(1, 500 / (eoseTimer / eoseCount)) : null
+    const timeoutRate = timeouts > 0 ? timeouts / subCount : null
+    const eoseQuality = eoseCount > 0 ? Math.max(1, 500 / (eoseTimer / eoseCount)) : null
 
     if (timeoutRate && timeoutRate > 0.5) {
       return [1 - timeoutRate, "Slow connection"]
@@ -299,6 +299,12 @@ const subscribe = async (
   return {
     isActive: () => active,
     unsub: () => {
+      if (!active) {
+        return
+      }
+
+      active = false
+
       log(`Closing subscription ${id}`)
 
       promises.forEach(async promise => {
@@ -306,7 +312,6 @@ const subscribe = async (
 
         if (sub) {
           sub.unsub()
-          active = false
           sub.conn.stats.activeSubsCount -= 1
         }
       })

src/partials/Content.svelte

@@ -24,7 +24,7 @@
 {/if}
 
 {#if size === '2xl'}
-<div {...$$props} class={cx($$props.class, className, "p-4 max-w-2xl")}>
+<div {...$$props} class={cx($$props.class, className, "p-4 pt-10 max-w-2xl")}>
   <slot />
 </div>
 {/if}

src/views/notes/Feed.svelte

@@ -64,6 +64,7 @@
     notesBuffer = []
   }
 
+
   const onChunk = async newNotes => {
     const chunk = sortBy(e => -e.created_at, await processNewNotes(newNotes))
     const [bottom, top] = partition(e => e.created_at < since, chunk)

src/views/relays/RelayCard.svelte

@@ -6,6 +6,7 @@
   import {between} from 'hurdak/lib/hurdak'
   import {fly} from 'svelte/transition'
   import Toggle from "src/partials/Toggle.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
   import pool from 'src/agent/pool'
   import user from "src/agent/user"
   import {loadAppData} from 'src/app'
@@ -57,7 +58,9 @@
   <div class="flex gap-2 items-center justify-between">
     <div class="flex gap-2 items-center text-xl">
       <i class={relay.url.startsWith('wss') ? "fa fa-lock" : "fa fa-unlock"} />
-      <span>{last(relay.url.split('://'))}</span>
+      <Anchor type="unstyled" href={`/relays/${btoa(relay.url)}`}>
+        {last(relay.url.split('://'))}
+      </Anchor>
       <span
         on:mouseout={() => {showStatus = false}}
         on:mouseover={() => {showStatus = true}}

src/views/relays/RelayDetail.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import {last, find, propEq} from 'ramda'
+  import {onMount} from 'svelte'
+  import {poll} from "src/util/misc"
+  import {between} from 'hurdak/lib/hurdak'
+  import Content from "src/partials/Content.svelte"
+  import Feed from "src/views/notes/Feed.svelte"
+  import database from 'src/agent/database'
+  import pool from 'src/agent/pool'
+  import user from "src/agent/user"
+
+  export let url
+
+  const relay = database.relays.get(url) || {url}
+
+  let quality = null
+  let message = null
+  let showStatus = false
+  let joined = false
+
+  const {relays} = user
+
+  $: joined = find(propEq('url', relay.url), $relays)
+
+  onMount(() => {
+    return poll(10_000, async () => {
+      const conn = await pool.getConnection(relay.url)
+
+      if (conn) {
+        [quality, message] = conn.getQuality()
+      } else {
+        quality = null
+        message = "Not connected"
+      }
+    })
+  })
+</script>
+
+<Content>
+  <div class="flex gap-2 items-center justify-between">
+    <div class="flex gap-2 items-center text-xl">
+      <i class={relay.url.startsWith('wss') ? "fa fa-lock" : "fa fa-unlock"} />
+      <span>{last(relay.url.split('://'))}</span>
+      <span
+        on:mouseout={() => {showStatus = false}}
+        on:mouseover={() => {showStatus = true}}
+        class="w-2 h-2 rounded-full bg-medium cursor-pointer"
+        class:bg-medium={message === 'Not connected'}
+        class:bg-danger={quality <= 0.3 && message !== 'Not connected'}
+        class:bg-warning={between(0.3, 0.7, quality)}
+        class:bg-success={quality > 0.7}>
+      </span>
+      <p
+        class="text-light text-sm transition-all hidden sm:block"
+        class:opacity-0={!showStatus}
+        class:opacity-1={showStatus}>
+        {message}
+      </p>
+    </div>
+    {#if joined}
+    {#if $relays.length > 1}
+    <button
+      class="flex gap-3 items-center text-light"
+      on:click={() => user.removeRelay(relay.url)}>
+      <i class="fa fa-right-from-bracket" /> Leave
+    </button>
+    {/if}
+    {:else}
+    <button
+      class="flex gap-3 items-center text-light"
+      on:click={() => user.addRelay(relay.url)}>
+      <i class="fa fa-right-to-bracket" /> Join
+    </button>
+    {/if}
+  </div>
+  {#if relay.description}
+  <p>{relay.description}</p>
+  {/if}
+  <div class="border-b border-solid border-medium -mx-6" />
+  <Feed relays={[relay]} filter={{kinds: [1]}} />
+</Content>