From 6f4fe1f674133c949ad55c535829e0f7c45ea4ee Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 15 Oct 2024 13:05:01 -0700
Subject: [PATCH] Fine tune message sending notification

---
 package-lock.json                        |  8 ++---
 src/app/components/ChannelMessage.svelte | 28 +++++++++--------
 src/app/state.ts                         | 35 +++++++++++++++------
 src/lib/transition.ts                    | 39 ++++++++++++++++++++++++
 4 files changed, 83 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d85ee317..b77ca3de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@tiptap/extension-text": "^2.6.6",
         "@tiptap/suggestion": "^2.6.4",
         "@types/throttle-debounce": "^5.0.2",
-        "@welshman/app": "~0.0.15",
+        "@welshman/app": "~0.0.16",
         "@welshman/content": "~0.0.12",
         "@welshman/dvm": "~0.0.10",
         "@welshman/feeds": "~0.0.20",
@@ -1660,9 +1660,9 @@
       }
     },
     "node_modules/@welshman/app": {
-      "version": "0.0.15",
-      "resolved": "https://registry.npmjs.org/@welshman/app/-/app-0.0.15.tgz",
-      "integrity": "sha512-rIKJSuWB7uqc1jGtEPEJk/lSFQQVB3qmKESuS55CicBguULljyr0inatSujJo6X3QpN4kLtDLph7gC6HEAWadg==",
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@welshman/app/-/app-0.0.16.tgz",
+      "integrity": "sha512-XR60o3iQlMMMvnf8UuSCz5tpMVfR6Ifq/5GGXVlmNF5ngHi0D6NKWoa4r86iJ3Tac3dtl36ZUdzyJksJi618rg==",
       "dependencies": {
         "@welshman/dvm": "~0.0.10",
         "@welshman/feeds": "~0.0.20",
diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte
index 4442ae49..5ede62f8 100644
--- a/src/app/components/ChannelMessage.svelte
+++ b/src/app/components/ChannelMessage.svelte
@@ -2,7 +2,7 @@
   import {readable, derived} from "svelte/store"
   import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
+  import {deriveEvents, throttled} from "@welshman/store"
   import {PublishStatus} from "@welshman/net"
   import {
     publishStatusData,
@@ -14,6 +14,7 @@
   import type {PublishStatusData} from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
+  import {slideAndFade} from '@lib/transition'
   import Icon from "@lib/components/Icon.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Content from "@app/components/Content.svelte"
@@ -38,7 +39,7 @@
   const rootHints = [rootTag?.[2]].filter(Boolean) as string[]
   const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null)
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
-  const ps = derived(publishStatusData, $m => Object.values($m[event.id] || {}))
+  const ps = throttled(300, derived(publishStatusData, $m => Object.values($m[event.id] || {})))
 
   const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
     $ps.find(({status}) => statuses.includes(status))
@@ -89,7 +90,7 @@
       </p>
     </div>
   {/if}
-  <div class="flex gap-2">
+  <div class="flex gap-2 w-full">
     {#if showPubkey}
       <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
     {:else}
@@ -103,27 +104,28 @@
           <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
         </div>
       {/if}
-      <div class="text-sm">
+      <div class="text-sm col-1">
         <Content {event} />
         {#if isPending}
-          <span class="flex-inline ml-1 gap-1">
-            <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
+          <div class="flex gap-1 justify-end items-center" transition:slideAndFade>
+            <span class="loading loading-spinner mx-1 h-3 w-3" />
             <span class="opacity-50">Sending...</span>
-          </span>
+          </div>
         {:else if failure}
-          <span
-            class="flex-inline tooltip ml-1 cursor-pointer gap-1"
-            data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
-            <Icon icon="danger" class="translate-y-px" size={3} />
+          <div
+            class="flex tooltip cursor-pointer gap-1 justify-end items-center"
+            data-tip="{failure.message} ({displayRelayUrl(failure.url)})"
+            transition:slideAndFade>
+            <Icon icon="danger" size={3} />
             <span class="opacity-50">Failed to send!</span>
-          </span>
+          </div>
         {/if}
       </div>
     </div>
   </div>
   {#if $reactions.length > 0 || $zaps.length > 0}
     <div class="ml-12 text-xs">
-      {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
+      {#each groupBy(e => e.content, uniqBy(e => e.pubkey + e.content, $reactions)).entries() as [content, events]}
         {@const isOwn = events.some(e => e.pubkey === $pubkey)}
         {@const onClick = () => onReactionClick(content, events)}
         <button
diff --git a/src/app/state.ts b/src/app/state.ts
index 667af854..948966e5 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -30,6 +30,8 @@ import {
   readList,
   getListTags,
   asDecryptedEvent,
+  isSignedEvent,
+  hasValidSignature,
 } from "@welshman/util"
 import type {TrustedEvent, SignedEvent, PublishedList, List} from "@welshman/util"
 import {Nip59} from "@welshman/signer"
@@ -179,7 +181,21 @@ export const pullConservatively = ({relays, filters}: AppSyncOpts) => {
 }
 
 setContext({
-  net: getDefaultNetContext(),
+  net: getDefaultNetContext({
+    isValid: (url: string, event: TrustedEvent) => {
+      if (!isSignedEvent(event) || !hasValidSignature(event)) {
+        return false
+      }
+
+      const roomTags = event.tags.filter(nthEq(0, '~'))
+
+      if (roomTags.length > 0 && !roomTags.some(nthEq(2, url))) {
+        return false
+      }
+
+      return true
+    },
+  }),
   app: getDefaultAppContext({
     dufflepudUrl: DUFFLEPUD_URL,
     indexerRelays: INDEXER_RELAYS,
@@ -252,16 +268,19 @@ export const {
 // Messages
 
 export type ChannelMessage = {
+  url: string,
   room: string
   event: TrustedEvent
 }
 
 export const readMessage = (event: TrustedEvent): Maybe<ChannelMessage> => {
-  const rooms = event.tags.filter(nthEq(0, ROOM)).map(nth(1))
+  const roomTags = event.tags.filter(nthEq(0, ROOM))
 
-  if (rooms.length > 1) return undefined
+  if (roomTags.length !== 1) return undefined
 
-  return {room: rooms[0] || "", event}
+  const [_, room, url] = roomTags[0]
+
+  return {url, room, event}
 }
 
 export const channelMessages = deriveEventsMapped<ChannelMessage>(repository, {
@@ -283,15 +302,11 @@ export const makeChannelId = (url: string, room: string) => `${url}'${room}`
 
 export const splitChannelId = (id: string) => id.split("'")
 
-export const channels = derived([trackerStore, channelMessages], ([$tracker, $channelMessages]) => {
+export const channels = derived(channelMessages, $channelMessages => {
   const messagesByChannelId = new Map<string, ChannelMessage[]>()
 
   for (const message of $channelMessages) {
-    for (const url of $tracker.getRelays(message.event.id)) {
-      const channelId = makeChannelId(url, message.room)
-
-      pushToMapKey(messagesByChannelId, channelId, message)
-    }
+    pushToMapKey(messagesByChannelId, makeChannelId(message.url, message.room), message)
   }
 
   return Array.from(messagesByChannelId.entries()).map(([id, messages]) => {
diff --git a/src/lib/transition.ts b/src/lib/transition.ts
index aa5600cc..fe8e6444 100644
--- a/src/lib/transition.ts
+++ b/src/lib/transition.ts
@@ -1,3 +1,5 @@
+// @ts-nocheck
+import {cubicOut} from 'svelte/easing'
 import type {FlyParams} from "svelte/transition"
 import {fly as baseFly} from "svelte/transition"
 
@@ -5,3 +7,40 @@ export {fade, slide} from "svelte/transition"
 
 export const fly = (node: Element, params?: FlyParams | undefined) =>
   baseFly(node, {y: 20, ...params})
+
+// Copy-pasted and tweaked from slide source code
+export function slideAndFade(node: any, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) {
+	const style = getComputedStyle(node)
+	const opacity = +style.opacity
+	const primary_property = axis === 'y' ? 'height' : 'width'
+	const primary_property_value = parseFloat(style[primary_property])
+	const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right']
+	const capitalized_secondary_properties = secondary_properties.map(
+		(e: string) => `${e[0].toUpperCase()}${e.slice(1)}`
+	)
+	const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`])
+	const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`])
+	const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`])
+	const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`])
+	const border_width_start_value = parseFloat(
+		style[`border${capitalized_secondary_properties[0]}Width`]
+	)
+	const border_width_end_value = parseFloat(
+		style[`border${capitalized_secondary_properties[1]}Width`]
+	)
+	return {
+		delay,
+		duration,
+		easing,
+		css: (t: number) =>
+			'overflow: hidden;' +
+			`opacity: ${t};` +
+			`${primary_property}: ${t * primary_property_value}px;` +
+			`padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
+			`padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
+			`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
+			`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
+			`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
+			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
+	}
+}