@nixxie-cms/core 1.0.0 → 1.0.2

package/src/{___internal-do-not-use-will-break-in-patch → internal-unstable}/admin-ui/pages/HomePage/index.tsx

@@ -1,333 +1,333 @@
-import { useMemo } from 'react'
-
-import { css } from '@keystar/ui/style'
-import { Heading } from '@keystar/ui/typography'
-
-import { gql, type TypedDocumentNode, useQuery } from '../../../../admin-ui/apollo'
-import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
-import { PageContainer } from '../../../../admin-ui/components/PageContainer'
-import { useNixxie, useList } from '../../../../admin-ui/context'
-
-// ---- Collection card ----
-
-type CardProps = {
-  listKey: string
-  count: number | null
-  href: string
-  createHref: string | null
-}
-
-function CollectionCard({ listKey, count, href, createHref }: CardProps) {
-  const list = useList(listKey)
-
-  return (
-    <div
-      className={css({
-        position: 'relative',
-        backgroundColor: '#ffffff',
-        border: '1px solid #ebebeb',
-        borderRadius: 8,
-        overflow: 'hidden',
-        transition: 'box-shadow 180ms, border-color 180ms',
-        '&:hover': {
-          boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
-          borderColor: '#d8d8d8',
-        },
-      })}
-    >
-      <div className={css({ padding: '16px 18px 14px' })}>
-        {/* Label row */}
-        <p
-          className={css({
-            margin: '0 0 10px',
-            fontSize: 10.5,
-            fontWeight: 600,
-            letterSpacing: '0.09em',
-            textTransform: 'uppercase',
-            color: '#a3a3a3',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-          })}
-        >
-          <span
-            className={css({
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            })}
-          >
-            {list.label}
-          </span>
-
-          {createHref && (
-            <a
-              href={createHref}
-              title={`New ${list.singular}`}
-              onClick={e => e.stopPropagation()}
-              className={css({
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: 22,
-                height: 22,
-                borderRadius: 5,
-                border: '1px solid #ebebeb',
-                color: '#a3a3a3',
-                textDecoration: 'none',
-                fontSize: 14,
-                lineHeight: 1,
-                flexShrink: 0,
-                marginLeft: 6,
-                transition: 'border-color 130ms, color 130ms, background 130ms',
-                '&:hover': {
-                  borderColor: '#000000',
-                  color: '#000000',
-                  background: '#f5f5f5',
-                },
-              })}
-            >
-              +
-            </a>
-          )}
-        </p>
-
-        {/* Count — clickable full-card link via pseudo-element */}
-        <a
-          href={href}
-          className={css({
-            display: 'block',
-            textDecoration: 'none',
-            '&::after': {
-              content: '""',
-              position: 'absolute',
-              inset: 0,
-            },
-          })}
-        >
-          <p
-            className={css({
-              margin: '0 0 10px',
-              fontSize: 34,
-              fontWeight: 700,
-              letterSpacing: '-0.05em',
-              color: count === null ? '#e8e8e8' : '#000000',
-              lineHeight: 1,
-              fontVariantNumeric: 'tabular-nums',
-            })}
-          >
-            {count === null ? '—' : count.toLocaleString()}
-          </p>
-
-          <p
-            className={css({
-              margin: 0,
-              fontSize: 12,
-              color: '#c8c8c8',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 4,
-              transition: 'color 130ms',
-              'a:hover &': { color: '#636363' },
-            })}
-          >
-            {list.isSingleton ? 'Open' : 'View all'}
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-              <path
-                d="M2 5h6M5.5 2.5L8 5l-2.5 2.5"
-                stroke="currentColor"
-                strokeWidth="1.2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </p>
-        </a>
-      </div>
-    </div>
-  )
-}
-
-// ---- Quick create ----
-
-function QuickCreate() {
-  const { lists } = useNixxie()
-  const creatableLists = Object.values(lists)
-    .filter(l => !l.hideNavigation && !l.hideCreate && !l.isSingleton)
-    .slice(0, 8)
-
-  if (creatableLists.length === 0) return null
-
-  return (
-    <section className={css({ marginTop: 40 })}>
-      <p
-        className={css({
-          margin: '0 0 10px',
-          fontSize: 10,
-          fontWeight: 600,
-          letterSpacing: '0.10em',
-          textTransform: 'uppercase',
-          color: '#b8b8b8',
-        })}
-      >
-        Quick Create
-      </p>
-      <div className={css({ display: 'flex', flexWrap: 'wrap', gap: 7 })}>
-        {creatableLists.map(list => (
-          <a
-            key={list.key}
-            href={`/${list.path}/create`}
-            className={css({
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 6,
-              paddingInline: '12px',
-              paddingBlock: '6px',
-              borderRadius: 6,
-              border: '1px solid #e8e8e8',
-              backgroundColor: '#ffffff',
-              fontSize: 12.5,
-              fontWeight: 500,
-              color: '#525252',
-              textDecoration: 'none',
-              transition: 'border-color 130ms, color 130ms, background 130ms',
-
-              '&:hover': {
-                borderColor: '#000000',
-                color: '#000000',
-                background: '#fafafa',
-              },
-            })}
-          >
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-              <path
-                d="M5 1.5v7M1.5 5h7"
-                stroke="currentColor"
-                strokeWidth="1.4"
-                strokeLinecap="round"
-              />
-            </svg>
-            {list.singular}
-          </a>
-        ))}
-      </div>
-    </section>
-  )
-}
-
-// ---- Main HomePage ----
-
-export function HomePage() {
-  const { lists, error: metaError } = useNixxie()
-  const visibleLists = Object.values(lists).filter(list => !list.hideNavigation)
-
-  const LIST_COUNTS_QUERY = useMemo(
-    () =>
-      gql`
-    query KsFetchListCounts {
-      ${[
-        ...(function* () {
-          if (visibleLists.length === 0) yield '__typename'
-          for (const list of visibleLists) {
-            yield `${list.key}: ${list.graphql.names.listQueryCountName}`
-          }
-        })(),
-      ].join('\n')}
-    }` as TypedDocumentNode<{ [key: string]: number | null }>,
-    [visibleLists]
-  )
-
-  const { data, error: countsError } = useQuery(LIST_COUNTS_QUERY, { errorPolicy: 'all' })
-
-  return (
-    <PageContainer
-      header={
-        <Heading elementType="h1" size="small">
-          Dashboard
-        </Heading>
-      }
-    >
-      <div
-        className={css({
-          padding: '36px 36px 60px',
-          maxWidth: 1120,
-          width: '100%',
-          boxSizing: 'border-box',
-          '@media (max-width: 600px)': { padding: '24px 18px 44px' },
-        })}
-      >
-        <GraphQLErrorNotice errors={[metaError, countsError]} />
-
-        {/* Page title */}
-        <div className={css({ marginBottom: 28 })}>
-          <h1
-            className={css({
-              margin: '0 0 4px',
-              fontSize: 20,
-              fontWeight: 700,
-              letterSpacing: '-0.03em',
-              color: '#0a0a0a',
-            })}
-          >
-            Overview
-          </h1>
-          <p className={css({ margin: 0, fontSize: 13, color: '#a3a3a3' })}>
-            {visibleLists.length} collection{visibleLists.length !== 1 ? 's' : ''}
-          </p>
-        </div>
-
-        {/* Collections grid */}
-        {visibleLists.length > 0 && (
-          <div
-            className={css({
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
-              gap: 10,
-              '@media (max-width: 480px)': { gridTemplateColumns: '1fr 1fr', gap: 8 },
-            })}
-          >
-            {visibleLists.map(list => (
-              <CollectionCard
-                key={list.key}
-                listKey={list.key}
-                count={data?.[list.key] ?? null}
-                href={`/${list.path}${list.isSingleton ? '/1' : ''}`}
-                createHref={!list.hideCreate && !list.isSingleton ? `/${list.path}/create` : null}
-              />
-            ))}
-          </div>
-        )}
-
-        <QuickCreate />
-
-        {/* Keyboard hint */}
-        <p
-          className={css({
-            marginTop: 48,
-            fontSize: 11.5,
-            color: '#d4d4d4',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-          })}
-        >
-          <kbd
-            className={css({
-              display: 'inline-flex',
-              padding: '1px 6px',
-              background: '#ffffff',
-              border: '1px solid #ebebeb',
-              borderRadius: 4,
-              fontSize: 10.5,
-              fontFamily: 'inherit',
-              color: '#a3a3a3',
-            })}
-          >
-            ⌘K
-          </kbd>
-          <span>to search and navigate</span>
-        </p>
-      </div>
-    </PageContainer>
-  )
-}
+import { useMemo } from 'react'
+
+import { css } from '@keystar/ui/style'
+import { Heading } from '@keystar/ui/typography'
+
+import { gql, type TypedDocumentNode, useQuery } from '../../../../admin-ui/apollo'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import { useNixxie, useList } from '../../../../admin-ui/context'
+
+// ---- Collection card ----
+
+type CardProps = {
+  listKey: string
+  count: number | null
+  href: string
+  createHref: string | null
+}
+
+function CollectionCard({ listKey, count, href, createHref }: CardProps) {
+  const list = useList(listKey)
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        backgroundColor: '#ffffff',
+        border: '1px solid #ebebeb',
+        borderRadius: 8,
+        overflow: 'hidden',
+        transition: 'box-shadow 180ms, border-color 180ms',
+        '&:hover': {
+          boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
+          borderColor: '#d8d8d8',
+        },
+      })}
+    >
+      <div className={css({ padding: '16px 18px 14px' })}>
+        {/* Label row */}
+        <p
+          className={css({
+            margin: '0 0 10px',
+            fontSize: 10.5,
+            fontWeight: 600,
+            letterSpacing: '0.09em',
+            textTransform: 'uppercase',
+            color: '#a3a3a3',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          })}
+        >
+          <span
+            className={css({
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            })}
+          >
+            {list.label}
+          </span>
+
+          {createHref && (
+            <a
+              href={createHref}
+              title={`New ${list.singular}`}
+              onClick={e => e.stopPropagation()}
+              className={css({
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 22,
+                height: 22,
+                borderRadius: 5,
+                border: '1px solid #ebebeb',
+                color: '#a3a3a3',
+                textDecoration: 'none',
+                fontSize: 14,
+                lineHeight: 1,
+                flexShrink: 0,
+                marginLeft: 6,
+                transition: 'border-color 130ms, color 130ms, background 130ms',
+                '&:hover': {
+                  borderColor: '#000000',
+                  color: '#000000',
+                  background: '#f5f5f5',
+                },
+              })}
+            >
+              +
+            </a>
+          )}
+        </p>
+
+        {/* Count — clickable full-card link via pseudo-element */}
+        <a
+          href={href}
+          className={css({
+            display: 'block',
+            textDecoration: 'none',
+            '&::after': {
+              content: '""',
+              position: 'absolute',
+              inset: 0,
+            },
+          })}
+        >
+          <p
+            className={css({
+              margin: '0 0 10px',
+              fontSize: 34,
+              fontWeight: 700,
+              letterSpacing: '-0.05em',
+              color: count === null ? '#e8e8e8' : '#000000',
+              lineHeight: 1,
+              fontVariantNumeric: 'tabular-nums',
+            })}
+          >
+            {count === null ? '—' : count.toLocaleString()}
+          </p>
+
+          <p
+            className={css({
+              margin: 0,
+              fontSize: 12,
+              color: '#c8c8c8',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              transition: 'color 130ms',
+              'a:hover &': { color: '#636363' },
+            })}
+          >
+            {list.isSingleton ? 'Open' : 'View all'}
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path
+                d="M2 5h6M5.5 2.5L8 5l-2.5 2.5"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </p>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+// ---- Quick create ----
+
+function QuickCreate() {
+  const { lists } = useNixxie()
+  const creatableLists = Object.values(lists)
+    .filter(l => !l.hideNavigation && !l.hideCreate && !l.isSingleton)
+    .slice(0, 8)
+
+  if (creatableLists.length === 0) return null
+
+  return (
+    <section className={css({ marginTop: 40 })}>
+      <p
+        className={css({
+          margin: '0 0 10px',
+          fontSize: 10,
+          fontWeight: 600,
+          letterSpacing: '0.10em',
+          textTransform: 'uppercase',
+          color: '#b8b8b8',
+        })}
+      >
+        Quick Create
+      </p>
+      <div className={css({ display: 'flex', flexWrap: 'wrap', gap: 7 })}>
+        {creatableLists.map(list => (
+          <a
+            key={list.key}
+            href={`/${list.path}/create`}
+            className={css({
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 6,
+              paddingInline: '12px',
+              paddingBlock: '6px',
+              borderRadius: 6,
+              border: '1px solid #e8e8e8',
+              backgroundColor: '#ffffff',
+              fontSize: 12.5,
+              fontWeight: 500,
+              color: '#525252',
+              textDecoration: 'none',
+              transition: 'border-color 130ms, color 130ms, background 130ms',
+
+              '&:hover': {
+                borderColor: '#000000',
+                color: '#000000',
+                background: '#fafafa',
+              },
+            })}
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+              <path
+                d="M5 1.5v7M1.5 5h7"
+                stroke="currentColor"
+                strokeWidth="1.4"
+                strokeLinecap="round"
+              />
+            </svg>
+            {list.singular}
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+// ---- Main HomePage ----
+
+export function HomePage() {
+  const { lists, error: metaError } = useNixxie()
+  const visibleLists = Object.values(lists).filter(list => !list.hideNavigation)
+
+  const LIST_COUNTS_QUERY = useMemo(
+    () =>
+      gql`
+    query NxFetchListCounts {
+      ${[
+        ...(function* () {
+          if (visibleLists.length === 0) yield '__typename'
+          for (const list of visibleLists) {
+            yield `${list.key}: ${list.graphql.names.listQueryCountName}`
+          }
+        })(),
+      ].join('\n')}
+    }` as TypedDocumentNode<{ [key: string]: number | null }>,
+    [visibleLists]
+  )
+
+  const { data, error: countsError } = useQuery(LIST_COUNTS_QUERY, { errorPolicy: 'all' })
+
+  return (
+    <PageContainer
+      header={
+        <Heading elementType="h1" size="small">
+          Dashboard
+        </Heading>
+      }
+    >
+      <div
+        className={css({
+          padding: '36px 36px 60px',
+          maxWidth: 1120,
+          width: '100%',
+          boxSizing: 'border-box',
+          '@media (max-width: 600px)': { padding: '24px 18px 44px' },
+        })}
+      >
+        <GraphQLErrorNotice errors={[metaError, countsError]} />
+
+        {/* Page title */}
+        <div className={css({ marginBottom: 28 })}>
+          <h1
+            className={css({
+              margin: '0 0 4px',
+              fontSize: 20,
+              fontWeight: 700,
+              letterSpacing: '-0.03em',
+              color: '#0a0a0a',
+            })}
+          >
+            Overview
+          </h1>
+          <p className={css({ margin: 0, fontSize: 13, color: '#a3a3a3' })}>
+            {visibleLists.length} collection{visibleLists.length !== 1 ? 's' : ''}
+          </p>
+        </div>
+
+        {/* Collections grid */}
+        {visibleLists.length > 0 && (
+          <div
+            className={css({
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+              gap: 10,
+              '@media (max-width: 480px)': { gridTemplateColumns: '1fr 1fr', gap: 8 },
+            })}
+          >
+            {visibleLists.map(list => (
+              <CollectionCard
+                key={list.key}
+                listKey={list.key}
+                count={data?.[list.key] ?? null}
+                href={`/${list.path}${list.isSingleton ? '/1' : ''}`}
+                createHref={!list.hideCreate && !list.isSingleton ? `/${list.path}/create` : null}
+              />
+            ))}
+          </div>
+        )}
+
+        <QuickCreate />
+
+        {/* Keyboard hint */}
+        <p
+          className={css({
+            marginTop: 48,
+            fontSize: 11.5,
+            color: '#d4d4d4',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          })}
+        >
+          <kbd
+            className={css({
+              display: 'inline-flex',
+              padding: '1px 6px',
+              background: '#ffffff',
+              border: '1px solid #ebebeb',
+              borderRadius: 4,
+              fontSize: 10.5,
+              fontFamily: 'inherit',
+              color: '#a3a3a3',
+            })}
+          >
+            ⌘K
+          </kbd>
+          <span>to search and navigate</span>
+        </p>
+      </div>
+    </PageContainer>
+  )
+}