sean/shadow-gunbuilder-ai-proto
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fixed layouts, routing and the platform switcher.

Browse Source
This commit is contained in:
Sean Strawsburg
2025-12-22 08:36:19 -05:00
parent b1a8dae8ed
commit 34e915f904
21 changed files with 254 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(builder)/builder/layout.tsx → app/(app)/(builder)/builder/layout.tsx
View File
app/(builder)/builder/page.tsx → app/(app)/(builder)/builder/page.tsx
+2 -5
View File
@@ -936,7 +936,7 @@ export default function GunbuilderPage() {
BATTL BUILDERS
</p>
<h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
BattlBuilder <span className="text-amber-300">Early Access</span>
Builder <span className="text-amber-300">Early Access</span>
</h1>
<p className="mt-2 text-sm text-zinc-400 max-w-xl">
Explore components from trusted brands, choose one part per
@@ -1317,10 +1317,7 @@ export default function GunbuilderPage() {
</>
) : hasParts ? (
<Link
href={{
pathname: `/parts/p/${platform}/${category.id}`,
query: platform ? { platform } : {},
}}
href={`/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(category.id)}`}
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"
>
<svg
app/(app)/(builder)/parts/[partRole]/page.tsx
+16
View File
@@ -0,0 +1,16 @@
import PartsBrowseClient from "@/components/parts/PartsBrowseClient";
export default async function PartsBrowsePage({
params,
}: {
params: Promise<{ partRole: string }>;
}) {
const { partRole } = await params;
return (
<PartsBrowseClient
partRole={decodeURIComponent(partRole)}
platform={null} // let client read ?platform=... or default
/>
);
}
app/(builder)/parts/[partRole]/[productSlug]/page.tsx → app/(app)/(builder)/parts/__DELETE[partRole]/[productSlug]/page.tsx
+1 -1
View File
@@ -204,7 +204,7 @@ export default function ProductDetailsPage() {
href={{ pathname: "/builder", query: platform ? { platform } : {} }}
className="hover:text-zinc-300"
>
The Armory
The Builder
</Link>
<span className="text-zinc-700">/</span>
<Link
app/(builder)/parts/[partRole]/_old_prod_details/data.ts → app/(app)/(builder)/parts/__DELETE[partRole]/_old_prod_details/data.ts
View File
app/(builder)/parts/[partRole]/_old_prod_details/page.tsx → app/(app)/(builder)/parts/__DELETE[partRole]/_old_prod_details/page.tsx
+1 -1
View File
@@ -370,7 +370,7 @@ export default function CategoryPage() {
href={{ pathname: "/builder", query: platform ? { platform } : {} }}
className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
>
← Back to The Armory
← Back to the Builder
</Link>
<div className="flex items-start justify-between gap-4">
<div>
app/(builder)/parts/[partRole]/page.tsx → app/(app)/(builder)/parts/__DELETE[partRole]/page.tsx
View File
app/(builder)/parts/_components/buildDetailHref.ts → app/(app)/(builder)/parts/_components/buildDetailHref.ts
View File
app/(builder)/parts/p/[platform]/[partRole]/[productSlug]/page.tsx → app/(app)/(builder)/parts/p/[platform]/[partRole]/[productSlug]/page.tsx
View File
app/(builder)/parts/p/[platform]/[partRole]/page.tsx → app/(app)/(builder)/parts/p/[platform]/[partRole]/page.tsx
View File
app/(builder)/layout.tsx → app/(app)/layout.tsx
View File
app/vault/[uuid]/edit/page.tsx → app/(app)/vault/[uuid]/edit/page.tsx
+54 -45
View File
@@ -17,6 +17,7 @@ type BuildDto = {
slot: string;
productId: number;
productName?: string | null;
productBrand?: string | null;
bestPrice?: number | string | null; // backend may serialize BigDecimal as string
}>;
photos?: BuildPhotoDto[];
@@ -68,7 +69,7 @@ export default function VaultBuildEditPage() {
return () => {
previews.forEach((p) => URL.revokeObjectURL(p.url));
};
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const authed = !!token;
@@ -311,54 +312,62 @@ export default function VaultBuildEditPage() {
{!build.items?.length ? (
<div className="text-sm opacity-70">No parts saved yet.</div>
) : (
<div className="space-y-4">
{Object.entries(
build.items.reduce<Record<string, typeof build.items>>(
(acc, it) => {
(acc[it.slot] ||= []).push(it);
return acc;
},
{}
)
).map(([slot, items]) => (
<div key={slot}>
<div className="mb-2 text-xs font-semibold uppercase tracking-wider text-zinc-400">
{slot}
</div>
<div className="overflow-hidden rounded-lg border border-white/10 bg-black/20">
{/* header */}
<div className="grid grid-cols-12 gap-3 border-b border-white/10 px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
<div className="col-span-5">Product</div>
<div className="col-span-4">Component (Role)</div>
<div className="col-span-2">Brand</div>
<div className="col-span-1 text-right">Price</div>
</div>
<div className="rounded-lg border border-white/10 bg-black/20">
{items.map((it, idx) => (
<div
key={`${it.slot}-${it.productId}-${idx}`}
className="flex items-center justify-between gap-4 px-3 py-2 text-sm border-b border-white/5 last:border-b-0"
>
<div className="min-w-0">
<div className="truncate text-zinc-100">
{it.productName ?? `Product #${it.productId}`}
</div>
<div className="text-xs text-zinc-400">
ID:{" "}
<span className="font-mono">{it.productId}</span>
</div>
{/* rows */}
{build.items
.slice()
.sort((a, b) => a.slot.localeCompare(b.slot))
.map((it, idx) => {
const price =
typeof it.bestPrice === "number"
? it.bestPrice
: it.bestPrice
? Number(it.bestPrice)
: null;
return (
<div
key={`${it.slot}-${it.productId}-${idx}`}
className="grid grid-cols-12 gap-2 border-b border-white/5 px-3 py-2 text-sm last:border-b-0"
>
{/* Product */}
<div className="col-span-5 min-w-0">
<div className="truncate text-zinc-100">
{it.productName ?? `Product #${it.productId}`}
</div>
<div className="shrink-0 text-right">
<div className="font-semibold">
{typeof it.bestPrice === "number"
? `$${it.bestPrice.toFixed(2)}`
: it.bestPrice
? `$${Number(it.bestPrice).toFixed(2)}`
: "—"}
</div>
<div className="text-[11px] text-zinc-500">
Best price
</div>
<div className="text-xs text-zinc-500">
ID:{" "}
<span className="font-mono">{it.productId}</span>
</div>
</div>
))}
</div>
</div>
))}
{/* Component (Role) */}
<div className="col-span-4 truncate text-zinc-200">
{it.slot}
</div>
{/* Brand */}
<div className="col-span-2 truncate text-zinc-300">
{it.productBrand ?? "—"}
</div>
{/* Price */}
<div className="col-span-1 text-right font-semibold text-zinc-100">
{price != null && !Number.isNaN(price)
? `$${price.toFixed(2)}`
: "—"}
</div>
</div>
);
})}
</div>
)}
</div>
app/vault/page.tsx → app/(app)/vault/page.tsx
View File
app/login/page.tsx
+1 -1
View File
@@ -91,7 +91,7 @@ export default function LoginPage() {
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto flex max-w-md flex-col px-4 py-10">
<h1 className="text-2xl font-semibold tracking-tight">
Log In to <span className="text-amber-300">The Armory</span>
Log In to <span className="text-amber-300">The Builder</span>
</h1>
<p className="mt-2 text-sm text-zinc-400">
Use your beta credentials to get back to your saved builds.
components/Banner.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export function Banner() {
Early Access Beta
</span>
<span className="hidden text-amber-100/90 md:inline">
You&apos;re using an early-access prototype of The Armory. Data,
You&apos;re using an early-access prototype of the Builder. Data,
pricing, and available parts are still evolving.
</span>
</div>
components/BuilderNav.tsx
+10 -3
View File
@@ -57,6 +57,8 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
const renderDropdown = (label: string, items: Category[]) => {
if (!items.length) return null;
const platform = searchParams.get("platform");
return (
<div className="relative group">
{/* Dropdown trigger */}
@@ -80,7 +82,10 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
return (
<li key={cat.id}>
<Link
href={`${baseHref}/${cat.id}`}
href={{
pathname: `${baseHref}/${cat.id}`,
query: platform ? { platform } : {},
}}
className={`block w-full px-3 py-1.5 transition-colors ${
isActive
? "bg-neutral-800 text-white"
@@ -162,7 +167,9 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
{/* "Viewing" indicator (only shows when a category is active) */}
{currentCategory && (
<div className="flex items-center gap-2 text-neutral-400 text-xs">
<span className="uppercase tracking-wide text-[10px]">Viewing</span>
<span className="uppercase tracking-wide text-[10px]">
Viewing
</span>
<span className="font-medium text-neutral-100">
{CATEGORIES.find((c) => c.id === currentCategory)?.name ??
@@ -188,4 +195,4 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
);
}
export default BuilderNav;
export default BuilderNav;
components/PricingHistoryGraph.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
"use client";
import type { PriceHistoryPoint } from "@/app/(builder)/parts/[partRole]/_old_prod_details/data";
import type { PriceHistoryPoint } from "@/app/(app)/(builder)/parts/__DELETE[partRole]/_old_prod_details/data";
interface PricingHistoryGraphProps {
data: PriceHistoryPoint[];
components/RetailersList.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
"use client";
import type { RetailerOffer } from "@/app/(builder)/parts/[partRole]/_old_prod_details/data";
import type { RetailerOffer } from "@/app/(app)/(builder)/parts/__DELETE[partRole]/_old_prod_details/data";
interface RetailersListProps {
retailers: RetailerOffer[];
components/parts/PartsBrowseClient.tsx
+151 -187
View File
@@ -1,8 +1,3 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
/**
* PartsBrowseClient
* -----------------------------------------------------------------------------
@@ -13,8 +8,11 @@ import { usePathname } from "next/navigation";
* - layout + list/card views
*/
"use client";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import Filters from "@/components/parts/Filters";
import SortBar from "@/components/parts/SortBar";
@@ -23,10 +21,7 @@ import Pagination from "@/components/parts/Pagination";
import PlatformSwitcher from "@/components/parts/PlatformSwitcher";
import type { CategoryId } from "@/types/gunbuilder";
import {
PART_ROLE_TO_CATEGORY,
normalizePartRole,
} from "@/lib/catalogMappings";
import { PART_ROLE_TO_CATEGORY, normalizePartRole } from "@/lib/catalogMappings";
type ViewMode = "card" | "list";
type SortOption = "relevance" | "price-asc" | "price-desc" | "brand-asc";
@@ -49,7 +44,7 @@ type UiPart = {
brand: string;
platform: string;
partRole: string;
price: number; // normalized
price: number;
imageUrl?: string;
buyUrl?: string;
inStock?: boolean;
@@ -57,6 +52,7 @@ type UiPart = {
const API_BASE_URL =
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
const PAGE_SIZE = 24;
function normalizeId(id: string | number) {
@@ -92,8 +88,13 @@ export default function PartsBrowseClient(props: {
const searchParams = useSearchParams();
const pathname = usePathname();
// ✅ Builder-mode = /parts/p/... (detail routes)
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 partRole = props.partRole;
const [viewMode, setViewMode] = useState<ViewMode>("list");
@@ -103,7 +104,7 @@ export default function PartsBrowseClient(props: {
const [brandFilter, setBrandFilter] = useState<string[]>([]);
const [sortBy, setSortBy] = useState<SortOption>("relevance");
const [searchQuery, setSearchQuery] = useState<string>("");
const [searchQuery, setSearchQuery] = useState("");
const [priceRange, setPriceRange] = useState<{
min: number | null;
max: number | null;
@@ -114,6 +115,9 @@ export default function PartsBrowseClient(props: {
const [inStockOnly, setInStockOnly] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
// ----------------------------
// Fetch parts
// ----------------------------
useEffect(() => {
if (!partRole) return;
@@ -128,26 +132,28 @@ export default function PartsBrowseClient(props: {
search.set("platform", effectivePlatform);
search.append("partRoles", partRole);
const url = `${API_BASE_URL}/api/v1/products?${search.toString()}`;
const res = await fetch(url, { signal: controller.signal });
const res = await fetch(
`${API_BASE_URL}/api/v1/products?${search.toString()}`,
{ signal: controller.signal }
);
if (!res.ok) throw new Error(`Failed to load products (${res.status})`);
const data: GunbuilderProductFromApi[] = await res.json();
const normalized: UiPart[] = data.map((p) => ({
id: normalizeId(p.id),
name: p.name,
brand: p.brand,
platform: p.platform,
partRole: p.partRole,
price: p.price ?? 0,
imageUrl: p.mainImageUrl ?? undefined,
buyUrl: p.buyUrl ?? undefined,
inStock: p.inStock ?? true,
}));
setParts(normalized);
setParts(
data.map((p) => ({
id: normalizeId(p.id),
name: p.name,
brand: p.brand,
platform: p.platform,
partRole: p.partRole,
price: p.price ?? 0,
imageUrl: p.mainImageUrl ?? undefined,
buyUrl: p.buyUrl ?? undefined,
inStock: p.inStock ?? true,
}))
);
} catch (err: any) {
if (err?.name === "AbortError") return;
setError(err?.message ?? "Failed to load products");
@@ -160,6 +166,7 @@ export default function PartsBrowseClient(props: {
return () => controller.abort();
}, [partRole, effectivePlatform]);
// Reset pagination on filters
useEffect(() => {
setCurrentPage(1);
}, [
@@ -172,11 +179,14 @@ export default function PartsBrowseClient(props: {
inStockOnly,
]);
// Reset scroll on route change
useEffect(() => {
// Reset scroll position whenever we land on or change parts routes
window.scrollTo({ top: 0, left: 0, behavior: "auto" });
window.scrollTo({ top: 0, behavior: "auto" });
}, [pathname]);
// ----------------------------
// Derived values
// ----------------------------
const availableBrands = useMemo(
() =>
Array.from(new Set(parts.map((p) => p.brand)))
@@ -186,34 +196,27 @@ export default function PartsBrowseClient(props: {
);
const priceBounds = useMemo(() => {
if (parts.length === 0)
return { min: null as number | null, max: null as number | null };
let min = Number.POSITIVE_INFINITY;
let max = Number.NEGATIVE_INFINITY;
for (const p of parts) {
const price = p.price ?? 0;
if (price < min) min = price;
if (price > max) max = price;
}
if (!Number.isFinite(min) || !Number.isFinite(max)) {
return { min: null as number | null, max: null as number | null };
}
return { min, max };
if (!parts.length) return { min: null as number | null, max: null as number | null };
return {
min: Math.min(...parts.map((p) => p.price)),
max: Math.max(...parts.map((p) => p.price)),
};
}, [parts]);
// Keep priceRange clamped to bounds when bounds change
useEffect(() => {
if (priceBounds.min == null || priceBounds.max == null) return;
const minBound = priceBounds.min;
const maxBound = priceBounds.max;
if (minBound == null || maxBound == null) return;
setPriceRange((prev) => {
const min = prev.min ?? priceBounds.min!;
const max = prev.max ?? priceBounds.max!;
const nextMin = prev.min == null ? minBound : Math.max(minBound, prev.min);
const nextMax = prev.max == null ? maxBound : Math.min(maxBound, prev.max);
// Ensure min never exceeds max (in case user typed weird values)
return {
min: Math.max(priceBounds.min!, Math.min(min, priceBounds.max!)),
max: Math.min(priceBounds.max!, Math.max(max, priceBounds.min!)),
min: Math.min(nextMin, nextMax),
max: Math.max(nextMin, nextMax),
};
});
}, [priceBounds.min, priceBounds.max]);
@@ -221,30 +224,24 @@ export default function PartsBrowseClient(props: {
const filteredParts = useMemo(() => {
let result = [...parts];
const effectiveMin = priceRange.min ?? priceBounds.min;
const effectiveMax = priceRange.max ?? priceBounds.max;
if (effectiveMin != null && effectiveMax != null) {
result = result.filter(
(p) => p.price >= effectiveMin && p.price <= effectiveMax
);
}
if (priceRange.min != null)
result = result.filter((p) => p.price >= priceRange.min!);
if (priceRange.max != null)
result = result.filter((p) => p.price <= priceRange.max!);
if (brandFilter.length > 0) {
if (brandFilter.length)
result = result.filter((p) => brandFilter.includes(p.brand));
}
if (inStockOnly) {
if (inStockOnly)
result = result.filter((p) => p.inStock ?? true);
}
const q = searchQuery.trim().toLowerCase();
if (q) {
result = result.filter((p) => {
const name = (p.name ?? "").toLowerCase();
const brand = (p.brand ?? "").toLowerCase();
return name.includes(q) || brand.includes(q);
});
}
const q = searchQuery.toLowerCase().trim();
if (q)
result = result.filter(
(p) =>
p.name.toLowerCase().includes(q) ||
p.brand.toLowerCase().includes(q)
);
switch (sortBy) {
case "price-asc":
@@ -262,47 +259,25 @@ export default function PartsBrowseClient(props: {
}
return result;
}, [
parts,
brandFilter,
sortBy,
searchQuery,
priceRange,
priceBounds.min,
priceBounds.max,
inStockOnly,
]);
}, [parts, brandFilter, sortBy, searchQuery, priceRange, inStockOnly]);
const totalPages = useMemo(
() =>
filteredParts.length === 0
? 1
: Math.ceil(filteredParts.length / PAGE_SIZE),
[filteredParts.length]
const totalPages = Math.max(1, Math.ceil(filteredParts.length / PAGE_SIZE));
const paginatedParts = filteredParts.slice(
(currentPage - 1) * PAGE_SIZE,
currentPage * PAGE_SIZE
);
const paginatedParts = useMemo(() => {
if (filteredParts.length === 0) return [];
const startIndex = (currentPage - 1) * PAGE_SIZE;
return filteredParts.slice(startIndex, startIndex + PAGE_SIZE);
}, [filteredParts, currentPage]);
const visibleRange = useMemo(() => {
if (filteredParts.length === 0) return { start: 0, end: 0 };
const start = (currentPage - 1) * PAGE_SIZE + 1;
const end = Math.min(
start + paginatedParts.length - 1,
filteredParts.length
);
return { start, end };
}, [filteredParts.length, currentPage, paginatedParts.length]);
const visibleRange = {
start: filteredParts.length ? (currentPage - 1) * PAGE_SIZE + 1 : 0,
end: Math.min(currentPage * PAGE_SIZE, filteredParts.length),
};
const headingTitle = props.title ?? `${partRole.replaceAll("-", " ")} parts`;
const headingSubtitle =
props.subtitle ??
"Browse available parts pulled from your Ballistic backend.";
const headingSubtitle = props.subtitle ?? "Browse available parts.";
// ✅ Add-to-build handler: deep-links into builder’s existing ?select= logic
// ----------------------------
// Add → Builder handoff
// ----------------------------
const handleAddToBuild = (p: UiPart) => {
const normalizedRole = normalizePartRole(partRole);
const categoryId: CategoryId | null =
@@ -327,22 +302,22 @@ export default function PartsBrowseClient(props: {
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
<header className="mb-6">
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
Battl Builders
</p>
<header className="mb-6 flex justify-between gap-4">
<div>
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
Battl Builders
</p>
<h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
{headingTitle}{" "}
<span className="text-amber-300">{effectivePlatform}</span>
</h1>
<h1 className="mt-1 text-2xl md:text-3xl font-semibold">
{headingTitle}{" "}
<span className="text-amber-300">{effectivePlatform}</span>
</h1>
<p className="mt-2 text-sm text-zinc-400 max-w-xl">
{headingSubtitle}
</p>
<p className="mt-2 text-sm text-zinc-400 max-w-xl">
{headingSubtitle}
</p>
{!isBuilderMode && (
<div className="mt-3">
<PlatformSwitcher
currentPlatform={effectivePlatform}
@@ -350,57 +325,53 @@ export default function PartsBrowseClient(props: {
preserveQuery
/>
</div>
</div>
{!loading && !error && (
<div className="flex items-center gap-2">
<Link
href={{
pathname: "/builder",
query: effectivePlatform
? { platform: effectivePlatform }
: {},
}}
className="rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-2 text-xs font-semibold text-zinc-200 hover:bg-zinc-800"
>
← Back to Build
</Link>
{parts.length > 0 && (
<div className="flex gap-2 border border-zinc-800 rounded-md p-1 bg-zinc-950/60">
<button
type="button"
onClick={() => setViewMode("card")}
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
viewMode === "card"
? "bg-zinc-800 text-zinc-50"
: "text-zinc-400 hover:text-zinc-300"
}`}
>
Card
</button>
<button
type="button"
onClick={() => setViewMode("list")}
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
viewMode === "list"
? "bg-zinc-800 text-zinc-50"
: "text-zinc-400 hover:text-zinc-300"
}`}
>
List
</button>
</div>
)}
</div>
)}
</div>
{isBuilderMode && (
<div className="flex items-center gap-2">
<Link
href={`/builder?platform=${encodeURIComponent(effectivePlatform)}`}
className="rounded-md border border-zinc-700 bg-zinc-900/70 px-3 py-2 text-xs font-semibold hover:bg-zinc-800"
>
← Back to Build
</Link>
{/* Optional: view toggle in builder-mode too */}
{parts.length > 0 && (
<div className="flex gap-2 border border-zinc-800 rounded-md p-1 bg-zinc-950/60">
<button
type="button"
onClick={() => setViewMode("card")}
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
viewMode === "card"
? "bg-zinc-800 text-zinc-50"
: "text-zinc-400 hover:text-zinc-300"
}`}
>
Card
</button>
<button
type="button"
onClick={() => setViewMode("list")}
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
viewMode === "list"
? "bg-zinc-800 text-zinc-50"
: "text-zinc-400 hover:text-zinc-300"
}`}
>
List
</button>
</div>
)}
</div>
)}
</header>
<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">
{!loading && !error && parts.length > 0 && (
<aside className="w-full md:w-64 shrink-0">
<section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4">
<div className="flex flex-col md:flex-row gap-4">
{parts.length > 0 && (
<aside className="w-full md:w-64">
<Filters
partRoleLabel={partRole}
availableBrands={availableBrands}
@@ -416,7 +387,7 @@ export default function PartsBrowseClient(props: {
)}
<div className="flex-1">
{!loading && !error && parts.length > 0 && (
{!loading && !error && (
<SortBar
visibleRange={visibleRange}
totalCount={filteredParts.length}
@@ -428,13 +399,9 @@ export default function PartsBrowseClient(props: {
)}
{loading ? (
<p className="py-8 text-center text-sm text-zinc-500">
Loading…
</p>
<p className="py-8 text-center text-sm text-zinc-500">Loading…</p>
) : error ? (
<p className="py-8 text-center text-sm text-red-400">
{error} — check that the Ballistic API is running.
</p>
<p className="py-8 text-center text-sm text-red-400">{error}</p>
) : filteredParts.length === 0 ? (
<p className="py-8 text-center text-sm text-zinc-500">
No parts found for this role yet.
@@ -451,23 +418,20 @@ export default function PartsBrowseClient(props: {
/>
)}
{!loading &&
!error &&
filteredParts.length > 0 &&
totalPages > 1 && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPrev={() => setCurrentPage((p) => Math.max(1, p - 1))}
onNext={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
/>
)}
{totalPages > 1 && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPrev={() => setCurrentPage((p) => Math.max(1, p - 1))}
onNext={() =>
setCurrentPage((p) => Math.min(totalPages, p + 1))
}
/>
)}
</div>
</div>
</section>
</div>
</main>
);
}
}
components/parts/PlatformSwitcher.tsx
+12 -20
View File
@@ -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>
);
}
components/parts/ProductDetailPageClient.tsx
+3 -2
View File
@@ -122,11 +122,12 @@ export default function ProductDetailPageClient(props: {
</h1>
</div>
<PlatformSwitcher currentPlatform={platform} partRole={partRole} />
{/* temp disabling while I rework the routing. */}
{/* <PlatformSwitcher currentPlatform={platform} partRole={partRole} /> */}
</div>
<div className="flex items-center gap-2 text-xs text-zinc-500">
<Link className="hover:text-amber-200" href={`/parts/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}`}>
<Link className="hover:text-amber-200" href={`/parts/p/${encodeURIComponent(platform)}/${encodeURIComponent(partRole)}`}>
← Back to list
</Link>
<span>•</span>