feat: Implement Phase 5 match detail tabs with charts and data visualization

This commit implements significant portions of Phase 5 (Feature Delivery) including:

Chart Components (src/lib/components/charts/):
- LineChart.svelte: Line charts with Chart.js integration
- BarChart.svelte: Vertical/horizontal bar charts with stacking
- PieChart.svelte: Pie/Doughnut charts with legend
- All charts use Svelte 5 runes ($effect) for reactivity
- Responsive design with customizable options

Data Display Components (src/lib/components/data-display/):
- DataTable.svelte: Generic sortable, filterable table component
- TypeScript generics support for type safety
- Custom formatters and renderers
- Sort indicators and column alignment options

Match Detail Pages:
- Match layout with header, tabs, and score display
- Economy tab: Equipment value charts, buy type classification, round-by-round table
- Details tab: Multi-kill distribution charts, team performance, top performers
- Chat tab: Chronological messages with filtering, search, and round grouping

Additional Components:
- SearchBar, ThemeToggle (layout components)
- MatchCard, PlayerCard (domain components)
- Modal, Skeleton, Tabs, Tooltip (UI components)
- Player profile page with stats and recent matches

Dependencies:
- Installed chart.js for data visualization
- Created Svelte 5 compatible chart wrappers

Phase 4 marked as complete, Phase 5 at 50% completion.
Flashes and Damage tabs deferred for future implementation.

Note: Minor linting warnings to be addressed in follow-up commit.

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

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

src/lib/components/charts/BarChart.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import {
+		Chart,
+		BarController,
+		BarElement,
+		LinearScale,
+		CategoryScale,
+		Title,
+		Tooltip,
+		Legend,
+		type ChartConfiguration
+	} from 'chart.js';
+
+	// Register Chart.js components
+	Chart.register(BarController, BarElement, LinearScale, CategoryScale, Title, Tooltip, Legend);
+
+	interface Props {
+		data: {
+			labels: string[];
+			datasets: Array<{
+				label: string;
+				data: number[];
+				backgroundColor?: string | string[];
+				borderColor?: string | string[];
+				borderWidth?: number;
+			}>;
+		};
+		options?: Partial<ChartConfiguration<'bar'>['options']>;
+		height?: number;
+		horizontal?: boolean;
+		class?: string;
+	}
+
+	let {
+		data,
+		options = {},
+		height = 300,
+		horizontal = false,
+		class: className = ''
+	}: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let chart: Chart<'bar'> | null = null;
+
+	const defaultOptions: ChartConfiguration<'bar'>['options'] = {
+		responsive: true,
+		maintainAspectRatio: false,
+		indexAxis: horizontal ? 'y' : 'x',
+		plugins: {
+			legend: {
+				display: true,
+				position: 'top',
+				labels: {
+					color: 'rgb(156, 163, 175)',
+					font: {
+						family: 'Inter, system-ui, sans-serif',
+						size: 12
+					}
+				}
+			},
+			tooltip: {
+				backgroundColor: 'rgba(0, 0, 0, 0.8)',
+				padding: 12,
+				titleColor: '#fff',
+				bodyColor: '#fff',
+				borderColor: 'rgba(255, 255, 255, 0.1)',
+				borderWidth: 1
+			}
+		},
+		scales: {
+			x: {
+				grid: {
+					color: 'rgba(156, 163, 175, 0.1)'
+				},
+				ticks: {
+					color: 'rgb(156, 163, 175)',
+					font: {
+						size: 11
+					}
+				}
+			},
+			y: {
+				grid: {
+					color: 'rgba(156, 163, 175, 0.1)'
+				},
+				ticks: {
+					color: 'rgb(156, 163, 175)',
+					font: {
+						size: 11
+					}
+				}
+			}
+		}
+	};
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		if (ctx) {
+			chart = new Chart(ctx, {
+				type: 'bar',
+				data: data,
+				options: { ...defaultOptions, ...options }
+			});
+		}
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+
+	// Watch for data changes and update chart
+	$effect(() => {
+		if (chart) {
+			chart.data = data;
+			chart.options = { ...defaultOptions, ...options };
+			chart.update();
+		}
+	});
+</script>
+
+<div class="relative w-full {className}" style="height: {height}px">
+	<canvas bind:this={canvas}></canvas>
+</div>