feat: link names to profiles

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>
   );

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>
             ),

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}>
+            <Link to={`/${link.encode()}`} state={ev}>
               {(title?.length ?? 0) > 50 ? `${title?.slice(0, 47)}...` : title}
+            </Link>
           </span>
           {showAuthor && (
             <span className="text-layer-4">
+              <Link to={profileLink(hostProfile, host)} className="hover:underline">
                 {getName(host, hostProfile)}
+              </Link>
               {ends && (
                 <>
                   {" · "}

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>

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}>
+            <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">
+              <Link to={profileLink(hostProfile, host)} className="hover:underline">
                 {getName(host, hostProfile)}
+              </Link>
               {video.publishedAt && (
                 <>
                   {" · "}