feat(navigation): complete menu and nested item management

2026-02-12 22:54:43 +01:00
parent 987843d96b
commit 473433b220
5 changed files with 139 additions and 11 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -138,7 +138,7 @@ This file is the single source of truth for roadmap and delivery progress.

 - [~] [P1] Page management (create/edit/publish/unpublish/schedule)
 - [x] [P1] Page builder with reusable content blocks (hero, rich text, gallery, CTA, forms, price cards)
- [~] [P1] Navigation management (menus, nested items, order, visibility)
+- [x] [P1] Navigation management (menus, nested items, order, visibility)
 - [~] [P1] Media library (upload, browse, replace, delete) with media-type classification (artwork, banner, promo, generic, video/gif)
 - [x] [P1] Media enrichment metadata (alt text, copyright, author, source, tags, licensing, usage context)
 - [x] [P1] Portfolio grouping primitives (galleries, albums, categories, tags) with ordering/visibility controls
@@ -366,6 +366,7 @@ This file is the single source of truth for roadmap and delivery progress.
 - [2026-02-12] Artwork rendition management completed: admin `/portfolio` supports `thumbnail/card/full/retina/custom` slot assignment with dimensions and primary flag, plus per-artwork rendition listing and delete controls.
 - [2026-02-12] Media type presets baseline completed in upload API: server-side validation now uses shared per-type rules (mime + max size) for `artwork/banner/promotion/video/gif/generic`, with optional env cap override via `CMS_MEDIA_UPLOAD_MAX_BYTES`.
 - [2026-02-12] Page builder reusable blocks completed: admin block editor now supports full field editing + ordering controls for hero/rich-text/gallery/cta/form/price-cards; public renderer includes form-link behavior for `contact`/`commission` keys.
+- [2026-02-12] Navigation management completed: admin `/navigation` now supports menu update/delete controls, nested item parent selection via menu-local dropdown, and full order/visibility updates across menus and items.
 - [2026-02-12] Public UX pass: commission request flow now reports explicit invalid budget range errors, and header navigation now falls back to localized defaults (`home`, `portfolio`, `news`, `commissions`) when no CMS menu exists; seed data now creates those default menu entries.
 - [2026-02-12] Added `e2e/public-rendering.pw.ts` web coverage for fallback navigation visibility, portfolio routes, and commission submission validation (invalid budget range + successful submission path).
 - [2026-02-12] Testing execution is temporarily paused for delivery velocity: root test scripts are stubbed and CI test steps are disabled; all testing backlog is consolidated under `MVP 3: Testing and Quality`.
--- a/apps/admin/src/app/navigation/page.tsx
+++ b/apps/admin/src/app/navigation/page.tsx
@@ -2,9 +2,11 @@ import {
  createNavigationItem,
  createNavigationMenu,
  deleteNavigationItem,
+  deleteNavigationMenu,
  listNavigationMenus,
  listPages,
  updateNavigationItem,
+  updateNavigationMenu,
  upsertNavigationItemTranslation,
 } from "@cms/db"
 import { Button } from "@cms/ui/button"
@@ -131,6 +133,50 @@ async function createItemAction(formData: FormData) {
  redirectWithState({ notice: "Navigation item created." })
 }

