From 7e101ba27486e87bed5139595221ebf36e337e34 Mon Sep 17 00:00:00 2001
From: vikingowl <christian@nachtigall.dev>
Date: Wed, 12 Nov 2025 20:13:31 +0100
Subject: [PATCH] feat: Add Steam profile link to player pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add direct link to Steam Community profile for easy access to player's Steam page.

## Changes

### UI Addition
- Added "Steam Profile" button to player page actions section
- Positioned alongside "Track Player" and "View All Matches" buttons
- Uses ExternalLink icon from lucide-svelte
- Ghost button variant for secondary action styling

### Link Implementation
- Opens Steam Community profile in new tab
- Uses player's Steam ID (uint64) to construct profile URL
- Format: `https://steamcommunity.com/profiles/{steamid64}`
- Includes `target="_blank"` and `rel="noopener noreferrer"` for security

### UX Improvements
- Changed actions container to use `flex-wrap` for responsive layout
- Buttons wrap on smaller screens to prevent overflow
- External link icon clearly indicates opening in new tab

**Security Note:** The `rel="noopener noreferrer"` attribute prevents:
- Potential security issues with window.opener access
- Referrer information leakage to external site

This provides users quick access to full Steam profile information including
inventory, game library, friends list, and other Steam-specific data not
available in CS2.WTF.

This completes Phase 3 Feature 1 - Steam profile integration added.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/routes/player/[id]/+page.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/routes/player/[id]/+page.svelte b/src/routes/player/[id]/+page.svelte
index 3e3f161..d5eea54 100644
--- a/src/routes/player/[id]/+page.svelte
+++ b/src/routes/player/[id]/+page.svelte
@@ -7,7 +7,8 @@
 		Trophy,
 		Heart,
 		Crosshair,
-		UserCheck
+		UserCheck,
+		ExternalLink
 	} from 'lucide-svelte';
 	import Card from '$lib/components/ui/Card.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -280,7 +281,7 @@
 			</div>
 
 			<!-- Actions -->
-			<div class="flex gap-2">
+			<div class="flex flex-wrap gap-2">
 				<Button
 					variant={profile.tracked ? 'success' : 'primary'}
 					size="sm"
@@ -292,6 +293,16 @@
 				<Button variant="ghost" size="sm" href={`/matches?player_id=${profile.id}`}>
 					View All Matches
 				</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					href={`https://steamcommunity.com/profiles/${profile.id}`}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<ExternalLink class="h-4 w-4" />
+					Steam Profile
+				</Button>
 			</div>
 		</div>
 	</Card>