From bcecf0d08edf61bdc51bb1a55a73ae9f2800f3ed Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 26 May 2026 04:09:50 +0000
Subject: [PATCH] ProfileHeader: fold the website link into the @handle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drops the standalone Globe-icon website chip from the stats row and
makes the @handle itself the link to the user's website when one is
declared. Handle text picks up the accent color and trails a small
ExternalLink icon as the affordance — the text alone would otherwise
read as a plain identifier with no signal that it leaves the site.

Stats row stays exactly as it was, minus the website entry.
---
 src/components/explore/ProfileHeader.tsx | 57 +++++++++++++++---------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/components/explore/ProfileHeader.tsx b/src/components/explore/ProfileHeader.tsx
index ef9047c..c640818 100644
--- a/src/components/explore/ProfileHeader.tsx
+++ b/src/components/explore/ProfileHeader.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { ExternalLink, Globe, Heart, MessageSquare, Users } from 'lucide-react';
+import { ExternalLink, Heart, MessageSquare, Users } from 'lucide-react';
 import { getProfile, type AppViewProfile } from '@/utils/atproto/appview';
 import { getRecord } from '@/utils/atproto/pdsClient';
 import type { IdentityBundle } from '@/utils/atproto/identity';
@@ -160,7 +160,39 @@ export default function ProfileHeader({ identity }: Props) {
               wordBreak: 'break-all',
             }}
           >
-            @{handle}
+            {websiteHref ? (
+              // Handle doubles as the website link when the profile has one.
+              // Trailing ExternalLink icon signals that the tap leaves the
+              // current site, since the handle text alone reads as an
+              // identifier (no underline / no obvious "link" affordance).
+              <a
+                href={websiteHref}
+                target="_blank"
+                rel="noreferrer noopener"
+                title={websiteLabel ?? websiteHref}
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'baseline',
+                  gap: '0.3rem',
+                  color: 'var(--text-accent)',
+                  textDecoration: 'none',
+                }}
+              >
+                <span>@{handle}</span>
+                <ExternalLink
+                  size={11}
+                  aria-hidden
+                  style={{
+                    color: 'var(--text-tertiary)',
+                    opacity: 0.7,
+                    flexShrink: 0,
+                    transform: 'translateY(1px)',
+                  }}
+                />
+              </a>
+            ) : (
+              <>@{handle}</>
+            )}
           </div>
         )}
 
@@ -178,7 +210,7 @@ export default function ProfileHeader({ identity }: Props) {
           </p>
         )}
 
-        {(websiteHref || hasStats(profile)) && (
+        {hasStats(profile) && (
           <div
             style={{
               display: 'flex',
@@ -194,25 +226,6 @@ export default function ProfileHeader({ identity }: Props) {
               lineHeight: 1,
             }}
           >
-            {websiteHref && (
-              <a
-                href={websiteHref}
-                target="_blank"
-                rel="noreferrer noopener"
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.4rem',
-                  color: 'var(--text-accent)',
-                  textDecoration: 'none',
-                  lineHeight: 1,
-                }}
-              >
-                <Globe size={13} />
-                <span>{websiteLabel}</span>
-                <ExternalLink size={11} aria-hidden style={{ opacity: 0.6 }} />
-              </a>
-            )}
             {profile.followersCount != null && (
               <Stat
                 icon={<Heart size={13} />}
-- 
2.51.2