fixing hydration issue

app/(app)/(builder)/builder/page.tsx

@@ -395,82 +395,88 @@ const canonicalPlatform = normalizePlatformKey(platform);
   // -----------------------------
   const lastHydrateKeyRef = useRef<string>("");
 
-  useEffect(() => {
+useEffect(() => {
-    const controller = new AbortController();
+  const controller = new AbortController();
 
-    async function hydrateSelected() {
+  async function hydrateSelected() {
-      const ids = (Object.values(build).filter(Boolean) as string[])
+    const ids = (Object.values(build).filter(Boolean) as string[])
-        .map(String)
+      .map(String)
-        .sort();
+      .sort();
 
-      const key = ids.join(",");
+    const key = ids.join(",");
-      if (key === lastHydrateKeyRef.current) return;
-      lastHydrateKeyRef.current = key;
 
-      if (ids.length === 0) {
+    // If nothing selected, reset
-        setParts([]);
+    if (ids.length === 0) {
-        setError(null);
+      lastHydrateKeyRef.current = "";
-        setLoading(false);
+      setParts([]);
-        return;
-      }
-
-      setLoading(true);
       setError(null);
-
+      setLoading(false);
-      try {
+      return;
-        const res = await fetch(
-          `${API_BASE_URL}/api/v1/catalog/products/by-ids`,
-          {
-            method: "POST",
-            signal: controller.signal,
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ ids }),
-          }
-        );
-
-        if (!res.ok) throw new Error(`Failed to hydrate parts (${res.status})`);
-
-        const data: GunbuilderProductFromApi[] = await res.json();
-
-        // Map products by id for quick lookup
-        const byId = new Map<string, GunbuilderProductFromApi>();
-        for (const p of data) byId.set(String(p.id), p);
-
-        // Build the hydrated parts by iterating the BUILD STATE (slot -> id)
-        const hydrated: Part[] = Object.entries(build)
-          .filter(([, id]) => Boolean(id))
-          .map(([slot, id]) => {
-            const p = byId.get(String(id));
-            if (!p) return null;
-
-            const buyUrl = p.buyUrl ?? undefined;
-
-            return {
-              id: String(p.id),
-              categoryId: slot as any, // slot is the source of truth
-              name: p.name,
-              brand: p.brand,
-              price: p.price ?? 0,
-              imageUrl: p.imageUrl ?? undefined,
-              affiliateUrl: buyUrl,
-              url: buyUrl,
-              notes: undefined,
-            } as Part;
-          })
-          .filter((x): x is Part => x !== null);
-
-        setParts(hydrated);
-      } catch (err: any) {
-        if (err?.name === "AbortError") return;
-        setError(err?.message ?? "Failed to hydrate selected parts");
-      } finally {
-        setLoading(false);
-      }
     }
 
-    hydrateSelected();
+    // Only skip if we *successfully* hydrated this key previously
-    return () => controller.abort();
+    if (key === lastHydrateKeyRef.current) return;
-  }, [build]);
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(
+        `${API_BASE_URL}/api/v1/catalog/products/by-ids`,
+        {
+          method: "POST",
+          signal: controller.signal,
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ids }),
+        }
+      );
+
+      if (!res.ok) throw new Error(`Failed to hydrate parts (${res.status})`);
+
+      const data: GunbuilderProductFromApi[] = await res.json();
+
+      const byId = new Map<string, GunbuilderProductFromApi>();
+      for (const p of data) byId.set(String(p.id), p);
+
+      const hydrated: Part[] = Object.entries(build)
+        .filter(([, id]) => Boolean(id))
+        .map(([slot, id]) => {
+          const p = byId.get(String(id));
+          if (!p) return null;
+
+          const buyUrl = p.buyUrl ?? undefined;
+
+          return {
+            id: String(p.id),
+            categoryId: slot as any,
+            name: p.name,
+            brand: p.brand,
+            price: p.price ?? 0,
+            imageUrl: p.imageUrl ?? undefined,
+            affiliateUrl: buyUrl,
+            url: buyUrl,
+          } as Part;
+        })
+        .filter((x): x is Part => x !== null);
+
+      setParts(hydrated);
+
+      // ✅ Mark key as hydrated ONLY after success
+      lastHydrateKeyRef.current = key;
+    } catch (err: any) {
+      if (err?.name === "AbortError") {
+        // ✅ Do NOT lock the key on abort; allow retry
+        return;
+      }
+      setError(err?.message ?? "Failed to hydrate selected parts");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  hydrateSelected();
+  return () => controller.abort();
+}, [build]);
 
   // -----------------------------
   // Persist build to localStorage

components/parts/PartsBrowseClient.tsx

@@ -20,7 +20,7 @@ import PartsGrid from "@/components/parts/PartsGrid";
 import Pagination from "@/components/parts/Pagination";
 import PlatformSwitcher from "@/components/parts/PlatformSwitcher";
 import { normalizePlatformKey } from "@/lib/platforms";
