feat: client tags

packages/app/src/Components/Event/EventComponent.css

@@ -1,16 +1,3 @@
-.note > .header .reply {
-  font-size: 13px;
-  color: var(--font-secondary-color);
-}
-
-.note > .header .reply a {
-  color: var(--highlight);
-}
-
-.note > .header .reply a:hover {
-  text-decoration-color: var(--highlight);
-}
-
 .note .header .info {
   font-size: var(--font-size);
   margin-left: 4px;
@@ -57,8 +44,7 @@
   margin-top: 16px;
 }
 
-.note > .header img:hover,
-.note > .header .name > .reply:hover {
+.note > .header img:hover {
   cursor: pointer;
 }
 

packages/app/src/Components/Event/Note/ClientTag.tsx

@@ -0,0 +1,21 @@
+import { NostrLink, TaggedNostrEvent } from "@snort/system";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+
+export function ClientTag({ ev }: { ev: TaggedNostrEvent }) {
+  const tag = ev.tags.find(a => a[0] === "client");
+  if (!tag) return;
+  const link = tag[2] ? NostrLink.fromTag(["a", tag[2]]) : undefined;
+  return (
+    <span className="text-xs text-gray-light">
+      {" "}
+      <FormattedMessage
+        defaultMessage="via {client}"
+        description="via {client name} tag"
+        values={{
+          client: link ? <Link to={`/${link.encode()}`}>{tag[1]}</Link> : tag[1],
+        }}
+      />
+    </span>
+  );
+}

packages/app/src/Components/Event/Note/ReplyTag.tsx

@@ -9,11 +9,13 @@ import DisplayName from "@/Components/User/DisplayName";
 import { ProfileLink } from "@/Components/User/ProfileLink";
 import { hexToBech32 } from "@/Utils";
 
+import { ClientTag } from "./ClientTag";
+
 export default function ReplyTag({ ev }: { ev: TaggedNostrEvent }) {
   const { formatMessage } = useIntl();
   const thread = EventExt.extractThread(ev);
   if (thread === undefined) {
-    return undefined;
+    return <ClientTag ev={ev} />;
   }
 
   const maxMentions = 2;
@@ -33,7 +35,7 @@ export default function ReplyTag({ ev }: { ev: TaggedNostrEvent }) {
       name: u?.name ?? shortNpub,
       link: (
         <ProfileLink pubkey={pk} user={u}>
-          <DisplayName pubkey={pk} user={u} />{" "}
+          <DisplayName pubkey={pk} user={u} className="text-highlight" />
         </ProfileLink>
       ),
     });
@@ -53,7 +55,7 @@ export default function ReplyTag({ ev }: { ev: TaggedNostrEvent }) {
   const others = mentions.length > maxMentions ? formatMessage(messages.Others, { n: othersLength }) : "";
   const link = replyLink?.encode(CONFIG.eventLinkPrefix);
   return (
-    <div className="reply">
+    <small className="text-xs">
       re:&nbsp;
       {(mentions?.length ?? 0) > 0 ? (
         <>
@@ -62,6 +64,7 @@ export default function ReplyTag({ ev }: { ev: TaggedNostrEvent }) {
       ) : (
         replyLink && <Link to={`/${link}`}>{link?.substring(0, 12)}</Link>
       )}
-    </div>
+      <ClientTag ev={ev} />
+    </small>
   );
 }

packages/app/src/index.css

@@ -179,6 +179,10 @@ a.ext {
   -webkit-text-stroke: 1px black;
 }
 
+.text-highlight {
+  color: var(--highlight);
+}
+
 .br {
   border-radius: 16px;
 }

packages/app/src/lang.json

@@ -773,6 +773,10 @@
   "GspYR7": {
     "defaultMessage": "{n} Dislike"
   },
+  "GtIxzZ": {
+    "defaultMessage": "via {client}",
+    "description": "via {client name} tag"
+  },
   "Gxcr08": {
     "defaultMessage": "Broadcast Event"
   },

packages/app/src/translations/en.json

@@ -256,6 +256,7 @@
   "GpkNYn": "Torrent",
   "GqQeu/": "Invalid Lightning Address",
   "GspYR7": "{n} Dislike",
+  "GtIxzZ": "via {client}",
   "Gxcr08": "Broadcast Event",
   "H+vHiz": "Hex Key..",
   "H/oroO": "Dealing with Unknown Events",