fixed platform selector and part selector

app/(builder)/builder/[categoryId]/page.tsx

@@ -6,7 +6,6 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { CATEGORIES } from "@/data/gunbuilderParts";
 import type { CategoryId, Part } from "@/types/gunbuilder";
 
-
 type ViewMode = "card" | "list";
 
 type GunbuilderProductFromApi = {
@@ -31,7 +30,6 @@ const PLATFORMS = ["AR-15", "AR-10"];
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
 
-
 // sort options
 type SortOption = "relevance" | "price-asc" | "price-desc" | "brand-asc";
 
@@ -61,7 +59,10 @@ export default function CategoryPage() {
   const [brandFilter, setBrandFilter] = useState<string[]>([]);
   const [sortBy, setSortBy] = useState<SortOption>("relevance");
   const [searchQuery, setSearchQuery] = useState<string>("");
-  const [priceRange, setPriceRange] = useState<{ min: number | null; max: number | null }>({
+  const [priceRange, setPriceRange] = useState<{
+    min: number | null;
+    max: number | null;
+  }>({
     min: null,
     max: null,
   });
@@ -80,13 +81,12 @@ export default function CategoryPage() {
     }
   });
 
-  const initialPlatform =
+  const initialPlatform = (searchParams.get("platform") as string) || "AR-15";
-    (searchParams.get("platform") as string) || "AR-15";
   const [platform, setPlatform] = useState<string>(initialPlatform);
 
   const category = useMemo(
     () => CATEGORIES.find((c) => c.id === categoryId),
-    [categoryId],
+    [categoryId]
   );
 
   useEffect(() => {
@@ -159,14 +159,21 @@ export default function CategoryPage() {
         delete updated[categoryId];
         return updated;
       });
-    } else {
+      return;
-      // Add to build and navigate back to main gunbuilder page
+    }
+
+    // Add to build and navigate back to main builder page.
+    // Pass selection via URL so `/builder` can apply it.
     setBuild((prev) => ({
       ...prev,
       [categoryId]: partId,
     }));
-      router.push("/builder");
+
-    }
+    const qp = new URLSearchParams();
+    qp.set("platform", platform || "AR-15");
+    qp.set("select", `${categoryId}:${partId}`);
+
+    router.push(`/builder?${qp.toString()}`);
   };
 
   // available brands for filter
@@ -175,7 +182,7 @@ export default function CategoryPage() {
       Array.from(new Set(parts.map((p) => p.brand)))
         .filter(Boolean)
         .sort((a, b) => a.localeCompare(b)),
-    [parts],
+    [parts]
   );
   const priceBounds = useMemo(() => {
     if (parts.length === 0) {
@@ -244,8 +251,7 @@ export default function CategoryPage() {
         const name = p.name.toLowerCase();
         const brand = p.brand.toLowerCase();
         return (
-          name.includes(normalizedQuery) ||
+          name.includes(normalizedQuery) || brand.includes(normalizedQuery)
-          brand.includes(normalizedQuery)
         );
       });
     }
@@ -278,7 +284,10 @@ export default function CategoryPage() {
   }, [parts, brandFilter, sortBy, build, categoryId, searchQuery]);
 
   const totalPages = useMemo(
-    () => (filteredParts.length === 0 ? 1 : Math.ceil(filteredParts.length / PAGE_SIZE)),
+    () =>
+      filteredParts.length === 0
+        ? 1
+        : Math.ceil(filteredParts.length / PAGE_SIZE),
     [filteredParts, PAGE_SIZE]
   );
 
@@ -291,11 +300,18 @@ export default function CategoryPage() {
   useEffect(() => {
     // whenever the category or filters change, jump back to page 1
     setCurrentPage(1);
-  }, [categoryId, brandFilter, sortBy, searchQuery, priceRange, inStockOnly, platform]);
+  }, [
+    categoryId,
+    brandFilter,
+    sortBy,
+    searchQuery,
+    priceRange,
+    inStockOnly,
+    platform,
+  ]);
 
   useEffect(() => {
-    const nextPlatform =
+    const nextPlatform = (searchParams.get("platform") as string) || "AR-15";
-      (searchParams.get("platform") as string) || "AR-15";
     setPlatform(nextPlatform);
   }, [searchParams]);
 
