fixed layouts, routing and the platform switcher.

components/parts/PlatformSwitcher.tsx

@@ -3,23 +3,10 @@
 import { useMemo } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
-/**
- * PlatformSwitcher
- *
- * Works on BOTH:
- * - /parts/[partRole] (default browse route)
- * - /parts/[platform]/[partRole] (canonical route)
- *
- * Behavior:
- * - If you're on /parts/[partRole], switching platform navigates to /parts/[platform]/[partRole]
- *   (so your URL becomes explicit/shareable).
- * - If you're already on /parts/[platform]/[partRole], it swaps the platform segment.
- */
 export default function PlatformSwitcher(props: {
   currentPlatform: string;
   partRole: string;
-  // If true, we keep query params when switching (nice for sort/paging)
-  preserveQuery?: boolean;
+  preserveQuery?: boolean; // keep sort/page/etc (but NOT platform)
 }) {
   const { currentPlatform, partRole, preserveQuery = true } = props;
 
@@ -29,13 +16,19 @@ export default function PlatformSwitcher(props: {
 
   const queryString = useMemo(() => {
     if (!preserveQuery) return "";
-    const q = searchParams?.toString();
+
+    // Copy params and DROP legacy platform param so it can’t conflict with the path
+    const sp = new URLSearchParams(searchParams?.toString());
+    sp.delete("platform");
+
+    const q = sp.toString();
     return q ? `?${q}` : "";
   }, [searchParams, preserveQuery]);
 
   function go(platform: string) {
-    // We always navigate to canonical to keep it simple & consistent
-    router.push(`/parts/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}${queryString}`);
+    router.replace(
+      `/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}${queryString}`
+    );
   }
 
   return (
@@ -52,9 +45,8 @@ export default function PlatformSwitcher(props: {
         <option value="AK-47">AK-47</option>
       </select>
 
-      <span className="ml-2 text-[0.7rem] text-zinc-500">
-        {pathname}
-      </span>
+      {/* debug only */}
+      <span className="ml-2 text-[0.7rem] text-zinc-500">{pathname}</span>
     </div>
   );
 }