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(() => {
@@ -113,7 +113,7 @@ export default function CategoryPage() {
         const data: GunbuilderProductFromApi[] = await res.json();
 
         const normalized: UiPart[] = data.map((p) => ({
-          id: String(p.id),                 // normalize to string for BuildState
+          id: String(p.id), // normalize to string for BuildState
           categoryId,
           name: p.name,
           brand: p.brand,
@@ -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
-      setBuild((prev) => ({
-        ...prev,
-        [categoryId]: partId,
-      }));
-      router.push("/builder");
     }
+
+    // Add to build and navigate back to main builder page.
+    // Pass selection via URL so `/builder` can apply it.
+    setBuild((prev) => ({
+      ...prev,
+      [categoryId]: partId,
+    }));
+
+    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">
@@ -386,454 +404,450 @@ export default function CategoryPage() {
 
         {/* Parts Grid/List */}
         <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
-        <div className="flex flex-col gap-4 md:flex-row">
+          <div className="flex flex-col gap-4 md:flex-row">
-          {/* Left sidebar: filters */}
+            {/* Left sidebar: filters */}
-          {!loading && !error && parts.length > 0 && (
+            {!loading && !error && parts.length > 0 && (
-            <aside className="w-full md:w-64 shrink-0 rounded-md border border-zinc-800 bg-zinc-950/80 p-3 space-y-4">
+              <aside className="w-full md:w-64 shrink-0 rounded-md border border-zinc-800 bg-zinc-950/80 p-3 space-y-4">
-              <div>
+                <div>
-                <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
+                  <h2 className="text-xs font-semibold uppercase tracking-[0.16em] text-zinc-500">
-                  Filters
+                    Filters
-                </h2>
+                  </h2>
-                <p className="mt-1 text-[11px] text-zinc-500">
+                  <p className="mt-1 text-[11px] text-zinc-500">
-                  Narrow down the {category.name.toLowerCase()} list.
+                    Narrow down the {category.name.toLowerCase()} list.
-                </p>
-              </div>
-
-                            {/* Price range */}
-                            <div>
-                <div className="mb-1.5 flex items-center justify-between">
-                  <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
-                    Price
-                  </span>
-                  {priceRange.min !== null || priceRange.max !== null ? (
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setPriceRange({
-                          min: priceBounds.min,
-                          max: priceBounds.max,
-                        })
-                      }
-                      className="text-[10px] text-zinc-400 hover:text-zinc-200"
-                    >
-                      Reset
-                    </button>
-                  ) : null}
-                </div>
-                {priceBounds.min == null || priceBounds.max == null ? (
-                  <p className="text-[11px] text-zinc-500">
-                    No price data available.
                   </p>
-                ) : (
+                </div>
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between text-[10px] text-zinc-400">
-                      <span>
-                        Min:{" "}
-                        <span className="font-semibold text-zinc-200">
-                          $
-                          {(priceRange.min ?? priceBounds.min).toFixed(0)}
-                        </span>
-                      </span>
-                      <span>
-                        Max:{" "}
-                        <span className="font-semibold text-zinc-200">
-                          $
-                          {(priceRange.max ?? priceBounds.max).toFixed(0)}
-                        </span>
-                      </span>
-                    </div>
-                    <div className="space-y-2">
-                      <input
-                        type="range"
-                        min={priceBounds.min ?? 0}
-                        max={priceBounds.max ?? 0}
-                        value={priceRange.min ?? priceBounds.min ?? 0}
-                        onChange={(e) => {
-                          const value = Number(e.target.value);
-                          setPriceRange((prev) => ({
-                            min: Math.min(
-                              value,
-                              prev.max ?? priceBounds.max ?? value
-                            ),
-                            max:
-                              prev.max ??
-                              priceBounds.max ??
-                              value,
-                          }));
-                        }}
-                        className="w-full"
-                      />
-                      <input
-                        type="range"
-                        min={priceBounds.min ?? 0}
-                        max={priceBounds.max ?? 0}
-                        value={priceRange.max ?? priceBounds.max ?? 0}
-                        onChange={(e) => {
-                          const value = Number(e.target.value);
-                          setPriceRange((prev) => ({
-                            min:
-                              prev.min ??
-                              priceBounds.min ??
-                              value,
-                            max: Math.max(
-                              value,
-                              prev.min ?? priceBounds.min ?? value
-                            ),
-                          }));
-                        }}
-                        className="w-full"
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
 
-              {/* Brand multi-select */}
+                {/* Price range */}
-              <div>
+                <div>
-                <div className="mb-1.5 flex items-center justify-between">
+                  <div className="mb-1.5 flex items-center justify-between">
-                  <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
+                    <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
-                    Brand
+                      Price
-                  </span>
+                    </span>
-                  {brandFilter.length > 0 && (
+                    {priceRange.min !== null || priceRange.max !== null ? (
-                    <button
+                      <button
-                      type="button"
+                        type="button"
-                      onClick={() => setBrandFilter([])}
+                        onClick={() =>
-                      className="text-[10px] text-zinc-400 hover:text-zinc-200"
+                          setPriceRange({
-                    >
+                            min: priceBounds.min,
-                      Clear
+                            max: priceBounds.max,
-                    </button>
+                          })
+                        }
+                        className="text-[10px] text-zinc-400 hover:text-zinc-200"
+                      >
+                        Reset
+                      </button>
+                    ) : null}
+                  </div>
+                  {priceBounds.min == null || priceBounds.max == null ? (
+                    <p className="text-[11px] text-zinc-500">
+                      No price data available.
+                    </p>
+                  ) : (
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between text-[10px] text-zinc-400">
+                        <span>
+                          Min:{" "}
+                          <span className="font-semibold text-zinc-200">
+                            ${(priceRange.min ?? priceBounds.min).toFixed(0)}
+                          </span>
+                        </span>
+                        <span>
+                          Max:{" "}
+                          <span className="font-semibold text-zinc-200">
+                            ${(priceRange.max ?? priceBounds.max).toFixed(0)}
+                          </span>
+                        </span>
+                      </div>
+                      <div className="space-y-2">
+                        <input
+                          type="range"
+                          min={priceBounds.min ?? 0}
+                          max={priceBounds.max ?? 0}
+                          value={priceRange.min ?? priceBounds.min ?? 0}
+                          onChange={(e) => {
+                            const value = Number(e.target.value);
+                            setPriceRange((prev) => ({
+                              min: Math.min(
+                                value,
+                                prev.max ?? priceBounds.max ?? value
+                              ),
+                              max: prev.max ?? priceBounds.max ?? value,
+                            }));
+                          }}
+                          className="w-full"
+                        />
+                        <input
+                          type="range"
+                          min={priceBounds.min ?? 0}
+                          max={priceBounds.max ?? 0}
+                          value={priceRange.max ?? priceBounds.max ?? 0}
+                          onChange={(e) => {
+                            const value = Number(e.target.value);
+                            setPriceRange((prev) => ({
+                              min: prev.min ?? priceBounds.min ?? value,
+                              max: Math.max(
+                                value,
+                                prev.min ?? priceBounds.min ?? value
+                              ),
+                            }));
+                          }}
+                          className="w-full"
+                        />
+                      </div>
+                    </div>
                   )}
                 </div>
-                {availableBrands.length === 0 ? (
+
-                  <p className="text-[11px] text-zinc-500">
+                {/* Brand multi-select */}
-                    No brands available yet.
+                <div>
-                  </p>
+                  <div className="mb-1.5 flex items-center justify-between">
-                ) : (
+                    <span className="text-[11px] font-medium uppercase tracking-[0.12em] text-zinc-500">
-                  <div className="max-h-56 space-y-1 overflow-y-auto pr-1">
+                      Brand
-                    {availableBrands.map((b) => {
+                    </span>
-                      const checked = brandFilter.includes(b);
+                    {brandFilter.length > 0 && (
-                      return (
+                      <button
-                        <label
+                        type="button"
-                          key={b}
+                        onClick={() => setBrandFilter([])}
-                          className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-[11px] text-zinc-200 hover:bg-zinc-900/80"
+                        className="text-[10px] text-zinc-400 hover:text-zinc-200"
-                        >
+                      >
-                          <input
+                        Clear
-                            type="checkbox"
+                      </button>
-                            className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
+                    )}
-                            checked={checked}
-                            onChange={(e) => {
-                              setBrandFilter((prev) =>
-                                e.target.checked
-                                  ? [...prev, b]
-                                  : prev.filter((brand) => brand !== b)
-                              );
-                            }}
-                          />
-                          <span className="truncate">{b}</span>
-                        </label>
-                      );
-                    })}
                   </div>
-                )}
+                  {availableBrands.length === 0 ? (
-                {brandFilter.length === 0 && availableBrands.length > 0 && (
+                    <p className="text-[11px] text-zinc-500">
-                  <p className="mt-1 text-[10px] text-zinc-500">
+                      No brands available yet.
-                    No brands selected — showing all.
+                    </p>
-                  </p>
+                  ) : (
-                )}
+                    <div className="max-h-56 space-y-1 overflow-y-auto pr-1">
-              </div>
+                      {availableBrands.map((b) => {
-
+                        const checked = brandFilter.includes(b);
-              {/* In-stock toggle */}
+                        return (
-              <div className="border-t border-zinc-800 pt-3">
+                          <label
-                <label className="flex cursor-pointer items-center justify-between text-[11px] text-zinc-200">
+                            key={b}
-                  <span className="font-medium uppercase tracking-[0.12em] text-zinc-500">
+                            className="flex cursor-pointer items-center gap-2 rounded px-1 py-0.5 text-[11px] text-zinc-200 hover:bg-zinc-900/80"
-                    In stock only
+                          >
-                  </span>
+                            <input
-                  <input
+                              type="checkbox"
-                    type="checkbox"
+                              className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
-                    className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
+                              checked={checked}
-                    checked={inStockOnly}
+                              onChange={(e) => {
-                    onChange={(e) => setInStockOnly(e.target.checked)}
+                                setBrandFilter((prev) =>
-                  />
+                                  e.target.checked
-                </label>
+                                    ? [...prev, b]
-                <p className="mt-1 text-[10px] text-zinc-500">
+                                    : prev.filter((brand) => brand !== b)
-                  Hides items marked out of stock by the backend.
+                                );
-                </p>
+                              }}
-              </div>
+                            />
-            </aside>
+                            <span className="truncate">{b}</span>
-          )}
+                          </label>
-
+                        );
-          {/* Right side: toolbar + results */}
+                      })}
-          <div className="flex-1">
-            {/* Top toolbar: count + search + sort */}
-            {!loading && !error && parts.length > 0 && (
-              <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-                <div className="text-xs text-zinc-500">
-                  Showing{" "}
-                  <span className="font-medium text-zinc-200">
-                    {visibleRange.start}-{visibleRange.end}
-                  </span>{" "}
-                  of{" "}
-                  <span className="font-medium text-zinc-200">
-                    {filteredParts.length}
-                  </span>{" "}
-                  matching parts
-                </div>
-                <div className="flex flex-wrap gap-3">
-                  <div className="flex items-center gap-2">
-                    <label
-                      htmlFor="part-search"
-                      className="text-xs text-zinc-500"
-                    >
-                      Search
-                    </label>
-                    <div className="relative">
-                      <input
-                        id="part-search"
-                        type="text"
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                        placeholder={`Search ${category.name.toLowerCase()}...`}
-                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 pr-6 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
-                      />
-                      {searchQuery && (
-                        <button
-                          type="button"
-                          onClick={() => setSearchQuery("")}
-                          className="absolute right-1 top-1/2 -translate-y-1/2 text-xs leading-none text-zinc-500 hover:text-zinc-300"
-                          aria-label="Clear search"
-                        >
-                          ×
-                        </button>
-                      )}
                     </div>
-                  </div>
+                  )}
-                  <div className="flex items-center gap-2">
+                  {brandFilter.length === 0 && availableBrands.length > 0 && (
-                    <label
+                    <p className="mt-1 text-[10px] text-zinc-500">
-                      htmlFor="platform-select"
+                      No brands selected — showing all.
-                      className="text-xs text-zinc-500"
+                    </p>
-                    >
+                  )}
-                      Platform
-                    </label>
-                    <select
-                      id="platform-select"
-                      value={platform}
-                      onChange={(e) => setPlatform(e.target.value)}
-                      className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
-                    >
-                      {PLATFORMS.map((p) => (
-                        <option key={p} value={p}>
-                          {p}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <label
-                      htmlFor="sort-by"
-                      className="text-xs text-zinc-500"
-                    >
-                      Sort
-                    </label>
-                    <select
-                      id="sort-by"
-                      value={sortBy}
-                      onChange={(e) =>
-                        setSortBy(e.target.value as SortOption)
-                      }
-                      className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
-                    >
-                      <option value="relevance">Relevance</option>
-                      <option value="price-asc">Price: Low → High</option>
-                      <option value="price-desc">Price: High → Low</option>
-                      <option value="brand-asc">Brand: A → Z</option>
-                    </select>
-                  </div>
                 </div>
-              </div>
+
+                {/* In-stock toggle */}
+                <div className="border-t border-zinc-800 pt-3">
+                  <label className="flex cursor-pointer items-center justify-between text-[11px] text-zinc-200">
+                    <span className="font-medium uppercase tracking-[0.12em] text-zinc-500">
+                      In stock only
+                    </span>
+                    <input
+                      type="checkbox"
+                      className="h-3 w-3 rounded border-zinc-600 bg-zinc-900 text-amber-400 focus:ring-amber-400"
+                      checked={inStockOnly}
+                      onChange={(e) => setInStockOnly(e.target.checked)}
+                    />
+                  </label>
+                  <p className="mt-1 text-[10px] text-zinc-500">
+                    Hides items marked out of stock by the backend.
+                  </p>
+                </div>
+              </aside>
             )}
 
-            {/* Results / states */}
+            {/* Right side: toolbar + results */}
-            {loading ? (
+            <div className="flex-1">
-              <p className="py-8 text-center text-sm text-zinc-500">
+              {/* Top toolbar: count + search + sort */}
-                Loading {category.name.toLowerCase()}…
+              {!loading && !error && parts.length > 0 && (
-              </p>
+                <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-            ) : error ? (
+                  <div className="text-xs text-zinc-500">
-              <p className="py-8 text-center text-sm text-red-400">
+                    Showing{" "}
-                {error} — check that the Ballistic API is running.
+                    <span className="font-medium text-zinc-200">
-              </p>
+                      {visibleRange.start}-{visibleRange.end}
-            ) : filteredParts.length === 0 ? (
+                    </span>{" "}
-              <p className="py-8 text-center text-sm text-zinc-500">
+                    of{" "}
-                No parts available for this category yet.
+                    <span className="font-medium text-zinc-200">
-              </p>
+                      {filteredParts.length}
-            ) : viewMode === "card" ? (
+                    </span>{" "}
-              <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                    matching parts
-                {paginatedParts.map((part) => {
+                  </div>
-                  const isSelected = build[categoryId] === part.id;
+                  <div className="flex flex-wrap gap-3">
-
+                    <div className="flex items-center gap-2">
-                  return (
+                      <label
-                    <div
+                        htmlFor="part-search"
-                      key={part.id}
+                        className="text-xs text-zinc-500"
-                      className={`group relative flex flex-col rounded-md border p-3 transition-all duration-200 ${
+                      >
-                        isSelected
+                        Search
-                          ? "border-amber-400/70 bg-amber-400/10 shadow-[0_0_0_1px_rgba(251,191,36,0.25)]"
+                      </label>
-                          : "border-zinc-700 bg-zinc-900/50 hover:border-amber-400/60 hover:bg-amber-400/10"
+                      <div className="relative">
-                      }`}
+                        <input
-                    >
+                          id="part-search"
-                      <div className="mb-3 flex items-center gap-2 justify-between">
+                          type="text"
-                        <div className="flex-1">
+                          value={searchQuery}
-                          <div className="text-sm font-semibold text-zinc-50">
+                          onChange={(e) => setSearchQuery(e.target.value)}
-                            {part.brand}{" "}
+                          placeholder={`Search ${category.name.toLowerCase()}...`}
-                            <span className="font-normal">
+                          className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 pr-6 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
-                              — {part.name}
+                        />
-                            </span>
+                        {searchQuery && (
-                          </div>
+                          <button
-                          {part.notes && (
+                            type="button"
-                            <p className="mt-1 line-clamp-2 text-xs text-zinc-400">
+                            onClick={() => setSearchQuery("")}
-                              {part.notes}
+                            className="absolute right-1 top-1/2 -translate-y-1/2 text-xs leading-none text-zinc-500 hover:text-zinc-300"
-                            </p>
+                            aria-label="Clear search"
-                          )}
+                          >
-                        </div>
+                            ×
-                        <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
+                          </button>
-                          ${part.price.toFixed(2)}
+                        )}
-                        </div>
-                      </div>
-                      <div className="mt-2 flex gap-2">
-                        <Link
-                          href={{
-                            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"
-                        >
-                          View Details
-                        </Link>
-                        <button
-                          type="button"
-                          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"
-                              : "bg-amber-400 text-black hover:bg-amber-300"
-                          }`}
-                        >
-                          {isSelected ? "Remove from Build" : "Add to Build"}
-                        </button>
                       </div>
                     </div>
-                  );
+                    <div className="flex items-center gap-2">
-                })}
+                      <label
-              </div>
+                        htmlFor="platform-select"
-            ) : (
+                        className="text-xs text-zinc-500"
-              <>
+                      >
-                {/* Header row for list view */}
+                        Platform
-                <div className="hidden grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 md:grid">
+                      </label>
-                  <span>Part</span>
+                      <select
-                  <span>Brand</span>
+                        id="platform-select"
-                  <span className="text-right">Price</span>
+                        value={platform}
-                  <span className="pr-2 text-right">Actions</span>
+                        onChange={(e) => setPlatform(e.target.value)}
+                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                      >
+                        {PLATFORMS.map((p) => (
+                          <option key={p} value={p}>
+                            {p}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <label
+                        htmlFor="sort-by"
+                        className="text-xs text-zinc-500"
+                      >
+                        Sort
+                      </label>
+                      <select
+                        id="sort-by"
+                        value={sortBy}
+                        onChange={(e) =>
+                          setSortBy(e.target.value as SortOption)
+                        }
+                        className="rounded-md border border-zinc-700 bg-zinc-900/70 px-2 py-1 text-xs text-zinc-200 focus:outline-none focus:ring-1 focus:ring-amber-400"
+                      >
+                        <option value="relevance">Relevance</option>
+                        <option value="price-asc">Price: Low → High</option>
+                        <option value="price-desc">Price: High → Low</option>
+                        <option value="brand-asc">Brand: A → Z</option>
+                      </select>
+                    </div>
+                  </div>
                 </div>
+              )}
 
-                <div className="space-y-2">
+              {/* Results / states */}
+              {loading ? (
+                <p className="py-8 text-center text-sm text-zinc-500">
+                  Loading {category.name.toLowerCase()}…
+                </p>
+              ) : error ? (
+                <p className="py-8 text-center text-sm text-red-400">
+                  {error} — check that the Ballistic API is running.
+                </p>
+              ) : filteredParts.length === 0 ? (
+                <p className="py-8 text-center text-sm text-zinc-500">
+                  No parts available for this category yet.
+                </p>
+              ) : viewMode === "card" ? (
+                <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
                   {paginatedParts.map((part) => {
                     const isSelected = build[categoryId] === part.id;
 
                     return (
                       <div
                         key={part.id}
-                        className={`group relative rounded-md border p-3 transition-all duration-200 ${
+                        className={`group relative flex flex-col rounded-md border p-3 transition-all duration-200 ${
                           isSelected
                             ? "border-amber-400/70 bg-amber-400/10 shadow-[0_0_0_1px_rgba(251,191,36,0.25)]"
                             : "border-zinc-700 bg-zinc-900/50 hover:border-amber-400/60 hover:bg-amber-400/10"
                         }`}
                       >
-                        <div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-center md:gap-4">
+                        <div className="mb-3 flex items-center gap-2 justify-between">
-                          <div className="min-w-0 flex-1">
+                          <div className="flex-1">
                             <div className="text-sm font-semibold text-zinc-50">
-                              {part.name}
+                              {part.brand}{" "}
+                              <span className="font-normal">— {part.name}</span>
                             </div>
                             {part.notes && (
-                              <p className="mt-1 line-clamp-1 text-xs text-zinc-400">
+                              <p className="mt-1 line-clamp-2 text-xs text-zinc-400">
                                 {part.notes}
                               </p>
                             )}
                           </div>
-                          <div className="text-xs text-zinc-400 md:text-left md:text-sm">
+                          <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
-                            {part.brand}
-                          </div>
-                          <div className="text-sm font-semibold text-amber-300 md:text-right">
                             ${part.price.toFixed(2)}
                           </div>
-                          <div className="flex justify-end gap-2">
+                        </div>
-                            <Link
+                        <div className="mt-2 flex gap-2">
-                              href={{
+                          <Link
-                                pathname: `/builder/${categoryId}/${part.id}-${slugify(part.name)}`,
+                            href={{
-                                query: { platform },
+                              pathname: `/builder/${categoryId}/${
-                              }}
+                                part.id
-                              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"
+                              }-${slugify(part.name)}`,
-                            >
+                              query: { platform },
-                              View Details
+                            }}
-                            </Link>
+                            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"
-                            <button
+                          >
-                              type="button"
+                            View Details
-                              onClick={() =>
+                          </Link>
-                                handleTogglePart(categoryId, part.id)
+                          <button
-                              }
+                            type="button"
-                              className={`whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
+                            onClick={() =>
-                                isSelected
+                              handleTogglePart(categoryId, part.id)
-                                  ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+                            }
-                                  : "bg-amber-400 text-black hover:bg-amber-300"
+                            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"
-                              {isSelected ? "Remove from Build" : "Add to Build"}
+                                : "bg-amber-400 text-black hover:bg-amber-300"
-                            </button>
+                            }`}
-                          </div>
+                          >
+                            {isSelected ? "Remove from Build" : "Add to Build"}
+                          </button>
                         </div>
                       </div>
                     );
                   })}
                 </div>
-              </>
+              ) : (
-            )}
+                <>
+                  {/* Header row for list view */}
+                  <div className="hidden grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500 md:grid">
+                    <span>Part</span>
+                    <span>Brand</span>
+                    <span className="text-right">Price</span>
+                    <span className="pr-2 text-right">Actions</span>
+                  </div>
 
-            {/* Pagination controls */}
+                  <div className="space-y-2">
-            {filteredParts.length > 0 && totalPages > 1 && (
+                    {paginatedParts.map((part) => {
-              <div className="mt-4 flex items-center justify-between text-xs text-zinc-400">
+                      const isSelected = build[categoryId] === part.id;
-                <div>
+
-                  Page{" "}
+                      return (
-                  <span className="font-semibold text-zinc-200">
+                        <div
-                    {currentPage}
+                          key={part.id}
-                  </span>{" "}
+                          className={`group relative rounded-md border p-3 transition-all duration-200 ${
-                  of{" "}
+                            isSelected
-                  <span className="font-semibold text-zinc-200">
+                              ? "border-amber-400/70 bg-amber-400/10 shadow-[0_0_0_1px_rgba(251,191,36,0.25)]"
-                    {totalPages}
+                              : "border-zinc-700 bg-zinc-900/50 hover:border-amber-400/60 hover:bg-amber-400/10"
-                  </span>
+                          }`}
+                        >
+                          <div className="flex flex-col gap-2 md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)_minmax(0,1fr)_auto] md:items-center md:gap-4">
+                            <div className="min-w-0 flex-1">
+                              <div className="text-sm font-semibold text-zinc-50">
+                                {part.name}
+                              </div>
+                              {part.notes && (
+                                <p className="mt-1 line-clamp-1 text-xs text-zinc-400">
+                                  {part.notes}
+                                </p>
+                              )}
+                            </div>
+                            <div className="text-xs text-zinc-400 md:text-left md:text-sm">
+                              {part.brand}
+                            </div>
+                            <div className="text-sm font-semibold text-amber-300 md:text-right">
+                              ${part.price.toFixed(2)}
+                            </div>
+                            <div className="flex justify-end gap-2">
+                              <Link
+                                href={{
+                                  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"
+                              >
+                                View Details
+                              </Link>
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  handleTogglePart(categoryId, part.id)
+                                }
+                                className={`whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ${
+                                  isSelected
+                                    ? "border border-zinc-600 bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
+                                    : "bg-amber-400 text-black hover:bg-amber-300"
+                                }`}
+                              >
+                                {isSelected
+                                  ? "Remove from Build"
+                                  : "Add to Build"}
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+
+              {/* Pagination controls */}
+              {filteredParts.length > 0 && totalPages > 1 && (
+                <div className="mt-4 flex items-center justify-between text-xs text-zinc-400">
+                  <div>
+                    Page{" "}
+                    <span className="font-semibold text-zinc-200">
+                      {currentPage}
+                    </span>{" "}
+                    of{" "}
+                    <span className="font-semibold text-zinc-200">
+                      {totalPages}
+                    </span>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      type="button"
+                      onClick={() => 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"
+                    >
+                      Previous
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setCurrentPage((p) => Math.min(totalPages, p + 1))
+                      }
+                      disabled={currentPage === totalPages}
+                      className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
+                    >
+                      Next
+                    </button>
+                  </div>
                 </div>
-                <div className="flex gap-2">
+              )}
-                  <button
+            </div>
-                    type="button"
-                    onClick={() =>
-                      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"
-                  >
-                    Previous
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      setCurrentPage((p) => Math.min(totalPages, p + 1))
-                    }
-                    disabled={currentPage === totalPages}
-                    className="rounded border border-zinc-700 bg-zinc-900/70 px-3 py-1 hover:bg-zinc-800 disabled:opacity-40"
-                  >
-                    Next
-                  </button>
-                </div>
-              </div>
-            )}
           </div>
-        </div>
         </section>
       </div>
     </main>

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})