feat: Add Steam profile link to player pages

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>
This commit is contained in:
2025-11-12 20:13:31 +01:00
parent b59eebcddb
commit 7e101ba274

View File

@@ -7,7 +7,8 @@
Trophy, Trophy,
Heart, Heart,
Crosshair, Crosshair,
UserCheck UserCheck,
ExternalLink
} from 'lucide-svelte'; } from 'lucide-svelte';
import Card from '$lib/components/ui/Card.svelte'; import Card from '$lib/components/ui/Card.svelte';
import Button from '$lib/components/ui/Button.svelte'; import Button from '$lib/components/ui/Button.svelte';
@@ -280,7 +281,7 @@
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex gap-2"> <div class="flex flex-wrap gap-2">
<Button <Button
variant={profile.tracked ? 'success' : 'primary'} variant={profile.tracked ? 'success' : 'primary'}
size="sm" size="sm"
@@ -292,6 +293,16 @@
<Button variant="ghost" size="sm" href={`/matches?player_id=${profile.id}`}> <Button variant="ghost" size="sm" href={`/matches?player_id=${profile.id}`}>
View All Matches View All Matches
</Button> </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>
</div> </div>
</Card> </Card>