@prenta/admin 2.6.0 → 2.7.0

package/src/__tests__/layout/sidebar-forms-submenu.render.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { describe, expect, it, vi } from 'vitest'
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 
 // The Forms nav item expands into a submenu: an "All Entries" child plus one
 // child per active form carrying its own unread badge. Mock the sidebar-counts
@@ -30,9 +30,13 @@ describe('Sidebar Forms submenu', () => {
     )
 
     await waitFor(() => expect(screen.getByText('All Entries')).toBeTruthy())
+    // Per-form rows sit one level down and start closed (cms-layouts.js).
+    expect(screen.queryByText('Project Inquiry')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'Expand All Entries' }))
     // Per-form children (the Contact Us label also appears; scope to nav links).
-    expect(screen.getByText('Project Inquiry')).toBeTruthy()
-    // The form with unread submissions shows its own badge.
-    expect(screen.getByLabelText('8 unread')).toBeTruthy()
+    expect(screen.getAllByText('Project Inquiry').length).toBeGreaterThan(0)
+    expect(screen.getByText('SMTP Log')).toBeTruthy()
+    expect(screen.getByText('Form Settings')).toBeTruthy()
+    expect(screen.getAllByLabelText('8 unread').length).toBeGreaterThan(0)
   })
 })

package/src/__tests__/layout/sidebar-groups.render.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment happy-dom
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchFormsSidebarCounts: vi.fn(async () => []),
+}))
+
+vi.mock('../../components/ThemeProvider.js', () => ({
+  useTheme: () => ({
+    adminBrand: { primaryUrl: null, markUrl: null, darkUrl: null, initials: 'BW' },
+    resolvedTheme: 'light',
+    density: 'default',
+  }),
+}))
+
+const { Sidebar } = await import('../../layout/Sidebar.js')
+
+describe('sidebar groups', () => {
+  it('keeps sub-items collapsed until a child route is active', () => {
+    render(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/"
+        onNavigate={() => {}}
+      />,
+    )
+    expect(screen.queryByRole('button', { name: 'Post Types' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Jobs' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Settings' })).toBeTruthy()
+  })
+
+  it('opens the group that contains the current page', () => {
+    render(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/posts/types"
+        onNavigate={() => {}}
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Post Types' })).toBeTruthy()
+  })
+
+  it('opens a group when navigation moves into it', () => {
+    const view = render(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/"
+        onNavigate={() => {}}
+      />,
+    )
+    expect(screen.queryByRole('button', { name: 'Post Types' })).toBeNull()
+
+    view.rerender(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/posts/types"
+        onNavigate={() => {}}
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Post Types' })).toBeTruthy()
+
+    view.rerender(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/media"
+        onNavigate={() => {}}
+      />,
+    )
+    expect(screen.queryByRole('button', { name: 'Post Types' })).toBeNull()
+  })
+
+  it('keeps a manual collapse until the route changes', () => {
+    const at = (currentPath: string) => (
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath={currentPath}
+        onNavigate={() => {}}
+      />
+    )
+    const view = render(at('/posts/types'))
+    fireEvent.click(screen.getByRole('button', { name: 'Collapse Posts' }))
+    expect(screen.queryByRole('button', { name: 'Post Types' })).toBeNull()
+
+    view.rerender(at('/posts/types?view=grid'))
+    expect(screen.queryByRole('button', { name: 'Post Types' })).toBeNull()
+
+    view.rerender(at('/posts/trash'))
+    expect(screen.getByRole('button', { name: 'Post Types' })).toBeTruthy()
+  })
+
+  it('keeps rail labels available to screen readers', () => {
+    render(<Sidebar collapsed onToggleCollapse={() => {}} currentPath="/" onNavigate={() => {}} />)
+    expect(screen.getByRole('button', { name: 'Jobs' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Post Types' })).toBeNull()
+  })
+
+  it('marks the rail parent active instead of rendering the active child', () => {
+    render(
+      <Sidebar
+        collapsed
+        onToggleCollapse={() => {}}
+        currentPath="/posts/types"
+        onNavigate={() => {}}
+      />,
+    )
+    expect(screen.queryByRole('button', { name: 'Post Types' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Posts' }).getAttribute('aria-current')).toBe('page')
+  })
+})

package/src/__tests__/layout/sidebar-menus.render.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment happy-dom
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { navigationPlugin } from '@prenta/plugin-navigation'
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchFormsSidebarCounts: vi.fn(async () => []),
+}))
+
+vi.mock('../../components/ThemeProvider.js', () => ({
+  useTheme: () => ({
+    adminBrand: { primaryUrl: null, markUrl: null, darkUrl: null, initials: 'BW' },
+    resolvedTheme: 'light',
+    density: 'default',
+  }),
+}))
+
+const { Sidebar } = await import('../../layout/Sidebar.js')
+const { buildNavItems } = await import('../../layout/nav-config.js')
+
+afterEach(cleanup)
+
+type Item = { path: string; label: string; children?: Item[] }
+/** Every row, parents and children, as the kit draws them. */
+const flatten = (items: Item[]): Item[] => items.flatMap((i) => [i, ...flatten(i.children ?? [])])
+
+const pages = { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' }
+
+/** Config as cms-core's applyPlugins shapes it with plugin-navigation installed. */
+function withNavigationPlugin() {
+  const plugin = navigationPlugin()
+  return {
+    collections: { pages, ...plugin.collections },
+    _pluginNavItems: plugin.adminNavItems,
+  }
+}
+
+/**
+ * Appearance → Menus must reach the real menu editor (plugin-navigation's
+ * `navigations` list and NavBuilder), not a placeholder screen. Hiding the
+ * collection from Content is only safe while Menus points at it.
+ */
+describe('sidebar Appearance → Menus', () => {
+  it('links Menus to the navigations collection editor', () => {
+    const onNavigate = vi.fn()
+    render(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/"
+        onNavigate={onNavigate}
+        config={withNavigationPlugin()}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Expand Appearance' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Menus' }))
+    expect(onNavigate).toHaveBeenCalledWith('/navigations')
+  })
+
+  it('lists menus once, under Appearance, with no separate Navigation item', () => {
+    const tree = buildNavItems(withNavigationPlugin())
+    const appearance = tree.find((i) => i.label === 'Appearance')
+    expect(appearance?.children?.map((c) => c.label)).toEqual([
+      'Menus',
+      'Header & Footer',
+      'Widgets',
+    ])
+    const items = flatten(tree)
+    expect(items.filter((i) => i.label === 'Menus')).toEqual([
+      expect.objectContaining({ path: '/navigations' }),
+    ])
+    expect(items.some((i) => i.label === 'Navigation' || i.label === 'Navigations')).toBe(false)
+    expect(items.some((i) => i.path === '/appearance/menus')).toBe(false)
+  })
+
+  it.each(['/navigations', '/navigations/new', '/navigations/abc123'])(
+    'marks Menus as the current page on %s',
+    (currentPath) => {
+      render(
+        <Sidebar
+          collapsed={false}
+          onToggleCollapse={() => {}}
+          currentPath={currentPath}
+          onNavigate={() => {}}
+          config={withNavigationPlugin()}
+        />,
+      )
+      expect(screen.getByRole('button', { name: 'Menus' }).getAttribute('aria-current')).toBe(
+        'page',
+      )
+    },
+  )
+
+  it('leaves Menus out when plugin-navigation is not installed', () => {
+    const items = flatten(buildNavItems({ collections: { pages } }))
+    expect(items.some((i) => i.label === 'Menus')).toBe(false)
+    expect(items.some((i) => i.path === '/navigations' || i.path === '/appearance/menus')).toBe(
+      false,
+    )
+    expect(flatten(buildNavItems({})).some((i) => i.label === 'Menus')).toBe(false)
+  })
+
+  it('still lists a consumer collection called menus', () => {
+    const items = buildNavItems({
+      collections: {
+        pages,
+        menus: {
+          slug: 'menus',
+          labels: { singular: 'Menu item', plural: 'Restaurant menus' },
+          admin: { group: 'Content' },
+        },
+      },
+    })
+    expect(items.find((i) => i.path === '/menus')?.label).toBe('Restaurant menus')
+  })
+})

package/src/__tests__/layout/sidebar-plugin-nav.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { buildNavItems } from '../../layout/Sidebar.js'
+import { buildNavItems } from '../../layout/nav-config.js'
 
 // Plugin adminNavItems (collected onto `_pluginNavItems` by cms-core's
 // applyPlugins) must surface in the admin sidebar, without doubling a built-in

package/src/__tests__/layout/sidebar-posts.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { buildNavItems } from '../../layout/Sidebar.js'
+import { buildNavItems } from '../../layout/nav-config.js'
 
 /**
  * Regression coverage for the Posts area sidebar grouping.
@@ -17,10 +17,9 @@ describe('buildNavItems', () => {
     const items = buildNavItems({})
     const posts = items.find((i) => i.path === '/posts')
     expect(posts).toBeDefined()
-    expect(posts?.children?.map((c) => c.path)).toEqual(['/posts', '/posts/types'])
-    // Pages no longer carries children.
+    expect(posts?.children?.map((c) => c.path)).toEqual(['/posts', '/posts/types', '/posts/trash'])
     const pages = items.find((i) => i.path === '/pages')
-    expect(pages?.children ?? []).toEqual([])
+    expect(pages?.children?.map((child) => child.path)).toEqual(['/pages', '/pages/trash'])
     expect(items.find((i) => i.path === '/page-templates')).toBeUndefined()
   })
 
@@ -34,7 +33,7 @@ describe('buildNavItems', () => {
     expect(items.find((i) => i.path === '/saved-sections')).toBeUndefined()
     expect(items.find((i) => i.path === '/widgets')).toBeUndefined()
     const pages = items.find((i) => i.path === '/pages')
-    expect(pages?.children ?? []).toEqual([])
+    expect(pages?.children?.map((child) => child.path)).toEqual(['/pages', '/pages/trash'])
   })
 
   it('collapses every type:post collection under a single Posts parent', () => {
@@ -58,7 +57,7 @@ describe('buildNavItems', () => {
     // Children are still the fixed pair — the per-type collections
     // are NOT enumerated as sidebar siblings.
     const children = postEntries[0]?.children?.map((c) => c.path)
-    expect(children).toEqual(['/posts', '/posts/types'])
+    expect(children).toEqual(['/posts', '/posts/types', '/posts/trash'])
 
     // No per-type slug ended up as a top-level sidebar item.
     const slugPaths = items.map((i) => i.path)
@@ -91,7 +90,7 @@ describe('buildNavItems', () => {
     expect(items.some((i) => i.path === '/posts')).toBe(false)
   })
 
-  it('places Pages above Posts, both under the CONTENT group', () => {
+  it('places Pages and Posts above the CONTENT label, as in the kit', () => {
     const items = buildNavItems({
       collections: {
         blog: { slug: 'blog', labels: { singular: 'Blog Post', plural: 'Blog' }, type: 'post' },
@@ -103,37 +102,41 @@ describe('buildNavItems', () => {
     const postsIdx = items.findIndex((i) => i.path === '/posts')
     const mediaIdx = items.findIndex((i) => i.path === '/media')
 
-    // Pages comes before Posts, and both come before the static
-    // content destinations.
-    expect(pagesIdx).toBeGreaterThanOrEqual(0)
+    // SHELL.md §2: Dashboard · Pages · Posts · Appearance, then CONTENT.
+    expect(pagesIdx).toBe(1)
     expect(pagesIdx).toBeLessThan(postsIdx)
     expect(postsIdx).toBeLessThan(mediaIdx)
-
-    // Both are tagged Content so the single CONTENT header sits above
-    // Pages (the first Content item in the tree).
-    expect(items[pagesIdx]?.group).toBe('Content')
-    expect(items[postsIdx]?.group).toBe('Content')
-
-    // The first item carrying group 'Content' is Pages — i.e. the
-    // CONTENT header renders directly above it.
-    const firstContent = items.find((i) => i.group === 'Content')
-    expect(firstContent?.path).toBe('/pages')
+    expect(items[pagesIdx]?.group).toBeUndefined()
+    expect(items[postsIdx]?.group).toBeUndefined()
+    // The CONTENT label sits above Media, the first Content item.
+    expect(items.find((i) => i.group === 'Content')?.path).toBe('/media')
   })
 
-  it('defaults: Pages is the first CONTENT item, above Posts', () => {
+  it('defaults: the kit order', () => {
     const items = buildNavItems({})
-    const pagesIdx = items.findIndex((i) => i.path === '/pages')
-    const postsIdx = items.findIndex((i) => i.path === '/posts')
-    expect(items[pagesIdx]?.group).toBe('Content')
-    expect(items[postsIdx]?.group).toBe('Content')
-    expect(pagesIdx).toBeLessThan(postsIdx)
-    expect(items.find((i) => i.group === 'Content')?.path).toBe('/pages')
+    expect(items.map((i) => `${i.group ?? ''}:${i.label}`)).toEqual([
+      ':Dashboard',
+      ':Pages',
+      ':Posts',
+      ':Appearance',
+      'Content:Media',
+      'Content:Forms',
+      'Content:SEO',
+      'Content:Script Tags',
+      'Settings:Jobs',
+      'Settings:Settings',
+    ])
   })
 
-  it('renders an admin.group=Content collection (Menus) as its own Content item', () => {
+  it('continues CONTENT after Script Tags with a Content-grouped collection, menus under Appearance', () => {
     const items = buildNavItems({
       collections: {
         pages: { slug: 'pages', labels: { singular: 'Page', plural: 'Pages' }, type: 'page' },
+        testimonials: {
+          slug: 'testimonials',
+          labels: { singular: 'Testimonial', plural: 'Testimonials' },
+          admin: { group: 'Content' },
+        },
         navigations: {
           slug: 'navigations',
           labels: { singular: 'Menu', plural: 'Menus' },
@@ -142,18 +145,21 @@ describe('buildNavItems', () => {
       },
     })
 
-    const menus = items.find((i) => i.path === '/navigations')
-    expect(menus).toBeDefined()
-    expect(menus?.label).toBe('Menus')
-    expect(menus?.group).toBe('Content')
-    // It is a flat Content entry, not a child of Posts/Templates/Pages.
-    expect(menus?.children).toBeUndefined()
-    // Lands after the static Content destinations, before Settings.
-    const menusIdx = items.findIndex((i) => i.path === '/navigations')
+    const testimonials = items.find((i) => i.path === '/testimonials')
+    expect(testimonials?.group).toBe('Content')
+    expect(testimonials?.children).toBeUndefined()
+    const testimonialsIdx = items.findIndex((i) => i.path === '/testimonials')
     const scriptIdx = items.findIndex((i) => i.path === '/script-tags')
-    const settingsIdx = items.findIndex((i) => i.path === '/settings')
-    expect(menusIdx).toBeGreaterThan(scriptIdx)
-    expect(menusIdx).toBeLessThan(settingsIdx)
+    const jobsIdx = items.findIndex((i) => i.path === '/jobs')
+    expect(testimonialsIdx).toBeGreaterThan(scriptIdx)
+    expect(testimonialsIdx).toBeLessThan(jobsIdx)
+    // Appearance → Menus opens the working navigations editor, and the
+    // collection is not listed a second time under Content.
+    const appearance = items.find((i) => i.label === 'Appearance')
+    expect(appearance?.children?.filter((c) => c.path === '/navigations')).toEqual([
+      expect.objectContaining({ label: 'Menus' }),
+    ])
+    expect(items.filter((i) => i.path === '/navigations' && i.label !== 'Appearance')).toEqual([])
   })
 
   it('keeps standard Content/Settings entries after collections', () => {
@@ -167,7 +173,9 @@ describe('buildNavItems', () => {
     expect(paths).toContain('/forms')
     expect(paths).toContain('/seo')
     expect(paths).toContain('/script-tags')
-    expect(paths).toContain('/trash')
+    expect(paths).not.toContain('/trash')
+    const posts = items.find((item) => item.path === '/posts')
+    expect(posts?.children?.some((child) => child.path === '/posts/trash')).toBe(true)
     expect(paths).toContain('/settings')
     // Users + API Keys moved into Settings tabs — they are no longer
     // standalone sidebar destinations.

package/src/__tests__/layout/sidebar-submenu.render.test.tsx

@@ -16,7 +16,7 @@ const { Sidebar } = await import('../../layout/Sidebar.js')
  *  - Expanded: parent children (e.g. Posts -> All Posts / Post Types) render
  *    inline beneath the parent.
  *  - Collapsed: children are hidden inline and instead revealed in a
- *    hover/focus flyout, so the 80px rail stays clean but sub-pages remain
+ *    hover/focus flyout, so the 60px rail stays clean but sub-pages remain
  *    reachable.
  */
 function renderSidebar(collapsed: boolean) {
@@ -33,29 +33,54 @@ function renderSidebar(collapsed: boolean) {
 describe('Sidebar submenus', () => {
   it('renders children inline when expanded', () => {
     renderSidebar(false)
+    // Groups start collapsed. Opening the parent shows its children.
+    fireEvent.click(screen.getByRole('button', { name: 'Expand Posts' }))
     expect(screen.getByText('All Posts')).toBeTruthy()
     expect(screen.getByText('Post Types')).toBeTruthy()
+    // Widgets moved out of Templates into Appearance (nav-patches.js); Templates
+    // stays hidden until its screen exists (CONFLICTS.md §2).
+    fireEvent.click(screen.getByRole('button', { name: 'Expand Appearance' }))
+    expect(screen.getByText('Widgets')).toBeTruthy()
     expect(screen.queryByText('Saved Sections')).toBeNull()
-    expect(screen.queryByText('Widgets')).toBeNull()
     expect(screen.queryByText('Templates')).toBeNull()
   })
 
   it('collapses and re-expands a parent submenu via the chevron toggle', () => {
     renderSidebar(false)
 
-    // Children visible by default.
+    fireEvent.click(screen.getByRole('button', { name: 'Expand Posts' }))
     expect(screen.getByText('All Posts')).toBeTruthy()
 
-    // Collapse the Posts section.
     fireEvent.click(screen.getByRole('button', { name: 'Collapse Posts' }))
     expect(screen.queryByText('All Posts')).toBeNull()
 
-    // Re-expand it.
     fireEvent.click(screen.getByRole('button', { name: 'Expand Posts' }))
     expect(screen.getByText('All Posts')).toBeTruthy()
   })
 
-  it('keeps the active section expanded even when toggled closed', () => {
+  it('fills the parent and the current child, as in the kit', () => {
+    render(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/posts"
+        onNavigate={() => {}}
+      />,
+    )
+
+    // The group holding the current page opens on its own (TRACKING.md P-02).
+    const posts = screen.getByRole('button', { name: 'Posts' })
+    const allPosts = screen.getByRole('button', { name: 'All Posts' })
+    expect(allPosts.className.split(/\s+/)).toContain('bg-acc-l')
+    // Kit `.sub-group .ni`: 20px inset past the guide line.
+    expect(allPosts.className.split(/\s+/)).toContain('pl-5')
+    expect(allPosts.getAttribute('aria-current')).toBe('page')
+    expect(posts.parentElement?.className.split(/\s+/)).toContain('bg-acc-l')
+    // Only one row claims the page at a time.
+    expect(posts.getAttribute('aria-current')).toBeNull()
+  })
+
+  it('fills the parent row once the active section is collapsed', () => {
     render(
       <Sidebar
         collapsed={false}
@@ -65,12 +90,12 @@ describe('Sidebar submenus', () => {
       />,
     )
 
-    // Active section forces the submenu open; the chevron reports it as
-    // expanded and offers to collapse.
     expect(screen.getByText('All Posts')).toBeTruthy()
     fireEvent.click(screen.getByRole('button', { name: 'Collapse Posts' }))
-    // Still visible because the section is the active route.
-    expect(screen.getByText('All Posts')).toBeTruthy()
+    expect(screen.queryByText('All Posts')).toBeNull()
+    const posts = screen.getByRole('button', { name: 'Posts' })
+    expect(posts.parentElement?.className.split(/\s+/)).toContain('bg-acc-l')
+    expect(posts.getAttribute('aria-current')).toBe('page')
   })
 
   it('hides children inline when collapsed and exposes them in a hover flyout', async () => {