From 38974e5a22ccd86fc06007efddafc10aec15998c Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Fri, 22 Nov 2024 16:25:35 +0100
Subject: [PATCH 01/13] enhance notices view

---
 src/app/views/Publishes.svelte            |  77 +++++----
 src/app/views/PublishesConnections.svelte | 201 ++++++++++++++++++++++
 src/app/views/PublishesNotices.svelte     |  82 +++++++++
 3 files changed, 329 insertions(+), 31 deletions(-)
 create mode 100644 src/app/views/PublishesConnections.svelte
 create mode 100644 src/app/views/PublishesNotices.svelte

diff --git a/src/app/views/Publishes.svelte b/src/app/views/Publishes.svelte
index 6509feff0..33d7e6863 100644
--- a/src/app/views/Publishes.svelte
+++ b/src/app/views/Publishes.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
-  import {pluralize, seconds} from "hurdak"
+  import {thunks, type Thunk} from "@welshman/app"
   import {assoc, now, remove, sortBy} from "@welshman/lib"
-  import {LOCAL_RELAY_URL} from "@welshman/util"
   import {PublishStatus} from "@welshman/net"
-  import Tile from "src/partials/Tile.svelte"
-  import Subheading from "src/partials/Subheading.svelte"
-  import PublishCard from "src/app/shared/PublishCard.svelte"
-  import {thunks, type Thunk} from "@welshman/app"
+  import {LOCAL_RELAY_URL} from "@welshman/util"
   import {get} from "svelte/store"
+  import {pluralize, seconds} from "hurdak"
+  import PublishCard from "src/app/shared/PublishCard.svelte"
+  import Subheading from "src/partials/Subheading.svelte"
+  import Tabs from "src/partials/Tabs.svelte"
+  import Tile from "src/partials/Tile.svelte"
+  import PublishesConnections from "src/app/views/PublishesConnections.svelte"
+  import PublishesNotices from "src/app/views/PublishesNotices.svelte"
+
+  const tabs = ["events", "connections", "notices"]
+  let activeTab = "events"
+
+  let selectedUrl: string
 
   const hasStatus = (thunk: Thunk, statuses: PublishStatus[]) =>
     Object.values(get(thunk.status)).some(s => statuses.includes(s.status))
@@ -43,28 +51,35 @@
 </script>
 
 <Subheading>Published Events</Subheading>
