feat(telemetry): product interaction events

- h2h_viewed from match card, dock, profile, stats, predictions
- reaction_sent with emoji and surface; score_report_opened from all
  three report entry points
- stats_filtered and stats_sorted on stats route and profile
- rules/teams/players/bracket/tournament view events with sources
- match_history_viewed, badge_viewed, player_searched (count only)

src/features/players/components/profile/header.tsx

@@ -9,6 +9,7 @@ import PlayerAvatar from "@/components/player-avatar";
 import { useSheet } from "@/hooks/use-sheet";
 import { Player } from "../../types";
 import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";
+import { track } from "@/lib/telemetry/client";
 
 interface HeaderProps {
   player: Player;
@@ -53,7 +54,10 @@ const Header = ({ player }: HeaderProps) => {
               variant="subtle"
               size="sm"
               radius="xl"
-              onClick={h2hSheet.open}
+              onClick={() => {
+                track("h2h_viewed", { source: "profile" });
+                h2hSheet.open();
+              }}
               w={40}
               display={!owner ? 'block' : 'none'}
             >

src/features/players/components/profile/index.tsx

@@ -10,6 +10,7 @@ import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
 import MatchList from "@/features/matches/components/match-list";
 import BadgeShowcase from "@/features/badges/components/badge-showcase";
 import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
+import { track } from "@/lib/telemetry/client";
 
 interface ProfileProps {
   id: string;
@@ -20,14 +21,20 @@ const StatsWithFilter = ({ id }: { id: string }) => {
   const deferredViewType = useDeferredValue(viewType);
   const isStale = viewType !== deferredViewType;
 
+  const changeViewType = (next: typeof viewType) => {
+    if (next === viewType) return;
+    track("stats_filtered", { value: next, source: "profile" });
+    setViewType(next);
+  };
+
   return (
     <Stack>
       <Group gap="xs" px="md" justify="space-between" align="center">
         <Text size="md" fw={700}><Trans>Statistics</Trans></Text>
         <Group gap="xs">
-          <Button variant={viewType === 'all' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('all')}><Trans>All</Trans></Button>
-          <Button variant={viewType === 'mainline' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('mainline')}><Trans>Mainline</Trans></Button>
-          <Button variant={viewType === 'regional' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('regional')}><Trans>Regional</Trans></Button>
+          <Button variant={viewType === 'all' ? 'filled' : 'light'} size="compact-xs" onClick={() => changeViewType('all')}><Trans>All</Trans></Button>
+          <Button variant={viewType === 'mainline' ? 'filled' : 'light'} size="compact-xs" onClick={() => changeViewType('mainline')}><Trans>Mainline</Trans></Button>
+          <Button variant={viewType === 'regional' ? 'filled' : 'light'} size="compact-xs" onClick={() => changeViewType('regional')}><Trans>Regional</Trans></Button>
         </Group>
       </Group>
       <Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
@@ -90,7 +97,12 @@ const Profile = ({ id }: ProfileProps) => {
     <>
       <Header player={player} />
       <Box mt="lg">
-        <SwipeableTabs tabs={tabs} />
+        <SwipeableTabs
+          tabs={tabs}
+          onTabChange={(_, tab) => {
+            if (tab.value === "matches") track("match_history_viewed", { source: "profile" });
+          }}
+        />
       </Box>
     </>
   );