+1 -1

src/app/profile/[handle]/page.test.tsx

··· 103 103 it('renders Bluesky link', async () => { 104 104 render(<UserProfilePage params={{ handle: 'jay.bsky.team' }} />) 105 105 await waitFor(() => { 106 106 - const link = screen.getByRole('link', { name: /bsky\.app\/profile\/jay\.bsky\.team/i }) 106 106 + const link = screen.getByRole('link', { name: /bluesky/i }) 107 107 expect(link).toHaveAttribute('href', 'https://bsky.app/profile/jay.bsky.team') 108 108 }) 109 109 })

+20

src/components/icons/bluesky-icon.tsx

··· 1 1 + interface BlueskyIconProps { 2 2 + size?: number 3 3 + className?: string 4 4 + } 5 5 + 6 6 + export function BlueskyIcon({ size = 16, className }: BlueskyIconProps) { 7 7 + return ( 8 8 + <svg 9 9 + xmlns="http://www.w3.org/2000/svg" 10 10 + viewBox="0 0 568 501" 11 11 + width={size} 12 12 + height={size} 13 13 + fill="currentColor" 14 14 + className={className} 15 15 + aria-hidden="true" 16 16 + > 17 17 + <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 503.222 453.32 441.497 575.015 351.143 429.003 310.919 358.849c-6.866-11.966-10.073-17.55-26.919-17.55-16.846 0-20.053 5.584-26.919 17.55-40.224 70.154-130.578 216.166-192.303 94.471-33.222-64.76-4-129.52 110.875-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.134-1.612 123.121 33.664Z" /> 18 18 + </svg> 19 19 + ) 20 20 + }

+4 -3

src/components/profile/profile-header.test.tsx

··· 184 184 expect(screen.getByText(/75 following/i)).toBeInTheDocument() 185 185 }) 186 186 187 187 - it('renders Bluesky link with stripped URL display when hasBlueskyProfile is true', () => { 187 187 + it('renders Bluesky icon link when hasBlueskyProfile is true', () => { 188 188 render(<ProfileHeader profile={createProfile({ hasBlueskyProfile: true })} {...defaultProps} />) 189 189 - const link = screen.getByRole('link', { name: /bsky\.app\/profile\/test\.bsky\.social/i }) 189 189 + const link = screen.getByRole('link', { name: /bluesky/i }) 190 190 expect(link).toHaveAttribute('href', 'https://bsky.app/profile/test.bsky.social') 191 191 + expect(link).toHaveAttribute('title', 'View test.bsky.social on Bluesky') 191 192 }) 192 193 193 194 it('does not render Bluesky link when hasBlueskyProfile is false', () => { 194 195 render( 195 196 <ProfileHeader profile={createProfile({ hasBlueskyProfile: false })} {...defaultProps} /> 196 197 ) 197 197 - expect(screen.queryByRole('link', { name: /bsky\.app\/profile/i })).not.toBeInTheDocument() 198 198 + expect(screen.queryByRole('link', { name: /bluesky/i })).not.toBeInTheDocument() 198 199 }) 199 200 200 201 it('renders votesReceived in "This forum" stats', () => {

+6 -4

src/components/profile/profile-stats.tsx

··· 4 4 * @see specs/prd-web.md Section M8 5 5 */ 6 6 7 7 - import { Users, ArrowSquareOut, CalendarBlank } from '@phosphor-icons/react' 7 7 + import { Users, CalendarBlank } from '@phosphor-icons/react' 8 8 + import { BlueskyIcon } from '@/components/icons/bluesky-icon' 8 9 import { formatCount } from '@/lib/format-count' 9 10 import { formatDateLong } from '@/lib/format' 10 11 import type { UserProfile } from '@/lib/api/types' ··· 49 50 href={`https://bsky.app/profile/${handle}`} 50 51 target="_blank" 51 52 rel="noopener noreferrer" 52 52 - className="mt-1 inline-flex items-center gap-1 break-all text-sm text-primary hover:underline" 53 53 + className="mt-1 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-primary" 54 54 + title={`View ${handle} on Bluesky`} 53 55 > 54 54 - bsky.app/profile/{handle} 55 55 - <ArrowSquareOut size={14} aria-hidden="true" /> 56 56 + <BlueskyIcon size={18} /> 57 57 + <span>Bluesky</span> 56 58 </a> 57 59 )} 58 60 </div>