;
+ onChange: (
+ paramName: string,
+ value: string,
+ error: string | undefined,
+ ) => void;
+}) {
+ // Group adjacent literals so they render as a single chip like "/blogs/".
+ const groups = useMemo(() => groupPattern(pattern), [pattern]);
+ const firstDynamicIndex = useMemo(
+ () => groups.findIndex((g) => g.type !== "literal-run"),
+ [groups],
+ );
+
+ return (
+
+ {groups.map((group, i) => {
+ if (group.type === "literal-run") {
+ return (
+
+ /{group.parts.map((p) => p.name).join("/")}
+ {i < groups.length - 1 ? "/" : ""}
+
+ );
+ }
+
+ const part = group.part;
+ const value = params[part.paramName] || "";
+ const error = errors[part.paramName];
+ const isCatchAll = part.type === "array-param";
+
+ return (
+
+ {
+ const next = e.target.value;
+ const compare = isCatchAll ? next.replace(/\//g, "") : next;
+ const invalid =
+ next.length > 0 && encodeURIComponent(compare) !== compare;
+ onChange(
+ part.paramName,
+ next,
+ invalid ? "Invalid characters" : undefined,
+ );
+ }}
+ />
+ {error && (
+ {error}
+ )}
+
+ );
+ })}
+
+ );
+}
+
+type PatternGroup =
+ | { type: "literal-run"; parts: { name: string }[] }
+ | {
+ type: "dynamic";
+ part: Extract<
+ RoutePattern,
+ { type: "string-param" } | { type: "array-param" }
+ >;
+ };
+
+function groupPattern(pattern: RoutePattern[]): PatternGroup[] {
+ const groups: PatternGroup[] = [];
+ let currentRun: { name: string }[] | null = null;
+ for (const part of pattern) {
+ if (part.type === "literal") {
+ if (!currentRun) {
+ currentRun = [];
+ groups.push({ type: "literal-run", parts: currentRun });
+ }
+ currentRun.push({ name: part.name });
+ } else {
+ currentRun = null;
+ groups.push({ type: "dynamic", part });
+ }
+ }
+ return groups;
+}
+
+function DynamicSegmentPill({
+ part,
+}: {
+ part: Extract<
+ RoutePattern,
+ { type: "string-param" } | { type: "array-param" }
+ >;
+}) {
+ const label =
+ part.type === "array-param" ? `...${part.paramName}` : part.paramName;
+ return (
+
+ [{label}]
+
+ );
+}
+
+function RouteHint({ pattern }: { pattern: RoutePattern[] }) {
+ const hasCatchAll = pattern.some((p) => p.type === "array-param");
+ const dynamicCount = pattern.filter(
+ (p) => p.type === "string-param" || p.type === "array-param",
+ ).length;
+
+ if (hasCatchAll) {
+ return (
+
+ Catch-all segments can contain / for nested paths.
+
+ );
+ }
+ if (dynamicCount > 1) {
+ return (
+
+ Fill in each segment. Slashes will be added automatically.
+
+ );
+ }
+ return (
+
+ Use lowercase letters, numbers, and hyphens.
+
+ );
+}
+
+/**
+ * Native select used for picking the route when multiple are available.
+ * Kept simple — the Radix Select needs a portal container and complicates the
+ * popover. A native select is a reasonable default for the count of routes
+ * a project will typically have.
+ */
+function RouteSelect({
+ routes,
+ value,
+ onChange,
+}: {
+ routes: AvailableRoute[];
+ value: string;
+ onChange: (value: string) => void;
+}) {
+ // Force the selected route to be valid if `routes` changes.
+ useEffect(() => {
+ if (!routes.find((r) => routeKey(r) === value) && routes[0]) {
+ onChange(routeKey(routes[0]));
+ }
+ }, [routes, value, onChange]);
+
+ return (
+
+ );
+}
diff --git a/packages/ui/spa/components/NavMenu/SitemapItem.tsx b/packages/ui/spa/components/NavMenu/SitemapItem.tsx
index 90203a2c2..08f2fb6e7 100644
--- a/packages/ui/spa/components/NavMenu/SitemapItem.tsx
+++ b/packages/ui/spa/components/NavMenu/SitemapItem.tsx
@@ -1,11 +1,7 @@
-import {
- AlertCircle,
- ChevronRight,
- FileText,
- Folder,
- Plus,
-} from "lucide-react";
+import { ChevronRight, Plus } from "lucide-react";
import { useState, useMemo, useRef, useEffect } from "react";
+import { ModuleFilePath } from "@valbuild/core";
+import { RoutePattern } from "@valbuild/shared/internal";
import { cn } from "../designSystem/cn";
import { AnimateHeight } from "../AnimateHeight";
import { SitemapItem as SitemapItemType } from "./types";
@@ -14,8 +10,9 @@ import {
PopoverContent,
PopoverTrigger,
} from "../designSystem/popover";
-import { RoutePattern } from "@valbuild/shared/internal";
-import { Button } from "../designSystem/button";
+import { AvailableRoute, NewPageForm } from "./NewPageForm";
+import { ErrorBadge } from "./ErrorBadge";
+import { totalSitemapErrorCount } from "./errorAggregation";
export type SitemapItemProps = {
item: SitemapItemType;
@@ -25,8 +22,12 @@ export type SitemapItemProps = {
onNavigate?: (sourcePath: string) => void;
/** Called when a new page should be added */
onAddPage?: (moduleFilePath: string, urlPath: string) => void;
- /** Nesting depth for indentation */
+ /** Existing URL paths (for duplicate validation in row-level add). */
+ existingUrls?: string[];
+ /** Nesting depth, used to indent the row */
depth?: number;
+ /** Accumulated URL path from ancestors (e.g. "/blogs"). */
+ parentPath?: string;
/** Container for portal (for popover) */
portalContainer?: HTMLElement | null;
};
@@ -36,7 +37,9 @@ export function SitemapItemNode({
currentPath = "",
onNavigate,
onAddPage,
+ existingUrls,
depth = 0,
+ parentPath = "",
portalContainer,
}: SitemapItemProps) {
const [isOpen, setIsOpen] = useState(true);
@@ -48,21 +51,48 @@ export function SitemapItemNode({
const isNavigable = !!item.sourcePath;
const isActive = item.sourcePath && currentPath.startsWith(item.sourcePath);
const isExactActive = item.sourcePath === currentPath;
- const isFolder = hasChildren && !isNavigable;
- const hasDescendantError = useMemo(() => {
- const check = (items: SitemapItemType[]): boolean =>
- items.some((c) => c.hasError || check(c.children));
- return check(item.children);
- }, [item.children]);
+ // The URL we render in this row. The root entry is just "/"; everything else
+ // is the parent path joined with this item's segment.
+ const displayUrl = useMemo(() => {
+ if (item.name === "/" || item.name === "") return "/";
+ return `${parentPath}/${item.name}`;
+ }, [item.name, parentPath]);
+
+ // The URL prefix from the parent — rendered in muted text so the segment for
+ // this row stands out. For root and top-level items there's no prefix.
+ const prefix = useMemo(() => {
+ if (displayUrl === "/") return "";
+ if (parentPath === "") return "/";
+ return `${parentPath}/`;
+ }, [displayUrl, parentPath]);
- const showErrorDot = item.hasError || (!isOpen && hasDescendantError);
+ const ownSegment = useMemo(() => {
+ if (displayUrl === "/") return "/";
+ return item.name;
+ }, [displayUrl, item.name]);
- // Scroll into view when this item becomes the exact active item
+ // The depth of this row in URL terms (root = 0, /blogs = 1, /blogs/x = 2).
+ // Used to find the next dynamic segment a user could create under this row.
+ const urlDepth = useMemo(() => {
+ if (displayUrl === "/") return 0;
+ return displayUrl.split("/").filter(Boolean).length;
+ }, [displayUrl]);
+
+ const nextDynamicSegment = useMemo(() => {
+ if (!item.canAddChild || !item.routePattern) return null;
+ const part = item.routePattern[urlDepth];
+ if (!part) return null;
+ if (part.type === "string-param" || part.type === "array-param") {
+ return part;
+ }
+ return null;
+ }, [item.canAddChild, item.routePattern, urlDepth]);
+
+ // Scroll the active row into view, slightly delayed so accordion/expand
+ // animations have time to settle.
useEffect(() => {
if (isExactActive && itemRef.current) {
- // Use a small delay to ensure the DOM is fully settled after navigation
- // and any accordion/animation changes have completed
const timeoutId = setTimeout(() => {
itemRef.current?.scrollIntoView({
behavior: "smooth",
@@ -82,109 +112,138 @@ export function SitemapItemNode({
if (item.sourcePath && onNavigate) {
onNavigate(item.sourcePath);
} else if (hasChildren) {
- setIsOpen((isOpen) => !isOpen);
+ setIsOpen((prev) => !prev);
}
};
- const handleAddSubmit = (urlPath: string) => {
- if (item.moduleFilePath && onAddPage) {
- onAddPage(item.moduleFilePath, urlPath);
+ const handleAddSubmit = (moduleFilePath: ModuleFilePath, urlPath: string) => {
+ if (onAddPage) {
+ onAddPage(moduleFilePath, urlPath);
setAddPopoverOpen(false);
}
};
+ // Errors for this row + everything beneath it. The data layer attaches
+ // `errors.ownCount`; the descendant sum is recomputed each render but cached
+ // by item identity (stable across renders from `useNavMenuData`).
+ const ownErrorCount = item.errors?.ownCount ?? 0;
+ const totalErrorCount = useMemo(() => totalSitemapErrorCount(item), [item]);
+
+ const rowRoute: AvailableRoute | null = useMemo(() => {
+ if (!item.canAddChild || !item.moduleFilePath || !item.routePattern) {
+ return null;
+ }
+ return {
+ moduleFilePath: item.moduleFilePath,
+ routePattern: item.routePattern,
+ patternString: routePatternToString(item.routePattern),
+ existingKeys: existingUrls ?? item.existingKeys ?? [],
+ };
+ }, [
+ item.canAddChild,
+ item.moduleFilePath,
+ item.routePattern,
+ item.existingKeys,
+ existingUrls,
+ ]);
+
+ // Indent the row using a fixed left padding scaled by depth.
+ const indent = depth * 12 + 8;
+
return (
setShowActions(true)}
onMouseLeave={() => setShowActions(false)}
>
- {hasChildren && (
+ {hasChildren ? (
+ ) : (
+
)}
+
- {showErrorDot && (
-
+ {totalErrorCount > 0 && (
+
)}
- {item.canAddChild &&
- item.routePattern &&
- (showActions || addPopoverOpen) && (
-
-
-
-
-
+
+
-
- )}
+
+
+
+
+ setAddPopoverOpen(false)}
+ />
+
+
+ )}
{hasChildren && (
@@ -197,7 +256,9 @@ export function SitemapItemNode({
currentPath={currentPath}
onNavigate={onNavigate}
onAddPage={onAddPage}
+ existingUrls={existingUrls}
depth={depth + 1}
+ parentPath={displayUrl === "/" ? "" : displayUrl}
portalContainer={portalContainer}
/>
))}
@@ -208,129 +269,48 @@ export function SitemapItemNode({
);
}
-/**
- * Simplified route form for adding new pages.
- * This can work standalone without providers for Storybook.
- */
-function AddRouteForm({
- routePattern,
- existingKeys,
- onSubmit,
- onCancel,
+function DynamicSegmentPill({
+ part,
}: {
- routePattern: RoutePattern[];
- existingKeys: string[];
- onSubmit: (urlPath: string) => void;
- onCancel: () => void;
+ part: Extract<
+ RoutePattern,
+ { type: "string-param" } | { type: "array-param" }
+ >;
}) {
- const [params, setParams] = useState
>({});
- const [errors, setErrors] = useState>({});
-
- const fullPath = useMemo(() => {
- return (
- "/" +
- routePattern
- .map((part) => {
- if (part.type === "string-param" || part.type === "array-param") {
- return params[part.paramName] || "";
- }
- return part.name;
- })
- .join("/")
- );
- }, [routePattern, params]);
-
- const isComplete = useMemo(() => {
- return routePattern.every((part) => {
- if (part.type === "string-param" || part.type === "array-param") {
- return !!params[part.paramName] && !errors[part.paramName];
- }
- return true;
- });
- }, [routePattern, params, errors]);
-
- const alreadyExists = existingKeys.includes(fullPath);
- const disabled = !isComplete || alreadyExists;
-
+ const label =
+ part.type === "array-param" ? `...${part.paramName}` : part.paramName;
return (
-
+/**
+ * Stringify a parsed route pattern back into a human-readable form like
+ * "/blogs/[blog]". Used as a display label and as part of the route's unique
+ * key.
+ */
+export function routePatternToString(pattern: RoutePattern[]): string {
+ if (pattern.length === 0) return "/";
+ return (
+ "/" +
+ pattern
+ .map((part) => {
+ if (part.type === "literal") return part.name;
+ if (part.type === "string-param") return `[${part.paramName}]`;
+ return `[...${part.paramName}]`;
+ })
+ .join("/")
);
}
diff --git a/packages/ui/spa/components/NavMenu/SitemapSection.tsx b/packages/ui/spa/components/NavMenu/SitemapSection.tsx
index c7a6617e1..d0b3ea657 100644
--- a/packages/ui/spa/components/NavMenu/SitemapSection.tsx
+++ b/packages/ui/spa/components/NavMenu/SitemapSection.tsx
@@ -1,14 +1,23 @@
-import { Globe } from "lucide-react";
+import React, { useMemo, useState } from "react";
+import { Globe, Plus } from "lucide-react";
+import { ModuleFilePath } from "@valbuild/core";
import { cn } from "../designSystem/cn";
import { SitemapItem } from "./types";
-import { SitemapItemNode } from "./SitemapItem";
+import { SitemapItemNode, routePatternToString } from "./SitemapItem";
import {
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../designSystem/accordion";
-import React from "react";
import { ScrollArea, ScrollBar } from "../designSystem/scroll-area";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "../designSystem/popover";
+import { AvailableRoute, NewPageForm } from "./NewPageForm";
+import { ErrorBadge } from "./ErrorBadge";
+import { totalSitemapErrorCount } from "./errorAggregation";
export type SitemapSectionProps = {
/** Sitemap data */
@@ -33,20 +42,93 @@ export function SitemapSection({
maxHeight = "100%",
portalContainer,
}: SitemapSectionProps) {
+ const [newPageOpen, setNewPageOpen] = useState(false);
+
+ // All available routes the user can create pages under, plus the full set of
+ // existing URLs so the form can warn on duplicates regardless of which
+ // route is selected.
+ const { routes, existingUrls } = useMemo(
+ () => collectSitemapRoutes(sitemap),
+ [sitemap],
+ );
+
+ const sectionErrorCount = useMemo(
+ () => totalSitemapErrorCount(sitemap),
+ [sitemap],
+ );
+
+ const handleNewPageSubmit = (
+ moduleFilePath: ModuleFilePath,
+ urlPath: string,
+ ) => {
+ if (onAddPage) {
+ onAddPage(moduleFilePath, urlPath);
+ setNewPageOpen(false);
+ }
+ };
+
return (
-
+
+
+
+ Pages
+ {sectionErrorCount > 0 && (
+
+ )}
+
+
+
+ {routes.length > 0 && (
+
+
+
+
+
+
+ ({
+ ...r,
+ existingKeys: existingUrls,
+ }))}
+ onSubmit={handleNewPageSubmit}
+ onCancel={() => setNewPageOpen(false)}
+ />
+
+
+
-
- Pages
-
-
+
+
{sitemap.sourcePath ? (
@@ -56,6 +138,7 @@ export function SitemapSection({
currentPath={currentPath}
onNavigate={onNavigate}
onAddPage={onAddPage}
+ existingUrls={existingUrls}
portalContainer={portalContainer}
/>
) : (
@@ -67,6 +150,7 @@ export function SitemapSection({
currentPath={currentPath}
onNavigate={onNavigate}
onAddPage={onAddPage}
+ existingUrls={existingUrls}
portalContainer={portalContainer}
/>
))}
@@ -78,3 +162,48 @@ export function SitemapSection({