little bit of ui clean up and fixing the platform labels/keys

components/BuilderNav.tsx

@@ -75,7 +75,7 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
         </button>
 
         {/* Dropdown menu */}
-        <div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all absolute left-0 mt-2 rounded-md border border-neutral-800 bg-black/95 shadow-xl z-40 min-w-[220px]">
+        <div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all absolute left-0 mt-2 rounded-md border border-neutral-800 bg-black/95 shadow-xl z-100 min-w-[220px]">
           <ul className="py-2 text-sm">
             {items.map((cat) => {
               const isActive = currentCategory === cat.id;
@@ -114,7 +114,7 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
        * - Everything before the RIGHT cluster is "left side"
        * - Then a single `ml-auto` cluster pushes everything else to the right
        */}
-      <nav className="flex items-center gap-6 border-b border-neutral-900 px-6 py-3 text-sm backdrop-blur-sm">
+      <nav className="relative z-50 flex items-center gap-6 border-b border-neutral-900 px-6 py-3 text-sm backdrop-blur-sm">
         {/* ------------------------------------------------------------------ */}
         {/* LEFT SIDE: primary nav */}
         {/* ------------------------------------------------------------------ */}

components/parts/PartsBrowseClient.tsx

@@ -19,6 +19,7 @@ import SortBar from "@/components/parts/SortBar";
 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 { Category } from "@/types/builderSlots";
 import {
@@ -111,9 +112,10 @@ export default function PartsBrowseClient(props: {
   const isBuilderMode = pathname.startsWith("/parts/p/");
 
   // ✅ Respect prop override first, else read query, else fallback
-  const effectivePlatform =
-    props.platform ?? searchParams.get("platform") ?? "AR-15";
-
+  const effectivePlatform = normalizePlatformKey(
+    props.platform ?? searchParams.get("platform") ?? "AR15"
+  );
+  
   const partRole = props.partRole;
 
   const [viewMode, setViewMode] = useState<ViewMode>("list");
@@ -149,7 +151,7 @@ export default function PartsBrowseClient(props: {
         setError(null);
 
         const search = new URLSearchParams();
-        search.set("platform", effectivePlatform);
+        search.set("platform", normalizePlatformKey(effectivePlatform));
         search.append("partRole", partRole);
 
         // server paging (0-based)
@@ -320,7 +322,7 @@ export default function PartsBrowseClient(props: {
     }
 
     const qp = new URLSearchParams();
-    qp.set("platform", effectivePlatform);
+    qp.set("platform", normalizePlatformKey(effectivePlatform));
     qp.set("select", `${categoryId}:${p.id}`);
 
     router.push(`/builder?${qp.toString()}`);
@@ -344,14 +346,14 @@ export default function PartsBrowseClient(props: {
               {headingSubtitle}
             </p>
 
-            {!isBuilderMode && (
+            {/* {!isBuilderMode && (
               <div className="mt-4 flex flex-wrap items-center gap-3">
                 <PlatformSwitcher
                   currentPlatform={effectivePlatform}
                   partRole={partRole}
                   preserveQuery
                   mode="browse"
-                />
+                /> */}
 
                 <Link
                   href={`/builder?platform=${encodeURIComponent(
@@ -361,8 +363,8 @@ export default function PartsBrowseClient(props: {
                 >
                   Start New Build →
                 </Link>
-              </div>
-            )}
+              {/* </div>
+            )} */}
           </div>
 
           {isBuilderMode && (

components/parts/PartsGrid.tsx

@@ -92,7 +92,8 @@ export default function PartsGrid(props: {
   return (
     <>
       {/* Header (DESKTOP ONLY) */}
-      <div className="hidden md:grid md:grid-cols-[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 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">
+        <span className="sr-only">Image</span>
         <span className="min-w-0">Part</span>
         <span className="text-right">Caliber</span>
         <span className="text-right">Price</span>
@@ -106,7 +107,21 @@ export default function PartsGrid(props: {
             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-[minmax(0,1fr)_120px_110px_120px] md:items-center md:gap-4">
+            <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