@nixxie-cms/core 1.0.0 → 1.0.2

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

@@ -1,483 +1,483 @@
-import router, { useRouter } from 'next/router'
-import {
-  type FormEvent,
-  Fragment,
-  type PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import { Button } from '@keystar/ui/button'
-import { AlertDialog, DialogContainer, DialogTrigger } from '@keystar/ui/dialog'
-import { Icon } from '@keystar/ui/icon'
-import { fileWarningIcon } from '@keystar/ui/icon/icons/fileWarningIcon'
-import { Box, VStack } from '@keystar/ui/layout'
-import { ProgressCircle } from '@keystar/ui/progress'
-import { SlotProvider } from '@keystar/ui/slots'
-import { toastQueue } from '@keystar/ui/toast'
-import { Heading, Text } from '@keystar/ui/typography'
-
-import { CombinedGraphQLErrors, gql, useMutation } from '../../../../admin-ui/apollo'
-import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLink'
-import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
-import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
-import { PageContainer } from '../../../../admin-ui/components/PageContainer'
-import { useList, useListItem } from '../../../../admin-ui/context'
-import {
-  deserializeItemToValue,
-  Fields,
-  getConditionalFilterFieldKeys,
-  isActionAvailable,
-  resolveActionMode,
-  serializeItemForConditionalFilters,
-  serializeValueToOperationItem,
-  useHasChanges,
-  useInvalidFields,
-} from '../../../../admin-ui/utils'
-import { pick } from '../../../../admin-ui/utils/pick'
-import type {
-  ActionMeta,
-  BaseListTypeInfo,
-  ConditionalFilter,
-  ConditionalFilterCase,
-  ListMeta,
-} from '../../../../types'
-import { BaseToolbar, ColumnLayout, ItemPageHeader, StickySidebar } from './common'
-
-type ItemPageProps = {
-  listKey: string
-}
-
-function useEventCallback<Func extends (...args: any[]) => unknown>(callback: Func): Func {
-  const callbackRef = useRef(callback)
-  const cb = useCallback((...args: any[]) => {
-    return callbackRef.current(...args)
-  }, [])
-  useEffect(() => {
-    callbackRef.current = callback
-  })
-  return cb as any
-}
-
-function DeleteButton({
-  list,
-  itemId,
-  itemLabel,
-}: {
-  list: ListMeta
-  itemId: string
-  itemLabel: string
-}) {
-  const [errorDialogValue, setErrorDialogValue] = useState<Error | null>(null)
-  const router = useRouter()
-  const [deleteItem] = useMutation(
-    gql`mutation ($id: ID!) {
-      ${list.graphql.names.deleteMutationName}(where: { id: $id }) {
-        id
-      }
-    }`,
-    { variables: { id: itemId } }
-  )
-
-  return (
-    <Fragment>
-      <DialogTrigger>
-        <Button tone="critical">Delete</Button>
-        <AlertDialog
-          tone="critical"
-          title="Delete item"
-          cancelLabel="Cancel"
-          primaryActionLabel="Yes, delete"
-          onPrimaryAction={async () => {
-            try {
-              await deleteItem()
-            } catch (err: any) {
-              toastQueue.critical('Unable to delete item', {
-                actionLabel: 'Details',
-                onAction: () => setErrorDialogValue(err),
-                shouldCloseOnAction: true,
-              })
-              return
-            }
-
-            toastQueue.neutral(`${list.singular} deleted.`, {
-              timeout: 5000,
-            })
-            router.push(list.isSingleton ? '/' : `/${list.path}`)
-          }}
-        >
-          <Text>
-            Are you sure you want to delete <strong style={{ fontWeight: 600 }}>{itemLabel}</strong>
-            ? This action cannot be undone.
-          </Text>
-        </AlertDialog>
-      </DialogTrigger>
-
-      <DialogContainer onDismiss={() => setErrorDialogValue(null)} isDismissable>
-        {errorDialogValue && (
-          <ErrorDetailsDialog title="Unable to delete item" error={errorDialogValue} />
-        )}
-      </DialogContainer>
-    </Fragment>
-  )
-}
-
-function ItemNotFound(props: PropsWithChildren) {
-  return (
-    <VStack
-      alignItems="center"
-      backgroundColor="surface"
-      borderRadius="medium"
-      gap="large"
-      justifyContent="center"
-      minHeight="scale.3000"
-      padding="xlarge"
-    >
-      <Icon src={fileWarningIcon} color="neutralEmphasis" size="large" />
-      <Heading align="center">Not found</Heading>
-      <SlotProvider slots={{ text: { align: 'center', maxWidth: 'scale.5000' } }}>
-        {props.children}
-      </SlotProvider>
-    </VStack>
-  )
-}
-
-function ResetButton(props: { onReset: () => void; hasChanges?: boolean }) {
-  return (
-    <DialogTrigger>
-      <Button tone="accent" isDisabled={!props.hasChanges}>
-        Reset
-      </Button>
-      <AlertDialog
-        title="Reset changes"
-        cancelLabel="Cancel"
-        primaryActionLabel="Yes, reset"
-        autoFocusButton="primary"
-        onPrimaryAction={props.onReset}
-      >
-        Are you sure? Any unsaved changes will be lost and cannot be recovered.
-      </AlertDialog>
-    </DialogTrigger>
-  )
-}
-
-function ItemForm({
-  listKey,
-  initialValue,
-  value,
-  onChange,
-  itemLabel,
-  onSaveSuccess,
-  fieldModes,
-  fieldPositions,
-  isRequireds,
-}: {
-  listKey: string
-  initialValue: Record<string, unknown>
-  value: Record<string, unknown>
-  onChange: (value: Record<string, unknown>) => void
-  itemLabel: string
-  onSaveSuccess: () => void
-  fieldModes: Record<
-    string,
-    ConditionalFilter<'edit' | 'read' | 'hidden', 'read' | 'hidden', BaseListTypeInfo>
-  >
-  isRequireds: Record<string, ConditionalFilterCase<BaseListTypeInfo>>
-  fieldPositions: Record<string, 'form' | 'sidebar'>
-}) {
-  const list = useList(listKey)
-  const itemId = initialValue.id as string
-  const [updateError, setUpdateError] = useState<Error | null>(null)
-  const [update, { loading, error }] = useMutation(
-    gql`mutation ($id: ID!, $data: ${list.graphql.names.updateInputName}!) {
-      item: ${list.graphql.names.updateMutationName}(where: { id: $id }, data: $data) {
-        id
-      }
-    }`,
-    { errorPolicy: 'all' }
-  )
-
-  function resetValueState() {
-    onChange(initialValue)
-  }
-
-  const invalidFields = useInvalidFields(list.fields, value, isRequireds)
-  const [forceValidation, setForceValidation] = useState(false)
-  const onSave = useEventCallback(async (e: FormEvent<HTMLFormElement>) => {
-    if (e.target !== e.currentTarget) return
-    e.preventDefault()
-    const newForceValidation = invalidFields.size !== 0
-    setForceValidation(newForceValidation)
-    if (newForceValidation) return
-
-    const { error: _error } = await update({
-      variables: {
-        id: itemId,
-        data: serializeValueToOperationItem('update', list.fields, value, initialValue),
-      },
-    })
-
-    const error = CombinedGraphQLErrors.is(_error)
-      ? _error.errors.find(x => x.path === undefined || x.path?.length === 1)
-      : _error
-    if (error) {
-      toastQueue.critical('Unable to save item', {
-        actionLabel: 'Details',
-        onAction: () => setUpdateError(new Error(error.message)),
-        shouldCloseOnAction: true,
-      })
-      return
-    }
-
-    toastQueue.positive(`Saved changes to ${list.singular.toLocaleLowerCase()}.`, {
-      timeout: 5000,
-    })
-
-    onSaveSuccess()
-  })
-
-  const hasChangedFields = useHasChanges('update', list.fields, value, initialValue)
-
-  return (
-    <Fragment>
-      <form onSubmit={onSave} style={{ display: 'contents' }}>
-        {/*
-          Workaround for react-aria "bug" where pressing enter in a form field
-          moves focus to the submit button.
-          See: https://github.com/adobe/react-spectrum/issues/5940
-        */}
-        <button type="submit" style={{ display: 'none' }} />
-        <VStack gap="large" gridArea="main" marginTop="xlarge" minWidth={0}>
-          <GraphQLErrorNotice
-            errors={
-              CombinedGraphQLErrors.is(error)
-                ? error.errors.filter(x => x.path === undefined || x.path?.length === 1)
-                : [error]
-            }
-          />
-          <Fields
-            view="itemView"
-            position="form"
-            fields={list.fields}
-            groups={list.groups}
-            forceValidation={forceValidation}
-            invalidFields={invalidFields}
-            fieldModes={fieldModes}
-            fieldPositions={fieldPositions}
-            onChange={onChange}
-            value={value}
-            isRequireds={isRequireds}
-          />
-        </VStack>
-
-        <StickySidebar>
-          <Fields
-            view="itemView"
-            position="sidebar"
-            fields={list.fields}
-            groups={list.groups}
-            forceValidation={forceValidation}
-            invalidFields={invalidFields}
-            onChange={onChange}
-            value={value}
-            fieldModes={fieldModes}
-            fieldPositions={fieldPositions}
-            isRequireds={isRequireds}
-          />
-        </StickySidebar>
-
-        <BaseToolbar>
-          <Button
-            isDisabled={!hasChangedFields}
-            isPending={loading}
-            prominence="high"
-            type="submit"
-          >
-            Save
-          </Button>
-          <ResetButton hasChanges={hasChangedFields} onReset={resetValueState} />
-          <Box flex />
-          {!list.hideDelete ? (
-            <DeleteButton list={list} itemId={itemId} itemLabel={itemLabel} />
-          ) : null}
-        </BaseToolbar>
-      </form>
-
-      <DialogContainer onDismiss={() => setUpdateError(null)} isDismissable>
-        {updateError && <ErrorDetailsDialog title="Unable to save item" error={updateError} />}
-      </DialogContainer>
-    </Fragment>
-  )
-}
-
-export const getItemPage = (props: ItemPageProps) => () => <ItemPage {...props} />
-
-function ItemPage({ listKey }: ItemPageProps) {
-  const list = useList(listKey)
-  const id_ = useRouter().query.id
-  const [itemId] = Array.isArray(id_) ? id_ : [id_]
-  const { data, error, loading, refetch } = useListItem(listKey, itemId ?? null)
-  const item = data?.item
-  const itemLabel_ = item?.[list.labelField] ?? item?.id
-  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : (itemId ?? '')
-
-  const pageLoading = loading || itemId === undefined
-  const pageLabel = itemLabel || itemId
-  const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel
-  const initialValue = useMemo(() => {
-    if (!item) return null
-    return deserializeItemToValue(list.fields, item)
-  }, [list.fields, data?.item])
-  const [value, setValue] = useState<Record<string, unknown> | null>(null)
-  useEffect(() => {
-    setValue(initialValue)
-  }, [initialValue])
-
-  const { actionModes, fieldModes, fieldPositions, isRequireds } = useMemo(() => {
-    type ActionMode = (typeof list.actions)[number]['itemView']['actionMode']
-    type ListField = (typeof list.fields)[keyof typeof list.fields]
-    type FieldMode = ListField['itemView']['fieldMode']
-    type FieldPosition = ListField['itemView']['fieldPosition']
-    type IsRequired = ListField['itemView']['isRequired']
-
-    const actionModes: Record<string, ActionMode> = {}
-    for (const action of list.actions) {
-      actionModes[action.key] = action.itemView.actionMode
-    }
-    const fieldModes: Record<string, FieldMode> = {}
-    const fieldPositions: Record<string, FieldPosition> = {}
-    const isRequireds: Record<string, IsRequired> = {}
-    for (const [fieldKey, field] of Object.entries(list.fields)) {
-      fieldModes[fieldKey] = field.itemView.fieldMode
-      fieldPositions[fieldKey] = field.itemView.fieldPosition
-      isRequireds[fieldKey] = field.itemView.isRequired
-    }
-    for (const field of data?.nixxie?.adminMeta?.list?.fields ?? []) {
-      if (
-        !field?.itemView ||
-        !field.key ||
-        !field.itemView.fieldMode ||
-        !field.itemView.fieldPosition ||
-        field.itemView.isRequired == null
-      )
-        continue
-      fieldModes[field.key] = field.itemView.fieldMode
-      fieldPositions[field.key] = field.itemView.fieldPosition
-      isRequireds[field.key] = field.itemView.isRequired
-    }
-    for (const action of data?.nixxie?.adminMeta?.list?.actions ?? []) {
-      if (!action?.itemView?.actionMode || !action.key) continue
-      actionModes[action.key] = action.itemView.actionMode
-    }
-
-    return {
-      actionModes,
-      fieldModes,
-      fieldPositions,
-      isRequireds,
-    }
-  }, [
-    data?.nixxie?.adminMeta?.list?.actions,
-    data?.nixxie?.adminMeta?.list?.fields,
-    list.actions,
-    list.fields,
-  ])
-
-  const actionsInContext = useMemo(() => {
-    if (!value) return []
-    return list.actions
-      .map(action => {
-        const fieldKeys = getConditionalFilterFieldKeys(actionModes[action.key])
-        const fields = pick(list.fields, fieldKeys)
-        const serializedValue = serializeItemForConditionalFilters(fields, value)
-        return {
-          ...action,
-          itemView: {
-            ...action.itemView,
-            actionMode: resolveActionMode(actionModes[action.key], serializedValue),
-          },
-        }
-      })
-      .filter(action => isActionAvailable(action, action.itemView))
-  }, [actionModes, list.actions, list.fields, value])
-
-  function onAction(action: ActionMeta, resultId: string | null) {
-    const { navigation } = action.itemView
-
-    if ((navigation === 'follow' && resultId === itemId) || navigation === 'refetch') {
-      refetch()
-    } else if (navigation === 'follow' && resultId) {
-      router.push(`/${list.path}/${resultId}`)
-    } else {
-      router.push(list.isSingleton ? '/' : `/${list.path}`)
-    }
-  }
-
-  return (
-    <PageContainer
-      title={pageTitle}
-      header={
-        <ItemPageHeader
-          list={list}
-          actions={actionsInContext}
-          label={typeof pageLabel !== 'string' ? 'Loading...' : pageLabel}
-          title={pageTitle}
-          item={item ?? null}
-          value={value ?? initialValue}
-          initialValue={initialValue}
-          onAction={onAction}
-        />
-      }
-    >
-      {pageLoading ? (
-        <VStack height="100%" alignItems="center" justifyContent="center">
-          <ProgressCircle aria-label="loading item data" size="large" isIndeterminate />
-        </VStack>
-      ) : (
-        <ColumnLayout>
-          <Box marginY="xlarge">
-            <GraphQLErrorNotice errors={[error]} />
-            {item == null &&
-              (list.isSingleton ? (
-                itemId === '1' ? (
-                  <ItemNotFound>
-                    <Text>“{list.label}” doesn’t exist, or you don’t have access to it.</Text>
-                    {!list.hideCreate && <CreateButtonLink list={list} />}
-                  </ItemNotFound>
-                ) : (
-                  <ItemNotFound>
-                    <Text>
-                      An item with ID <strong>“{itemId}”</strong> does not exist.
-                    </Text>
-                  </ItemNotFound>
-                )
-              ) : (
-                <ItemNotFound>
-                  <Text>
-                    The item with ID <strong>“{itemId}”</strong> doesn’t exist, or you don’t have
-                    access to it.
-                  </Text>
-                </ItemNotFound>
-              ))}
-          </Box>
-          {initialValue && value && (
-            <ItemForm
-              fieldModes={fieldModes}
-              fieldPositions={fieldPositions}
-              isRequireds={isRequireds}
-              listKey={listKey}
-              itemLabel={itemLabel}
-              initialValue={initialValue}
-              value={value}
-              onChange={setValue}
-              onSaveSuccess={refetch}
-            />
-          )}
-        </ColumnLayout>
-      )}
-    </PageContainer>
-  )
-}
+import router, { useRouter } from 'next/router'
+import {
+  type FormEvent,
+  Fragment,
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { Button } from '@keystar/ui/button'
+import { AlertDialog, DialogContainer, DialogTrigger } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { fileWarningIcon } from '@keystar/ui/icon/icons/fileWarningIcon'
+import { Box, VStack } from '@keystar/ui/layout'
+import { ProgressCircle } from '@keystar/ui/progress'
+import { SlotProvider } from '@keystar/ui/slots'
+import { toastQueue } from '@keystar/ui/toast'
+import { Heading, Text } from '@keystar/ui/typography'
+
+import { CombinedGraphQLErrors, gql, useMutation } from '../../../../admin-ui/apollo'
+import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLink'
+import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import { useList, useListItem } from '../../../../admin-ui/context'
+import {
+  deserializeItemToValue,
+  Fields,
+  getConditionalFilterFieldKeys,
+  isActionAvailable,
+  resolveActionMode,
+  serializeItemForConditionalFilters,
+  serializeValueToOperationItem,
+  useHasChanges,
+  useInvalidFields,
+} from '../../../../admin-ui/utils'
+import { pick } from '../../../../admin-ui/utils/pick'
+import type {
+  ActionMeta,
+  BaseListTypeInfo,
+  ConditionalFilter,
+  ConditionalFilterCase,
+  ListMeta,
+} from '../../../../types'
+import { BaseToolbar, ColumnLayout, ItemPageHeader, StickySidebar } from './common'
+
+type ItemPageProps = {
+  listKey: string
+}
+
+function useEventCallback<Func extends (...args: any[]) => unknown>(callback: Func): Func {
+  const callbackRef = useRef(callback)
+  const cb = useCallback((...args: any[]) => {
+    return callbackRef.current(...args)
+  }, [])
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+  return cb as any
+}
+
+function DeleteButton({
+  list,
+  itemId,
+  itemLabel,
+}: {
+  list: ListMeta
+  itemId: string
+  itemLabel: string
+}) {
+  const [errorDialogValue, setErrorDialogValue] = useState<Error | null>(null)
+  const router = useRouter()
+  const [deleteItem] = useMutation(
+    gql`mutation ($id: ID!) {
+      ${list.graphql.names.deleteMutationName}(where: { id: $id }) {
+        id
+      }
+    }`,
+    { variables: { id: itemId } }
+  )
+
+  return (
+    <Fragment>
+      <DialogTrigger>
+        <Button tone="critical">Delete</Button>
+        <AlertDialog
+          tone="critical"
+          title="Delete item"
+          cancelLabel="Cancel"
+          primaryActionLabel="Yes, delete"
+          onPrimaryAction={async () => {
+            try {
+              await deleteItem()
+            } catch (err: any) {
+              toastQueue.critical('Unable to delete item', {
+                actionLabel: 'Details',
+                onAction: () => setErrorDialogValue(err),
+                shouldCloseOnAction: true,
+              })
+              return
+            }
+
+            toastQueue.neutral(`${list.singular} deleted.`, {
+              timeout: 5000,
+            })
+            router.push(list.isSingleton ? '/' : `/${list.path}`)
+          }}
+        >
+          <Text>
+            Are you sure you want to delete <strong style={{ fontWeight: 600 }}>{itemLabel}</strong>
+            ? This action cannot be undone.
+          </Text>
+        </AlertDialog>
+      </DialogTrigger>
+
+      <DialogContainer onDismiss={() => setErrorDialogValue(null)} isDismissable>
+        {errorDialogValue && (
+          <ErrorDetailsDialog title="Unable to delete item" error={errorDialogValue} />
+        )}
+      </DialogContainer>
+    </Fragment>
+  )
+}
+
+function ItemNotFound(props: PropsWithChildren) {
+  return (
+    <VStack
+      alignItems="center"
+      backgroundColor="surface"
+      borderRadius="medium"
+      gap="large"
+      justifyContent="center"
+      minHeight="scale.3000"
+      padding="xlarge"
+    >
+      <Icon src={fileWarningIcon} color="neutralEmphasis" size="large" />
+      <Heading align="center">Not found</Heading>
+      <SlotProvider slots={{ text: { align: 'center', maxWidth: 'scale.5000' } }}>
+        {props.children}
+      </SlotProvider>
+    </VStack>
+  )
+}
+
+function ResetButton(props: { onReset: () => void; hasChanges?: boolean }) {
+  return (
+    <DialogTrigger>
+      <Button tone="accent" isDisabled={!props.hasChanges}>
+        Reset
+      </Button>
+      <AlertDialog
+        title="Reset changes"
+        cancelLabel="Cancel"
+        primaryActionLabel="Yes, reset"
+        autoFocusButton="primary"
+        onPrimaryAction={props.onReset}
+      >
+        Are you sure? Any unsaved changes will be lost and cannot be recovered.
+      </AlertDialog>
+    </DialogTrigger>
+  )
+}
+
+function ItemForm({
+  listKey,
+  initialValue,
+  value,
+  onChange,
+  itemLabel,
+  onSaveSuccess,
+  fieldModes,
+  fieldPositions,
+  isRequireds,
+}: {
+  listKey: string
+  initialValue: Record<string, unknown>
+  value: Record<string, unknown>
+  onChange: (value: Record<string, unknown>) => void
+  itemLabel: string
+  onSaveSuccess: () => void
+  fieldModes: Record<
+    string,
+    ConditionalFilter<'edit' | 'read' | 'hidden', 'read' | 'hidden', BaseListTypeInfo>
+  >
+  isRequireds: Record<string, ConditionalFilterCase<BaseListTypeInfo>>
+  fieldPositions: Record<string, 'form' | 'sidebar'>
+}) {
+  const list = useList(listKey)
+  const itemId = initialValue.id as string
+  const [updateError, setUpdateError] = useState<Error | null>(null)
+  const [update, { loading, error }] = useMutation(
+    gql`mutation ($id: ID!, $data: ${list.graphql.names.updateInputName}!) {
+      item: ${list.graphql.names.updateMutationName}(where: { id: $id }, data: $data) {
+        id
+      }
+    }`,
+    { errorPolicy: 'all' }
+  )
+
+  function resetValueState() {
+    onChange(initialValue)
+  }
+
+  const invalidFields = useInvalidFields(list.fields, value, isRequireds)
+  const [forceValidation, setForceValidation] = useState(false)
+  const onSave = useEventCallback(async (e: FormEvent<HTMLFormElement>) => {
+    if (e.target !== e.currentTarget) return
+    e.preventDefault()
+    const newForceValidation = invalidFields.size !== 0
+    setForceValidation(newForceValidation)
+    if (newForceValidation) return
+
+    const { error: _error } = await update({
+      variables: {
+        id: itemId,
+        data: serializeValueToOperationItem('update', list.fields, value, initialValue),
+      },
+    })
+
+    const error = CombinedGraphQLErrors.is(_error)
+      ? _error.errors.find(x => x.path === undefined || x.path?.length === 1)
+      : _error
+    if (error) {
+      toastQueue.critical('Unable to save item', {
+        actionLabel: 'Details',
+        onAction: () => setUpdateError(new Error(error.message)),
+        shouldCloseOnAction: true,
+      })
+      return
+    }
+
+    toastQueue.positive(`Saved changes to ${list.singular.toLocaleLowerCase()}.`, {
+      timeout: 5000,
+    })
+
+    onSaveSuccess()
+  })
+
+  const hasChangedFields = useHasChanges('update', list.fields, value, initialValue)
+
+  return (
+    <Fragment>
+      <form onSubmit={onSave} style={{ display: 'contents' }}>
+        {/*
+          Workaround for react-aria "bug" where pressing enter in a form field
+          moves focus to the submit button.
+          See: https://github.com/adobe/react-spectrum/issues/5940
+        */}
+        <button type="submit" style={{ display: 'none' }} />
+        <VStack gap="large" gridArea="main" marginTop="xlarge" minWidth={0}>
+          <GraphQLErrorNotice
+            errors={
+              CombinedGraphQLErrors.is(error)
+                ? error.errors.filter(x => x.path === undefined || x.path?.length === 1)
+                : [error]
+            }
+          />
+          <Fields
+            view="itemView"
+            position="form"
+            fields={list.fields}
+            groups={list.groups}
+            forceValidation={forceValidation}
+            invalidFields={invalidFields}
+            fieldModes={fieldModes}
+            fieldPositions={fieldPositions}
+            onChange={onChange}
+            value={value}
+            isRequireds={isRequireds}
+          />
+        </VStack>
+
+        <StickySidebar>
+          <Fields
+            view="itemView"
+            position="sidebar"
+            fields={list.fields}
+            groups={list.groups}
+            forceValidation={forceValidation}
+            invalidFields={invalidFields}
+            onChange={onChange}
+            value={value}
+            fieldModes={fieldModes}
+            fieldPositions={fieldPositions}
+            isRequireds={isRequireds}
+          />
+        </StickySidebar>
+
+        <BaseToolbar>
+          <Button
+            isDisabled={!hasChangedFields}
+            isPending={loading}
+            prominence="high"
+            type="submit"
+          >
+            Save
+          </Button>
+          <ResetButton hasChanges={hasChangedFields} onReset={resetValueState} />
+          <Box flex />
+          {!list.hideDelete ? (
+            <DeleteButton list={list} itemId={itemId} itemLabel={itemLabel} />
+          ) : null}
+        </BaseToolbar>
+      </form>
+
+      <DialogContainer onDismiss={() => setUpdateError(null)} isDismissable>
+        {updateError && <ErrorDetailsDialog title="Unable to save item" error={updateError} />}
+      </DialogContainer>
+    </Fragment>
+  )
+}
+
+export const getItemPage = (props: ItemPageProps) => () => <ItemPage {...props} />
+
+function ItemPage({ listKey }: ItemPageProps) {
+  const list = useList(listKey)
+  const id_ = useRouter().query.id
+  const [itemId] = Array.isArray(id_) ? id_ : [id_]
+  const { data, error, loading, refetch } = useListItem(listKey, itemId ?? null)
+  const item = data?.item
+  const itemLabel_ = item?.[list.labelField] ?? item?.id
+  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : (itemId ?? '')
+
+  const pageLoading = loading || itemId === undefined
+  const pageLabel = itemLabel || itemId
+  const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel
+  const initialValue = useMemo(() => {
+    if (!item) return null
+    return deserializeItemToValue(list.fields, item)
+  }, [list.fields, data?.item])
+  const [value, setValue] = useState<Record<string, unknown> | null>(null)
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  const { actionModes, fieldModes, fieldPositions, isRequireds } = useMemo(() => {
+    type ActionMode = (typeof list.actions)[number]['itemView']['actionMode']
+    type ListField = (typeof list.fields)[keyof typeof list.fields]
+    type FieldMode = ListField['itemView']['fieldMode']
+    type FieldPosition = ListField['itemView']['fieldPosition']
+    type IsRequired = ListField['itemView']['isRequired']
+
+    const actionModes: Record<string, ActionMode> = {}
+    for (const action of list.actions) {
+      actionModes[action.key] = action.itemView.actionMode
+    }
+    const fieldModes: Record<string, FieldMode> = {}
+    const fieldPositions: Record<string, FieldPosition> = {}
+    const isRequireds: Record<string, IsRequired> = {}
+    for (const [fieldKey, field] of Object.entries(list.fields)) {
+      fieldModes[fieldKey] = field.itemView.fieldMode
+      fieldPositions[fieldKey] = field.itemView.fieldPosition
+      isRequireds[fieldKey] = field.itemView.isRequired
+    }
+    for (const field of data?.nixxie?.adminMeta?.list?.fields ?? []) {
+      if (
+        !field?.itemView ||
+        !field.key ||
+        !field.itemView.fieldMode ||
+        !field.itemView.fieldPosition ||
+        field.itemView.isRequired == null
+      )
+        continue
+      fieldModes[field.key] = field.itemView.fieldMode
+      fieldPositions[field.key] = field.itemView.fieldPosition
+      isRequireds[field.key] = field.itemView.isRequired
+    }
+    for (const action of data?.nixxie?.adminMeta?.list?.actions ?? []) {
+      if (!action?.itemView?.actionMode || !action.key) continue
+      actionModes[action.key] = action.itemView.actionMode
+    }
+
+    return {
+      actionModes,
+      fieldModes,
+      fieldPositions,
+      isRequireds,
+    }
+  }, [
+    data?.nixxie?.adminMeta?.list?.actions,
+    data?.nixxie?.adminMeta?.list?.fields,
+    list.actions,
+    list.fields,
+  ])
+
+  const actionsInContext = useMemo(() => {
+    if (!value) return []
+    return list.actions
+      .map(action => {
+        const fieldKeys = getConditionalFilterFieldKeys(actionModes[action.key])
+        const fields = pick(list.fields, fieldKeys)
+        const serializedValue = serializeItemForConditionalFilters(fields, value)
+        return {
+          ...action,
+          itemView: {
+            ...action.itemView,
+            actionMode: resolveActionMode(actionModes[action.key], serializedValue),
+          },
+        }
+      })
+      .filter(action => isActionAvailable(action, action.itemView))
+  }, [actionModes, list.actions, list.fields, value])
+
+  function onAction(action: ActionMeta, resultId: string | null) {
+    const { navigation } = action.itemView
+
+    if ((navigation === 'follow' && resultId === itemId) || navigation === 'refetch') {
+      refetch()
+    } else if (navigation === 'follow' && resultId) {
+      router.push(`/${list.path}/${resultId}`)
+    } else {
+      router.push(list.isSingleton ? '/' : `/${list.path}`)
+    }
+  }
+
+  return (
+    <PageContainer
+      title={pageTitle}
+      header={
+        <ItemPageHeader
+          list={list}
+          actions={actionsInContext}
+          label={typeof pageLabel !== 'string' ? 'Loading...' : pageLabel}
+          title={pageTitle}
+          item={item ?? null}
+          value={value ?? initialValue}
+          initialValue={initialValue}
+          onAction={onAction}
+        />
+      }
+    >
+      {pageLoading ? (
+        <VStack height="100%" alignItems="center" justifyContent="center">
+          <ProgressCircle aria-label="loading item data" size="large" isIndeterminate />
+        </VStack>
+      ) : (
+        <ColumnLayout>
+          <Box marginY="xlarge">
+            <GraphQLErrorNotice errors={[error]} />
+            {item == null &&
+              (list.isSingleton ? (
+                itemId === '1' ? (
+                  <ItemNotFound>
+                    <Text>“{list.label}” doesn’t exist, or you don’t have access to it.</Text>
+                    {!list.hideCreate && <CreateButtonLink list={list} />}
+                  </ItemNotFound>
+                ) : (
+                  <ItemNotFound>
+                    <Text>
+                      An item with ID <strong>“{itemId}”</strong> does not exist.
+                    </Text>
+                  </ItemNotFound>
+                )
+              ) : (
+                <ItemNotFound>
+                  <Text>
+                    The item with ID <strong>“{itemId}”</strong> doesn’t exist, or you don’t have
+                    access to it.
+                  </Text>
+                </ItemNotFound>
+              ))}
+          </Box>
+          {initialValue && value && (
+            <ItemForm
+              fieldModes={fieldModes}
+              fieldPositions={fieldPositions}
+              isRequireds={isRequireds}
+              listKey={listKey}
+              itemLabel={itemLabel}
+              initialValue={initialValue}
+              value={value}
+              onChange={setValue}
+              onSaveSuccess={refetch}
+            />
+          )}
+        </ColumnLayout>
+      )}
+    </PageContainer>
+  )
+}