@nixxie-cms/core 1.0.0 → 1.0.2

package/src/admin-ui/components/Navigation.tsx

@@ -1,385 +1,389 @@
-import { type ReactNode, type PropsWithChildren, useState, type ChangeEvent } from 'react'
-import { useRouter } from 'next/router'
-
-import { css } from '@keystar/ui/style'
-
-import type { ListMeta } from '../../types'
-import { useNixxie } from '../context'
-
-// ================================================================
-// Helpers
-// ================================================================
-
-export function getHrefFromList(list: Pick<ListMeta, 'path' | 'isSingleton'>) {
-  return `/${list.path}${list.isSingleton ? '/1' : ''}`
-}
-
-// ================================================================
-// Nav Item — minimal, text-only, precise
-// ================================================================
-
-type NavItemProps = {
-  href: string
-  children: ReactNode
-  onClick?: () => void
-  indent?: boolean
-}
-
-export function NavItem({ href, children, onClick, indent }: NavItemProps) {
-  const router = useRouter()
-  const segment = href.split('/')[1]
-  const isActive =
-    router.pathname === href ||
-    (segment && router.pathname.split('/')[1] === segment && href !== '/')
-
-  return (
-    <a
-      href={href}
-      onClick={e => {
-        e.preventDefault()
-        onClick?.()
-        router.push(href)
-      }}
-      aria-current={isActive ? 'page' : undefined}
-      className={css({
-        position: 'relative',
-        display: 'flex',
-        alignItems: 'center',
-        paddingInline: indent ? '32px 16px' : '16px',
-        paddingBlock: '7px',
-        fontSize: 13,
-        fontWeight: isActive ? 500 : 400,
-        color: isActive ? '#0a0a0a' : '#636363',
-        backgroundColor: isActive ? '#f5f5f5' : 'transparent',
-        textDecoration: 'none',
-        borderRadius: '0 6px 6px 0',
-        marginRight: '12px',
-        lineHeight: '1.4',
-        cursor: 'pointer',
-        userSelect: 'none',
-        transition: 'color 120ms, background-color 120ms',
-
-        '&:hover': {
-          color: '#0a0a0a',
-          backgroundColor: '#f5f5f5',
-        },
-      })}
-    >
-      {/* Active indicator — thin solid bar on the left edge */}
-      {isActive && (
-        <span
-          className={css({
-            position: 'absolute',
-            left: 0,
-            top: '20%',
-            bottom: '20%',
-            width: 2,
-            borderRadius: '0 2px 2px 0',
-            backgroundColor: '#000000',
-          })}
-        />
-      )}
-      <span
-        className={css({
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        })}
-      >
-        {children}
-      </span>
-    </a>
-  )
-}
-
-// ================================================================
-// Section label
-// ================================================================
-
-function SectionLabel({ children, action }: { children: ReactNode; action?: ReactNode }) {
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingInline: '16px 12px',
-        paddingBlock: '12px 4px',
-      })}
-    >
-      <span
-        className={css({
-          fontSize: 10,
-          fontWeight: 600,
-          letterSpacing: '0.10em',
-          textTransform: 'uppercase',
-          color: '#b8b8b8',
-        })}
-      >
-        {children}
-      </span>
-      {action}
-    </div>
-  )
-}
-
-// ================================================================
-// Divider
-// ================================================================
-
-function NavDivider() {
-  return (
-    <div
-      className={css({
-        height: 1,
-        marginInline: '16px',
-        marginBlock: '6px',
-        backgroundColor: '#f2f2f2',
-      })}
-    />
-  )
-}
-
-// ================================================================
-// Search shortcut — Cmd+K trigger
-// ================================================================
-
-function SearchTrigger({ onClick }: { onClick?: () => void }) {
-  return (
-    <button
-      onClick={onClick}
-      className={css({
-        display: 'flex',
-        alignItems: 'center',
-        gap: 8,
-        width: 'calc(100% - 24px)',
-        marginInline: '12px',
-        marginBottom: '8px',
-        paddingInline: '10px',
-        paddingBlock: '7px',
-        borderRadius: 6,
-        border: '1px solid #ebebeb',
-        backgroundColor: '#f5f5f5',
-        color: '#a3a3a3',
-        fontSize: 12.5,
-        cursor: 'pointer',
-        textAlign: 'left',
-        transition: 'border-color 140ms, background 140ms, color 140ms',
-
-        '&:hover': {
-          borderColor: '#dedede',
-          backgroundColor: '#efefef',
-          color: '#737373',
-        },
-        '&:focus-visible': {
-          outline: '2px solid #000',
-          outlineOffset: 2,
-        },
-      })}
-    >
-      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ flexShrink: 0 }}>
-        <circle cx="5" cy="5" r="3.5" stroke="currentColor" strokeWidth="1.25" />
-        <path d="M8 8L10.5 10.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
-      </svg>
-      <span className={css({ flex: 1 })}>Search…</span>
-      <kbd
-        className={css({
-          fontSize: 10.5,
-          color: '#c8c8c8',
-          fontFamily: 'inherit',
-          letterSpacing: '0.02em',
-        })}
-      >
-        ⌘K
-      </kbd>
-    </button>
-  )
-}
-
-// ================================================================
-// List filter — inline nav search
-// ================================================================
-
-function NavSearch({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  return (
-    <div className={css({ paddingInline: '16px 12px', paddingBottom: '4px' })}>
-      <input
-        type="search"
-        value={value}
-        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-        placeholder="Filter…"
-        className={css({
-          width: '100%',
-          paddingInline: '10px',
-          paddingBlock: '5px',
-          fontSize: 12.5,
-          border: '1px solid #ebebeb',
-          borderRadius: 5,
-          backgroundColor: '#f5f5f5',
-          color: '#0a0a0a',
-          outline: 'none',
-          boxSizing: 'border-box',
-          transition: 'border-color 140ms',
-          '&:focus': { borderColor: '#b0b0b0' },
-          '&::placeholder': { color: '#c8c8c8' },
-          '&::-webkit-search-cancel-button': { display: 'none' },
-        })}
-      />
-    </div>
-  )
-}
-
-// ================================================================
-// Collections section
-// ================================================================
-
-function CollectionsSection({
-  lists,
-  onNavItemClick,
-}: {
-  lists: ListMeta[]
-  onNavItemClick?: () => void
-}) {
-  const [search, setSearch] = useState('')
-
-  const filtered = search.trim()
-    ? lists.filter(l => l.label.toLowerCase().includes(search.toLowerCase()))
-    : lists
-
-  return (
-    <>
-      <SectionLabel>Collections</SectionLabel>
-
-      {lists.length > 6 && <NavSearch value={search} onChange={setSearch} />}
-
-      {filtered.length === 0 ? (
-        <p className={css({ margin: '4px 16px', fontSize: 12.5, color: '#c8c8c8' })}>
-          No results
-        </p>
-      ) : (
-        filtered.map(list => (
-          <NavItem key={list.key} href={getHrefFromList(list)} onClick={onNavItemClick}>
-            {list.label}
-            {list.isSingleton && (
-              <span
-                className={css({
-                  marginLeft: 6,
-                  fontSize: 10,
-                  fontWeight: 500,
-                  color: '#c8c8c8',
-                  letterSpacing: '0.04em',
-                  textTransform: 'uppercase',
-                })}
-              >
-                Single
-              </span>
-            )}
-          </NavItem>
-        ))
-      )}
-    </>
-  )
-}
-
-// ================================================================
-// Root Navigation
-// ================================================================
-
-type InternalNavigationProps = {
-  onNavItemClick?: () => void
-  onCmdK?: () => void
-}
-
-export function Navigation({ onNavItemClick, onCmdK }: InternalNavigationProps) {
-  const { adminConfig, lists: allLists, apiPath } = useNixxie()
-  const visibleLists = Object.values(allLists).filter(x => !x.hideNavigation)
-
-  if (adminConfig?.components?.Navigation) {
-    return <adminConfig.components.Navigation lists={visibleLists} />
-  }
-
-  return (
-    <nav
-      aria-label="Main navigation"
-      className={css({ display: 'flex', flexDirection: 'column', height: '100%' })}
-    >
-      {/* Search trigger */}
-      <div className={css({ paddingTop: '10px' })}>
-        <SearchTrigger onClick={onCmdK} />
-      </div>
-
-      {/* Dashboard */}
-      <NavItem href="/" onClick={onNavItemClick}>
-        Dashboard
-      </NavItem>
-
-      <NavDivider />
-
-      {/* Collections + developer */}
-      <div
-        className={css({ flex: 1, overflowY: 'auto', overflowX: 'hidden', paddingBottom: '8px' })}
-      >
-        {visibleLists.length > 0 ? (
-          <CollectionsSection lists={visibleLists} onNavItemClick={onNavItemClick} />
-        ) : (
-          <p className={css({ margin: '8px 16px', fontSize: 12.5, color: '#c8c8c8' })}>
-            No collections
-          </p>
-        )}
-
-        {process.env.NODE_ENV !== 'production' && apiPath && (
-          <>
-            <NavDivider />
-            <SectionLabel>Developer</SectionLabel>
-            <NavItem href={apiPath} onClick={onNavItemClick}>
-              API Explorer
-            </NavItem>
-          </>
-        )}
-      </div>
-    </nav>
-  )
-}
-
-// ================================================================
-// Legacy public exports (used by @nixxie-cms/auth and custom navigations)
-// ================================================================
-
-export function NavList({ children }: PropsWithChildren) {
-  return <>{children}</>
-}
-
-export function NavContainer({ children }: PropsWithChildren) {
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        paddingBlock: '8px',
-      })}
-    >
-      {children}
-    </div>
-  )
-}
-
-export function NavFooter({ children }: PropsWithChildren) {
-  return (
-    <div
-      className={css({
-        paddingInline: '12px',
-        paddingBlock: '10px',
-        borderTop: '1px solid #f2f2f2',
-        marginTop: 'auto',
-      })}
-    >
-      {children}
-    </div>
-  )
-}
-
-/** @deprecated */
-export function DeveloperResourcesMenu() {
-  return null
-}
+import { type ReactNode, type PropsWithChildren, useState, type ChangeEvent } from 'react'
+import { useRouter } from 'next/router'
+
+import { css } from '@keystar/ui/style'
+
+import type { ListMeta } from '../../types'
+import { useNixxie } from '../context'
+
+// ================================================================
+// Helpers
+// ================================================================
+
+export function getHrefFromList(list: Pick<ListMeta, 'path' | 'isSingleton'>) {
+  return `/${list.path}${list.isSingleton ? '/1' : ''}`
+}
+
+// ================================================================
+// Nav Item — minimal, text-only, precise
+// ================================================================
+
+type NavItemProps = {
+  href: string
+  children: ReactNode
+  onClick?: () => void
+  indent?: boolean
+}
+
+export function NavItem({ href, children, onClick, indent }: NavItemProps) {
+  const router = useRouter()
+  const segment = href.split('/')[1]
+  const isActive =
+    router.pathname === href ||
+    (segment && router.pathname.split('/')[1] === segment && href !== '/')
+
+  return (
+    <a
+      href={href}
+      onClick={e => {
+        e.preventDefault()
+        onClick?.()
+        router.push(href)
+      }}
+      aria-current={isActive ? 'page' : undefined}
+      className={css({
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        paddingInline: indent ? '32px 16px' : '16px',
+        paddingBlock: '7px',
+        fontSize: 13,
+        fontWeight: isActive ? 500 : 400,
+        color: isActive ? '#0a0a0a' : '#636363',
+        backgroundColor: isActive ? '#f5f5f5' : 'transparent',
+        textDecoration: 'none',
+        borderRadius: '0 6px 6px 0',
+        marginRight: '12px',
+        lineHeight: '1.4',
+        cursor: 'pointer',
+        userSelect: 'none',
+        transition: 'color 120ms, background-color 120ms',
+
+        '&:hover': {
+          color: '#0a0a0a',
+          backgroundColor: '#f5f5f5',
+        },
+      })}
+    >
+      {/* Active indicator — thin solid bar on the left edge */}
+      {isActive && (
+        <span
+          className={css({
+            position: 'absolute',
+            left: 0,
+            top: '20%',
+            bottom: '20%',
+            width: 2,
+            borderRadius: '0 2px 2px 0',
+            backgroundColor: '#000000',
+          })}
+        />
+      )}
+      <span
+        className={css({
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        })}
+      >
+        {children}
+      </span>
+    </a>
+  )
+}
+
+// ================================================================
+// Section label
+// ================================================================
+
+function SectionLabel({ children, action }: { children: ReactNode; action?: ReactNode }) {
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingInline: '16px 12px',
+        paddingBlock: '12px 4px',
+      })}
+    >
+      <span
+        className={css({
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: '0.10em',
+          textTransform: 'uppercase',
+          color: '#b8b8b8',
+        })}
+      >
+        {children}
+      </span>
+      {action}
+    </div>
+  )
+}
+
+// ================================================================
+// Divider
+// ================================================================
+
+function NavDivider() {
+  return (
+    <div
+      className={css({
+        height: 1,
+        marginInline: '16px',
+        marginBlock: '6px',
+        backgroundColor: '#f2f2f2',
+      })}
+    />
+  )
+}
+
+// ================================================================
+// Search shortcut — Cmd+K trigger
+// ================================================================
+
+function SearchTrigger({ onClick }: { onClick?: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        width: 'calc(100% - 24px)',
+        marginInline: '12px',
+        marginBottom: '8px',
+        paddingInline: '10px',
+        paddingBlock: '7px',
+        borderRadius: 6,
+        border: '1px solid #ebebeb',
+        backgroundColor: '#f5f5f5',
+        color: '#a3a3a3',
+        fontSize: 12.5,
+        cursor: 'pointer',
+        textAlign: 'left',
+        transition: 'border-color 140ms, background 140ms, color 140ms',
+
+        '&:hover': {
+          borderColor: '#dedede',
+          backgroundColor: '#efefef',
+          color: '#737373',
+        },
+        '&:focus-visible': {
+          outline: '2px solid #000',
+          outlineOffset: 2,
+        },
+      })}
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{ flexShrink: 0 }}>
+        <circle cx="5" cy="5" r="3.5" stroke="currentColor" strokeWidth="1.25" />
+        <path d="M8 8L10.5 10.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+      </svg>
+      <span className={css({ flex: 1 })}>Search…</span>
+      <kbd
+        className={css({
+          fontSize: 10.5,
+          color: '#c8c8c8',
+          fontFamily: 'inherit',
+          letterSpacing: '0.02em',
+        })}
+      >
+        ⌘K
+      </kbd>
+    </button>
+  )
+}
+
+// ================================================================
+// List filter — inline nav search
+// ================================================================
+
+function NavSearch({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  return (
+    <div className={css({ paddingInline: '16px 12px', paddingBottom: '4px' })}>
+      <input
+        type="search"
+        value={value}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+        placeholder="Filter…"
+        className={css({
+          width: '100%',
+          paddingInline: '10px',
+          paddingBlock: '5px',
+          fontSize: 12.5,
+          border: '1px solid #ebebeb',
+          borderRadius: 5,
+          backgroundColor: '#f5f5f5',
+          color: '#0a0a0a',
+          outline: 'none',
+          boxSizing: 'border-box',
+          transition: 'border-color 140ms',
+          '&:focus': { borderColor: '#b0b0b0' },
+          '&::placeholder': { color: '#c8c8c8' },
+          '&::-webkit-search-cancel-button': { display: 'none' },
+        })}
+      />
+    </div>
+  )
+}
+
+// ================================================================
+// Collections section
+// ================================================================
+
+function CollectionsSection({
+  lists,
+  onNavItemClick,
+}: {
+  lists: ListMeta[]
+  onNavItemClick?: () => void
+}) {
+  const [search, setSearch] = useState('')
+
+  // The filter input is only shown for longer lists; gate filtering on the same condition so a
+  // stale search value can't strand the user on "No results" after the list count drops to <= 6.
+  const showSearch = lists.length > 6
+  const filtered =
+    showSearch && search.trim()
+      ? lists.filter(l => l.label.toLowerCase().includes(search.toLowerCase()))
+      : lists
+
+  return (
+    <>
+      <SectionLabel>Collections</SectionLabel>
+
+      {showSearch && <NavSearch value={search} onChange={setSearch} />}
+
+      {filtered.length === 0 ? (
+        <p className={css({ margin: '4px 16px', fontSize: 12.5, color: '#c8c8c8' })}>
+          No results
+        </p>
+      ) : (
+        filtered.map(list => (
+          <NavItem key={list.key} href={getHrefFromList(list)} onClick={onNavItemClick}>
+            {list.label}
+            {list.isSingleton && (
+              <span
+                className={css({
+                  marginLeft: 6,
+                  fontSize: 10,
+                  fontWeight: 500,
+                  color: '#c8c8c8',
+                  letterSpacing: '0.04em',
+                  textTransform: 'uppercase',
+                })}
+              >
+                Single
+              </span>
+            )}
+          </NavItem>
+        ))
+      )}
+    </>
+  )
+}
+
+// ================================================================
+// Root Navigation
+// ================================================================
+
+type InternalNavigationProps = {
+  onNavItemClick?: () => void
+  onCmdK?: () => void
+}
+
+export function Navigation({ onNavItemClick, onCmdK }: InternalNavigationProps) {
+  const { adminConfig, lists: allLists, apiPath } = useNixxie()
+  const visibleLists = Object.values(allLists).filter(x => !x.hideNavigation)
+
+  if (adminConfig?.components?.Navigation) {
+    return <adminConfig.components.Navigation lists={visibleLists} />
+  }
+
+  return (
+    <nav
+      aria-label="Main navigation"
+      className={css({ display: 'flex', flexDirection: 'column', height: '100%' })}
+    >
+      {/* Search trigger */}
+      <div className={css({ paddingTop: '10px' })}>
+        <SearchTrigger onClick={onCmdK} />
+      </div>
+
+      {/* Dashboard */}
+      <NavItem href="/" onClick={onNavItemClick}>
+        Dashboard
+      </NavItem>
+
+      <NavDivider />
+
+      {/* Collections + developer */}
+      <div
+        className={css({ flex: 1, overflowY: 'auto', overflowX: 'hidden', paddingBottom: '8px' })}
+      >
+        {visibleLists.length > 0 ? (
+          <CollectionsSection lists={visibleLists} onNavItemClick={onNavItemClick} />
+        ) : (
+          <p className={css({ margin: '8px 16px', fontSize: 12.5, color: '#c8c8c8' })}>
+            No collections
+          </p>
+        )}
+
+        {process.env.NODE_ENV !== 'production' && apiPath && (
+          <>
+            <NavDivider />
+            <SectionLabel>Developer</SectionLabel>
+            <NavItem href={apiPath} onClick={onNavItemClick}>
+              API Explorer
+            </NavItem>
+          </>
+        )}
+      </div>
+    </nav>
+  )
+}
+
+// ================================================================
+// Legacy public exports (used by @nixxie-cms/auth and custom navigations)
+// ================================================================
+
+export function NavList({ children }: PropsWithChildren) {
+  return <>{children}</>
+}
+
+export function NavContainer({ children }: PropsWithChildren) {
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        paddingBlock: '8px',
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function NavFooter({ children }: PropsWithChildren) {
+  return (
+    <div
+      className={css({
+        paddingInline: '12px',
+        paddingBlock: '10px',
+        borderTop: '1px solid #f2f2f2',
+        marginTop: 'auto',
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** @deprecated */
+export function DeveloperResourcesMenu() {
+  return null
+}