updating the playtime frontend with claude only code to replace the one graph with a dumb-bell graph, having each individual map show its players at beginning versus end and also the overall impact of maps + their popularity

discord_verificiation/playtime-frontend/app/maps/impact/page.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import MapImpactLeaderboard from '@/components/MapImpactLeaderboard';
+
+export default function MapsImpactPage() {
+  return (
+    <div className="space-y-6">
+      <Link href="/maps" className="text-sm text-ink-muted hover:text-accent transition-colors">
+        ← Back to maps
+      </Link>
+
+      <div>
+        <h1 className="text-2xl text-ink mb-1">Map impact</h1>
+        <p className="text-sm text-ink-muted">
+          How each map tends to affect server population, not just how often it&apos;s played. Avg Δ is the
+          average change in concurrent players from when a map started to when it ended, across every time
+          it&apos;s been played — negative means the map tends to lose players, positive means it tends to
+          gain them. Retention is the average end-vs-start population as a percentage. Best/worst Δ are the
+          single best and single worst swings recorded for that map.
+        </p>
+      </div>
+
+      <MapImpactLeaderboard />
+    </div>
+  );
+}

discord_verificiation/playtime-frontend/app/maps/page.tsx

@@ -1,11 +1,23 @@
+import Link from 'next/link';
 import MapSearch from '@/components/MapSearch';
 
 export default function MapsPage() {
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl text-ink mb-1">Maps</h1>
-        <p className="text-sm text-ink-muted">Search for a map to see when it was played.</p>
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 className="text-2xl text-ink mb-1">Maps</h1>
+          <p className="text-sm text-ink-muted">Search for a map to see when it was played.</p>
+        </div>
+        <Link
+          href="/maps/impact"
+          className="text-sm text-accent hover:underline flex items-center gap-1 shrink-0"
+        >
+          View maps by population impact
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M9 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </Link>
       </div>
       <MapSearch />
     </div>

discord_verificiation/playtime-frontend/app/maps/period/[mapId]/page.tsx

@@ -9,6 +9,7 @@ import {
 import { attachAvatars } from '@/lib/steamApi';
 import { diffMinutes } from '@/lib/dates';
 import { formatMinutes, countryCodeToFlag } from '@/lib/steam';
+import MapSessionTimelineChart from '@/components/MapSessionTimelineChart';
 
 export default async function MapPeriodDetailPage({
   params,
@@ -135,6 +136,8 @@ export default async function MapPeriodDetailPage({
         </div>
       </div>
 
+      <MapSessionTimelineChart mapId={mapId} />
+
       {/* Players present + Map votes, side by side */}
       <div className="grid md:grid-cols-2 gap-6">
         <div className="panel p-6">