From 490c6c9bdca354083c3c7ab2ae4ed274ffe75698 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 01:29:57 +0200
Subject: [PATCH] feat: make supporter avatars clickable to view profiles

- Click avatar to navigate to /p/:npub profile page
- Add hover scale effect for visual feedback
- Convert pubkey to npub for navigation
---
 src/components/Support.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Support.tsx b/src/components/Support.tsx
index 0f5a9994..fe8661e1 100644
--- a/src/components/Support.tsx
+++ b/src/components/Support.tsx
@@ -8,6 +8,8 @@ import { fetchProfiles } from '../services/profileService'
 import { UserSettings } from '../services/settingsService'
 import { Models } from 'applesauce-core'
 import { useEventModel } from 'applesauce-react/hooks'
+import { useNavigate } from 'react-router-dom'
+import { nip19 } from 'nostr-tools'
 
 interface SupportProps {
   relayPool: RelayPool
@@ -123,17 +125,23 @@ interface SupporterCardProps {
 }
 
 const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) => {
+  const navigate = useNavigate()
   const profile = useEventModel(Models.ProfileModel, [supporter.pubkey])
 
   const picture = profile?.picture
   const name = profile?.name || profile?.display_name || `${supporter.pubkey.slice(0, 8)}...`
 
+  const handleClick = () => {
+    const npub = nip19.npubEncode(supporter.pubkey)
+    navigate(`/p/${npub}`)
+  }
+
   return (
     <div className="flex flex-col items-center">
       <div className="relative">
         {/* Avatar */}
         <div
-          className={`rounded-full overflow-hidden flex items-center justify-center
+          className={`rounded-full overflow-hidden flex items-center justify-center cursor-pointer transition-transform hover:scale-105
             ${isWhale ? 'w-24 h-24 md:w-28 md:h-28' : 'w-16 h-16 md:w-20 md:h-20'}
             ${isWhale ? 'ring-4 ring-yellow-400' : 'ring-2'}
           `}
@@ -142,6 +150,7 @@ const SupporterCard: React.FC<SupporterCardProps> = ({ supporter, isWhale }) =>
             borderColor: isWhale ? undefined : 'var(--color-border)'
           }}
           title={`${name} • ${supporter.totalSats.toLocaleString()} sats`}
+          onClick={handleClick}
         >
           {picture ? (
             <img