@@ -304,11 +320,13 @@ export default function CategoryPage() {
       return { start: 0, end: 0 };
     }
     const start = (currentPage - 1) * PAGE_SIZE + 1;
-    const end = Math.min(start + paginatedParts.length - 1, filteredParts.length);
+    const end = Math.min(
+      start + paginatedParts.length - 1,
+      filteredParts.length
+    );
     return { start, end };
   }, [filteredParts.length, currentPage, paginatedParts.length, PAGE_SIZE]);
 
-
   if (!category) {
     return (
       <main className="min-h-screen bg-black text-zinc-50">
@@ -430,15 +448,13 @@ export default function CategoryPage() {
                         <span>
                           Min:{" "}
                           <span className="font-semibold text-zinc-200">
-                          $
+                            ${(priceRange.min ?? priceBounds.min).toFixed(0)}
-                          {(priceRange.min ?? priceBounds.min).toFixed(0)}
                           </span>
                         </span>
                         <span>
                           Max:{" "}
                           <span className="font-semibold text-zinc-200">
-                          $
+                            ${(priceRange.max ?? priceBounds.max).toFixed(0)}
-                          {(priceRange.max ?? priceBounds.max).toFixed(0)}
                           </span>
                         </span>
                       </div>
@@ -455,10 +471,7 @@ export default function CategoryPage() {
                                 value,
                                 prev.max ?? priceBounds.max ?? value
                               ),
-                            max:
+                              max: prev.max ?? priceBounds.max ?? value,
-                              prev.max ??
-                              priceBounds.max ??
-                              value,
                             }));
                           }}
                           className="w-full"
