From d91fa2190844ad1f722430cf517a6e7426c6bf34 Mon Sep 17 00:00:00 2001
From: Eric P <ericpp@gmail.com>
Date: Sat, 1 Mar 2025 20:31:56 -0600
Subject: [PATCH] feat: link names to profiles

---
 src/element/category/top-streamers.tsx | 7 ++++++-
 src/element/stream/clip-tile.tsx       | 5 +++--
 src/element/stream/stream-tile.tsx     | 8 ++++++--
 src/element/video/comment.tsx          | 8 +++++++-
 src/element/video/video-tile.tsx       | 8 ++++++--
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/element/category/top-streamers.tsx b/src/element/category/top-streamers.tsx
index bbeba2f..5ac4afe 100644
--- a/src/element/category/top-streamers.tsx
+++ b/src/element/category/top-streamers.tsx
@@ -40,9 +40,14 @@ function TopStreamer({ pubkey, amount }: { pubkey: string; amount: number }) {
       <Link to={profileLink(profile, pubkey)}>
         <Avatar pubkey={pubkey} user={profile} size={56} />
       </Link>
+
       <div className="flex flex-col">
         <div className="text-zap text-xl font-medium">{formatSatsCompact(amount)}</div>
-        <div className="whitespace-nowrap">{getName(pubkey, profile)}</div>
+        <div className="whitespace-nowrap">
+          <Link to={profileLink(profile, pubkey)} className="hover:underline">
+            {getName(pubkey, profile)}
+          </Link>
+        </div>
       </div>
     </div>
   );
diff --git a/src/element/stream/clip-tile.tsx b/src/element/stream/clip-tile.tsx
index 85112f3..80d8af6 100644
--- a/src/element/stream/clip-tile.tsx
+++ b/src/element/stream/clip-tile.tsx
@@ -1,5 +1,5 @@
 import { findTag, profileLink } from "@/utils";
-import { NostrEvent } from "@snort/system";
+import { NostrEvent, NostrLink } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
@@ -9,6 +9,7 @@ export function ClipTile({ ev }: { ev: NostrEvent }) {
   const profile = useUserProfile(ev.pubkey);
   const r = findTag(ev, "r");
   const title = findTag(ev, "title");
+
   return (
     <div className="h-full flex flex-col gap-4 bg-layer-1 rounded-xl px-3 py-2">
       <span>
@@ -16,7 +17,7 @@ export function ClipTile({ ev }: { ev: NostrEvent }) {
           defaultMessage="Clip by {name}"
           values={{
             name: (
-              <Link to={profileLink(profile, ev.pubkey)} className="font-medium text-primary">
+              <Link to={profileLink(profile, ev.pubkey)} className="font-medium text-primary hover:underline">
                 {getName(ev.pubkey, profile)}
               </Link>
             ),
diff --git a/src/element/stream/stream-tile.tsx b/src/element/stream/stream-tile.tsx
index b61b953..5d90626 100644
--- a/src/element/stream/stream-tile.tsx
+++ b/src/element/stream/stream-tile.tsx
@@ -87,11 +87,15 @@ export function StreamTile({
         )}
         <div className="flex flex-col break-words min-w-0">
           <span className="font-medium" title={title}>
-            {(title?.length ?? 0) > 50 ? `${title?.slice(0, 47)}...` : title}
+            <Link to={`/${link.encode()}`} state={ev}>
+              {(title?.length ?? 0) > 50 ? `${title?.slice(0, 47)}...` : title}
+            </Link>
           </span>
           {showAuthor && (
             <span className="text-layer-4">
-              {getName(host, hostProfile)}
+              <Link to={profileLink(hostProfile, host)} className="hover:underline">
+                {getName(host, hostProfile)}
+              </Link>
               {ends && (
                 <>
                   {" · "}
diff --git a/src/element/video/comment.tsx b/src/element/video/comment.tsx
index a1d2340..97bd4c3 100644
--- a/src/element/video/comment.tsx
+++ b/src/element/video/comment.tsx
@@ -4,6 +4,8 @@ import { Text } from "@/element/text";
 import { useUserProfile } from "@snort/system-react";
 import EventReactions from "../event-reactions";
 import { RelativeTime } from "../relative-time";
+import { Link } from "react-router-dom";
+import { profileLink } from "@/utils";
 
 export default function VideoComment({ ev }: { ev: TaggedNostrEvent }) {
   const profile = useUserProfile(ev.pubkey);
@@ -19,7 +21,11 @@ export default function VideoComment({ ev }: { ev: TaggedNostrEvent }) {
       />
       <div className="flex flex-col gap-1">
         <div className="font-medium flex gap-2 items-center">
-          <div>{getName(ev.pubkey, profile)}</div>
+          <div>
+            <Link to={profileLink(profile, ev.pubkey)} className="hover:underline">
+              {getName(ev.pubkey, profile)}
+            </Link>
+          </div>
           <div className="text-neutral-500 text-sm">
             <RelativeTime from={ev.created_at * 1000} />
           </div>
diff --git a/src/element/video/video-tile.tsx b/src/element/video/video-tile.tsx
index a05442f..7c20ffe 100644
--- a/src/element/video/video-tile.tsx
+++ b/src/element/video/video-tile.tsx
@@ -87,11 +87,15 @@ export function VideoTile({
         )}
         <div className="flex flex-col break-words min-w-0">
           <span className="font-medium" title={video.title}>
-            {(video.title?.length ?? 0) > 50 ? `${video.title?.slice(0, 47)}...` : video.title}
+            <Link to={`/${link.encode()}`} state={ev}>
+              {(video.title?.length ?? 0) > 50 ? `${video.title?.slice(0, 47)}...` : video.title}
+            </Link>
           </span>
           {showAuthor && (
             <span className="text-layer-4">
-              {getName(host, hostProfile)}
+              <Link to={profileLink(hostProfile, host)} className="hover:underline">
+                {getName(host, hostProfile)}
+              </Link>
               {video.publishedAt && (
                 <>
                   {" · "}