fix(staffml): propagate track filter to all components and URL state

Track selection (TinyML, Edge, etc.) now transforms Topic objects
at the source in filteredAreas, so TopicCard, TopicDetail, and
AreaOverview all show track-accurate question counts and histograms.
Drill links carry track param to practice page. Hero stats update
dynamically. URL persists filter via ?track= for bookmarking.

Author: profvjreddi

interviews/staffml/src/app/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { Suspense, useState, useEffect, useMemo } from "react";
 import { Search, X, Target, Crosshair, Flame, Calendar } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import Link from "next/link";
+import { useSearchParams, useRouter } from "next/navigation";
 import {
   getAreas, getVaultStats, getAreaStyle, getAreaForTopic, searchTopics,
   type Topic,
@@ -17,13 +18,44 @@ import { isDailyCompleted } from "@/lib/daily";
 import manifest from "@/data/vault-manifest.json";
 import { ECOSYSTEM_BASE } from "@/lib/env";
 
-export default function HomePage() {
+function formatTrackLabel(t: string) {
+  return t === "tinyml" ? "TinyML" : t.charAt(0).toUpperCase() + t.slice(1);
+}
+
+export default function HomePageWrapper() {
+  return (
+    <Suspense fallback={
+      <div className="flex-1 flex items-center justify-center">
+        <Search className="w-6 h-6 text-textTertiary animate-pulse" />
+      </div>
+    }>
+      <HomePage />
+    </Suspense>
+  );
+}
+
+function HomePage() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
   const [mounted, setMounted] = useState(false);
   const [query, setQuery] = useState("");
   const [selectedTopic, setSelectedTopic] = useState<Topic | null>(null);
   const [selectedAreas, setSelectedAreas] = useState<Set<string>>(new Set());
   const [showAllAreas, setShowAllAreas] = useState(false);
-  const [selectedTrack, setSelectedTrack] = useState<string | null>(null);
+
+  // Initialize track from URL param, sync changes back to URL
+  const validTracks = getTracks();
+  const initialTrack = searchParams.get("track");
+  const [selectedTrack, setSelectedTrackState] = useState<string | null>(
+    initialTrack && validTracks.includes(initialTrack) ? initialTrack : null
+  );
+  const setSelectedTrack = (track: string | null) => {
+    setSelectedTrackState(track);
+    const params = new URLSearchParams(searchParams.toString());
+    if (track) { params.set("track", track); } else { params.delete("track"); }
+    const qs = params.toString();
+    router.replace(qs ? `/?${qs}` : "/", { scroll: false });
+  };
   const [isReturning, setIsReturning] = useState(false);
   const [streakCount, setStreakCount] = useState(0);
   const [attemptCount, setAttemptCount] = useState(0);
@@ -154,7 +186,15 @@ export default function HomePage() {
               </h1>
               <p className="text-[13px] text-textSecondary mb-3">
                 Free, open-source interview prep for ML systems engineers.{" "}
-                {stats.totalQuestions.toLocaleString()} questions across compute, memory, latency, and more.
+                {selectedTrack ? (
+                  <>
+                    <span className="font-semibold">{formatTrackLabel(selectedTrack)}</span> track:{" "}
+                    {filteredAreas.reduce((s, a) => s + a.questionCount, 0).toLocaleString()} of{" "}
+                    {stats.totalQuestions.toLocaleString()} questions.
+                  </>
+                ) : (
+                  <>{stats.totalQuestions.toLocaleString()} questions across compute, memory, latency, and more.</>
+                )}
               </p>
 
               {/* Welcome guide */}
@@ -384,6 +424,7 @@ export default function HomePage() {
             >
               <TopicDetail topic={selectedTopic}
                 areaName={selectedArea?.name || ""} style={selectedStyle}
+                selectedTrack={selectedTrack}
                 onClose={() => setSelectedTopic(null)} />
             </motion.div>
           )}
@@ -416,6 +457,7 @@ export default function HomePage() {
               </div>
               <TopicDetail topic={selectedTopic}
                 areaName={selectedArea?.name || ""} style={selectedStyle}
+                selectedTrack={selectedTrack}
                 onClose={() => setSelectedTopic(null)} />
             </motion.div>
           </>

interviews/staffml/src/components/vault/TopicDetail.tsx

@@ -12,15 +12,22 @@ import SectionDivider from "./SectionDivider";
 
 const LEVEL_IDS = LEVEL_DEFS.map(l => l.id);
 
-export default function TopicDetail({ topic, areaName, style, onClose }: {
-  topic: Topic; areaName: string; style: AreaStyle; onClose: () => void;
+function formatTrackName(t: string) {
+  return t === "tinyml" ? "TinyML" : t.charAt(0).toUpperCase() + t.slice(1);
+}
+
+export default function TopicDetail({ topic, areaName, style, onClose, selectedTrack }: {
+  topic: Topic; areaName: string; style: AreaStyle; onClose: () => void; selectedTrack?: string | null;
 }) {
   const [drillLevel, setDrillLevel] = useState<string | null>(null);
   const Icon = style.icon;
 
   const [prevId, setPrevId] = useState(topic.id);
   if (topic.id !== prevId) { setPrevId(topic.id); setDrillLevel(null); }
 
+  // Build track-aware query params for drill links
+  const trackParam = selectedTrack ? `&track=${selectedTrack}` : "";
+
   const levelQs = drillLevel ? topic.questionsByLevel[drillLevel] || [] : [];
 
   return (
@@ -66,7 +73,7 @@ export default function TopicDetail({ topic, areaName, style, onClose }: {
                       {levelQs.length} question{levelQs.length !== 1 ? "s" : ""}
                     </p>
                   </div>
-                  <Link href={`/practice?topic=${topic.id}&level=${drillLevel}`}
+                  <Link href={`/practice?topic=${topic.id}&level=${drillLevel}${trackParam}`}
                     className="flex items-center gap-1.5 px-4 py-2 text-[13px] font-bold rounded-lg transition-all"
                     style={{ backgroundColor: style.primary, color: "#101014" }}>
                     <Target className="w-4 h-4" /> Drill
@@ -151,7 +158,7 @@ export default function TopicDetail({ topic, areaName, style, onClose }: {
               )}
 
               {/* Drill all CTA */}
-              <Link href={`/practice?topic=${topic.id}`}
+              <Link href={`/practice?topic=${topic.id}${trackParam}`}
                 className="flex items-center justify-center gap-2 w-full py-3.5 font-bold rounded-xl text-[14px] transition-all hover:opacity-90"
                 style={{ backgroundColor: style.primary, color: "#101014" }}>
                 <Target className="w-4 h-4" />
@@ -163,8 +170,13 @@ export default function TopicDetail({ topic, areaName, style, onClose }: {
                 <SectionDivider label="Available In" />
                 <div className="flex gap-2 flex-wrap mt-3">
                   {topic.tracks.map((t) => (
-                    <span key={t} className="px-3 py-1.5 rounded-lg bg-surface border border-borderSubtle text-[13px] text-textPrimary font-medium">
-                      {t === "tinyml" ? "TinyML" : t.charAt(0).toUpperCase() + t.slice(1)}
+                    <span key={t} className={clsx(
+                      "px-3 py-1.5 rounded-lg text-[13px] font-medium transition-colors",
+                      selectedTrack === t
+                        ? "bg-accentBlue/15 border-2 border-accentBlue text-accentBlue font-bold"
+                        : "bg-surface border border-borderSubtle text-textPrimary"
+                    )}>
+                      {formatTrackName(t)}
                     </span>
                   ))}
                 </div>