new pages for user buils (vault), edit saved builds, and the community build page.
This commit is contained in:
+118
-38
@@ -8,8 +8,8 @@ import { useRouter } from "next/navigation";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
|
||||
type BuildDto = {
|
||||
id: string;
|
||||
uuid: string; // UUID string
|
||||
id: string; // internal numeric id (not used by UI)
|
||||
uuid: string; // public identifier
|
||||
title: string;
|
||||
description?: string | null;
|
||||
isPublic?: boolean | null;
|
||||
@@ -20,6 +20,12 @@ type BuildDto = {
|
||||
const API_BASE_URL =
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8080";
|
||||
|
||||
// UUID validator (defensive)
|
||||
const isUuid = (v: string) =>
|
||||
/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
|
||||
v
|
||||
);
|
||||
|
||||
function fmt(d?: string | null) {
|
||||
if (!d) return "—";
|
||||
const dt = new Date(d);
|
||||
@@ -37,6 +43,7 @@ export default function VaultPage() {
|
||||
|
||||
const authed = !!user;
|
||||
|
||||
// Redirect if not logged in
|
||||
useEffect(() => {
|
||||
if (!loading && !authed) {
|
||||
router.replace("/login");
|
||||
@@ -45,6 +52,7 @@ export default function VaultPage() {
|
||||
|
||||
const headers = useMemo(() => getAuthHeaders(), [getAuthHeaders]);
|
||||
|
||||
// Fetch user builds
|
||||
useEffect(() => {
|
||||
if (loading || !authed) return;
|
||||
|
||||
@@ -55,9 +63,10 @@ export default function VaultPage() {
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE_URL}/api/v1/products/me/builds`, {
|
||||
const res = await fetch(`${API_BASE_URL}/api/v1/builds/me`, {
|
||||
method: "GET",
|
||||
headers,
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
@@ -87,16 +96,18 @@ export default function VaultPage() {
|
||||
);
|
||||
}
|
||||
|
||||
// If not authed, we already redirected; render nothing.
|
||||
// Already redirected
|
||||
if (!authed) return null;
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-4 py-6">
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Vault</h1>
|
||||
<p className="text-sm opacity-70">
|
||||
Your saved builds. Load one into the builder or publish it later.
|
||||
Your saved builds. Open one to keep tweaking parts, or add details
|
||||
to submit it to the community.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -107,21 +118,20 @@ export default function VaultPage() {
|
||||
>
|
||||
New Build
|
||||
</Link>
|
||||
<Link
|
||||
href="/account"
|
||||
className="text-sm opacity-80 hover:underline"
|
||||
>
|
||||
<Link href="/account" className="text-sm opacity-80 hover:underline">
|
||||
Account →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
{/* Error */}
|
||||
{error && (
|
||||
<div className="mb-4 rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
)}
|
||||
|
||||
{/* Builds list */}
|
||||
<div className="rounded-xl border border-white/10 bg-white/5">
|
||||
<div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
|
||||
<div className="text-sm font-medium">My Builds</div>
|
||||
@@ -132,39 +142,109 @@ export default function VaultPage() {
|
||||
|
||||
{builds.length === 0 ? (
|
||||
<div className="p-4 text-sm opacity-70">
|
||||
No builds yet. Create one in the builder and hit “Save to Vault”.
|
||||
No builds yet. Create one in the builder and hit “Save Build”.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-white/10">
|
||||
{builds.map((b) => (
|
||||
<li key={b.uuid} className="p-4 flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium truncate">{b.title}</div>
|
||||
<div className="mt-1 text-xs opacity-70">
|
||||
Updated: {fmt(b.updatedAt)} • UUID:{" "}
|
||||
<span className="font-mono">{b.uuid}</span>
|
||||
</div>
|
||||
{b.description ? (
|
||||
<div className="mt-2 text-sm opacity-80 line-clamp-2">
|
||||
{b.description}
|
||||
{builds.map((b) => {
|
||||
const valid = !!b?.uuid && isUuid(String(b.uuid));
|
||||
const published = Boolean(b.isPublic);
|
||||
|
||||
const openHref = valid
|
||||
? `/builder?load=${encodeURIComponent(b.uuid)}`
|
||||
: "#";
|
||||
|
||||
const detailsHref = valid
|
||||
? `/vault/${encodeURIComponent(b.uuid)}/edit`
|
||||
: "#";
|
||||
|
||||
return (
|
||||
<li
|
||||
key={b.uuid}
|
||||
className="p-4 flex items-start justify-between gap-4"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="font-medium truncate">{b.title}</div>
|
||||
|
||||
{/* Status chip */}
|
||||
<span
|
||||
className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] ${
|
||||
published
|
||||
? "border-emerald-500/30 bg-emerald-500/10 text-emerald-200"
|
||||
: "border-white/10 bg-white/5 text-white/70"
|
||||
}`}
|
||||
title={
|
||||
published
|
||||
? "This build is public (community-visible)."
|
||||
: "Draft (only visible in your Vault)."
|
||||
}
|
||||
>
|
||||
{published ? "Published" : "Draft"}
|
||||
</span>
|
||||
|
||||
{!valid && (
|
||||
<span
|
||||
className="shrink-0 rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] text-red-200"
|
||||
title="This build record has an invalid UUID. The backend returned a bad identifier."
|
||||
>
|
||||
Invalid UUID
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
{/* Placeholder: wire this to "load into builder" next */}
|
||||
<Link
|
||||
href={`/builder?load=${b.uuid}`}
|
||||
<div className="mt-1 text-xs opacity-70">
|
||||
Updated: {fmt(b.updatedAt)} • UUID:{" "}
|
||||
<span className="font-mono">{b.uuid}</span>
|
||||
</div>
|
||||
|
||||
// future href to support platform
|
||||
// href={`/builder?platform=${encodeURIComponent(platform)}&load=${b.uuid}`}
|
||||
className="rounded-md border border-white/10 bg-white/5 px-3 py-1.5 text-xs hover:bg-white/10"
|
||||
>
|
||||
Open
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{b.description && (
|
||||
<div className="mt-2 text-sm opacity-80 line-clamp-2">
|
||||
{b.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<Link
|
||||
href={openHref}
|
||||
aria-disabled={!valid}
|
||||
tabIndex={!valid ? -1 : 0}
|
||||
className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
valid
|
||||
? "border-white/10 bg-white/5 hover:bg-white/10"
|
||||
: "border-white/10 bg-white/5 opacity-40 pointer-events-none"
|
||||
}`}
|
||||
title={
|
||||
valid
|
||||
? "Load this build into the builder"
|
||||
: "Invalid build id"
|
||||
}
|
||||
>
|
||||
Open
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={detailsHref}
|
||||
aria-disabled={!valid}
|
||||
tabIndex={!valid ? -1 : 0}
|
||||
className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
valid
|
||||
? "border-white/10 bg-white/5 hover:bg-white/10"
|
||||
: "border-white/10 bg-white/5 opacity-40 pointer-events-none"
|
||||
}`}
|
||||
title={
|
||||
valid
|
||||
? "Add details + submit/publish later"
|
||||
: "Invalid build id"
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user