feat: Implement Phase 1 critical features and fix API integration

This commit completes the first phase of feature parity implementation and
resolves all API integration issues to match the backend API format.

## API Integration Fixes

- Remove all hardcoded default values from transformers (tick_rate, kast, player_count, steam_updated)
- Update TypeScript types to make fields optional where backend doesn't guarantee them
- Update Zod schemas to validate optional fields correctly
- Fix mock data to match real API response format (plain arrays, not wrapped objects)
- Update UI components to handle undefined values with proper fallbacks
- Add comprehensive API documentation for Match and Player endpoints

## Phase 1 Features Implemented (3/6)

### 1. Player Tracking System ✅
- Created TrackPlayerModal.svelte with auth code input
- Integrated track/untrack player API endpoints
- Added UI for providing optional share code
- Displays tracked status on player profiles
- Full validation and error handling

### 2. Share Code Parsing ✅
- Created ShareCodeInput.svelte component
- Added to matches page for easy match submission
- Real-time validation of share code format
- Parse status feedback with loading states
- Auto-redirect to match page on success

### 3. VAC/Game Ban Status ✅
- Added VAC and game ban count/date fields to Player type
- Display status badges on player profile pages
- Show ban count and date when available
- Visual indicators using DaisyUI badge components

## Component Improvements

- Modal.svelte: Added Svelte 5 Snippet types, actions slot support
- ThemeToggle.svelte: Removed deprecated svelte:component usage
- Tooltip.svelte: Fixed type safety with Snippet type
- All new components follow Svelte 5 runes pattern ($state, $derived, $bindable)

## Type Safety & Linting

- Fixed all ESLint errors (any types → proper types)
- Fixed form label accessibility issues
- Replaced error: any with error: unknown + proper type guards
- Added Snippet type imports where needed
- Updated all catch blocks to use instanceof Error checks

## Static Assets

- Migrated all files from public/ to static/ directory per SvelteKit best practices
- Moved 200+ map icons, screenshots, and other assets
- Updated all import paths to use /images/ (served from static/)

## Documentation

- Created IMPLEMENTATION_STATUS.md tracking all 15 missing features
- Updated API.md with optional field annotations
- Created MATCHES_API.md with comprehensive endpoint documentation
- Added inline comments marking optional vs required fields

## Testing

- Updated mock fixtures to remove default values
- Fixed mock handlers to return plain arrays like real API
- Ensured all components handle undefined gracefully

## Remaining Phase 1 Tasks

- [ ] Add VAC status column to match scoreboard
- [ ] Create weapons statistics tab for matches
- [ ] Implement recently visited players on home page

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/lib/components/ui/Modal.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import { X } from 'lucide-svelte';
 	import { fly, fade } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		open?: boolean;
 		title?: string;
 		size?: 'sm' | 'md' | 'lg' | 'xl';
 		onClose?: () => void;
-		children?: any;
+		children?: Snippet;
+		actions?: Snippet;
 	}
 
-	let { open = $bindable(false), title, size = 'md', onClose, children }: Props = $props();
+	let { open = $bindable(false), title, size = 'md', onClose, children, actions }: Props = $props();
 
 	const sizeClasses = {
 		sm: 'max-w-md',
@@ -44,9 +46,15 @@
 		class="fixed inset-0 z-50 flex items-center justify-center p-4"
 		transition:fade={{ duration: 200 }}
 		onclick={handleBackdropClick}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') {
+				handleClose();
+			}
+		}}
 		role="dialog"
 		aria-modal="true"
 		aria-labelledby={title ? 'modal-title' : undefined}
+		tabindex="-1"
 	>
 		<!-- Backdrop -->
 		<div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
@@ -82,6 +90,13 @@
 			<div class="p-6">
 				{@render children?.()}
 			</div>
+
+			<!-- Actions -->
+			{#if actions}
+				<div class="flex justify-end gap-2 border-t border-base-300 p-6">
+					{@render actions()}
+				</div>
+			{/if}
 		</div>
 	</div>
 {/if}

src/lib/components/ui/PremierRatingBadge.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { formatPremierRating, getPremierRatingChange } from '$lib/utils/formatters';
+	import { Trophy, TrendingUp, TrendingDown } from 'lucide-svelte';
+
+	interface Props {
+		rating: number | undefined | null;
+		oldRating?: number | undefined | null;
+		size?: 'sm' | 'md' | 'lg';
+		showTier?: boolean;
+		showChange?: boolean;
+		showIcon?: boolean;
+		class?: string;
+	}
+
+	let {
+		rating,
+		oldRating,
+		size = 'md',
+		showTier = false,
+		showChange = false,
+		showIcon = true,
+		class: className = ''
+	}: Props = $props();
+
+	const tierInfo = $derived(formatPremierRating(rating));
+	const changeInfo = $derived(showChange ? getPremierRatingChange(oldRating, rating) : null);
+
+	const baseClasses = 'inline-flex items-center gap-1.5 border rounded-lg font-medium';
+
+	const sizeClasses = {
+		sm: 'px-2 py-0.5 text-xs',
+		md: 'px-3 py-1 text-sm',
+		lg: 'px-4 py-2 text-base'
+	};
+
+	const iconSizes = {
+		sm: 'h-3 w-3',
+		md: 'h-4 w-4',
+		lg: 'h-5 w-5'
+	};
+
+	const classes = $derived(
+		`${baseClasses} ${tierInfo.cssClasses} ${sizeClasses[size]} ${className}`
+	);
+</script>
+
+<div class={classes}>
+	{#if showIcon}
+		<Trophy class={iconSizes[size]} />
+	{/if}
+
+	<span>{tierInfo.formatted}</span>
+
+	{#if showTier}
+		<span class="opacity-75">({tierInfo.tier})</span>
+	{/if}
+
+	{#if showChange && changeInfo}
+		<span class="ml-1 flex items-center gap-0.5 {changeInfo.cssClasses}">
+			{#if changeInfo.isPositive}
+				<TrendingUp class={iconSizes[size]} />
+			{:else if changeInfo.change < 0}
+				<TrendingDown class={iconSizes[size]} />
+			{/if}
+			{changeInfo.display}
+		</span>
+	{/if}
+</div>

src/lib/components/ui/Tabs.svelte

@@ -43,8 +43,10 @@
 		}
 	};
 
-	const variantClass = variant === 'boxed' ? 'tabs-boxed' : variant === 'lifted' ? 'tabs-lifted' : '';
-	const sizeClass = size === 'xs' ? 'tabs-xs' : size === 'sm' ? 'tabs-sm' : size === 'lg' ? 'tabs-lg' : '';
+	const variantClass =
+		variant === 'boxed' ? 'tabs-boxed' : variant === 'lifted' ? 'tabs-lifted' : '';
+	const sizeClass =
+		size === 'xs' ? 'tabs-xs' : size === 'sm' ? 'tabs-sm' : size === 'lg' ? 'tabs-lg' : '';
 </script>
 
 <div role="tablist" class="tabs {variantClass} {sizeClass} {className}">

src/lib/components/ui/Tooltip.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+
 	interface Props {
 		text: string;
 		position?: 'top' | 'bottom' | 'left' | 'right';
-		children?: any;
+		children?: Snippet;
 	}
 
 	let { text, position = 'top', children }: Props = $props();