+async function updateMenuAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/navigation",
+    permission: "navigation:write",
+    scope: "team",
+  })
+
+  try {
+    await updateNavigationMenu({
+      id: readInputString(formData, "id"),
+      name: readInputString(formData, "name"),
+      slug: readInputString(formData, "slug"),
+      location: readInputString(formData, "location"),
+      isVisible: readInputString(formData, "isVisible") === "true",
+    })
+  } catch {
+    redirectWithState({ error: "Failed to update navigation menu." })
+  }
+
+  revalidatePath("/navigation")
+  redirectWithState({ notice: "Navigation menu updated." })
+}
+
+async function deleteMenuAction(formData: FormData) {
+  "use server"
+
+  await requirePermissionForRoute({
+    nextPath: "/navigation",
+    permission: "navigation:write",
+    scope: "team",
+  })
+
+  try {
+    await deleteNavigationMenu(readInputString(formData, "id"))
+  } catch {
+    redirectWithState({ error: "Failed to delete navigation menu." })
+  }
+
+  revalidatePath("/navigation")
+  redirectWithState({ notice: "Navigation menu deleted." })
+}
+
 async function updateItemAction(formData: FormData) {
  "use server"

@@ -279,14 +325,58 @@ export default async function NavigationManagementPage({
        ) : (
          menus.map((menu) => (
            <article key={menu.id} className="rounded-xl border border-neutral-200 p-6">
-              <div className="flex flex-wrap items-center justify-between gap-2">
-                <h3 className="text-lg font-medium">
-                  {menu.name} <span className="text-sm text-neutral-500">({menu.location})</span>
-                </h3>
-                <span className="text-xs text-neutral-500">
-                  {menu.isVisible ? "visible" : "hidden"}
-                </span>
-              </div>
+              <form action={updateMenuAction} className="rounded border border-neutral-200 p-3">
+                <input type="hidden" name="id" value={menu.id} />
+                <div className="grid gap-3 md:grid-cols-4">
+                  <label className="space-y-1">
+                    <span className="text-xs text-neutral-600">Menu name</span>
+                    <input
+                      name="name"
+                      defaultValue={menu.name}
+                      className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                    />
+                  </label>
+                  <label className="space-y-1">
+                    <span className="text-xs text-neutral-600">Slug</span>
+                    <input
+                      name="slug"
+                      defaultValue={menu.slug}
+                      className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                    />
+                  </label>
+                  <label className="space-y-1">
+                    <span className="text-xs text-neutral-600">Location</span>
+                    <input
+                      name="location"
+                      defaultValue={menu.location}
+                      className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                    />
+                  </label>
+                  <label className="space-y-1">
+                    <span className="text-xs text-neutral-600">Visible</span>
+                    <select
+                      name="isVisible"
+                      defaultValue={menu.isVisible ? "true" : "false"}
+                      className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
+                    >
+                      <option value="true">Visible</option>
+                      <option value="false">Hidden</option>
+                    </select>
+                  </label>
+                </div>
+                <div className="mt-3 flex items-center gap-2">
+                  <Button type="submit" size="sm">
+                    Save menu
+                  </Button>
+                  <button
+                    type="submit"
+                    formAction={deleteMenuAction}
+                    className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
+                  >
+                    Delete menu
+                  </button>
+                </div>
+              </form>

              <div className="mt-4 space-y-3">
                {menu.items.length === 0 ? (
@@ -348,11 +438,20 @@ export default async function NavigationManagementPage({
                            </label>
                            <label className="space-y-1">
                              <span className="text-xs text-neutral-600">Parent id</span>
-                              <input
+                              <select
                                name="parentId"
                                defaultValue={item.parentId ?? ""}
                                className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
-                              />
+                              >
+                                <option value="">(none)</option>
+                                {menu.items
+                                  .filter((entry) => entry.id !== item.id)
+                                  .map((entry) => (
+                                    <option key={`${item.id}-parent-${entry.id}`} value={entry.id}>
+                                      {entry.label}
+                                    </option>
+                                  ))}
+                              </select>
                            </label>
                          </div>

--- a/packages/content/src/pages-navigation.ts
+++ b/packages/content/src/pages-navigation.ts
@@ -133,6 +133,14 @@ export const createNavigationMenuInputSchema = z.object({
  isVisible: z.boolean().default(true),
 })

+export const updateNavigationMenuInputSchema = z.object({
+  id: z.string().uuid(),
+  name: z.string().min(1).max(180).optional(),
+  slug: z.string().min(1).max(180).optional(),
+  location: z.string().min(1).max(80).optional(),
+  isVisible: z.boolean().optional(),
+})
+
 export const createNavigationItemInputSchema = z.object({
  menuId: z.string().uuid(),
  label: z.string().min(1).max(180),
@@ -157,6 +165,7 @@ export type CreatePageInput = z.infer<typeof createPageInputSchema>
 export type UpdatePageInput = z.infer<typeof updatePageInputSchema>
 export type UpsertPageTranslationInput = z.infer<typeof upsertPageTranslationInputSchema>
 export type CreateNavigationMenuInput = z.infer<typeof createNavigationMenuInputSchema>
+export type UpdateNavigationMenuInput = z.infer<typeof updateNavigationMenuInputSchema>
 export type CreateNavigationItemInput = z.infer<typeof createNavigationItemInputSchema>
 export type UpdateNavigationItemInput = z.infer<typeof updateNavigationItemInputSchema>
 export type PageBlock = z.infer<typeof pageBlockSchema>
--- a/packages/db/src/index.ts
+++ b/packages/db/src/index.ts
@@ -46,6 +46,7 @@ export {
  createNavigationMenu,
  createPage,
  deleteNavigationItem,
+  deleteNavigationMenu,
  deletePage,
  getPageById,
  getPublishedPageBySlug,
@@ -56,6 +57,7 @@ export {
  listPublicNavigation,
  listPublishedPageSlugs,
  updateNavigationItem,
+  updateNavigationMenu,
  updatePage,
  upsertNavigationItemTranslation,
  upsertPageTranslation,
--- a/packages/db/src/pages-navigation.ts
+++ b/packages/db/src/pages-navigation.ts
@@ -3,6 +3,7 @@ import {
  createNavigationMenuInputSchema,
  createPageInputSchema,
  updateNavigationItemInputSchema,
+  updateNavigationMenuInputSchema,
  updatePageInputSchema,
  upsertPageTranslationInputSchema,
 } from "@cms/content"
@@ -297,6 +298,22 @@ export async function createNavigationMenu(input: unknown) {
  })
 }

+export async function updateNavigationMenu(input: unknown) {
+  const payload = updateNavigationMenuInputSchema.parse(input)
+  const { id, ...data } = payload
+
+  return db.navigationMenu.update({
+    where: { id },
+    data,
+  })
+}
+
+export async function deleteNavigationMenu(id: string) {
+  return db.navigationMenu.delete({
+    where: { id },
+  })
+}
+
 export async function createNavigationItem(input: unknown) {
  const payload = createNavigationItemInputSchema.parse(input)