From e1d3d97f9a8782931a3b97ef4fa02cf164345be5 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Wed, 20 Nov 2024 12:05:11 +0800
Subject: [PATCH] `feat: add support for viewing WebSocket links

---
 src/renderer/src/components/Content/index.tsx | 16 +++++++------
 .../components/Embedded/EmbeddedHashtag.tsx   |  8 +++++++
 .../components/Embedded/EmbeddedMention.tsx   | 24 +++++++++++++++++++
 .../components/Embedded/EmbeddedNormalUrl.tsx |  9 +++++++
 .../Embedded/EmbeddedWebsocketUrl.tsx         | 24 +++++++++++++++++++
 .../src/components/Embedded/index.tsx         | 14 +++++++++++
 .../Embedded}/types.tsx                       |  0
 .../src/components/ProfileAbout/index.tsx     | 10 ++++----
 src/renderer/src/embedded/EmbeddedHashtag.tsx |  9 -------
 .../src/embedded/EmbeddedNormalUrl.tsx        |  9 -------
 .../src/embedded/EmbeddedNostrNpub.tsx        | 10 --------
 .../src/embedded/EmbeddedNostrProfile.tsx     | 10 --------
 src/renderer/src/embedded/EmbeddedNpub.tsx    |  9 -------
 src/renderer/src/embedded/index.tsx           | 17 -------------
 src/renderer/src/i18n/index.ts                |  1 -
 .../src/providers/RelaySettingsProvider.tsx   |  6 +++--
 16 files changed, 98 insertions(+), 78 deletions(-)
 create mode 100644 src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx
 rename src/renderer/src/{embedded => components/Embedded}/types.tsx (100%)
 delete mode 100644 src/renderer/src/embedded/EmbeddedHashtag.tsx
 delete mode 100644 src/renderer/src/embedded/EmbeddedNormalUrl.tsx
 delete mode 100644 src/renderer/src/embedded/EmbeddedNostrNpub.tsx
 delete mode 100644 src/renderer/src/embedded/EmbeddedNostrProfile.tsx
 delete mode 100644 src/renderer/src/embedded/EmbeddedNpub.tsx
 delete mode 100644 src/renderer/src/embedded/index.tsx

diff --git a/src/renderer/src/components/Content/index.tsx b/src/renderer/src/components/Content/index.tsx
index 1a32d33..e6d99af 100644
--- a/src/renderer/src/components/Content/index.tsx
+++ b/src/renderer/src/components/Content/index.tsx
@@ -1,15 +1,16 @@
+import { isNsfwEvent } from '@renderer/lib/event'
+import { cn } from '@renderer/lib/utils'
+import { Event } from 'nostr-tools'
+import { memo } from 'react'
 import {
   embedded,
   embeddedHashtagRenderer,
   embeddedNormalUrlRenderer,
   embeddedNostrNpubRenderer,
-  embeddedNostrProfileRenderer
-} from '@renderer/embedded'
-import { isNsfwEvent } from '@renderer/lib/event'
-import { cn } from '@renderer/lib/utils'
-import { Event } from 'nostr-tools'
-import { memo } from 'react'
-import { EmbeddedNote } from '../Embedded'
+  embeddedNostrProfileRenderer,
+  EmbeddedNote,
+  embeddedWebsocketUrlRenderer
+} from '../Embedded'
 import ImageGallery from '../ImageGallery'
 import VideoPlayer from '../VideoPlayer'
 
@@ -26,6 +27,7 @@ const Content = memo(
     const { content, images, videos, embeddedNotes } = preprocess(event.content)
     const isNsfw = isNsfwEvent(event)
     const nodes = embedded(content, [
+      embeddedWebsocketUrlRenderer,
       embeddedNormalUrlRenderer,
       embeddedHashtagRenderer,
       embeddedNostrNpubRenderer,
diff --git a/src/renderer/src/components/Embedded/EmbeddedHashtag.tsx b/src/renderer/src/components/Embedded/EmbeddedHashtag.tsx
index 176db4c..bdaee0f 100644
--- a/src/renderer/src/components/Embedded/EmbeddedHashtag.tsx
+++ b/src/renderer/src/components/Embedded/EmbeddedHashtag.tsx
@@ -1,5 +1,6 @@
 import { toHashtag } from '@renderer/lib/link'
 import { SecondaryPageLink } from '@renderer/PageManager'
+import { TEmbeddedRenderer } from './types'
 
 export function EmbeddedHashtag({ hashtag }: { hashtag: string }) {
   return (
@@ -12,3 +13,10 @@ export function EmbeddedHashtag({ hashtag }: { hashtag: string }) {
     </SecondaryPageLink>
   )
 }
+
+export const embeddedHashtagRenderer: TEmbeddedRenderer = {
+  regex: /#([\p{L}\p{N}\p{M}]+)/gu,
+  render: (hashtag: string, index: number) => {
+    return <EmbeddedHashtag key={`hashtag-${index}-${hashtag}`} hashtag={hashtag} />
+  }
+}
diff --git a/src/renderer/src/components/Embedded/EmbeddedMention.tsx b/src/renderer/src/components/Embedded/EmbeddedMention.tsx
index 1af0b22..ef5b90e 100644
--- a/src/renderer/src/components/Embedded/EmbeddedMention.tsx
+++ b/src/renderer/src/components/Embedded/EmbeddedMention.tsx
@@ -1,5 +1,29 @@
 import Username from '../Username'
+import { TEmbeddedRenderer } from './types'
 
 export function EmbeddedMention({ userId }: { userId: string }) {
   return <Username userId={userId} showAt className="text-highlight font-normal inline-block" />
 }
+
+export const embeddedNostrNpubRenderer: TEmbeddedRenderer = {
+  regex: /(nostr:npub1[a-z0-9]{58})/g,
+  render: (id: string, index: number) => {
+    const npub1 = id.split(':')[1]
+    return <EmbeddedMention key={`embedded-nostr-npub-${index}-${npub1}`} userId={npub1} />
+  }
+}
+
+export const embeddedNostrProfileRenderer: TEmbeddedRenderer = {
+  regex: /(nostr:nprofile1[a-z0-9]+)/g,
+  render: (id: string, index: number) => {
+    const nprofile = id.split(':')[1]
+    return <EmbeddedMention key={`embedded-nostr-profile-${index}-${nprofile}`} userId={nprofile} />
+  }
+}
+
+export const embeddedNpubRenderer: TEmbeddedRenderer = {
+  regex: /(npub1[a-z0-9]{58})/g,
+  render: (npub1: string, index: number) => {
+    return <EmbeddedMention key={`embedded-npub-${index}-${npub1}`} userId={npub1} />
+  }
+}
diff --git a/src/renderer/src/components/Embedded/EmbeddedNormalUrl.tsx b/src/renderer/src/components/Embedded/EmbeddedNormalUrl.tsx
index a1d1e72..aaadbae 100644
--- a/src/renderer/src/components/Embedded/EmbeddedNormalUrl.tsx
+++ b/src/renderer/src/components/Embedded/EmbeddedNormalUrl.tsx
@@ -1,3 +1,5 @@
+import { TEmbeddedRenderer } from './types'
+
 export function EmbeddedNormalUrl({ url }: { url: string }) {
   return (
     <a
@@ -11,3 +13,10 @@ export function EmbeddedNormalUrl({ url }: { url: string }) {
     </a>
   )
 }
+
+export const embeddedNormalUrlRenderer: TEmbeddedRenderer = {
+  regex: /(https?:\/\/[^\s]+)/g,
+  render: (url: string, index: number) => {
+    return <EmbeddedNormalUrl key={`normal-url-${index}-${url}`} url={url} />
+  }
+}
diff --git a/src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx b/src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx
new file mode 100644
index 0000000..a769779
--- /dev/null
+++ b/src/renderer/src/components/Embedded/EmbeddedWebsocketUrl.tsx
@@ -0,0 +1,24 @@
+import { useRelaySettings } from '@renderer/providers/RelaySettingsProvider'
+import { TEmbeddedRenderer } from './types'
+
+export function EmbeddedWebsocketUrl({ url }: { url: string }) {
+  const { setTemporaryRelayUrls } = useRelaySettings()
+  return (
+    <span
+      className="cursor-pointer px-1 rounded-md text-highlight border border-highlight/60 hover:border-highlight hover:bg-muted/60"
+      onClick={(e) => {
+        e.stopPropagation()
+        setTemporaryRelayUrls([url])
+      }}
+    >
+      {url}
+    </span>
+  )
+}
+
+export const embeddedWebsocketUrlRenderer: TEmbeddedRenderer = {
+  regex: /(wss?:\/\/[^\s]+)/g,
+  render: (url: string, index: number) => {
+    return <EmbeddedWebsocketUrl key={`websocket-url-${index}-${url}`} url={url} />
+  }
+}
diff --git a/src/renderer/src/components/Embedded/index.tsx b/src/renderer/src/components/Embedded/index.tsx
index aa1bb29..d9d9ae1 100644
--- a/src/renderer/src/components/Embedded/index.tsx
+++ b/src/renderer/src/components/Embedded/index.tsx
@@ -2,3 +2,17 @@ export * from './EmbeddedHashtag'
 export * from './EmbeddedMention'
 export * from './EmbeddedNormalUrl'
 export * from './EmbeddedNote'
+export * from './EmbeddedWebsocketUrl'
+
+import reactStringReplace from 'react-string-replace'
+import { TEmbeddedRenderer } from './types'
+
+export function embedded(content: string, renderers: TEmbeddedRenderer[]) {
+  let nodes: React.ReactNode[] = [content]
+
+  renderers.forEach((renderer) => {
+    nodes = reactStringReplace(nodes, renderer.regex, renderer.render)
+  })
+
+  return nodes
+}
diff --git a/src/renderer/src/embedded/types.tsx b/src/renderer/src/components/Embedded/types.tsx
similarity index 100%
rename from src/renderer/src/embedded/types.tsx
rename to src/renderer/src/components/Embedded/types.tsx
diff --git a/src/renderer/src/components/ProfileAbout/index.tsx b/src/renderer/src/components/ProfileAbout/index.tsx
index 7114c92..c12f532 100644
--- a/src/renderer/src/components/ProfileAbout/index.tsx
+++ b/src/renderer/src/components/ProfileAbout/index.tsx
@@ -1,16 +1,18 @@
+import { useMemo } from 'react'
 import {
   embedded,
   embeddedHashtagRenderer,
   embeddedNormalUrlRenderer,
-  embeddedNostrNpubRenderer
-} from '@renderer/embedded'
-import { embeddedNpubRenderer } from '@renderer/embedded/EmbeddedNpub'
-import { useMemo } from 'react'
+  embeddedNostrNpubRenderer,
+  embeddedNpubRenderer,
+  embeddedWebsocketUrlRenderer
+} from '../Embedded'
 
 export default function ProfileAbout({ about, className }: { about?: string; className?: string }) {
   const nodes = useMemo(() => {
     return about
       ? embedded(about, [
+          embeddedWebsocketUrlRenderer,
           embeddedNormalUrlRenderer,
           embeddedHashtagRenderer,
           embeddedNostrNpubRenderer,
diff --git a/src/renderer/src/embedded/EmbeddedHashtag.tsx b/src/renderer/src/embedded/EmbeddedHashtag.tsx
deleted file mode 100644
index b0a72bd..0000000
--- a/src/renderer/src/embedded/EmbeddedHashtag.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { EmbeddedHashtag } from '../components/Embedded'
-import { TEmbeddedRenderer } from './types'
-
-export const embeddedHashtagRenderer: TEmbeddedRenderer = {
-  regex: /#([\p{L}\p{N}\p{M}]+)/gu,
-  render: (hashtag: string, index: number) => {
-    return <EmbeddedHashtag key={`hashtag-${index}-${hashtag}`} hashtag={hashtag} />
-  }
-}
diff --git a/src/renderer/src/embedded/EmbeddedNormalUrl.tsx b/src/renderer/src/embedded/EmbeddedNormalUrl.tsx
deleted file mode 100644
index 4bbd86d..0000000
--- a/src/renderer/src/embedded/EmbeddedNormalUrl.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { EmbeddedNormalUrl } from '../components/Embedded'
-import { TEmbeddedRenderer } from './types'
-
-export const embeddedNormalUrlRenderer: TEmbeddedRenderer = {
-  regex: /(https?:\/\/[^\s]+|wss?:\/\/[^\s]+)/g,
-  render: (url: string, index: number) => {
-    return <EmbeddedNormalUrl key={`normal-url-${index}-${url}`} url={url} />
-  }
-}
diff --git a/src/renderer/src/embedded/EmbeddedNostrNpub.tsx b/src/renderer/src/embedded/EmbeddedNostrNpub.tsx
deleted file mode 100644
index a9bf747..0000000
--- a/src/renderer/src/embedded/EmbeddedNostrNpub.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { EmbeddedMention } from '../components/Embedded'
-import { TEmbeddedRenderer } from './types'
-
-export const embeddedNostrNpubRenderer: TEmbeddedRenderer = {
-  regex: /(nostr:npub1[a-z0-9]{58})/g,
-  render: (id: string, index: number) => {
-    const npub1 = id.split(':')[1]
-    return <EmbeddedMention key={`embedded-nostr-npub-${index}-${npub1}`} userId={npub1} />
-  }
-}
diff --git a/src/renderer/src/embedded/EmbeddedNostrProfile.tsx b/src/renderer/src/embedded/EmbeddedNostrProfile.tsx
deleted file mode 100644
index b7bcc4b..0000000
--- a/src/renderer/src/embedded/EmbeddedNostrProfile.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { EmbeddedMention } from '../components/Embedded'
-import { TEmbeddedRenderer } from './types'
-
-export const embeddedNostrProfileRenderer: TEmbeddedRenderer = {
-  regex: /(nostr:nprofile1[a-z0-9]+)/g,
-  render: (id: string, index: number) => {
-    const nprofile = id.split(':')[1]
-    return <EmbeddedMention key={`embedded-nostr-profile-${index}-${nprofile}`} userId={nprofile} />
-  }
-}
diff --git a/src/renderer/src/embedded/EmbeddedNpub.tsx b/src/renderer/src/embedded/EmbeddedNpub.tsx
deleted file mode 100644
index 99e021f..0000000
--- a/src/renderer/src/embedded/EmbeddedNpub.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { EmbeddedMention } from '../components/Embedded'
-import { TEmbeddedRenderer } from './types'
-
-export const embeddedNpubRenderer: TEmbeddedRenderer = {
-  regex: /(npub1[a-z0-9]{58})/g,
-  render: (npub1: string, index: number) => {
-    return <EmbeddedMention key={`embedded-npub-${index}-${npub1}`} userId={npub1} />
-  }
-}
diff --git a/src/renderer/src/embedded/index.tsx b/src/renderer/src/embedded/index.tsx
deleted file mode 100644
index 9a2465d..0000000
--- a/src/renderer/src/embedded/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import reactStringReplace from 'react-string-replace'
-import { TEmbeddedRenderer } from './types'
-
-export * from './EmbeddedHashtag'
-export * from './EmbeddedNormalUrl'
-export * from './EmbeddedNostrNpub'
-export * from './EmbeddedNostrProfile'
-
-export function embedded(content: string, renderers: TEmbeddedRenderer[]) {
-  let nodes: React.ReactNode[] = [content]
-
-  renderers.forEach((renderer) => {
-    nodes = reactStringReplace(nodes, renderer.regex, renderer.render)
-  })
-
-  return nodes
-}
diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts
index c0737f1..d8229fc 100644
--- a/src/renderer/src/i18n/index.ts
+++ b/src/renderer/src/i18n/index.ts
@@ -22,7 +22,6 @@ i18n
   })
 
 i18n.services.formatter?.add('date', (value, lng) => {
-  console.log('lng', lng)
   if (lng?.startsWith('zh')) {
     return dayjs(value).format('YYYY-MM-DD')
   }
diff --git a/src/renderer/src/providers/RelaySettingsProvider.tsx b/src/renderer/src/providers/RelaySettingsProvider.tsx
index 25073a2..b73b4f0 100644
--- a/src/renderer/src/providers/RelaySettingsProvider.tsx
+++ b/src/renderer/src/providers/RelaySettingsProvider.tsx
@@ -1,7 +1,7 @@
 import { TRelayGroup } from '@common/types'
 import { isWebsocketUrl, normalizeUrl } from '@renderer/lib/url'
 import storage from '@renderer/services/storage.service'
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, Dispatch, useContext, useEffect, useState } from 'react'
 
 type TRelaySettingsContext = {
   relayGroups: TRelayGroup[]
@@ -12,6 +12,7 @@ type TRelaySettingsContext = {
   deleteRelayGroup: (groupName: string) => void
   addRelayGroup: (groupName: string, relayUrls?: string[]) => string | null
   updateRelayGroupRelayUrls: (groupName: string, relayUrls: string[]) => void
+  setTemporaryRelayUrls: Dispatch<string[]>
 }
 
 const RelaySettingsContext = createContext<TRelaySettingsContext | undefined>(undefined)
@@ -150,7 +151,8 @@ export function RelaySettingsProvider({ children }: { children: React.ReactNode
         renameRelayGroup,
         deleteRelayGroup,
         addRelayGroup,
-        updateRelayGroupRelayUrls
+        updateRelayGroupRelayUrls,
+        setTemporaryRelayUrls
       }}
     >
       {children}