@@ -471,10 +484,7 @@ export default function CategoryPage() {
                           onChange={(e) => {
                             const value = Number(e.target.value);
                             setPriceRange((prev) => ({
-                            min:
+                              min: prev.min ?? priceBounds.min ?? value,
-                              prev.min ??
-                              priceBounds.min ??
-                              value,
                               max: Math.max(
                                 value,
                                 prev.min ?? priceBounds.min ?? value
@@ -683,9 +693,7 @@ export default function CategoryPage() {
                           <div className="flex-1">
                             <div className="text-sm font-semibold text-zinc-50">
                               {part.brand}{" "}
-                            <span className="font-normal">
+                              <span className="font-normal">— {part.name}</span>
-                              — {part.name}
-                            </span>
                             </div>
                             {part.notes && (
                               <p className="mt-1 line-clamp-2 text-xs text-zinc-400">
@@ -700,7 +708,9 @@ export default function CategoryPage() {
                         <div className="mt-2 flex gap-2">
                           <Link
                             href={{
-                            pathname: `/builder/${categoryId}/${part.id}-${slugify(part.name)}`,
+                              pathname: `/builder/${categoryId}/${
+                                part.id
+                              }-${slugify(part.name)}`,
                               query: { platform },
                             }}
                             className="flex-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-center text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
@@ -709,7 +719,9 @@ export default function CategoryPage() {
                           </Link>
                           <button
                             type="button"
-                          onClick={() => handleTogglePart(categoryId, part.id)}
+                            onClick={() =>
+                              handleTogglePart(categoryId, part.id)
+                            }
                             className={`flex-1 rounded-md px-3 py-2 text-center text-xs font-semibold transition-colors ${
                               isSelected
                                 ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
@@ -766,7 +778,9 @@ export default function CategoryPage() {
                             <div className="flex justify-end gap-2">
                               <Link
                                 href={{
-                                pathname: `/builder/${categoryId}/${part.id}-${slugify(part.name)}`,
+                                  pathname: `/builder/${categoryId}/${
+                                    part.id
+                                  }-${slugify(part.name)}`,
                                   query: { platform },
                                 }}
                                 className="whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-700"
@@ -784,7 +798,9 @@ export default function CategoryPage() {
                                     : "bg-amber-400 text-black hover:bg-amber-300"
                                 }`}
                               >
-                              {isSelected ? "Remove from Build" : "Add to Build"}
+                                {isSelected
+                                  ? "Remove from Build"
+                                  : "Add to Build"}
                               </button>
                             </div>
                           </div>
@@ -811,9 +827,7 @@ export default function CategoryPage() {
                   <div className="flex gap-2">
                     <button
                       type="button"
-                    onClick={() =>
+                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                      setCurrentPage((p) => Math.max(1, p - 1))
-                    }
                       disabled={currentPage === 1}
                       className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
                     >

app/(builder)/builder/page.tsx

@@ -87,7 +87,16 @@ export default function GunbuilderPage() {
   const [parts, setParts] = useState<Part[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [platform, setPlatform] = useState<(typeof PLATFORMS)[number]>("AR-15");
+  const isValidPlatform = (
+    value: string | null
+  ): value is (typeof PLATFORMS)[number] =>
+    !!value && (PLATFORMS as readonly string[]).includes(value);
+
+  const [platform, setPlatform] = useState<(typeof PLATFORMS)[number]>(() => {
+    if (typeof window === "undefined") return "AR-15";
+    const initial = new URLSearchParams(window.location.search).get("platform");
+    return isValidPlatform(initial) ? initial : "AR-15";
+  });
   const [build, setBuild] = useState<BuildState>(() => {
     if (typeof window !== "undefined") {
       const stored = localStorage.getItem(STORAGE_KEY);
@@ -189,11 +198,26 @@ export default function GunbuilderPage() {
           return updated;
         });
 
-        router.replace("/builder", { scroll: false });
+        const qp = searchParams.get("platform");
+        const nextPlatform = isValidPlatform(qp) ? qp : platform;
+
+        router.replace(
+          `/builder?platform=${encodeURIComponent(nextPlatform)}`,
+          {
+            scroll: false,
+          }
+        );
       }
     }
   }, [searchParams, router]);
 
+  useEffect(() => {
+    const qp = searchParams.get("platform");
+    if (isValidPlatform(qp) && qp !== platform) {
+      setPlatform(qp);
+    }
+  }, [searchParams, platform]);
+
   // Persist build state to localStorage whenever it changes
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -695,10 +719,24 @@ export default function GunbuilderPage() {
                                       <Link
                                         href={{
                                           pathname: `/builder/${category.id}`,
-                                          query: { platform },
+                                          query: platform ? { platform } : {},
                                         }}
+                                        className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
                                       >
-                                        Choose a Part
+                                        <svg
+                                          className="w-3.5 h-3.5"
+                                          fill="none"
+                                          stroke="currentColor"
+                                          viewBox="0 0 24 24"
+                                        >
+                                          <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth={2}
+                                            d="M12 4v16m8-8H4"
+                                          />
+                                        </svg>
+                                        <span>Choose a Part</span>
                                       </Link>
                                     ) : (
                                       <span className="text-[0.7rem] text-zinc-600">

components/CategoryColumn.tsx

@@ -9,6 +9,7 @@ interface CategoryColumnProps {
   parts: Part[];
   selectedPartId?: string;
   onSelectPart: (partId: string) => void;
+  platform?: string;
 }
 
 export function CategoryColumn({
@@ -16,6 +17,7 @@ export function CategoryColumn({
   parts,
   selectedPartId,
   onSelectPart,
+  platform,
 }: CategoryColumnProps) {
   // Show selected part if available, otherwise show placeholder
   const displayedPart = selectedPartId
@@ -37,8 +39,11 @@ export function CategoryColumn({
           <div className="w-full border border-zinc-700 rounded-md p-3 mb-2 flex items-center justify-between gap-3">
             <p className="text-sm text-zinc-500">No part selected</p>
             <Link
-              href={`/builder/${category.id}`}
+              href={{
-              className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-900/60 px-3 py-1.5 text-xs font-medium text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
+                pathname: `/builder/${category.id}`,
+                query: platform ? { platform } : {},
+              }}
+              className="inline-flex w-full items-center justify-center rounded-md border border-zinc-700 bg-zinc-900 px-4 py-2 text-xs font-semibold text-zinc-100 hover:bg-zinc-800 hover:border-zinc-600 transition-colors"
             >
               <svg
                 className="w-4 h-4"
@@ -68,7 +73,10 @@ export function CategoryColumn({
       </div>
       {parts.length >= 1 && (
         <Link
-          href={`/builder/${category.id}`}
+          href={{
+            pathname: `/builder/${category.id}`,
+            query: platform ? { platform } : {},
+          }}
           className="mt-2 w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-3 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors text-center"
         >
           View All ({parts.length})