-<div class="grid grid-cols-4 justify-between gap-2 sm:grid-cols-5">
-  <Tile background>
-    <p class="text-lg sm:text-2xl">{recent.length}</p>
-    <span class="text-sm">{pluralize(recent.length, "Event")}</span>
-  </Tile>
-  <Tile background>
-    <p class="text-lg sm:text-2xl">{relays.size}</p>
-    <span class="text-sm">{pluralize(relays.size, "Relay")}</span>
-  </Tile>
-  <Tile background lass="hidden sm:block">
-    <p class="text-lg sm:text-2xl">{pending.length}</p>
-    <span class="text-sm">Pending</span>
-  </Tile>
-  <Tile background>
-    <p class="text-lg sm:text-2xl">{success.length}</p>
-    <span class="text-sm">Succeeded</span>
-  </Tile>
-  <Tile background>
-    <p class="text-lg sm:text-2xl">{recent.length - pending.length - success.length}</p>
-    <span class="text-sm">Failed</span>
-  </Tile>
-</div>
-{#each sortBy(t => -t.event.created_at, recent) as thunk (thunk.event.id)}
-  <PublishCard {thunk} />
-{/each}
+<Tabs {tabs} {activeTab} setActiveTab={tab => (activeTab = tab)} />
+{#if activeTab === "events"}
+  <div class="grid grid-cols-4 justify-between gap-2 sm:grid-cols-5">
+    <Tile background>
+      <p class="text-lg sm:text-2xl">{recent.length}</p>
+      <span class="text-sm">{pluralize(recent.length, "Event")}</span>
+    </Tile>
+    <Tile background>
+      <p class="text-lg sm:text-2xl">{relays.size}</p>
+      <span class="text-sm">{pluralize(relays.size, "Relay")}</span>
+    </Tile>
+    <Tile background lass="hidden sm:block">
+      <p class="text-lg sm:text-2xl">{pending.length}</p>
+      <span class="text-sm">Pending</span>
+    </Tile>
+    <Tile background>
+      <p class="text-lg sm:text-2xl">{success.length}</p>
+      <span class="text-sm">Succeeded</span>
+    </Tile>
+    <Tile background>
+      <p class="text-lg sm:text-2xl">{recent.length - pending.length - success.length}</p>
+      <span class="text-sm">Failed</span>
+    </Tile>
+  </div>
+  {#each sortBy(t => -t.event.created_at, recent) as thunk (thunk.event.id)}
+    <PublishCard {thunk} />
+  {/each}
+{:else if activeTab === "connections"}
+  <PublishesConnections bind:selected={selectedUrl} bind:activeTab />
+{:else if activeTab === "notices"}
+  <PublishesNotices selected={[selectedUrl].filter(Boolean)} />
+{/if}
diff --git a/src/app/views/PublishesConnections.svelte b/src/app/views/PublishesConnections.svelte
new file mode 100644
index 000000000..e3ee5c1ff
--- /dev/null
+++ b/src/app/views/PublishesConnections.svelte
@@ -0,0 +1,201 @@
+<script lang="ts">
+  import {getRelayQuality, relaysByUrl, thunks} from "@welshman/app"
+  import {AuthStatus, PublishStatus, SocketStatus, type Connection} from "@welshman/net"
+  import {ctx} from "@welshman/lib"
+  import {displayRelayUrl} from "@welshman/util"
+  import {onMount} from "svelte"
+  import cx from "classnames"
+  import AltColor from "src/partials/AltColor.svelte"
+  import {quantify} from "hurdak"
+  import {get} from "svelte/store"
+  import Tile from "src/partials/Tile.svelte"
+
+  export let selected: string
+  export let activeTab: string
+
+  const connectionsStatus: {[key: string]: Map<string, Connection>} = {}
+  const filters: {[key: string]: boolean} = {}
+
+  const pendingStatuses = [
+    AuthStatus.Requested,
+    AuthStatus.PendingSignature,
+    AuthStatus.PendingResponse,
+  ]
+
+  const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
+
+  function getStatus(status: PublishStatus, cxn: Connection) {
+    return Object.values($thunks).filter(t => get(t.status)[cxn.url]?.status == status)
+  }
+
+  $: connections = Array.from(ctx.net.pool.data.entries())
+    .filter(([url, cxn]) =>
+      Object.keys(filters).filter(f => filters[f]).length
+        ? Object.keys(filters).some(f => filters[f] && connectionsStatus[f]?.has(url))
+        : true,
+    )
+    .map(([url, cxn]) => cxn)
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      for (const [url, cxn] of ctx.net.pool.data.entries()) {
+        if (pendingStatuses.includes(cxn.auth.status)) {
+          connectionsStatus["Logging in"] = (connectionsStatus["Logging in"] || new Map()).set(
+            url,
+            cxn,
+          )
+        } else if (failureStatuses.includes(cxn.auth.status)) {
+          connectionsStatus["Failed to log in"] = (
+            connectionsStatus["Failed to log in"] || new Map()
+          ).set(url, cxn)
+        } else if (cxn.socket.status === SocketStatus.Error) {
+          connectionsStatus["Failed to connect"] = (
+            connectionsStatus["Failed to connect"] || new Map()
+          ).set(url, cxn)
+        } else if (cxn.socket.status === SocketStatus.Closed) {
+          connectionsStatus["Waiting to reconnect"] = (
+            connectionsStatus["Waiting to reconnect"] || new Map()
+          ).set(url, cxn)
+        } else if (cxn.socket.status === SocketStatus.New) {
+          connectionsStatus["Not connected"] = (
+            connectionsStatus["Not connected"] || new Map()
+          ).set(url, cxn)
+        } else if (getRelayQuality(cxn.url) < 0.5) {
+          connectionsStatus["Unstable connection"] = (
+            connectionsStatus["Unstable connection"] || new Map()
+          ).set(url, cxn)
+        } else {
+          connectionsStatus["Connected"] = (connectionsStatus["Connected"] || new Map()).set(
+            url,
+            cxn,
+          )
+        }
+      }
+    }, 800)
+
+    return () => {
+      clearInterval(interval)
+    }
+  })
+</script>
+
+<div class="grid grid-cols-6 justify-between gap-2 sm:grid-cols-4">
+  <Tile
+    class={cx({border: filters["Connected"]}, "cursor-pointer")}
+    background
+    on:click={() => (filters["Connected"] = !filters["Connected"])}>
+    <p class="text-lg sm:text-2xl">
+      {Array.from(connectionsStatus["Connected"]?.values() || []).length || 0}
+    </p>
+    <span class="text-sm">Connected</span>
+  </Tile>
+  <Tile
+    class={cx({border: filters["Logging in"]}, "cursor-pointer")}
+    background
+    on:click={() => (filters["Logging in"] = !filters["Logging in"])}>
+    <p class="text-lg sm:text-2xl">
+      {Array.from(connectionsStatus["Logging in"]?.values() || []).length || 0}
+    </p>
+    <span class="text-sm">Logging in</span>
+  </Tile>
+  <Tile
+    class={cx({border: filters["Failed to log in"]}, "cursor-pointer")}
+    background
+    on:click={() => (filters["Failed to log in"] = !filters["Failed to log in"])}>
+    <p class="text-lg sm:text-2xl">
+      {Array.from(connectionsStatus["Failed to log in"]?.values() || []).length || 0}
+    </p>
+    <span class="text-sm">Login failed</span>
+  </Tile>
+  <Tile
+    class={cx({border: filters["Failed to connect"]}, "cursor-pointer")}
+    background
+    on:click={() => (filters["Failed to connect"] = !filters["Failed to connect"])}
+    lass="hidden sm:block">
+    <p class="text-lg sm:text-2xl">
+      {Array.from(connectionsStatus["Failed to connect"]?.values() || []).length || 0}
+    </p>
+    <span class="text-sm">Connection failed</span>
+  </Tile>
+  <Tile
+    class={cx({border: filters["Waiting to reconnect"]}, "cursor-pointer")}
+    background
+    on:click={() => (filters["Waiting to reconnect"] = !filters["Waiting to reconnect"])}>
+    <p class="text-lg sm:text-2xl">
+      {Array.from(connectionsStatus["Waiting to reconnect"]?.values() || []).length || 0}
+    </p>
+    <span class="text-sm">Reconnecting</span>
+  </Tile>
+  <Tile
+    class={cx({border: filters["Not connected"]}, "cursor-pointer")}
+    background
+    on:click={() => (filters["Not connected"] = !filters["Not connected"])}>
+    <p class="text-lg sm:text-2xl">
+      {Array.from(connectionsStatus["Not connected"]?.values() || []).length || 0}
+    </p>
+    <span class="text-sm">Not Connected</span>
+  </Tile>
+</div>
+{#each connections as cxn (cxn.url)}
+  {@const relay = $relaysByUrl.get(cxn.url)}
+  <AltColor
+    background
+    class="cursor-pointer justify-between rounded-md p-6 shadow"
+    on:click={() => {
+      selected = cxn.url
+      activeTab = "notices"
+    }}>
+    <div class="flex min-w-0 shrink-0 items-center gap-3">
+      {#if relay?.profile?.icon}
+        <img class="h-9 w-9 shrink-0 rounded-full border" src={relay.profile.icon} />
+      {:else}
+        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border">
+          <i class="fa fa-server text-xl text-neutral-100"></i>
+        </div>
+      {/if}
+      <div class="shrink-0">
+        <div class="flex items-center gap-2">
+          <div class="text-md overflow-hidden text-ellipsis whitespace-nowrap">
+            {displayRelayUrl(cxn.url)}
+          </div>
+        </div>
+        <div class="flex gap-4 text-xs text-neutral-400">
+          {#if relay?.profile?.supported_nips}
+            <span>
+              {relay.profile.supported_nips.length} NIPs
+            </span>
+          {/if}
+          <span>
+            Connected {quantify(relay?.stats?.open_count || 0, "time")}
+          </span>
+        </div>
+      </div>
+      <div class="flex w-full justify-end gap-2">
+        {#if getStatus(PublishStatus.Success, cxn).length > 0}
+          {@const success = getStatus(PublishStatus.Success, cxn).length}
+          <div class="flex items-center gap-2">
+            <i class="fa fa-check-circle text-success"></i>{success || ""}
+          </div>
+        {/if}
+        {#if getStatus(PublishStatus.Failure, cxn).length > 0}
+          {@const failure = getStatus(PublishStatus.Failure, cxn).length}
+          <div class="flex items-center gap-2">
+            <i class="fa fa-times-circle text-danger"></i>{failure || ""}
+          </div>
+        {/if}
+        {#if getStatus(PublishStatus.Pending, cxn).length > 0}
+          {@const pending = getStatus(PublishStatus.Pending, cxn).length}
+          <div class="flex items-center gap-2">
+            <i class="fa fa-hourglass-half text-accent"></i>{pending || ""}
+          </div>
+        {/if}
+        {#if getStatus(PublishStatus.Timeout, cxn).length > 0}
+          {@const timeout = getStatus(PublishStatus.Pending, cxn).length}
+          <div class="flex items-center gap-2">
+            <i class="fa fa-clock"></i>{timeout || ""}
+          </div>
+        {/if}
+      </div>
+    </div>
+  </AltColor>
+{/each}
diff --git a/src/app/views/PublishesNotices.svelte b/src/app/views/PublishesNotices.svelte
new file mode 100644
index 000000000..e5c74a276
--- /dev/null
+++ b/src/app/views/PublishesNotices.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+  import {formatTimestamp, thunks, type Thunk} from "@welshman/app"
+  import {ctx, identity, uniq} from "@welshman/lib"
+  import {PublishStatus, type Connection} from "@welshman/net"
+  import {get} from "svelte/store"
+  import {fly} from "svelte/transition"
+  import SearchSelect from "src/partials/SearchSelect.svelte"
+  import {fuzzy} from "src/util/misc"
+  import Anchor from "src/partials/Anchor.svelte"
+  import {router} from "src/app/util"
+  import AltColor from "src/partials/AltColor.svelte"
+
+  export let selected: string[] = []
+
+  const searchConnections = fuzzy(Array.from(ctx.net.pool.data.keys()))
+
+  function getNotices(connections: Connection[]) {
+    return Object.values($thunks).filter(t =>
+      connections.some(cxn => get(t.status)[cxn.url]?.status),
+    )
+  }
+
+  function iconStatus(status: PublishStatus) {
+    switch (status) {
+      case PublishStatus.Success:
+        return "fa fa-check-circle text-success"
+      case PublishStatus.Pending:
+        return "fa fa-clock"
+      case PublishStatus.Failure:
+        return "fa fa-times-circle text-danger"
+      case PublishStatus.Timeout:
+        return "fa fa-hourglass-half text-accent"
+      case PublishStatus.Aborted:
+        return "fa fa-ban"
+    }
+  }
+
+  $: notices = getNotices(
+    selected.map(url => ctx.net.pool.data.get(url)).filter(Boolean),
+  ) as Thunk[]
+</script>
+
+<SearchSelect
+  placeholder="Search notices by relay"
+  multiple
+  search={searchConnections}
+  bind:value={selected}
+  termToItem={identity}>
+  <div slot="item" let:item>
+    <strong>{item}</strong>
+  </div>
+</SearchSelect>
+
+{#if !notices.length && selected.length}
+  <div transition:fly|local={{y: 20}}>
+    <AltColor background class="rounded-md p-6 shadow">
+      <div class="place text-center text-neutral-100">No notices found for selected relays.</div>
+    </AltColor>
+  </div>
+{:else}
+  {#each notices as thunk}
+    <AltColor background class="rounded-md p-6 shadow">
+      <div class="flex justify-between">
+        <span>Kind {thunk.event.kind}, published {formatTimestamp(thunk.event.created_at)}</span>
+        <Anchor
+          underline
+          modal
+          class="text-sm"
+          on:click={() => router.at("notes").of(thunk.event.id).open()}>View Note</Anchor>
+      </div>
+      {#each uniq(Object.entries(get(thunk.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status]}
+        <div class="mt-4 flex items-center justify-between">
+          <strong>{url}</strong>
+          <div class="flex items-center gap-1">
+            <i class={iconStatus(status.status)} />
+            <span class="ml-2">{status.status}</span>
+          </div>
+        </div>
+      {/each}
+    </AltColor>
+  {/each}
+{/if}

From 278959f9435ba0825ed3db2b3bbf10b60aef6003 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Mon, 25 Nov 2024 15:21:12 +0100
Subject: [PATCH 02/13] UI refinements

---
 src/app/views/PublishesConnections.svelte | 137 ++++++----------------
 src/app/views/PublishesNotices.svelte     |  54 ++++-----
 2 files changed, 65 insertions(+), 126 deletions(-)

diff --git a/src/app/views/PublishesConnections.svelte b/src/app/views/PublishesConnections.svelte
index e3ee5c1ff..3819bc0f0 100644
--- a/src/app/views/PublishesConnections.svelte
+++ b/src/app/views/PublishesConnections.svelte
@@ -1,20 +1,27 @@
 <script lang="ts">
-  import {getRelayQuality, relaysByUrl, thunks} from "@welshman/app"
-  import {AuthStatus, PublishStatus, SocketStatus, type Connection} from "@welshman/net"
+  import {getRelayQuality, relaysByUrl} from "@welshman/app"
   import {ctx} from "@welshman/lib"
+  import {AuthStatus, SocketStatus, type Connection} from "@welshman/net"
   import {displayRelayUrl} from "@welshman/util"
+  import {quantify} from "hurdak"
   import {onMount} from "svelte"
-  import cx from "classnames"
   import AltColor from "src/partials/AltColor.svelte"
-  import {quantify} from "hurdak"
-  import {get} from "svelte/store"
-  import Tile from "src/partials/Tile.svelte"
+  import SelectButton from "src/partials/SelectButton.svelte"
 
   export let selected: string
   export let activeTab: string
 
   const connectionsStatus: {[key: string]: Map<string, Connection>} = {}
-  const filters: {[key: string]: boolean} = {}
+
+  const options = [
+    "Connected",
+    "Logging in",
+    "Failed to log in",
+    "Failed to connect",
+    "Waiting to reconnect",
+    "Not connected",
+    "Unstable connection",
+  ]
 
   const pendingStatuses = [
     AuthStatus.Requested,
@@ -24,16 +31,8 @@
 
   const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
 
-  function getStatus(status: PublishStatus, cxn: Connection) {
-    return Object.values($thunks).filter(t => get(t.status)[cxn.url]?.status == status)
-  }
-
   $: connections = Array.from(ctx.net.pool.data.entries())
-    .filter(([url, cxn]) =>
-      Object.keys(filters).filter(f => filters[f]).length
-        ? Object.keys(filters).some(f => filters[f] && connectionsStatus[f]?.has(url))
-        : true,
-    )
+    .filter(([url, cxn]) => (selected ? connectionsStatus[selected]?.has(url) : true))
     .map(([url, cxn]) => cxn)
 
   onMount(() => {
@@ -79,63 +78,14 @@
   })
 </script>
 
-<div class="grid grid-cols-6 justify-between gap-2 sm:grid-cols-4">
-  <Tile
-    class={cx({border: filters["Connected"]}, "cursor-pointer")}
-    background
-    on:click={() => (filters["Connected"] = !filters["Connected"])}>
-    <p class="text-lg sm:text-2xl">
-      {Array.from(connectionsStatus["Connected"]?.values() || []).length || 0}
-    </p>
-    <span class="text-sm">Connected</span>
-  </Tile>
-  <Tile
-    class={cx({border: filters["Logging in"]}, "cursor-pointer")}
-    background
-    on:click={() => (filters["Logging in"] = !filters["Logging in"])}>
-    <p class="text-lg sm:text-2xl">
-      {Array.from(connectionsStatus["Logging in"]?.values() || []).length || 0}
-    </p>
-    <span class="text-sm">Logging in</span>
-  </Tile>
-  <Tile
-    class={cx({border: filters["Failed to log in"]}, "cursor-pointer")}
-    background
-    on:click={() => (filters["Failed to log in"] = !filters["Failed to log in"])}>
-    <p class="text-lg sm:text-2xl">
-      {Array.from(connectionsStatus["Failed to log in"]?.values() || []).length || 0}
-    </p>
-    <span class="text-sm">Login failed</span>
-  </Tile>
-  <Tile
-    class={cx({border: filters["Failed to connect"]}, "cursor-pointer")}
-    background
-    on:click={() => (filters["Failed to connect"] = !filters["Failed to connect"])}
-    lass="hidden sm:block">
-    <p class="text-lg sm:text-2xl">
-      {Array.from(connectionsStatus["Failed to connect"]?.values() || []).length || 0}
-    </p>
-    <span class="text-sm">Connection failed</span>
-  </Tile>
-  <Tile
-    class={cx({border: filters["Waiting to reconnect"]}, "cursor-pointer")}
-    background
-    on:click={() => (filters["Waiting to reconnect"] = !filters["Waiting to reconnect"])}>
-    <p class="text-lg sm:text-2xl">
-      {Array.from(connectionsStatus["Waiting to reconnect"]?.values() || []).length || 0}
-    </p>
-    <span class="text-sm">Reconnecting</span>
-  </Tile>
-  <Tile
-    class={cx({border: filters["Not connected"]}, "cursor-pointer")}
-    background
-    on:click={() => (filters["Not connected"] = !filters["Not connected"])}>
-    <p class="text-lg sm:text-2xl">
-      {Array.from(connectionsStatus["Not connected"]?.values() || []).length || 0}
-    </p>
-    <span class="text-sm">Not Connected</span>
-  </Tile>
-</div>
+<SelectButton {options} bind:value={selected}>
+  <div slot="item" let:option let:active>
+    <div class="flex items-center gap-2">
+      {Array.from(connectionsStatus[option]?.values() || []).length || 0}
+      {option}
+    </div>
+  </div>
+</SelectButton>
 {#each connections as cxn (cxn.url)}
   {@const relay = $relaysByUrl.get(cxn.url)}
   <AltColor
@@ -145,7 +95,7 @@
       selected = cxn.url
       activeTab = "notices"
     }}>
-    <div class="flex min-w-0 shrink-0 items-center gap-3">
+    <div class="flex min-w-0 shrink-0 items-start gap-3">
       {#if relay?.profile?.icon}
         <img class="h-9 w-9 shrink-0 rounded-full border" src={relay.profile.icon} />
       {:else}
@@ -170,31 +120,20 @@
           </span>
         </div>
       </div>
-      <div class="flex w-full justify-end gap-2">
-        {#if getStatus(PublishStatus.Success, cxn).length > 0}
-          {@const success = getStatus(PublishStatus.Success, cxn).length}
-          <div class="flex items-center gap-2">
-            <i class="fa fa-check-circle text-success"></i>{success || ""}
-          </div>
-        {/if}
-        {#if getStatus(PublishStatus.Failure, cxn).length > 0}
-          {@const failure = getStatus(PublishStatus.Failure, cxn).length}
-          <div class="flex items-center gap-2">
-            <i class="fa fa-times-circle text-danger"></i>{failure || ""}
-          </div>
-        {/if}
-        {#if getStatus(PublishStatus.Pending, cxn).length > 0}
-          {@const pending = getStatus(PublishStatus.Pending, cxn).length}
-          <div class="flex items-center gap-2">
-            <i class="fa fa-hourglass-half text-accent"></i>{pending || ""}
-          </div>
-        {/if}
-        {#if getStatus(PublishStatus.Timeout, cxn).length > 0}
-          {@const timeout = getStatus(PublishStatus.Pending, cxn).length}
-          <div class="flex items-center gap-2">
-            <i class="fa fa-clock"></i>{timeout || ""}
-          </div>
-        {/if}
+      <div class="flex w-full items-center justify-end gap-2 text-sm">
+        {#each options as opt}
+          {#if connectionsStatus[opt]?.has(cxn.url)}
+            <div class="hidden items-center gap-2 first:flex">
+              <span>{opt}</span>
+              <div
+                class:!bg-danger={opt.includes("Failed") || opt.includes("Not")}
+                class:!bg-warning={opt == "Logging in" ||
+                  opt == "Waiting to reconnect" ||
+                  opt == "Unstable connection"}
+                class="h-3 w-3 rounded-full bg-success" />
+            </div>
+          {/if}
+        {/each}
       </div>
     </div>
   </AltColor>
diff --git a/src/app/views/PublishesNotices.svelte b/src/app/views/PublishesNotices.svelte
index e5c74a276..9a40a1f2f 100644
--- a/src/app/views/PublishesNotices.svelte
+++ b/src/app/views/PublishesNotices.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import {formatTimestamp, thunks, type Thunk} from "@welshman/app"
+  import {formatTimestamp, thunks, type Thunk, type ThunkStatus} from "@welshman/app"
   import {ctx, identity, uniq} from "@welshman/lib"
   import {PublishStatus, type Connection} from "@welshman/net"
+  import cx from "classnames"
   import {get} from "svelte/store"
   import {fly} from "svelte/transition"
   import SearchSelect from "src/partials/SearchSelect.svelte"
+  import AltColor from "src/partials/AltColor.svelte"
   import {fuzzy} from "src/util/misc"
-  import Anchor from "src/partials/Anchor.svelte"
   import {router} from "src/app/util"
-  import AltColor from "src/partials/AltColor.svelte"
 
   export let selected: string[] = []
 
@@ -20,18 +20,19 @@
     )
   }
 
-  function iconStatus(status: PublishStatus) {
-    switch (status) {
+  function messageAndColorFromStatus(status: ThunkStatus) {
+    console.log("message", status)
+    switch (status.status) {
       case PublishStatus.Success:
-        return "fa fa-check-circle text-success"
+        return {message: status.message || "Published", color: "text-success"}
       case PublishStatus.Pending:
-        return "fa fa-clock"
+        return {message: status.message || "Pending", color: "text-warning"}
       case PublishStatus.Failure:
-        return "fa fa-times-circle text-danger"
+        return {message: status.message || "Failed", color: "text-danger"}
       case PublishStatus.Timeout:
-        return "fa fa-hourglass-half text-accent"
+        return {message: status.message || "Timed out", color: "text-accent"}
       case PublishStatus.Aborted:
-        return "fa fa-ban"
+        return {message: status.message || "Aborted", color: "text-accent"}
     }
   }
 
@@ -59,24 +60,23 @@
   </div>
 {:else}
   {#each notices as thunk}
-    <AltColor background class="rounded-md p-6 shadow">
-      <div class="flex justify-between">
-        <span>Kind {thunk.event.kind}, published {formatTimestamp(thunk.event.created_at)}</span>
-        <Anchor
-          underline
-          modal
-          class="text-sm"
-          on:click={() => router.at("notes").of(thunk.event.id).open()}>View Note</Anchor>
-      </div>
-      {#each uniq(Object.entries(get(thunk.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status]}
-        <div class="mt-4 flex items-center justify-between">
-          <strong>{url}</strong>
-          <div class="flex items-center gap-1">
-            <i class={iconStatus(status.status)} />
-            <span class="ml-2">{status.status}</span>
+    <AltColor
+      background
+      class="rounded-md p-6 shadow"
+      on:click={() => router.at("notes").of(thunk.event.id).open()}>
+      <div class="flex items-center gap-2">
+        <span class="text-neutral-400">{formatTimestamp(thunk.event.created_at)}</span>
+        <span>[Kind {thunk.event.kind}]</span>
+        {#each uniq(Object.entries(get(thunk.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status]}
+          {@const {message, color} = messageAndColorFromStatus(get(thunk.status)[url])}
+          <div class="flex items-center justify-between gap-2">
+            to <strong>{url}:</strong>
+            <div class={cx(color, "flex items-center gap-1")}>
+              <span class="">{message}</span>
+            </div>
           </div>
-        </div>
-      {/each}
+        {/each}
+      </div>
     </AltColor>
   {/each}
 {/if}

From 858194a68b3be0b6fb238fd8c1d5be7c9c1575a1 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 26 Nov 2024 13:00:19 +0100
Subject: [PATCH 03/13] multiple select button

---
 src/app/views/Publishes.svelte            |  6 +--
 src/app/views/PublishesConnections.svelte | 46 ++++++++++++-----------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/app/views/Publishes.svelte b/src/app/views/Publishes.svelte
index 33d7e6863..35e628089 100644
--- a/src/app/views/Publishes.svelte
+++ b/src/app/views/Publishes.svelte
@@ -15,7 +15,7 @@
   const tabs = ["events", "connections", "notices"]
   let activeTab = "events"
 
-  let selectedUrl: string
+  let selected: string
 
   const hasStatus = (thunk: Thunk, statuses: PublishStatus[]) =>
     Object.values(get(thunk.status)).some(s => statuses.includes(s.status))
@@ -79,7 +79,7 @@
     <PublishCard {thunk} />
   {/each}
 {:else if activeTab === "connections"}
-  <PublishesConnections bind:selected={selectedUrl} bind:activeTab />
+  <PublishesConnections bind:selected bind:activeTab />
 {:else if activeTab === "notices"}
-  <PublishesNotices selected={[selectedUrl].filter(Boolean)} />
+  <PublishesNotices selected={[selected]} />
 {/if}
diff --git a/src/app/views/PublishesConnections.svelte b/src/app/views/PublishesConnections.svelte
index 3819bc0f0..dc20a7df9 100644
--- a/src/app/views/PublishesConnections.svelte
+++ b/src/app/views/PublishesConnections.svelte
@@ -11,7 +11,8 @@
   export let selected: string
   export let activeTab: string
 
-  const connectionsStatus: {[key: string]: Map<string, Connection>} = {}
+  let selectedOptions: string[] = []
+  let connectionsStatus: {[key: string]: Map<string, Connection>} = {}
 
   const options = [
     "Connected",
@@ -32,44 +33,49 @@
   const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
 
   $: connections = Array.from(ctx.net.pool.data.entries())
-    .filter(([url, cxn]) => (selected ? connectionsStatus[selected]?.has(url) : true))
+    .filter(([url, cxn]) =>
+      selectedOptions.length ? selectedOptions.some(s => connectionsStatus[s]?.has(url)) : true,
+    )
     .map(([url, cxn]) => cxn)
 
   onMount(() => {
     const interval = setInterval(() => {
+      // make a copy of the connections
+      const newConnectionStatus: {[key: string]: Map<string, Connection>} = {}
       for (const [url, cxn] of ctx.net.pool.data.entries()) {
         if (pendingStatuses.includes(cxn.auth.status)) {
-          connectionsStatus["Logging in"] = (connectionsStatus["Logging in"] || new Map()).set(
+          newConnectionStatus["Logging in"] = (newConnectionStatus["Logging in"] || new Map()).set(
             url,
             cxn,
           )
         } else if (failureStatuses.includes(cxn.auth.status)) {
-          connectionsStatus["Failed to log in"] = (
-            connectionsStatus["Failed to log in"] || new Map()
+          newConnectionStatus["Failed to log in"] = (
+            newConnectionStatus["Failed to log in"] || new Map()
           ).set(url, cxn)
         } else if (cxn.socket.status === SocketStatus.Error) {
-          connectionsStatus["Failed to connect"] = (
-            connectionsStatus["Failed to connect"] || new Map()
+          newConnectionStatus["Failed to connect"] = (
+            newConnectionStatus["Failed to connect"] || new Map()
           ).set(url, cxn)
         } else if (cxn.socket.status === SocketStatus.Closed) {
-          connectionsStatus["Waiting to reconnect"] = (
-            connectionsStatus["Waiting to reconnect"] || new Map()
+          newConnectionStatus["Waiting to reconnect"] = (
+            newConnectionStatus["Waiting to reconnect"] || new Map()
           ).set(url, cxn)
         } else if (cxn.socket.status === SocketStatus.New) {
-          connectionsStatus["Not connected"] = (
-            connectionsStatus["Not connected"] || new Map()
+          newConnectionStatus["Not connected"] = (
+            newConnectionStatus["Not connected"] || new Map()
           ).set(url, cxn)
         } else if (getRelayQuality(cxn.url) < 0.5) {
-          connectionsStatus["Unstable connection"] = (
-            connectionsStatus["Unstable connection"] || new Map()
+          newConnectionStatus["Unstable connection"] = (
+            newConnectionStatus["Unstable connection"] || new Map()
           ).set(url, cxn)
         } else {
-          connectionsStatus["Connected"] = (connectionsStatus["Connected"] || new Map()).set(
+          newConnectionStatus["Connected"] = (newConnectionStatus["Connected"] || new Map()).set(
             url,
             cxn,
           )
         }
       }
+      connectionsStatus = newConnectionStatus
     }, 800)
 
     return () => {
@@ -78,12 +84,10 @@
   })
 </script>
 
-<SelectButton {options} bind:value={selected}>
-  <div slot="item" let:option let:active>
-    <div class="flex items-center gap-2">
-      {Array.from(connectionsStatus[option]?.values() || []).length || 0}
-      {option}
-    </div>
+<SelectButton {options} bind:value={selectedOptions} multiple>
+  <div class="flex items-center gap-2" slot="item" let:option>
+    {Array.from(connectionsStatus[option]?.values() || []).length || 0}
+    {option}
   </div>
 </SelectButton>
 {#each connections as cxn (cxn.url)}
@@ -123,7 +127,7 @@
       <div class="flex w-full items-center justify-end gap-2 text-sm">
         {#each options as opt}
           {#if connectionsStatus[opt]?.has(cxn.url)}
-            <div class="hidden items-center gap-2 first:flex">
+            <div class="flex items-center gap-2">
               <span>{opt}</span>
               <div
                 class:!bg-danger={opt.includes("Failed") || opt.includes("Not")}

From 68ddf31a5988e662bb6c8965a9e81242f682a016 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 26 Nov 2024 15:00:06 +0100
Subject: [PATCH 04/13] align button to the left

---
 src/app/views/PublishesConnections.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/views/PublishesConnections.svelte b/src/app/views/PublishesConnections.svelte
index dc20a7df9..80a3826ea 100644
--- a/src/app/views/PublishesConnections.svelte
+++ b/src/app/views/PublishesConnections.svelte
@@ -84,7 +84,7 @@
   })
 </script>
 
-<SelectButton {options} bind:value={selectedOptions} multiple>
+<SelectButton {options} bind:value={selectedOptions} multiple class="text-left">
   <div class="flex items-center gap-2" slot="item" let:option>
     {Array.from(connectionsStatus[option]?.values() || []).length || 0}
     {option}

From 3059257601f640df662f7054f61a3bc6615ab3ff Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 26 Nov 2024 15:04:21 +0100
Subject: [PATCH 05/13] filter out undefined selected

---
 src/app/views/Publishes.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/views/Publishes.svelte b/src/app/views/Publishes.svelte
index 35e628089..cd46ab546 100644
--- a/src/app/views/Publishes.svelte
+++ b/src/app/views/Publishes.svelte
@@ -81,5 +81,5 @@
 {:else if activeTab === "connections"}
   <PublishesConnections bind:selected bind:activeTab />
 {:else if activeTab === "notices"}
-  <PublishesNotices selected={[selected]} />
+  <PublishesNotices selected={[selected].filter(Boolean)} />
 {/if}

From 7a5418ca758293455025aaf7a691feeb61d3ea03 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 28 Nov 2024 10:56:47 +0100
Subject: [PATCH 06/13] refactor connectionstatus code

---
 src/app/shared/RelayStatus.svelte         |  53 ++++-------
 src/app/views/PublishesConnections.svelte | 105 +++++++---------------
 src/engine/model.ts                       |  10 +++
 src/util/connection.ts                    |  29 ++++++
 4 files changed, 89 insertions(+), 108 deletions(-)
 create mode 100644 src/util/connection.ts

diff --git a/src/app/shared/RelayStatus.svelte b/src/app/shared/RelayStatus.svelte
index 6b2a1833f..9ea35b3c5 100644
--- a/src/app/shared/RelayStatus.svelte
+++ b/src/app/shared/RelayStatus.svelte
@@ -1,48 +1,19 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {ctx} from "@welshman/lib"
-  import {SocketStatus, AuthStatus} from "@welshman/net"
-  import {getRelayQuality} from "@welshman/app"
   import Popover from "src/partials/Popover.svelte"
+  import {ConnectionType} from "src/engine"
+  import {getConnectionStatus} from "src/util/connection"
 
   export let url
 
-  const pendingStatuses = [
-    AuthStatus.Requested,
-    AuthStatus.PendingSignature,
-    AuthStatus.PendingResponse,
-  ]
-  const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
-
-  let description = "Not connected"
-  let className = "bg-neutral-600"
+  let status = ConnectionType.NotConnected
 
   onMount(() => {
     const interval = setInterval(() => {
       const cxn = ctx.net.pool.get(url)
 
-      if (pendingStatuses.includes(cxn.auth.status)) {
-        className = "bg-warning"
-        description = "Logging in"
-      } else if (failureStatuses.includes(cxn.auth.status)) {
-        className = "bg-danger"
-        description = "Failed to log in"
-      } else if (cxn.socket.status === SocketStatus.Error) {
-        className = "bg-danger"
-        description = "Failed to connect"
-      } else if (cxn.socket.status === SocketStatus.Closed) {
-        className = "bg-warning"
-        description = "Waiting to reconnect"
-      } else if (cxn.socket.status === SocketStatus.New) {
-        className = "bg-neutral-600"
-        description = "Not connected"
-      } else if (getRelayQuality(cxn.url) < 0.5) {
-        className = "bg-warning"
-        description = "Unstable connection"
-      } else {
-        className = "bg-success"
-        description = "Connected"
-      }
+      status = getConnectionStatus(cxn)
     }, 800)
 
     return () => {
@@ -52,8 +23,20 @@
 </script>
 
 <Popover triggerType="mouseenter">
-  <div slot="trigger" class="h-2 w-2 cursor-pointer rounded-full {className}" />
+  <div
+    slot="trigger"
+    class="h-2 w-2 cursor-pointer rounded-full bg-neutral-600"
+    class:bg-neutral-600={ConnectionType.NotConnected == status}
+    class:bg-danger={[ConnectionType.LoginFailed, ConnectionType.ConnectFailed].some(
+      s => s == status,
+    )}
+    class:bg-success={ConnectionType.Connected == status}
+    class:bg-warning={[
+      ConnectionType.Logging,
+      ConnectionType.WaitReconnect,
+      ConnectionType.UnstableConnection,
+    ].some(s => s == status)} />
   <div slot="tooltip" class="transition-all sm:block">
-    {description}
+    {status}
   </div>
 </Popover>
diff --git a/src/app/views/PublishesConnections.svelte b/src/app/views/PublishesConnections.svelte
index 80a3826ea..a2a0a3792 100644
--- a/src/app/views/PublishesConnections.svelte
+++ b/src/app/views/PublishesConnections.svelte
@@ -1,79 +1,40 @@
 <script lang="ts">
-  import {getRelayQuality, relaysByUrl} from "@welshman/app"
-  import {ctx} from "@welshman/lib"
-  import {AuthStatus, SocketStatus, type Connection} from "@welshman/net"
+  import {relaysByUrl} from "@welshman/app"
+  import {addToMapKey, ctx} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
   import {quantify} from "hurdak"
   import {onMount} from "svelte"
   import AltColor from "src/partials/AltColor.svelte"
   import SelectButton from "src/partials/SelectButton.svelte"
+  import {ConnectionType} from "src/engine"
+  import {getConnectionStatus} from "src/util/connection"
 
   export let selected: string
   export let activeTab: string
 
   let selectedOptions: string[] = []
-  let connectionsStatus: {[key: string]: Map<string, Connection>} = {}
+  let connectionsStatus: Map<string, Set<string>> = new Map()
 
   const options = [
-    "Connected",
-    "Logging in",
-    "Failed to log in",
-    "Failed to connect",
-    "Waiting to reconnect",
-    "Not connected",
-    "Unstable connection",
+    ConnectionType.Connected,
+    ConnectionType.Logging,
+    ConnectionType.LoginFailed,
+    ConnectionType.ConnectFailed,
+    ConnectionType.WaitReconnect,
+    ConnectionType.NotConnected,
+    ConnectionType.UnstableConnection,
   ]
 
-  const pendingStatuses = [
-    AuthStatus.Requested,
-    AuthStatus.PendingSignature,
-    AuthStatus.PendingResponse,
-  ]
-
-  const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
-
-  $: connections = Array.from(ctx.net.pool.data.entries())
-    .filter(([url, cxn]) =>
-      selectedOptions.length ? selectedOptions.some(s => connectionsStatus[s]?.has(url)) : true,
-    )
-    .map(([url, cxn]) => cxn)
+  $: connections = Array.from(ctx.net.pool.data.keys()).filter(url =>
+    selectedOptions.length ? selectedOptions.some(s => connectionsStatus.get(s)?.has(url)) : true,
+  )
 
   onMount(() => {
     const interval = setInterval(() => {
       // make a copy of the connections
-      const newConnectionStatus: {[key: string]: Map<string, Connection>} = {}
+      const newConnectionStatus: Map<string, Set<string>> = new Map()
       for (const [url, cxn] of ctx.net.pool.data.entries()) {
-        if (pendingStatuses.includes(cxn.auth.status)) {
-          newConnectionStatus["Logging in"] = (newConnectionStatus["Logging in"] || new Map()).set(
-            url,
-            cxn,
-          )
-        } else if (failureStatuses.includes(cxn.auth.status)) {
-          newConnectionStatus["Failed to log in"] = (
-            newConnectionStatus["Failed to log in"] || new Map()
-          ).set(url, cxn)
-        } else if (cxn.socket.status === SocketStatus.Error) {
-          newConnectionStatus["Failed to connect"] = (
-            newConnectionStatus["Failed to connect"] || new Map()
-          ).set(url, cxn)
-        } else if (cxn.socket.status === SocketStatus.Closed) {
-          newConnectionStatus["Waiting to reconnect"] = (
-            newConnectionStatus["Waiting to reconnect"] || new Map()
-          ).set(url, cxn)
-        } else if (cxn.socket.status === SocketStatus.New) {
-          newConnectionStatus["Not connected"] = (
-            newConnectionStatus["Not connected"] || new Map()
-          ).set(url, cxn)
-        } else if (getRelayQuality(cxn.url) < 0.5) {
-          newConnectionStatus["Unstable connection"] = (
-            newConnectionStatus["Unstable connection"] || new Map()
-          ).set(url, cxn)
-        } else {
-          newConnectionStatus["Connected"] = (newConnectionStatus["Connected"] || new Map()).set(
-            url,
-            cxn,
-          )
-        }
+        addToMapKey(newConnectionStatus, getConnectionStatus(cxn), url)
       }
       connectionsStatus = newConnectionStatus
     }, 800)
@@ -86,17 +47,17 @@
 
 <SelectButton {options} bind:value={selectedOptions} multiple class="text-left">
   <div class="flex items-center gap-2" slot="item" let:option>
-    {Array.from(connectionsStatus[option]?.values() || []).length || 0}
+    {connectionsStatus.get(option)?.size || 0}
     {option}
   </div>
 </SelectButton>
-{#each connections as cxn (cxn.url)}
-  {@const relay = $relaysByUrl.get(cxn.url)}
+{#each connections as url (url)}
+  {@const relay = $relaysByUrl.get(url)}
   <AltColor
     background
     class="cursor-pointer justify-between rounded-md p-6 shadow"
     on:click={() => {
-      selected = cxn.url
+      selected = url
       activeTab = "notices"
     }}>
     <div class="flex min-w-0 shrink-0 items-start gap-3">
@@ -110,7 +71,7 @@
       <div class="shrink-0">
         <div class="flex items-center gap-2">
           <div class="text-md overflow-hidden text-ellipsis whitespace-nowrap">
-            {displayRelayUrl(cxn.url)}
+            {displayRelayUrl(url)}
           </div>
         </div>
         <div class="flex gap-4 text-xs text-neutral-400">
@@ -125,18 +86,16 @@
         </div>
       </div>
       <div class="flex w-full items-center justify-end gap-2 text-sm">
-        {#each options as opt}
-          {#if connectionsStatus[opt]?.has(cxn.url)}
-            <div class="flex items-center gap-2">
-              <span>{opt}</span>
-              <div
-                class:!bg-danger={opt.includes("Failed") || opt.includes("Not")}
-                class:!bg-warning={opt == "Logging in" ||
-                  opt == "Waiting to reconnect" ||
-                  opt == "Unstable connection"}
-                class="h-3 w-3 rounded-full bg-success" />
-            </div>
-          {/if}
+        {#each options.filter(o => connectionsStatus.get(o)?.has(url)) as opt}
+          <div class="flex items-center gap-2">
+            <span>{opt}</span>
+            <div
+              class:!bg-danger={opt.includes("Failed") || opt.includes("Not")}
+              class:!bg-warning={opt == "Logging in" ||
+                opt == ConnectionType.WaitReconnect ||
+                opt == ConnectionType.UnstableConnection}
+              class="h-3 w-3 rounded-full bg-success" />
+          </div>
         {/each}
       </div>
     </div>
diff --git a/src/engine/model.ts b/src/engine/model.ts
index 5a19ec3bf..348c021a3 100644
--- a/src/engine/model.ts
+++ b/src/engine/model.ts
@@ -43,3 +43,13 @@ export type AnonymousUserState = {
   follows: string[][]
   relays: string[][]
 }
+
+export enum ConnectionType {
+  Connected = "Connected",
+  Logging = "Logging in",
+  LoginFailed = "Failed to log in",
+  ConnectFailed = "Failed to connect",
+  WaitReconnect = "Wainting to reconnect",
+  NotConnected = "Not connected",
+  UnstableConnection = "Unstable connection",
+}
diff --git a/src/util/connection.ts b/src/util/connection.ts
new file mode 100644
index 000000000..0d90c3722
--- /dev/null
+++ b/src/util/connection.ts
@@ -0,0 +1,29 @@
+import {AuthStatus, SocketStatus, type Connection} from "@welshman/net"
+import {getRelayQuality} from "@welshman/app"
+import {ConnectionType} from "src/engine"
+
+const pendingStatuses = [
+  AuthStatus.Requested,
+  AuthStatus.PendingSignature,
+  AuthStatus.PendingResponse,
+]
+
+const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
+
+export const getConnectionStatus = (cxn: Connection): ConnectionType => {
+  if (pendingStatuses.includes(cxn.auth.status)) {
+    return ConnectionType.Logging
+  } else if (failureStatuses.includes(cxn.auth.status)) {
+    return ConnectionType.LoginFailed
+  } else if (cxn.socket.status === SocketStatus.Error) {
+    return ConnectionType.ConnectFailed
+  } else if (cxn.socket.status === SocketStatus.Closed) {
+    return ConnectionType.WaitReconnect
+  } else if (cxn.socket.status === SocketStatus.New) {
+    return ConnectionType.NotConnected
+  } else if (getRelayQuality(cxn.url) < 0.5) {
+    return ConnectionType.UnstableConnection
+  } else {
+    return ConnectionType.Connected
+  }
+}

From fbccdf5294cb3afc655f5c27f8dda4fccf6279bb Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 28 Nov 2024 11:52:57 +0100
Subject: [PATCH 07/13] add subscription Notices

---
 src/app/views/PublishesNotices.svelte | 86 ++++++++++++++++++++-------
 1 file changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/app/views/PublishesNotices.svelte b/src/app/views/PublishesNotices.svelte
index 9a40a1f2f..b2dfd1878 100644
--- a/src/app/views/PublishesNotices.svelte
+++ b/src/app/views/PublishesNotices.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {formatTimestamp, thunks, type Thunk, type ThunkStatus} from "@welshman/app"
   import {ctx, identity, uniq} from "@welshman/lib"
-  import {PublishStatus, type Connection} from "@welshman/net"
+  import {PublishStatus, ConnectionEvent, type Connection} from "@welshman/net"
   import cx from "classnames"
   import {get} from "svelte/store"
   import {fly} from "svelte/transition"
@@ -9,19 +9,36 @@
   import AltColor from "src/partials/AltColor.svelte"
   import {fuzzy} from "src/util/misc"
   import {router} from "src/app/util"
+  import {now} from "@welshman/signer"
+  import {onDestroy} from "svelte"
 
   export let selected: string[] = []
 
+  type SubNotice = {received_at: number; notice: string}
+
+  const subNotices: SubNotice[] = []
+
+  const noticeListener = (notice: string) => {
+    subNotices.push({received_at: now(), notice})
+  }
+
+  $: selected
+    .map(url => ctx.net.pool.data.get(url))
+    .filter(Boolean)
+    .forEach(cxn => {
+      cxn.off(ConnectionEvent.Notice, noticeListener)
+      cxn.on(ConnectionEvent.Notice, noticeListener)
+    })
+
   const searchConnections = fuzzy(Array.from(ctx.net.pool.data.keys()))
 
-  function getNotices(connections: Connection[]) {
+  function getPubNotices(connections: Connection[]) {
     return Object.values($thunks).filter(t =>
       connections.some(cxn => get(t.status)[cxn.url]?.status),
     )
   }
 
   function messageAndColorFromStatus(status: ThunkStatus) {
-    console.log("message", status)
     switch (status.status) {
       case PublishStatus.Success:
         return {message: status.message || "Published", color: "text-success"}
@@ -36,9 +53,24 @@
     }
   }
 
-  $: notices = getNotices(
+  $: pubNotices = getPubNotices(
     selected.map(url => ctx.net.pool.data.get(url)).filter(Boolean),
   ) as Thunk[]
+
+  $: notices = ([...pubNotices, ...subNotices] as (Thunk & SubNotice)[]).sort((a, b) => {
+    const aDate = a?.event ? a?.event.created_at : a?.received_at
+    const bDate = b?.event ? b?.event.created_at : b?.received_at
+    return bDate - aDate
+  })
+
+  onDestroy(() => {
+    selected
+      .map(url => ctx.net.pool.data.get(url))
+      .filter(Boolean)
+      .forEach(cxn => {
+        cxn.off(ConnectionEvent.Notice, noticeListener)
+      })
+  })
 </script>
 
 <SearchSelect
@@ -59,24 +91,36 @@
     </AltColor>
   </div>
 {:else}
-  {#each notices as thunk}
-    <AltColor
-      background
-      class="rounded-md p-6 shadow"
-      on:click={() => router.at("notes").of(thunk.event.id).open()}>
-      <div class="flex items-center gap-2">
-        <span class="text-neutral-400">{formatTimestamp(thunk.event.created_at)}</span>
-        <span>[Kind {thunk.event.kind}]</span>
-        {#each uniq(Object.entries(get(thunk.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status]}
-          {@const {message, color} = messageAndColorFromStatus(get(thunk.status)[url])}
-          <div class="flex items-center justify-between gap-2">
-            to <strong>{url}:</strong>
-            <div class={cx(color, "flex items-center gap-1")}>
-              <span class="">{message}</span>
+  {#each notices as notice}
+    {#if notice.event}
+      <AltColor
+        background
+        class="rounded-md p-6 shadow"
+        on:click={() => router.at("notes").of(notice.event.id).open()}>
+        <div class="flex items-center gap-2">
+          <span class="text-neutral-400">{formatTimestamp(notice.event.created_at)}</span>
+          <span>[Kind {notice.event.kind}]</span>
+          {#each uniq(Object.entries(get(notice.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status]}
+            {@const {message, color} = messageAndColorFromStatus(get(notice.status)[url])}
+            <div class="flex items-center justify-between gap-2">
+              to <strong>{url}:</strong>
+              <div class={cx(color, "flex items-center gap-1")}>
+                <span class="">{message}</span>
+              </div>
             </div>
+          {/each}
+        </div>
+      </AltColor>
+    {:else}
+      <AltColor background class="rounded-md p-6 shadow">
+        <div class="flex items-center gap-2">
+          <span class="text-neutral-400">{formatTimestamp(notice.received_at)}</span>
+          <span>[Notice]</span>
+          <div class="flex items-center gap-1">
+            <span class="text-neutral-100">{notice.notice}</span>
           </div>
-        {/each}
-      </div>
-    </AltColor>
+        </div>
+      </AltColor>
+    {/if}
   {/each}
 {/if}

From 2d8fe0c6ad3412bfef424c7cbabab0ad096d3b84 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 3 Dec 2024 15:49:26 +0100
Subject: [PATCH 08/13] track subscriptions notices and display them

---
 src/app/views/PublishesConnections.svelte |  12 ++-
 src/app/views/PublishesNotices.svelte     | 117 ++++++++++------------
 src/engine/state.ts                       |  27 ++++-
 3 files changed, 87 insertions(+), 69 deletions(-)

diff --git a/src/app/views/PublishesConnections.svelte b/src/app/views/PublishesConnections.svelte
index a2a0a3792..76b2d4967 100644
--- a/src/app/views/PublishesConnections.svelte
+++ b/src/app/views/PublishesConnections.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import {relaysByUrl} from "@welshman/app"
   import {addToMapKey, ctx} from "@welshman/lib"
+  import {throttled} from "@welshman/store"
   import {displayRelayUrl} from "@welshman/util"
   import {quantify} from "hurdak"
   import {onMount} from "svelte"
+  import {writable, type Writable} from "svelte/store"
   import AltColor from "src/partials/AltColor.svelte"
   import SelectButton from "src/partials/SelectButton.svelte"
   import {ConnectionType} from "src/engine"
@@ -13,8 +15,8 @@
   export let activeTab: string
 
   let selectedOptions: string[] = []
-  let connectionsStatus: Map<string, Set<string>> = new Map()
 
+  const connectionsStatus: Writable<Map<string, Set<string>>> = throttled(1000, writable(new Map()))
   const options = [
     ConnectionType.Connected,
     ConnectionType.Logging,
@@ -26,7 +28,7 @@
   ]
 
   $: connections = Array.from(ctx.net.pool.data.keys()).filter(url =>
-    selectedOptions.length ? selectedOptions.some(s => connectionsStatus.get(s)?.has(url)) : true,
+    selectedOptions.length ? selectedOptions.some(s => $connectionsStatus.get(s)?.has(url)) : true,
   )
 
   onMount(() => {
@@ -36,7 +38,7 @@
       for (const [url, cxn] of ctx.net.pool.data.entries()) {
         addToMapKey(newConnectionStatus, getConnectionStatus(cxn), url)
       }
-      connectionsStatus = newConnectionStatus
+      $connectionsStatus = newConnectionStatus
     }, 800)
 
     return () => {
@@ -47,7 +49,7 @@
 
 <SelectButton {options} bind:value={selectedOptions} multiple class="text-left">
   <div class="flex items-center gap-2" slot="item" let:option>
-    {connectionsStatus.get(option)?.size || 0}
+    {$connectionsStatus.get(option)?.size || 0}
     {option}
   </div>
 </SelectButton>
@@ -86,7 +88,7 @@
         </div>
       </div>
       <div class="flex w-full items-center justify-end gap-2 text-sm">
-        {#each options.filter(o => connectionsStatus.get(o)?.has(url)) as opt}
+        {#each options.filter(o => $connectionsStatus.get(o)?.has(url)) as opt}
           <div class="flex items-center gap-2">
             <span>{opt}</span>
             <div
diff --git a/src/app/views/PublishesNotices.svelte b/src/app/views/PublishesNotices.svelte
index b2dfd1878..aa1fb5605 100644
--- a/src/app/views/PublishesNotices.svelte
+++ b/src/app/views/PublishesNotices.svelte
@@ -1,34 +1,18 @@
 <script lang="ts">
   import {formatTimestamp, thunks, type Thunk, type ThunkStatus} from "@welshman/app"
   import {ctx, identity, uniq} from "@welshman/lib"
-  import {PublishStatus, ConnectionEvent, type Connection} from "@welshman/net"
-  import cx from "classnames"
+  import {PublishStatus, type Connection} from "@welshman/net"
   import {get} from "svelte/store"
   import {fly} from "svelte/transition"
   import SearchSelect from "src/partials/SearchSelect.svelte"
   import AltColor from "src/partials/AltColor.svelte"
   import {fuzzy} from "src/util/misc"
   import {router} from "src/app/util"
-  import {now} from "@welshman/signer"
-  import {onDestroy} from "svelte"
+  import {subscriptionNotices, type SubscriptionNotice} from "src/engine"
 
   export let selected: string[] = []
 
-  type SubNotice = {received_at: number; notice: string}
-
-  const subNotices: SubNotice[] = []
-
-  const noticeListener = (notice: string) => {
-    subNotices.push({received_at: now(), notice})
-  }
-
-  $: selected
-    .map(url => ctx.net.pool.data.get(url))
-    .filter(Boolean)
-    .forEach(cxn => {
-      cxn.off(ConnectionEvent.Notice, noticeListener)
-      cxn.on(ConnectionEvent.Notice, noticeListener)
-    })
+  $: subNotices = selected.flatMap(s => $subscriptionNotices.get(s)?.map(n => ({...n, url: s})))
 
   const searchConnections = fuzzy(Array.from(ctx.net.pool.data.keys()))
 
@@ -52,25 +36,31 @@
         return {message: status.message || "Aborted", color: "text-accent"}
     }
   }
+  // for subscription notices
+  function colorFromVerb(verb: string) {
+    switch (verb) {
+      case "OK":
+        return "text-success"
+      case "EOSE":
+        return "text-neutral-100"
+      case "NOTICE":
+        return "text-accent"
+      case "CLOSED":
+        return "text-danger"
+      case "NEG-MSG":
+        return "text-accent"
+    }
+  }
 
   $: pubNotices = getPubNotices(
     selected.map(url => ctx.net.pool.data.get(url)).filter(Boolean),
   ) as Thunk[]
 
-  $: notices = ([...pubNotices, ...subNotices] as (Thunk & SubNotice)[]).sort((a, b) => {
-    const aDate = a?.event ? a?.event.created_at : a?.received_at
-    const bDate = b?.event ? b?.event.created_at : b?.received_at
-    return bDate - aDate
-  })
-
-  onDestroy(() => {
-    selected
-      .map(url => ctx.net.pool.data.get(url))
-      .filter(Boolean)
-      .forEach(cxn => {
-        cxn.off(ConnectionEvent.Notice, noticeListener)
-      })
-  })
+  $: notices = ([...pubNotices, ...subNotices] as (Thunk & (SubscriptionNotice & {url: string}))[])
+    .sort((a, b) => {
+      return a.created_at - b.created_at
+    })
+    .filter(Boolean)
 </script>
 
 <SearchSelect
@@ -84,43 +74,46 @@
   </div>
 </SearchSelect>
 
-{#if !notices.length && selected.length}
+{#if !selected.length}
+  <div transition:fly|local={{y: 20}}>
+    <AltColor background class="rounded-md p-6 shadow">
+      <div class="place text-center text-neutral-100">No relay selected.</div>
+    </AltColor>
+  </div>
+{:else if !notices.length && selected.length}
   <div transition:fly|local={{y: 20}}>
     <AltColor background class="rounded-md p-6 shadow">
       <div class="place text-center text-neutral-100">No notices found for selected relays.</div>
     </AltColor>
   </div>
 {:else}
-  {#each notices as notice}
-    {#if notice.event}
-      <AltColor
-        background
-        class="rounded-md p-6 shadow"
-        on:click={() => router.at("notes").of(notice.event.id).open()}>
-        <div class="flex items-center gap-2">
-          <span class="text-neutral-400">{formatTimestamp(notice.event.created_at)}</span>
-          <span>[Kind {notice.event.kind}]</span>
-          {#each uniq(Object.entries(get(notice.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status]}
+  <AltColor background class="rounded-md p-2">
+    {#each notices as notice (JSON.stringify(notice))}
+      <div>
+        {#if notice.event}
+          {#each uniq(Object.entries(get(notice.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status] (url)}
             {@const {message, color} = messageAndColorFromStatus(get(notice.status)[url])}
-            <div class="flex items-center justify-between gap-2">
-              to <strong>{url}:</strong>
-              <div class={cx(color, "flex items-center gap-1")}>
-                <span class="">{message}</span>
-              </div>
+            <div
+              class="flex gap-2 p-2"
+              on:click={() => router.at("notes").of(notice.event.id).open()}>
+              <span class="shrink-0 text-neutral-400"
+                >{formatTimestamp(notice.event.created_at)}</span>
+              <strong class={color}>to {url}:</strong>
+              <span class="shrink-0">[Kind {notice.event.kind}]</span>
+              <span class="">{message}</span>
             </div>
           {/each}
-        </div>
-      </AltColor>
-    {:else}
-      <AltColor background class="rounded-md p-6 shadow">
-        <div class="flex items-center gap-2">
-          <span class="text-neutral-400">{formatTimestamp(notice.received_at)}</span>
-          <span>[Notice]</span>
-          <div class="flex items-center gap-1">
-            <span class="text-neutral-100">{notice.notice}</span>
+        {:else}
+          <div class="flex flex-wrap items-center gap-2 overflow-hidden p-2">
+            <span class="shrink-0 text-neutral-400">{formatTimestamp(notice.created_at)}</span>
+            <strong class={colorFromVerb(notice.notice[0])}>from {notice.url}</strong>
+            <span class="shrink-0">[{notice.notice[0]}]</span>
+            {#each notice.notice.slice(1).filter(n => typeof n == "string") as item}
+              <span class="text-neutral-300">{item}</span>
+            {/each}
           </div>
-        </div>
-      </AltColor>
-    {/if}
-  {/each}
+        {/if}
+      </div>
+    {/each}
+  </AltColor>
 {/if}
diff --git a/src/engine/state.ts b/src/engine/state.ts
index 4eca733ec..37714bcc5 100644
--- a/src/engine/state.ts
+++ b/src/engine/state.ts
@@ -51,8 +51,16 @@ import {
   uniq,
   uniqBy,
 } from "@welshman/lib"
-import type {PublishRequest, Target} from "@welshman/net"
-import {Executor, AuthMode, Local, Multi, Relays, SubscriptionEvent} from "@welshman/net"
+import type {Connection, PublishRequest, Target} from "@welshman/net"
+import {
+  Executor,
+  AuthMode,
+  Local,
+  Multi,
+  Relays,
+  SubscriptionEvent,
+  ConnectionEvent,
+} from "@welshman/net"
 import {Nip01Signer, Nip59} from "@welshman/signer"
 import {deriveEvents, deriveEventsMapped, throttled, withGetter} from "@welshman/store"
 import type {EventTemplate, PublishedList, SignedEvent, TrustedEvent} from "@welshman/util"
@@ -1029,6 +1037,10 @@ const migrateEvents = (events: TrustedEvent[]) => {
   )
 }
 
+export type SubscriptionNotice = {created_at: number; notice: string[]}
+
+export const subscriptionNotices = writable<Map<string, SubscriptionNotice[]>>(new Map())
+
 // Avoid initializing multiple times on hot reload
 if (!db) {
   const initialRelays = [
@@ -1058,6 +1070,17 @@ if (!db) {
     ctx.app.dufflepudUrl = getSetting("dufflepud_url")
   })
 
+  ctx.net.pool.on("init", (connection: Connection) => {
+    // if (!connection.url.includes("snort")) return
+    connection.on(ConnectionEvent.Receive, function (cxn, [verb, ...args]) {
+      if (verb == "EVENT") return
+      subscriptionNotices.update($notices => {
+        pushToMapKey($notices, connection.url, {created_at: now(), notice: [verb, ...args]})
+        return $notices
+      })
+    })
+  })
+
   ready = initStorage("coracle", 2, {
     relays: {keyPath: "url", store: throttled(1000, relays)},
     handles: {keyPath: "nip05", store: throttled(1000, handles)},

From a97f9b97802402067242f19bc598270f63950d75 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Wed, 4 Dec 2024 17:09:41 +0100
Subject: [PATCH 09/13] clean up and refactor

---
 src/app/shared/RelayStatus.svelte         |   5 +-
 src/app/views/Publishes.svelte            |   2 +-
 src/app/views/PublishesConnections.svelte |  40 ++++----
 src/app/views/PublishesNotices.svelte     | 116 ++++++++--------------
 src/domain/connection.ts                  |  75 ++++++++++++++
 src/engine/model.ts                       |  10 --
 src/engine/state.ts                       |  14 +--
 src/partials/ThunkNotice.svelte           |  31 ++++++
 src/util/connection.ts                    |  29 ------
 9 files changed, 179 insertions(+), 143 deletions(-)
 create mode 100644 src/domain/connection.ts
 create mode 100644 src/partials/ThunkNotice.svelte
 delete mode 100644 src/util/connection.ts

diff --git a/src/app/shared/RelayStatus.svelte b/src/app/shared/RelayStatus.svelte
index 9ea35b3c5..1b391a839 100644
--- a/src/app/shared/RelayStatus.svelte
+++ b/src/app/shared/RelayStatus.svelte
@@ -2,8 +2,7 @@
   import {onMount} from "svelte"
   import {ctx} from "@welshman/lib"
   import Popover from "src/partials/Popover.svelte"
-  import {ConnectionType} from "src/engine"
-  import {getConnectionStatus} from "src/util/connection"
+  import {ConnectionType, displayConnectionType, getConnectionStatus} from "src/domain/connection"
 
   export let url
 
@@ -37,6 +36,6 @@
       ConnectionType.UnstableConnection,
     ].some(s => s == status)} />
   <div slot="tooltip" class="transition-all sm:block">
-    {status}
+    {displayConnectionType(status)}
   </div>
 </Popover>
diff --git a/src/app/views/Publishes.svelte b/src/app/views/Publishes.svelte
index cd46ab546..5632ae090 100644
--- a/src/app/views/Publishes.svelte
+++ b/src/app/views/Publishes.svelte
@@ -81,5 +81,5 @@
 {:else if activeTab === "connections"}
   <PublishesConnections bind:selected bind:activeTab />
 {:else if activeTab === "notices"}
-  <PublishesNotices selected={[selected].filter(Boolean)} />
+  <PublishesNotices search={selected} />
 {/if}
diff --git a/src/app/views/PublishesConnections.svelte b/src/app/views/PublishesConnections.svelte
index 76b2d4967..28c1644dc 100644
--- a/src/app/views/PublishesConnections.svelte
+++ b/src/app/views/PublishesConnections.svelte
@@ -1,22 +1,19 @@
 <script lang="ts">
   import {relaysByUrl} from "@welshman/app"
   import {addToMapKey, ctx} from "@welshman/lib"
-  import {throttled} from "@welshman/store"
   import {displayRelayUrl} from "@welshman/util"
   import {quantify} from "hurdak"
   import {onMount} from "svelte"
-  import {writable, type Writable} from "svelte/store"
   import AltColor from "src/partials/AltColor.svelte"
   import SelectButton from "src/partials/SelectButton.svelte"
-  import {ConnectionType} from "src/engine"
-  import {getConnectionStatus} from "src/util/connection"
+  import {ConnectionType, displayConnectionType, getConnectionStatus} from "src/domain/connection"
 
   export let selected: string
   export let activeTab: string
 
-  let selectedOptions: string[] = []
+  let selectedOptions: ConnectionType[] = []
+  let connectionsStatus: Map<ConnectionType, Set<string>> = new Map()
 
-  const connectionsStatus: Writable<Map<string, Set<string>>> = throttled(1000, writable(new Map()))
   const options = [
     ConnectionType.Connected,
     ConnectionType.Logging,
@@ -28,18 +25,20 @@
   ]
 
   $: connections = Array.from(ctx.net.pool.data.keys()).filter(url =>
-    selectedOptions.length ? selectedOptions.some(s => $connectionsStatus.get(s)?.has(url)) : true,
+    selectedOptions.length ? selectedOptions.some(s => connectionsStatus.get(s)?.has(url)) : true,
   )
 
+  function fetchConnectionStatus() {
+    const newConnectionStatus: Map<ConnectionType, Set<string>> = new Map()
+    for (const [url, cxn] of ctx.net.pool.data.entries()) {
+      addToMapKey(newConnectionStatus, getConnectionStatus(cxn), url)
+    }
+    connectionsStatus = newConnectionStatus
+  }
+
   onMount(() => {
-    const interval = setInterval(() => {
-      // make a copy of the connections
-      const newConnectionStatus: Map<string, Set<string>> = new Map()
-      for (const [url, cxn] of ctx.net.pool.data.entries()) {
-        addToMapKey(newConnectionStatus, getConnectionStatus(cxn), url)
-      }
-      $connectionsStatus = newConnectionStatus
-    }, 800)
+    fetchConnectionStatus()
+    const interval = setInterval(fetchConnectionStatus, 800)
 
     return () => {
       clearInterval(interval)
@@ -49,8 +48,8 @@
 
 <SelectButton {options} bind:value={selectedOptions} multiple class="text-left">
   <div class="flex items-center gap-2" slot="item" let:option>
-    {$connectionsStatus.get(option)?.size || 0}
-    {option}
+    {connectionsStatus.get(option)?.size || 0}
+    {displayConnectionType(option)}
   </div>
 </SelectButton>
 {#each connections as url (url)}
@@ -88,14 +87,15 @@
         </div>
       </div>
       <div class="flex w-full items-center justify-end gap-2 text-sm">
-        {#each options.filter(o => $connectionsStatus.get(o)?.has(url)) as opt}
+        {#each options.filter(o => connectionsStatus.get(o)?.has(url)) as o}
+          {@const opt = displayConnectionType(o)}
           <div class="flex items-center gap-2">
             <span>{opt}</span>
             <div
               class:!bg-danger={opt.includes("Failed") || opt.includes("Not")}
               class:!bg-warning={opt == "Logging in" ||
-                opt == ConnectionType.WaitReconnect ||
-                opt == ConnectionType.UnstableConnection}
+                o == ConnectionType.WaitReconnect ||
+                o == ConnectionType.UnstableConnection}
               class="h-3 w-3 rounded-full bg-success" />
           </div>
         {/each}
diff --git a/src/app/views/PublishesNotices.svelte b/src/app/views/PublishesNotices.svelte
index aa1fb5605..edb4e6618 100644
--- a/src/app/views/PublishesNotices.svelte
+++ b/src/app/views/PublishesNotices.svelte
@@ -1,108 +1,78 @@
 <script lang="ts">
-  import {formatTimestamp, thunks, type Thunk, type ThunkStatus} from "@welshman/app"
-  import {ctx, identity, uniq} from "@welshman/lib"
-  import {PublishStatus, type Connection} from "@welshman/net"
+  import {formatTimestamp, thunks, type Thunk} from "@welshman/app"
+  import {ctx} from "@welshman/lib"
+  import {type Connection} from "@welshman/net"
+  import {sortBy} from "ramda"
   import {get} from "svelte/store"
   import {fly} from "svelte/transition"
-  import SearchSelect from "src/partials/SearchSelect.svelte"
   import AltColor from "src/partials/AltColor.svelte"
-  import {fuzzy} from "src/util/misc"
-  import {router} from "src/app/util"
-  import {subscriptionNotices, type SubscriptionNotice} from "src/engine"
+  import Input from "src/partials/Input.svelte"
+  import ThunkNotice from "src/partials/ThunkNotice.svelte"
+  import {subscriptionNotices, type PublishNotice} from "src/domain/connection"
 
-  export let selected: string[] = []
+  export let search: string = ""
 
-  $: subNotices = selected.flatMap(s => $subscriptionNotices.get(s)?.map(n => ({...n, url: s})))
-
-  const searchConnections = fuzzy(Array.from(ctx.net.pool.data.keys()))
+  $: subNotices = Array.from($subscriptionNotices.values())
+    .flatMap(n => n)
+    .filter(
+      n =>
+        n.url.toLowerCase().includes(search.toLowerCase()) ||
+        n.notice.some(n => String(n).toLowerCase().includes(search.toLowerCase())),
+    )
 
   function getPubNotices(connections: Connection[]) {
-    return Object.values($thunks).filter(t =>
-      connections.some(cxn => get(t.status)[cxn.url]?.status),
-    )
+    return Object.values($thunks).filter(
+      t => connections.some(cxn => get(t.status)[cxn.url]?.status) && "event" in t,
+    ) as Thunk[]
   }
 
-  function messageAndColorFromStatus(status: ThunkStatus) {
-    switch (status.status) {
-      case PublishStatus.Success:
-        return {message: status.message || "Published", color: "text-success"}
-      case PublishStatus.Pending:
-        return {message: status.message || "Pending", color: "text-warning"}
-      case PublishStatus.Failure:
-        return {message: status.message || "Failed", color: "text-danger"}
-      case PublishStatus.Timeout:
-        return {message: status.message || "Timed out", color: "text-accent"}
-      case PublishStatus.Aborted:
-        return {message: status.message || "Aborted", color: "text-accent"}
-    }
-  }
   // for subscription notices
   function colorFromVerb(verb: string) {
     switch (verb) {
       case "OK":
         return "text-success"
-      case "EOSE":
-        return "text-neutral-100"
       case "NOTICE":
         return "text-accent"
       case "CLOSED":
         return "text-danger"
-      case "NEG-MSG":
-        return "text-accent"
     }
   }
 
-  $: pubNotices = getPubNotices(
-    selected.map(url => ctx.net.pool.data.get(url)).filter(Boolean),
-  ) as Thunk[]
+  $: pubNotices = getPubNotices(Array.from(ctx.net.pool.data.values())).flatMap(p =>
+    Object.keys(get(p.status))
+      .filter(k => k.includes(search) || get(p.status)[k].message.includes(search))
+      .map(k => ({
+        eventId: p.event.id,
+        created_at: p.event.created_at,
+        eventKind: p.event.kind,
+        url: k,
+        message: get(p.status)[k].message,
+        status: get(p.status)[k],
+      })),
+  ) as PublishNotice[]
 
-  $: notices = ([...pubNotices, ...subNotices] as (Thunk & (SubscriptionNotice & {url: string}))[])
-    .sort((a, b) => {
-      return a.created_at - b.created_at
-    })
-    .filter(Boolean)
+  $: notices = sortBy(
+    n => {
+      return -n.created_at
+    },
+    [...pubNotices, ...subNotices],
+  )
 </script>
 
-<SearchSelect
-  placeholder="Search notices by relay"
-  multiple
-  search={searchConnections}
-  bind:value={selected}
-  termToItem={identity}>
-  <div slot="item" let:item>
-    <strong>{item}</strong>
-  </div>
-</SearchSelect>
+<Input placeholder="Search notices" type="search" bind:value={search} />
 
-{#if !selected.length}
-  <div transition:fly|local={{y: 20}}>
-    <AltColor background class="rounded-md p-6 shadow">
-      <div class="place text-center text-neutral-100">No relay selected.</div>
-    </AltColor>
-  </div>
-{:else if !notices.length && selected.length}
-  <div transition:fly|local={{y: 20}}>
+{#if !notices.length && !!search}
+  <div in:fly|local={{y: 20}}>
     <AltColor background class="rounded-md p-6 shadow">
-      <div class="place text-center text-neutral-100">No notices found for selected relays.</div>
+      <div class="place text-center text-neutral-100">No notices found.</div>
     </AltColor>
   </div>
 {:else}
   <AltColor background class="rounded-md p-2">
-    {#each notices as notice (JSON.stringify(notice))}
+    {#each notices as notice}
       <div>
-        {#if notice.event}
-          {#each uniq(Object.entries(get(notice.status)).filter( ([k, v]) => selected.includes(k), )) as [url, status] (url)}
-            {@const {message, color} = messageAndColorFromStatus(get(notice.status)[url])}
-            <div
-              class="flex gap-2 p-2"
-              on:click={() => router.at("notes").of(notice.event.id).open()}>
-              <span class="shrink-0 text-neutral-400"
-                >{formatTimestamp(notice.event.created_at)}</span>
-              <strong class={color}>to {url}:</strong>
-              <span class="shrink-0">[Kind {notice.event.kind}]</span>
-              <span class="">{message}</span>
-            </div>
-          {/each}
+        {#if "eventId" in notice}
+          <ThunkNotice {notice} />
         {:else}
           <div class="flex flex-wrap items-center gap-2 overflow-hidden p-2">
             <span class="shrink-0 text-neutral-400">{formatTimestamp(notice.created_at)}</span>
diff --git a/src/domain/connection.ts b/src/domain/connection.ts
new file mode 100644
index 000000000..b001c85e7
--- /dev/null
+++ b/src/domain/connection.ts
@@ -0,0 +1,75 @@
+import {getRelayQuality, type ThunkStatus} from "@welshman/app"
+import {AuthStatus, Connection, SocketStatus} from "@welshman/net"
+import {derived, writable} from "svelte/store"
+
+export type PublishNotice = {
+  eventId: string
+  created_at: number
+  eventKind: number
+  message: string
+  status: ThunkStatus
+  url: string
+}
+
+export type SubscriptionNotice = {created_at: number; url: string; notice: string[]}
+
+export const subscriptionNotices = writable<Map<string, SubscriptionNotice[]>>(new Map())
+
+export const subscriptionNoticesByRelay = derived(subscriptionNotices, $notices => {
+  return $notices.values()
+})
+
+const pendingStatuses = [
+  AuthStatus.Requested,
+  AuthStatus.PendingSignature,
+  AuthStatus.PendingResponse,
+]
+
+const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
+
+export const getConnectionStatus = (cxn: Connection): ConnectionType => {
+  if (pendingStatuses.includes(cxn.auth.status)) {
+    return ConnectionType.Logging
+  } else if (failureStatuses.includes(cxn.auth.status)) {
+    return ConnectionType.LoginFailed
+  } else if (cxn.socket.status === SocketStatus.Error) {
+    return ConnectionType.ConnectFailed
+  } else if (cxn.socket.status === SocketStatus.Closed) {
+    return ConnectionType.WaitReconnect
+  } else if (cxn.socket.status === SocketStatus.New) {
+    return ConnectionType.NotConnected
+  } else if (getRelayQuality(cxn.url) < 0.5) {
+    return ConnectionType.UnstableConnection
+  } else {
+    return ConnectionType.Connected
+  }
+}
+
+export enum ConnectionType {
+  Connected,
+  Logging,
+  LoginFailed,
+  ConnectFailed,
+  WaitReconnect,
+  NotConnected,
+  UnstableConnection,
+}
+
+export const displayConnectionType = (type: ConnectionType) => {
+  switch (type) {
+    case ConnectionType.Connected:
+      return "Connected"
+    case ConnectionType.Logging:
+      return "Logging in"
+    case ConnectionType.LoginFailed:
+      return "Failed to log in"
+    case ConnectionType.ConnectFailed:
+      return "Failed to connect"
+    case ConnectionType.WaitReconnect:
+      return "Wainting to reconnect"
+    case ConnectionType.NotConnected:
+      return "Not connected"
+    case ConnectionType.UnstableConnection:
+      return "Unstable connection"
+  }
+}
diff --git a/src/engine/model.ts b/src/engine/model.ts
index 348c021a3..5a19ec3bf 100644
--- a/src/engine/model.ts
+++ b/src/engine/model.ts
@@ -43,13 +43,3 @@ export type AnonymousUserState = {
   follows: string[][]
   relays: string[][]
 }
-
-export enum ConnectionType {
-  Connected = "Connected",
-  Logging = "Logging in",
-  LoginFailed = "Failed to log in",
-  ConnectFailed = "Failed to connect",
-  WaitReconnect = "Wainting to reconnect",
-  NotConnected = "Not connected",
-  UnstableConnection = "Unstable connection",
-}
diff --git a/src/engine/state.ts b/src/engine/state.ts
index 37714bcc5..60e684f01 100644
--- a/src/engine/state.ts
+++ b/src/engine/state.ts
@@ -966,6 +966,7 @@ export class ThreadLoader {
 
 // Remove the old database. TODO remove this
 import {deleteDB} from "idb"
+import {subscriptionNotices} from "src/domain/connection"
 deleteDB("nostr-engine/Storage")
 
 let ready: Promise<any> = Promise.resolve()
@@ -1037,10 +1038,6 @@ const migrateEvents = (events: TrustedEvent[]) => {
   )
 }
 
-export type SubscriptionNotice = {created_at: number; notice: string[]}
-
-export const subscriptionNotices = writable<Map<string, SubscriptionNotice[]>>(new Map())
-
 // Avoid initializing multiple times on hot reload
 if (!db) {
   const initialRelays = [
@@ -1071,11 +1068,14 @@ if (!db) {
   })
 
   ctx.net.pool.on("init", (connection: Connection) => {
-    // if (!connection.url.includes("snort")) return
     connection.on(ConnectionEvent.Receive, function (cxn, [verb, ...args]) {
-      if (verb == "EVENT") return
+      if (verb == "EVENT" || verb == "EOSE" || verb == "NEG-MSG") return
       subscriptionNotices.update($notices => {
-        pushToMapKey($notices, connection.url, {created_at: now(), notice: [verb, ...args]})
+        pushToMapKey($notices, connection.url, {
+          created_at: now(),
+          url: cxn.url,
+          notice: [verb, ...args],
+        })
         return $notices
       })
     })
diff --git a/src/partials/ThunkNotice.svelte b/src/partials/ThunkNotice.svelte
new file mode 100644
index 000000000..1bdc3b78b
--- /dev/null
+++ b/src/partials/ThunkNotice.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {formatTimestamp, type ThunkStatus} from "@welshman/app"
+  import {PublishStatus} from "@welshman/net"
+  import type {PublishNotice} from "src/domain/connection"
+
+  export let notice: PublishNotice
+
+  function messageAndColorFromStatus(status: ThunkStatus) {
+    switch (status.status) {
+      case PublishStatus.Success:
+        return {message: status.message || "Published", color: "text-success"}
+      case PublishStatus.Pending:
+        return {message: status.message || "Pending", color: "text-warning"}
+      case PublishStatus.Failure:
+        return {message: status.message || "Failed", color: "text-danger"}
+      case PublishStatus.Timeout:
+        return {message: status.message || "Timed out", color: "text-accent"}
+      case PublishStatus.Aborted:
+        return {message: status.message || "Aborted", color: "text-accent"}
+    }
+  }
+
+  const {message, color} = messageAndColorFromStatus(notice.status)
+</script>
+
+<div class="flex gap-2 p-2">
+  <span class="shrink-0 text-neutral-400">{formatTimestamp(notice.created_at)}</span>
+  <strong class={color}>to {notice.url}:</strong>
+  <span class="shrink-0">[Kind {notice.eventKind}]</span>
+  <span class="">{notice.message || message}</span>
+</div>
diff --git a/src/util/connection.ts b/src/util/connection.ts
deleted file mode 100644
index 0d90c3722..000000000
--- a/src/util/connection.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {AuthStatus, SocketStatus, type Connection} from "@welshman/net"
-import {getRelayQuality} from "@welshman/app"
-import {ConnectionType} from "src/engine"
-
-const pendingStatuses = [
-  AuthStatus.Requested,
-  AuthStatus.PendingSignature,
-  AuthStatus.PendingResponse,
-]
-
-const failureStatuses = [AuthStatus.DeniedSignature, AuthStatus.Forbidden]
-
-export const getConnectionStatus = (cxn: Connection): ConnectionType => {
-  if (pendingStatuses.includes(cxn.auth.status)) {
-    return ConnectionType.Logging
-  } else if (failureStatuses.includes(cxn.auth.status)) {
-    return ConnectionType.LoginFailed
-  } else if (cxn.socket.status === SocketStatus.Error) {
-    return ConnectionType.ConnectFailed
-  } else if (cxn.socket.status === SocketStatus.Closed) {
-    return ConnectionType.WaitReconnect
-  } else if (cxn.socket.status === SocketStatus.New) {
-    return ConnectionType.NotConnected
-  } else if (getRelayQuality(cxn.url) < 0.5) {
-    return ConnectionType.UnstableConnection
-  } else {
-    return ConnectionType.Connected
-  }
-}

From 8764d90f86f6db1ec394dfec45ad56fe9d8a27b3 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Fri, 6 Dec 2024 15:22:15 +0100
Subject: [PATCH 10/13] - add fuzzy search - Publishes view refactor

---
 src/app/views/Publishes.svelte        | 71 ++----------------------
 src/app/views/PublishesEvents.svelte  | 68 +++++++++++++++++++++++
 src/app/views/PublishesNotices.svelte | 78 +++++++++++++--------------
 src/domain/connection.ts              | 19 ++++++-
 src/engine/state.ts                   |  2 +-
 src/partials/ThunkNotice.svelte       | 24 ++-------
 6 files changed, 130 insertions(+), 132 deletions(-)
 create mode 100644 src/app/views/PublishesEvents.svelte

diff --git a/src/app/views/Publishes.svelte b/src/app/views/Publishes.svelte
index 5632ae090..6fc3f40d7 100644
--- a/src/app/views/Publishes.svelte
+++ b/src/app/views/Publishes.svelte
@@ -1,83 +1,20 @@
 <script lang="ts">
-  import {thunks, type Thunk} from "@welshman/app"
-  import {assoc, now, remove, sortBy} from "@welshman/lib"
-  import {PublishStatus} from "@welshman/net"
-  import {LOCAL_RELAY_URL} from "@welshman/util"
-  import {get} from "svelte/store"
-  import {pluralize, seconds} from "hurdak"
-  import PublishCard from "src/app/shared/PublishCard.svelte"
-  import Subheading from "src/partials/Subheading.svelte"
-  import Tabs from "src/partials/Tabs.svelte"
-  import Tile from "src/partials/Tile.svelte"
   import PublishesConnections from "src/app/views/PublishesConnections.svelte"
   import PublishesNotices from "src/app/views/PublishesNotices.svelte"
+  import PublishesEvents from "src/app/views/PublishesEvents.svelte"
+  import Subheading from "src/partials/Subheading.svelte"
+  import Tabs from "src/partials/Tabs.svelte"
 
   const tabs = ["events", "connections", "notices"]
   let activeTab = "events"
 
   let selected: string
-
-  const hasStatus = (thunk: Thunk, statuses: PublishStatus[]) =>
-    Object.values(get(thunk.status)).some(s => statuses.includes(s.status))
-
-  $: recent = (Object.values($thunks) as Thunk[]).filter(
-    t =>
-      remove(LOCAL_RELAY_URL, t.request.relays).length > 0 &&
-      t.event.created_at > now() - seconds(24, "hour"),
-  )
-  $: relays = new Set(
-    remove(
-      LOCAL_RELAY_URL,
-      recent.flatMap(({request}) => request.relays),
-    ),
-  )
-  $: success = recent.filter(t => hasStatus(t, [PublishStatus.Success]))
-  $: pending = recent.filter(
-    t => hasStatus(t, [PublishStatus.Pending]) && !hasStatus(t, [PublishStatus.Success]),
-  )
-
-  // If the page gets refreshed before pending finishes, it hangs. Set stuff to failed
-  $: {
-    for (const t of recent) {
-      if (t.event.created_at < now() - seconds(1, "minute")) {
-        for (const [url, s] of Object.entries(t.status)) {
-          if (s.status === PublishStatus.Pending) {
-            t.status.update(assoc(url, {status: PublishStatus.Failure, message: ""}))
-          }
-        }
-      }
-    }
-  }
 </script>
 
 <Subheading>Published Events</Subheading>
 <Tabs {tabs} {activeTab} setActiveTab={tab => (activeTab = tab)} />
 {#if activeTab === "events"}
-  <div class="grid grid-cols-4 justify-between gap-2 sm:grid-cols-5">
-    <Tile background>
-      <p class="text-lg sm:text-2xl">{recent.length}</p>
-      <span class="text-sm">{pluralize(recent.length, "Event")}</span>
-    </Tile>
-    <Tile background>
-      <p class="text-lg sm:text-2xl">{relays.size}</p>
-      <span class="text-sm">{pluralize(relays.size, "Relay")}</span>
-    </Tile>
-    <Tile background lass="hidden sm:block">
-      <p class="text-lg sm:text-2xl">{pending.length}</p>
-      <span class="text-sm">Pending</span>
-    </Tile>
-    <Tile background>
-      <p class="text-lg sm:text-2xl">{success.length}</p>
-      <span class="text-sm">Succeeded</span>
-    </Tile>
-    <Tile background>
-      <p class="text-lg sm:text-2xl">{recent.length - pending.length - success.length}</p>
-      <span class="text-sm">Failed</span>
-    </Tile>
-  </div>
-  {#each sortBy(t => -t.event.created_at, recent) as thunk (thunk.event.id)}
-    <PublishCard {thunk} />
-  {/each}
+  <PublishesEvents />
 {:else if activeTab === "connections"}
   <PublishesConnections bind:selected bind:activeTab />
 {:else if activeTab === "notices"}
diff --git a/src/app/views/PublishesEvents.svelte b/src/app/views/PublishesEvents.svelte
new file mode 100644
index 000000000..c970907ec
--- /dev/null
+++ b/src/app/views/PublishesEvents.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import {thunks, type Thunk} from "@welshman/app"
+  import {assoc, now, remove, sortBy} from "@welshman/lib"
+  import {pluralize, seconds} from "hurdak"
+  import Tile from "src/partials/Tile.svelte"
+  import PublishCard from "src/app/shared/PublishCard.svelte"
+  import {LOCAL_RELAY_URL} from "@welshman/util"
+  import {PublishStatus} from "@welshman/net"
+  import {get} from "svelte/store"
+
+  const hasStatus = (thunk: Thunk, statuses: PublishStatus[]) =>
+    Object.values(get(thunk.status)).some(s => statuses.includes(s.status))
+
+  $: recent = (Object.values($thunks) as Thunk[]).filter(
+    t =>
+      remove(LOCAL_RELAY_URL, t.request.relays).length > 0 &&
+      t.event.created_at > now() - seconds(24, "hour"),
+  )
+  $: relays = new Set(
+    remove(
+      LOCAL_RELAY_URL,
+      recent.flatMap(({request}) => request.relays),
+    ),
+  )
+  $: success = recent.filter(t => hasStatus(t, [PublishStatus.Success]))
+  $: pending = recent.filter(
+    t => hasStatus(t, [PublishStatus.Pending]) && !hasStatus(t, [PublishStatus.Success]),
+  )
+
+  // If the page gets refreshed before pending finishes, it hangs. Set stuff to failed
+  $: {
+    for (const t of recent) {
+      if (t.event.created_at < now() - seconds(1, "minute")) {
+        for (const [url, s] of Object.entries(t.status)) {
+          if (s.status === PublishStatus.Pending) {
+            t.status.update(assoc(url, {status: PublishStatus.Failure, message: ""}))
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<div class="grid grid-cols-4 justify-between gap-2 sm:grid-cols-5">
+  <Tile background>
+    <p class="text-lg sm:text-2xl">{recent.length}</p>
+    <span class="text-sm">{pluralize(recent.length, "Event")}</span>
+  </Tile>
+  <Tile background>
+    <p class="text-lg sm:text-2xl">{relays.size}</p>
+    <span class="text-sm">{pluralize(relays.size, "Relay")}</span>
+  </Tile>
+  <Tile background lass="hidden sm:block">
+    <p class="text-lg sm:text-2xl">{pending.length}</p>
+    <span class="text-sm">Pending</span>
+  </Tile>
+  <Tile background>
+    <p class="text-lg sm:text-2xl">{success.length}</p>
+    <span class="text-sm">Succeeded</span>
+  </Tile>
+  <Tile background>
+    <p class="text-lg sm:text-2xl">{recent.length - pending.length - success.length}</p>
+    <span class="text-sm">Failed</span>
+  </Tile>
+</div>
+{#each sortBy(t => -t.event.created_at, recent) as thunk (thunk.event.id)}
+  <PublishCard {thunk} />
+{/each}
diff --git a/src/app/views/PublishesNotices.svelte b/src/app/views/PublishesNotices.svelte
index edb4e6618..c2f6ae673 100644
--- a/src/app/views/PublishesNotices.svelte
+++ b/src/app/views/PublishesNotices.svelte
@@ -1,24 +1,21 @@
 <script lang="ts">
-  import {formatTimestamp, thunks, type Thunk} from "@welshman/app"
+  import {formatTimestamp, thunks, createSearch, type Thunk} from "@welshman/app"
   import {ctx} from "@welshman/lib"
   import {type Connection} from "@welshman/net"
-  import {sortBy} from "ramda"
   import {get} from "svelte/store"
   import {fly} from "svelte/transition"
   import AltColor from "src/partials/AltColor.svelte"
   import Input from "src/partials/Input.svelte"
   import ThunkNotice from "src/partials/ThunkNotice.svelte"
-  import {subscriptionNotices, type PublishNotice} from "src/domain/connection"
+  import {
+    messageAndColorFromStatus,
+    subscriptionNotices,
+    type PublishNotice,
+  } from "src/domain/connection"
 
   export let search: string = ""
 
-  $: subNotices = Array.from($subscriptionNotices.values())
-    .flatMap(n => n)
-    .filter(
-      n =>
-        n.url.toLowerCase().includes(search.toLowerCase()) ||
-        n.notice.some(n => String(n).toLowerCase().includes(search.toLowerCase())),
-    )
+  $: subNotices = Array.from($subscriptionNotices.values()).flatMap(n => n)
 
   function getPubNotices(connections: Connection[]) {
     return Object.values($thunks).filter(
@@ -44,46 +41,43 @@
       .map(k => ({
         eventId: p.event.id,
         created_at: p.event.created_at,
-        eventKind: p.event.kind,
+        eventKind: "Kind" + p.event.kind,
         url: k,
-        message: get(p.status)[k].message,
+        message: messageAndColorFromStatus(get(p.status)[k]).message,
         status: get(p.status)[k],
       })),
   ) as PublishNotice[]
 
-  $: notices = sortBy(
-    n => {
-      return -n.created_at
+  $: noticesSearch = createSearch([...pubNotices, ...subNotices], {
+    getValue: notice => notice.url,
+    fuseOptions: {
+      keys: ["url", "message", "eventKind", "notice"],
+      shouldSort: false,
     },
-    [...pubNotices, ...subNotices],
-  )
+  })
 </script>
 
 <Input placeholder="Search notices" type="search" bind:value={search} />
 
-{#if !notices.length && !!search}
-  <div in:fly|local={{y: 20}}>
-    <AltColor background class="rounded-md p-6 shadow">
+<AltColor background class="rounded-md p-2">
+  {#each noticesSearch.searchOptions(search) as notice}
+    <div>
+      {#if "eventId" in notice}
+        <ThunkNotice {notice} />
+      {:else}
+        <div class="flex flex-wrap items-center gap-2 overflow-hidden p-2">
+          <span class="shrink-0 text-neutral-400">{formatTimestamp(notice.created_at)}</span>
+          <strong class={colorFromVerb(notice.notice[0])}>from {notice.url}</strong>
+          <span class="shrink-0">[{notice.notice[0]}]</span>
+          {#each notice.notice.slice(1).filter(n => typeof n == "string") as item}
+            <span class="text-neutral-300">{item}</span>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <div in:fly|local={{y: 20}} class="rounded-md p-6 shadow">
       <div class="place text-center text-neutral-100">No notices found.</div>
-    </AltColor>
-  </div>
-{:else}
-  <AltColor background class="rounded-md p-2">
-    {#each notices as notice}
-      <div>
-        {#if "eventId" in notice}
-          <ThunkNotice {notice} />
-        {:else}
-          <div class="flex flex-wrap items-center gap-2 overflow-hidden p-2">
-            <span class="shrink-0 text-neutral-400">{formatTimestamp(notice.created_at)}</span>
-            <strong class={colorFromVerb(notice.notice[0])}>from {notice.url}</strong>
-            <span class="shrink-0">[{notice.notice[0]}]</span>
-            {#each notice.notice.slice(1).filter(n => typeof n == "string") as item}
-              <span class="text-neutral-300">{item}</span>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {/each}
-  </AltColor>
-{/if}
+    </div>
+  {/each}
+</AltColor>
diff --git a/src/domain/connection.ts b/src/domain/connection.ts
index b001c85e7..059f37af5 100644
--- a/src/domain/connection.ts
+++ b/src/domain/connection.ts
@@ -1,11 +1,11 @@
 import {getRelayQuality, type ThunkStatus} from "@welshman/app"
-import {AuthStatus, Connection, SocketStatus} from "@welshman/net"
+import {AuthStatus, Connection, PublishStatus, SocketStatus} from "@welshman/net"
 import {derived, writable} from "svelte/store"
 
 export type PublishNotice = {
   eventId: string
   created_at: number
-  eventKind: number
+  eventKind: string
   message: string
   status: ThunkStatus
   url: string
@@ -45,6 +45,21 @@ export const getConnectionStatus = (cxn: Connection): ConnectionType => {
   }
 }
 
+export function messageAndColorFromStatus(status: ThunkStatus) {
+  switch (status.status) {
+    case PublishStatus.Success:
+      return {message: status.message || "Published", color: "text-success"}
+    case PublishStatus.Pending:
+      return {message: status.message || "Pending", color: "text-warning"}
+    case PublishStatus.Failure:
+      return {message: status.message || "Failed", color: "text-danger"}
+    case PublishStatus.Timeout:
+      return {message: status.message || "Timed out", color: "text-accent"}
+    case PublishStatus.Aborted:
+      return {message: status.message || "Aborted", color: "text-accent"}
+  }
+}
+
 export enum ConnectionType {
   Connected,
   Logging,
diff --git a/src/engine/state.ts b/src/engine/state.ts
index 60e684f01..535c6f4a4 100644
--- a/src/engine/state.ts
+++ b/src/engine/state.ts
@@ -1069,7 +1069,7 @@ if (!db) {
 
   ctx.net.pool.on("init", (connection: Connection) => {
     connection.on(ConnectionEvent.Receive, function (cxn, [verb, ...args]) {
-      if (verb == "EVENT" || verb == "EOSE" || verb == "NEG-MSG") return
+      if (verb == "EVENT" || verb == "EOSE" || verb == "CLOSED") return
       subscriptionNotices.update($notices => {
         pushToMapKey($notices, connection.url, {
           created_at: now(),
diff --git a/src/partials/ThunkNotice.svelte b/src/partials/ThunkNotice.svelte
index 1bdc3b78b..29e72c1a1 100644
--- a/src/partials/ThunkNotice.svelte
+++ b/src/partials/ThunkNotice.svelte
@@ -1,31 +1,15 @@
 <script lang="ts">
-  import {formatTimestamp, type ThunkStatus} from "@welshman/app"
-  import {PublishStatus} from "@welshman/net"
-  import type {PublishNotice} from "src/domain/connection"
+  import {formatTimestamp} from "@welshman/app"
+  import {messageAndColorFromStatus, type PublishNotice} from "src/domain/connection"
 
   export let notice: PublishNotice
 
-  function messageAndColorFromStatus(status: ThunkStatus) {
-    switch (status.status) {
-      case PublishStatus.Success:
-        return {message: status.message || "Published", color: "text-success"}
-      case PublishStatus.Pending:
-        return {message: status.message || "Pending", color: "text-warning"}
-      case PublishStatus.Failure:
-        return {message: status.message || "Failed", color: "text-danger"}
-      case PublishStatus.Timeout:
-        return {message: status.message || "Timed out", color: "text-accent"}
-      case PublishStatus.Aborted:
-        return {message: status.message || "Aborted", color: "text-accent"}
-    }
-  }
-
-  const {message, color} = messageAndColorFromStatus(notice.status)
+  const {color} = messageAndColorFromStatus(notice.status)
 </script>
 
 <div class="flex gap-2 p-2">
   <span class="shrink-0 text-neutral-400">{formatTimestamp(notice.created_at)}</span>
   <strong class={color}>to {notice.url}:</strong>
   <span class="shrink-0">[Kind {notice.eventKind}]</span>
-  <span class="">{notice.message || message}</span>
+  <span class="">{notice.message}</span>
 </div>

From 0b0c84a2546e6e67f43a47f619c96b01ced7e18e Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Mon, 9 Dec 2024 12:22:48 +0100
Subject: [PATCH 11/13] log verbs are configurable via environment variable

---
 .env                | 1 +
 src/engine/state.ts | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/.env b/.env
index 557e9097e..a7f3836f4 100644
--- a/.env
+++ b/.env
@@ -14,6 +14,7 @@ VITE_DUFFLEPUD_URL=https://dufflepud.onrender.com
 VITE_PLATFORM_ZAP_SPLIT=0
 VITE_PLATFORM_PUBKEY=8ec86ac9e10979998652068ee6b00223b8e3265aabb3fe28fb6b3b6e294adc96
 VITE_PLATFORM_RELAYS=
+VITE_LOG_VERBS=NOTICE,CLOSED,OK,NEG-MSG
 VITE_ENABLE_ZAPS=true
 VITE_APP_NAME=Coracle
 VITE_APP_URL=https://app.coracle.social
diff --git a/src/engine/state.ts b/src/engine/state.ts
index 535c6f4a4..904a98a26 100644
--- a/src/engine/state.ts
+++ b/src/engine/state.ts
@@ -137,6 +137,7 @@ export const env = {
   IMGPROXY_URL: import.meta.env.VITE_IMGPROXY_URL as string,
   NIP96_URLS: fromCsv(import.meta.env.VITE_NIP96_URLS) as string[],
   BLOSSOM_URLS: fromCsv(import.meta.env.VITE_BLOSSOM_URLS) as string[],
+  LOG_VERBS: fromCsv(import.meta.env.VITE_LOG_VERBS) as string[],
   ONBOARDING_LISTS: fromCsv(import.meta.env.VITE_ONBOARDING_LISTS) as string[],
   PLATFORM_PUBKEY: import.meta.env.VITE_PLATFORM_PUBKEY as string,
   PLATFORM_RELAYS: fromCsv(import.meta.env.VITE_PLATFORM_RELAYS).map(normalizeRelayUrl) as string[],
@@ -1069,7 +1070,7 @@ if (!db) {
 
   ctx.net.pool.on("init", (connection: Connection) => {
     connection.on(ConnectionEvent.Receive, function (cxn, [verb, ...args]) {
-      if (verb == "EVENT" || verb == "EOSE" || verb == "CLOSED") return
+      if (!env.LOG_VERBS.includes(verb)) return
       subscriptionNotices.update($notices => {
         pushToMapKey($notices, connection.url, {
           created_at: now(),

From e449ec8e39919074dbf29c832ff3645a96f29265 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 10 Dec 2024 11:44:39 +0100
Subject: [PATCH 12/13] have notice verb settings hardcoded

---
 .env                | 1 -
 src/engine/state.ts | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/.env b/.env
index a7f3836f4..557e9097e 100644
--- a/.env
+++ b/.env
@@ -14,7 +14,6 @@ VITE_DUFFLEPUD_URL=https://dufflepud.onrender.com
 VITE_PLATFORM_ZAP_SPLIT=0
 VITE_PLATFORM_PUBKEY=8ec86ac9e10979998652068ee6b00223b8e3265aabb3fe28fb6b3b6e294adc96
 VITE_PLATFORM_RELAYS=
-VITE_LOG_VERBS=NOTICE,CLOSED,OK,NEG-MSG
 VITE_ENABLE_ZAPS=true
 VITE_APP_NAME=Coracle
 VITE_APP_URL=https://app.coracle.social
diff --git a/src/engine/state.ts b/src/engine/state.ts
index 904a98a26..ef89abe05 100644
--- a/src/engine/state.ts
+++ b/src/engine/state.ts
@@ -137,7 +137,6 @@ export const env = {
   IMGPROXY_URL: import.meta.env.VITE_IMGPROXY_URL as string,
   NIP96_URLS: fromCsv(import.meta.env.VITE_NIP96_URLS) as string[],
   BLOSSOM_URLS: fromCsv(import.meta.env.VITE_BLOSSOM_URLS) as string[],
-  LOG_VERBS: fromCsv(import.meta.env.VITE_LOG_VERBS) as string[],
   ONBOARDING_LISTS: fromCsv(import.meta.env.VITE_ONBOARDING_LISTS) as string[],
   PLATFORM_PUBKEY: import.meta.env.VITE_PLATFORM_PUBKEY as string,
   PLATFORM_RELAYS: fromCsv(import.meta.env.VITE_PLATFORM_RELAYS).map(normalizeRelayUrl) as string[],
@@ -1041,6 +1040,7 @@ const migrateEvents = (events: TrustedEvent[]) => {
 
 // Avoid initializing multiple times on hot reload
 if (!db) {
+  const noticeVerbs = ["NOTICE", "CLOSED", "OK", "NEG-MSG"]
   const initialRelays = [
     ...env.DEFAULT_RELAYS,
     ...env.DVM_RELAYS,
@@ -1070,7 +1070,7 @@ if (!db) {
 
   ctx.net.pool.on("init", (connection: Connection) => {
     connection.on(ConnectionEvent.Receive, function (cxn, [verb, ...args]) {
-      if (!env.LOG_VERBS.includes(verb)) return
+      if (!noticeVerbs.includes(verb)) return
       subscriptionNotices.update($notices => {
         pushToMapKey($notices, connection.url, {
           created_at: now(),

From dfceba35f8f00f2aa13f00dc63c0a3de3d60d38a Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 10 Dec 2024 11:45:16 +0100
Subject: [PATCH 13/13] tighten the fuzzy search threshold

---
 src/app/views/PublishesNotices.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/views/PublishesNotices.svelte b/src/app/views/PublishesNotices.svelte
index c2f6ae673..a2a1dd91b 100644
--- a/src/app/views/PublishesNotices.svelte
+++ b/src/app/views/PublishesNotices.svelte
@@ -53,6 +53,7 @@
     fuseOptions: {
       keys: ["url", "message", "eventKind", "notice"],
       shouldSort: false,
+      threshold: 0.2,
     },
   })
 </script>