-
+import type { UiPart } from "@/types/uiPart";
 import type { Category } from "@/types/builderSlots";
 import {
   PART_ROLE_TO_CATEGORY,
@@ -58,18 +58,6 @@ type GunbuilderProductFromApi = {
   inStock?: boolean | null;
 };
 
-type UiPart = {
-  id: string;
-  name: string;
-  brand: string;
-  platform: string;
-  partRole: string;
-  price: number;
-  imageUrl?: string;
-  buyUrl?: string;
-  inStock?: boolean;
-};
-
 const API_BASE_URL =
   process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
 
@@ -115,7 +103,7 @@ export default function PartsBrowseClient(props: {
   const effectivePlatform = normalizePlatformKey(
     props.platform ?? searchParams.get("platform") ?? "AR15"
   );
-  
+
   const partRole = props.partRole;
 
   const [viewMode, setViewMode] = useState<ViewMode>("list");
@@ -201,10 +189,11 @@ export default function PartsBrowseClient(props: {
             brand: p.brand,
             platform: p.platform,
             partRole: p.partRole,
-            price: p.price ?? 0,
+            price: p.price,
             imageUrl: p.imageUrl ?? undefined,
             buyUrl: p.buyUrl ?? undefined,
-            inStock: p.inStock ?? true,
+            inStock: p.inStock ?? undefined,
+            caliber: (p as any).caliber ?? null,
           }))
         );
 
@@ -264,12 +253,11 @@ export default function PartsBrowseClient(props: {
   );
 
   const priceBounds = useMemo(() => {
-    if (!parts.length)
+    const prices = parts
-      return { min: null as number | null, max: null as number | null };
+      .map((p) => p.price)
-    return {
+      .filter((v): v is number => typeof v === "number");
-      min: Math.min(...parts.map((p) => p.price)),
+    if (!prices.length) return { min: null, max: null };
-      max: Math.max(...parts.map((p) => p.price)),
+    return { min: Math.min(...prices), max: Math.max(...prices) };
-    };
   }, [parts]);
 
   // Keep priceRange clamped to bounds when bounds change
@@ -355,15 +343,15 @@ export default function PartsBrowseClient(props: {
                   mode="browse"
                 /> */}
 
-                <Link
+            <Link
-                  href={`/builder?platform=${encodeURIComponent(
+              href={`/builder?platform=${encodeURIComponent(
-                    effectivePlatform
+                effectivePlatform
-                  )}`}
+              )}`}
-                  className="inline-flex items-center rounded-md bg-amber-400 px-3 py-2 text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
+              className="inline-flex items-center rounded-md bg-amber-400 px-3 py-2 text-xs font-semibold text-black hover:bg-amber-300 transition-colors"
-                >
+            >
-                  Start New Build →
+              Start New Build →
-                </Link>
+            </Link>
-              {/* </div>
+            {/* </div>
             )} */}
           </div>
 

components/parts/PartsGrid.tsx

@@ -2,20 +2,7 @@
 
 import Link from "next/link";
 import { Plus } from "lucide-react";
-
+import type { UiPart } from "@/types/uiPart";
-type UiPart = {
-  id: string;
-  name: string;
-  brand: string;
-  caliber?: string;
-  platform: string;
-  partRole: string;
-  price: number;
-  imageUrl?: string;
-  buyUrl?: string; // Used for debugging
-  buyShortUrl?: string;
-  inStock?: boolean;
-};
 
 export default function PartsGrid(props: {
   viewMode: "card" | "list";
@@ -28,63 +15,80 @@ export default function PartsGrid(props: {
   const { viewMode, parts, buildDetailHref, onAddToBuild } = props;
   const addLabel = props.addLabel ?? "Add to Build";
 
+  // ✅ Only show caliber column if we actually have caliber data
+  const showCaliber = parts.some((p) => !!p.caliber);
+
+  // ✅ Single source of truth for grid columns (prevents header/row drift)
+  // Columns: Image | Part | Brand | (Caliber?) | Price | Actions
+  const gridCols = showCaliber
+    ? "md:grid-cols-[44px_minmax(0,1fr)_160px_120px_110px_120px]" // +Caliber
+    : "md:grid-cols-[44px_minmax(0,1fr)_160px_110px_120px]"; // no Caliber"md:grid-cols-[44px_minmax(0,1fr)_160px_110px_120px]";
+
+  const formatPrice = (price?: number | null) => {
+    if (price == null) return "—";
+    return `$${price.toFixed(2)}`;
+  };
+
   if (viewMode === "card") {
     return (
       <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
-        {parts.map((part) => (
+        {parts.map((part) => {
-          <div
+          const buyHref = part.buyShortUrl ?? part.buyUrl;
-            key={part.id}
+          return (
-            className="group relative flex flex-col rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
+            <div
-          >
+              key={part.id}
-            <div className="mb-3 flex items-center justify-between gap-2">
+              className="group relative flex flex-col rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
-              <div className="min-w-0">
+            >
-                <div className="truncate text-sm font-semibold text-zinc-50">
+              <div className="mb-3 flex items-center justify-between gap-2">
-                  {part.brand}{" "}
+                <div className="min-w-0">
-                  <span className="font-normal">— {part.name}</span>
+                  <div className="truncate text-sm font-semibold text-zinc-50">
+                    {part.brand}{" "}
+                    <span className="font-normal">— {part.name}</span>
+                  </div>
+                </div>
+
+                <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
+                  {formatPrice(part.price)}
                 </div>
               </div>
 
-              <div className="whitespace-nowrap text-sm font-semibold text-amber-300">
+              <div className="mt-2 flex gap-2">
-                ${part.price.toFixed(2)}
+                <Link
+                  href={buildDetailHref(part)}
+                  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 hover:border-zinc-600 hover:bg-zinc-700"
+                >
+                  View Details
+                </Link>
+
+                {onAddToBuild ? (
+                  <button
+                    type="button"
+                    onClick={() => onAddToBuild(part)}
+                    className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
+                  >
+                    {addLabel}
+                  </button>
+                ) : buyHref ? (
+                  <a
+                    href={buyHref}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
+                  >
+                    Buy
+                  </a>
+                ) : (
+                  <button
+                    disabled
+                    className="flex-1 rounded-md bg-zinc-700 px-3 py-2 text-center text-xs font-semibold text-zinc-200 opacity-50"
+                  >
+                    No Price
+                  </button>
+                )}
               </div>
             </div>
-
+          );
-            <div className="mt-2 flex gap-2">
+        })}
-              <Link
-                href={buildDetailHref(part)}
-                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 hover:border-zinc-600 hover:bg-zinc-700"
-              >
-                View Details
-              </Link>
-
-              {onAddToBuild ? (
-                <button
-                  type="button"
-                  onClick={() => onAddToBuild(part)}
-                  className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
-                >
-                  {addLabel}
-                </button>
-              ) : part.buyShortUrl ?? part.buyUrl ? (
-                <a
-                  href={part.buyShortUrl ?? part.buyUrl}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="flex-1 rounded-md bg-amber-400 px-3 py-2 text-center text-xs font-semibold text-black hover:bg-amber-300"
-                >
-                  Buy
-                </a>
-              ) : (
-                <button
-                  disabled
-                  className="flex-1 rounded-md bg-zinc-700 px-3 py-2 text-center text-xs font-semibold text-zinc-200 opacity-50"
-                >
-                  No Action
-                </button>
-              )}
-            </div>
-          </div>
-        ))}
       </div>
     );
   }
@@ -93,96 +97,115 @@ export default function PartsGrid(props: {
   return (
     <>
       {/* Header (DESKTOP ONLY) */}
-      <div className="hidden md:grid md:grid-cols-[44px_minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4 px-3 pb-2 text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">
+      <div
-        <span className="sr-only">Image</span>
+        className={[
+          "hidden md:grid md:items-center md:gap-4 px-3 pb-2",
+          "text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500",
+          gridCols,
+        ].join(" ")}
+      >
+        <span className="text-left">Image</span>
         <span className="min-w-0">Part</span>
-        <span className="text-right">Caliber</span>
+        <span className="text-right">Brand</span>
+        {showCaliber ? <span className="text-right">Caliber</span> : null}
         <span className="text-right">Price</span>
         <span className="text-right">Actions</span>
       </div>
 
       {/* Rows */}
       <div className="space-y-2">
-        {parts.map((part) => (
+        {parts.map((part) => {
-          <div
+          const buyHref = part.buyShortUrl ?? part.buyUrl;
-            key={part.id}
-            className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
-          >
-            <div className="flex flex-col gap-2 md:grid md:grid-cols-[44px_minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4">
-              {/* Image */}
-              <div className="hidden md:block">
-                {part.imageUrl ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={part.imageUrl}
-                    alt=""
-                    className="h-10 w-10 rounded object-cover border border-zinc-800 bg-zinc-950"
-                    loading="lazy"
-                  />
-                ) : (
-                  <div className="h-10 w-10 rounded border border-zinc-800 bg-zinc-950" />
-                )}
-              </div>
-              {/* Part */}
-              <div className="min-w-0">
-                <Link
-                  href={buildDetailHref(part)}
-                  className="block text-sm font-semibold text-zinc-50 leading-snug line-clamp-2 break-words hover:text-amber-300 transition-colors"
-                  title={part.name}
-                >
-                  {part.name}
-                </Link>
-                {/* Dont think we need Brand in the grid */}
-                {/* <div className="mt-0.5 text-xs text-zinc-500 line-clamp-1">
-                  {part.brand}
-                  {part.caliber ? (
-                    <span className="text-zinc-600"> • {part.caliber}</span>
-                  ) : null}
-                </div> */}
-              </div>
-              {/* Caliber (desktop) */}
-              <div className="hidden md:block text-sm text-zinc-300 text-right">
-                {part.caliber ?? "—"}
-              </div>
 
-              {/* Price */}
+          return (
-              <div className="text-sm font-semibold text-amber-300 md:text-right">
+            <div
-                ${part.price.toFixed(2)}
+              key={part.id}
-              </div>
+              className="group relative rounded-md border border-zinc-700 bg-zinc-900/50 p-3 transition-all hover:border-amber-400/60 hover:bg-amber-400/10"
+            >
+              <div
+                className={[
+                  "flex flex-col gap-2 md:grid md:items-center md:gap-4",
+                  gridCols,
+                ].join(" ")}
+              >
+                {/* Image */}
+                <div className="hidden md:block justify-self-start">
+                  {part.imageUrl ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={part.imageUrl}
+                      alt=""
+                      className="h-10 w-10 rounded object-cover border border-zinc-800 bg-zinc-950"
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className="h-10 w-10 rounded border border-zinc-800 bg-zinc-950" />
+                  )}
+                </div>
 
-              {/* Actions */}
+                {/* Part */}
-              <div className="flex justify-end gap-2">
+                <div className="min-w-0">
-                {onAddToBuild ? (
+                  <Link
-                  <button
+                    href={buildDetailHref(part)}
-                    type="button"
+                    className="block text-sm font-semibold text-zinc-50 leading-snug line-clamp-2 break-words hover:text-amber-300 transition-colors"
-                    onClick={() => onAddToBuild(part)}
+                    title={part.name}
-                    className="inline-flex items-center justify-center h-8 w-8 rounded-md bg-amber-400 text-black hover:bg-amber-300 transition-colors"
-                    aria-label="Add to Build"
-                    title="Add to Build"
                   >
-                    <Plus className="h-4 w-4" />
+                    {part.name}
-                  </button>
+                  </Link>
-                ) : part.buyShortUrl ?? part.buyUrl ? (
+                </div>
-                  <a
+
-                    href={part.buyShortUrl ?? part.buyUrl}
+                {/* Brand */}
-                    target="_blank"
+                <div className="hidden md:block text-sm text-zinc-300 text-right">
-                    rel="noreferrer"
+                  {part.brand || "—"}
-                    className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
+                </div>
-                  >
+
-                    Buy
+                {/* Caliber (optional) */}
-                  </a>
+                {showCaliber ? (
-                ) : (
+                  <div className="hidden md:block text-sm text-zinc-300 text-right">
-                  <button
+                    {part.caliber ?? "—"}
-                    disabled
+                  </div>
-                    className="whitespace-nowrap rounded-md bg-zinc-700 px-3 py-1.5 text-xs font-semibold text-zinc-200 opacity-50"
+                ) : null}
-                  >
+
-                    No Action
+                {/* Price */}
-                  </button>
+                <div className="text-sm font-semibold text-amber-300 md:text-right">
-                )}
+                  {formatPrice(part.price)}
+                </div>
+
+                {/* Actions */}
+                <div className="flex justify-end gap-2">
+                  {onAddToBuild ? (
+                    <button
+                      type="button"
+                      onClick={() => onAddToBuild(part)}
+                      className="inline-flex items-center justify-center h-8 w-8 rounded-md bg-amber-400 text-black hover:bg-amber-300 transition-colors"
+                      aria-label="Add to Build"
+                      title="Add to Build"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </button>
+                  ) : buyHref ? (
+                    <a
+                      href={buyHref}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="whitespace-nowrap rounded-md bg-amber-400 px-3 py-1.5 text-xs font-semibold text-black hover:bg-amber-300"
+                    >
+                      Buy
+                    </a>
+                  ) : (
+                    <button
+                      disabled
+                      className="whitespace-nowrap rounded-md bg-zinc-700 px-3 py-1.5 text-xs font-semibold text-zinc-200 opacity-50"
+                      title="No buy link available"
+                    >
+                      No Action
+                    </button>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
+          );
-        ))}
+        })}
       </div>
     </>
   );

types/uiPart.ts

@@ -0,0 +1,17 @@
+// /types/uiPart.ts
+export type UiPart = {
+    id: string;
+    name: string;
+    brand: string;
+    caliber?: string | null;
+    platform: string;
+    partRole: string;
+  
+    // allow nulls from API (don’t coerce to 0)
+    price?: number | null;
+    imageUrl?: string;
+    buyUrl?: string;
+    buyShortUrl?: string;
+  
+    inStock?: boolean | null;
+  };