@nixxie-cms/core 1.0.0

package/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx

@@ -0,0 +1,1006 @@
+import isDeepEqual from 'fast-deep-equal'
+import type { GraphQLFormattedError } from 'graphql'
+import { useRouter } from 'next/router'
+import type { ParsedUrlQuery, ParsedUrlQueryInput } from 'querystring'
+import { type FormEvent, type Key, Fragment, useEffect, useId, useMemo, useState } from 'react'
+
+import { ActionBar, ActionBarContainer, Item } from '@keystar/ui/action-bar'
+import { ActionButton, Button, ButtonGroup } from '@keystar/ui/button'
+import { AlertDialog, Dialog, DialogContainer, DialogTrigger } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { allIcons as KeystarIcons } from '@keystar/ui/icon/all'
+import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'
+import { searchXIcon } from '@keystar/ui/icon/icons/searchXIcon'
+import { textSelectIcon } from '@keystar/ui/icon/icons/textSelectIcon'
+import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon'
+import { Box, Flex, HStack, VStack } from '@keystar/ui/layout'
+import { Menu, MenuTrigger } from '@keystar/ui/menu'
+import { ProgressCircle } from '@keystar/ui/progress'
+import { SearchField } from '@keystar/ui/search-field'
+import { Content } from '@keystar/ui/slots'
+import { css, tokenSchema } from '@keystar/ui/style'
+import {
+  type SortDescriptor,
+  Cell,
+  Column,
+  Row,
+  TableBody,
+  TableHeader,
+  TableView,
+} from '@keystar/ui/table'
+import { toastQueue } from '@keystar/ui/toast'
+import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
+import { Heading, Text } from '@keystar/ui/typography'
+
+import { TextLink } from '@keystar/ui/link'
+import { Notice } from '@keystar/ui/notice'
+import type { TypedDocumentNode } from '../../../../admin-ui/apollo'
+import { CombinedGraphQLErrors, gql, useMutation, useQuery } from '../../../../admin-ui/apollo'
+import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLink'
+import { EmptyState } from '../../../../admin-ui/components/EmptyState'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import { useList } from '../../../../admin-ui/context'
+import {
+  deserializeItemToValue,
+  getConditionalFilterFieldKeys,
+  isActionAvailable,
+  resolveActionMode,
+  serializeItemForConditionalFilters,
+} from '../../../../admin-ui/utils'
+import { getActionArguments } from '../../../../admin-ui/utils/actionData'
+import { pick } from '../../../../admin-ui/utils/pick'
+import { useSearchFilter } from '../../../../fields/types/relationship/views/useFilter'
+import type { ActionMeta, FieldMeta, JSONValue, ListMeta } from '../../../../types'
+import { FilterAdd } from './FilterAdd'
+import { PaginationControls, snapValueToClosest } from './PaginationControls'
+import { Tag } from './Tag'
+
+type ListPageProps = { listKey: string }
+export type Filter = {
+  field: string
+  type: string
+  value: JSONValue
+}
+
+function FilterTag({
+  filter,
+  field,
+  onChange,
+  onRemove,
+}: {
+  filter: Filter
+  field: FieldMeta
+  onChange: (filter: Filter) => void
+  onRemove: () => void
+}) {
+  const Label = field.controller.filter!.Label
+  const tagElement = (
+    <Tag onRemove={onRemove}>
+      <Text>
+        <span>{field.label} </span>
+        <Label
+          label={field.controller.filter!.types[filter.type].label}
+          type={filter.type}
+          value={filter.value}
+        />
+      </Text>
+    </Tag>
+  )
+
+  // TODO: Special "empty" types need to be documented somewhere. Filters that
+  // have no editable value, basically `null` or `!null`. Which offers:
+  // * better DX — we can avoid weird nullable types and UIs that don't make sense
+  // * better UX — users don't have to jump through mental hoops, like "is not exactly" + submit empty field
+  if (filter.type === 'empty' || filter.type === 'not_empty') return tagElement
+
+  return (
+    <DialogTrigger type="popover" mobileType="tray">
+      {tagElement}
+      {onDismiss => (
+        <FilterEdit onChange={onChange} onDismiss={onDismiss} field={field} filter={filter} />
+      )}
+    </DialogTrigger>
+  )
+}
+
+function FilterEdit({
+  filter,
+  field,
+  onChange: onAdd,
+  onDismiss,
+}: {
+  filter: Filter
+  field: FieldMeta
+  onChange: (filter: Filter) => void
+  onDismiss: () => void
+}) {
+  const formId = useId()
+  const [value, setValue] = useState(filter.value)
+  const onSubmit = (event: FormEvent) => {
+    if (event.target !== event.currentTarget) return
+    event.preventDefault()
+
+    onAdd({
+      ...filter,
+      value,
+    })
+    onDismiss()
+  }
+
+  const Filter = field.controller.filter!.Filter
+  const filterTypeLabel = field.controller.filter?.types[filter.type].label
+
+  return (
+    <Dialog>
+      <Heading>{field.label}</Heading>
+      <Content>
+        <form onSubmit={onSubmit} id={formId}>
+          <Filter
+            autoFocus
+            context="edit"
+            typeLabel={filterTypeLabel}
+            onChange={setValue}
+            type={filter.type}
+            value={value}
+          />
+        </form>
+      </Content>
+      <ButtonGroup>
+        <Button onPress={onDismiss}>Cancel</Button>
+        <Button type="submit" prominence="high" form={formId}>
+          Save
+        </Button>
+      </ButtonGroup>
+    </Dialog>
+  )
+}
+
+function getFilters(list: ListMeta, query: ParsedUrlQueryInput): Filter[] {
+  const param_ = query.filter
+  const params = Array.isArray(param_) ? param_ : typeof param_ === 'string' ? [param_] : []
+
+  if (!params.length) {
+    if (!list.initialFilter) return []
+
+    const filters: Filter[] = []
+    for (const [fieldKey, filter] of Object.entries(list.initialFilter)) {
+      const { controller } = list.fields[fieldKey]
+      for (const f of controller.filter?.parseGraphQL(filter as any as never) ?? []) {
+        filters.push({
+          field: fieldKey,
+          ...f,
+        })
+      }
+    }
+
+    return filters
+  }
+
+  const filters: Filter[] = []
+  for (const [fieldPath, field] of Object.entries(list.fields)) {
+    if (!field.isFilterable) continue
+    if (!field.controller.filter) continue
+
+    for (const filterType in field.controller.filter.types) {
+      const prefix = `${fieldPath}_${filterType}`
+      for (const queryFilter of params) {
+        if (!queryFilter.startsWith(prefix)) continue
+
+        if (queryFilter === prefix) {
+          filters.push({
+            type: filterType,
+            field: fieldPath,
+            value: null,
+          })
+          continue
+        }
+
+        const queryValue = queryFilter.slice(prefix.length + 1)
+        try {
+          const value = JSON.parse(queryValue)
+          filters.push({
+            type: filterType,
+            field: fieldPath,
+            value,
+          })
+        } catch (e) {
+          console.error('Error parsing filter', queryFilter)
+        }
+      }
+    }
+  }
+
+  return filters
+}
+
+function getSort(list: ListMeta, query: ParsedUrlQueryInput): SortDescriptor | null {
+  const param = typeof query.sortBy === 'string' ? query.sortBy : null
+  if (param === '') return null
+  if (!param) {
+    if (!list.initialSort) return null
+    return {
+      column: list.initialSort.field,
+      direction: list.initialSort.direction === 'ASC' ? 'ascending' : 'descending',
+    }
+  }
+
+  const fieldKey = param.startsWith('-') ? param.slice(1) : param
+  const direction = param.startsWith('-') ? 'descending' : 'ascending'
+  const field = list.fields[fieldKey]
+  if (!field) return null
+  if (!field.isOrderable) return null
+
+  return {
+    column: fieldKey,
+    direction,
+  }
+}
+
+function getCurrentPage(_: ListMeta, query: ParsedUrlQuery) {
+  const currentPage = Number(query.page)
+  if (Number.isNaN(currentPage) || currentPage < 1) return 1
+  return currentPage
+}
+
+function getPageSize(list: ListMeta, query: ParsedUrlQuery) {
+  const pageSize = Number(query.pageSize)
+  if (Number.isNaN(pageSize) || pageSize < 1) return list.pageSize
+  return snapValueToClosest(pageSize)
+}
+
+function getColumns(list: ListMeta, query: ParsedUrlQueryInput): string[] {
+  const param_ = query.column
+  const params = Array.isArray(param_) ? param_ : typeof param_ === 'string' ? [param_] : []
+  if (!params.length) return list.initialColumns
+  return params
+}
+
+export const getListPage = (props: ListPageProps) => () => <ListPage {...props} />
+
+type Selection = Set<string | number> | 'all'
+function ListPage({ listKey }: ListPageProps) {
+  const localStorageListKey = `nixxie.list.${listKey}.list.page.info`
+
+  const list = useList(listKey)
+  const { query, replace: routerReplace, isReady } = useRouter()
+  const [loaded, setLoaded] = useState(false)
+  const [sort, setSort] = useState<SortDescriptor | null>(() => getSort(list, {}))
+  const [columns, setColumns] = useState<string[]>(list.initialColumns)
+  const [filters, setFilters] = useState<Filter[]>(() => getFilters(list, {}))
+  const [currentPage, setCurrentPage] = useState<number>(1)
+  const [pageSize, setPageSize] = useState<number>(list.pageSize)
+  const [searchString, setSearchString] = useState('')
+  const [selectedItems, setSelectedItems] = useState<Selection>(() => new Set([]))
+  const [activeAction, setActiveAction] = useState<Key | null>(null)
+  const [actionResult, setActionResult] = useState<ActionErrorResult | null>(null)
+  const dirty = useMemo(() => {
+    const defaultFilters = getFilters(list, {})
+    const defaultSort = getSort(list, {})
+    return (
+      !!searchString ||
+      !isDeepEqual(filters, defaultFilters) ||
+      !isDeepEqual(sort, defaultSort) ||
+      !isDeepEqual(columns, list.initialColumns)
+    )
+  }, [searchString, filters, sort, columns, list.initialColumns])
+
+  useEffect(() => {
+    if (!isReady) return
+    if (loaded) return
+    let localStorageQuery
+    try {
+      localStorageQuery = JSON.parse(localStorage.getItem(localStorageListKey) ?? '{}')
+    } catch {}
+
+    setSort(getSort(list, { ...localStorageQuery, ...query }))
+    setColumns(getColumns(list, { ...localStorageQuery, ...query }))
+    setFilters(getFilters(list, { ...localStorageQuery, ...query }))
+    setCurrentPage(getCurrentPage(list, { ...localStorageQuery, ...query }))
+    setPageSize(getPageSize(list, { ...localStorageQuery, ...query }))
+    setSearchString(typeof query.search === 'string' ? query.search : '')
+    setLoaded(true)
+  }, [list, isReady])
+
+  useEffect(() => {
+    if (!isReady) return
+    if (!loaded) return // TODO: stop this race condition properly
+    const updatedQuery: ParsedUrlQueryInput = {
+      ...(columns.length ? { column: columns } : {}),
+      ...(sort ? { sortBy: sort.direction === 'ascending' ? sort.column : `-${sort.column}` } : {}),
+      ...(filters.length
+        ? {
+            filter: (function () {
+              const result: string[] = []
+              for (const filter of filters) {
+                if (filter.type === 'not_empty' || filter.type === 'empty') {
+                  result.push(`${filter.field}_${filter.type}`)
+                  continue
+                }
+
+                result.push(`${filter.field}_${filter.type}_${JSON.stringify(filter.value)}`)
+              }
+              return result
+            })(),
+          }
+        : {}),
+      ...(currentPage > 1 ? { page: currentPage } : {}),
+      ...(pageSize !== list.pageSize ? { pageSize } : {}),
+      ...(searchString ? { search: searchString } : {}),
+    }
+
+    localStorage.setItem(localStorageListKey, JSON.stringify(updatedQuery))
+    routerReplace({ query: updatedQuery })
+  }, [columns, sort, filters, currentPage, pageSize, searchString, list, loaded])
+
+  const allowCreate = !(list.hideCreate ?? true)
+  const isConstrained = Boolean(filters.length || query.search)
+  const readableFields = Object.values(list.fields).map(f => ({
+    id: f.key,
+    value: f.key,
+    label: f.label,
+    isDisabled: f.listView.fieldMode === 'read',
+  }))
+  const where = useMemo(
+    () =>
+      filters.map(filter => {
+        return list.fields[filter.field].controller.filter!.graphql({
+          type: filter.type,
+          value: filter.value,
+        })
+      }),
+    [list, filters]
+  )
+
+  const actionsAvailable = useMemo(
+    () => list.actions.filter(x => isActionAvailable(x, x.listView)),
+    [list.actions]
+  )
+  const actionConditionalFilterFieldKeys = useMemo(() => {
+    const fieldKeys = new Set<string>()
+    for (const action of actionsAvailable) {
+      for (const fieldKey of getConditionalFilterFieldKeys(action.listView.actionMode)) {
+        fieldKeys.add(fieldKey)
+      }
+    }
+    return fieldKeys
+  }, [actionsAvailable])
+  const search = useSearchFilter(searchString, list, list.initialSearchFields)
+  const { data, error, refetch, loading } = useQuery(
+    useMemo((): TypedDocumentNode<{
+      items: Record<string, unknown>[] | null
+      count: number | null
+    }> => {
+      const fieldKeys = new Set(columns) // only the shown columns
+
+      // and any fields needed by the action filters
+      for (const fieldKey of actionConditionalFilterFieldKeys) {
+        fieldKeys.add(fieldKey)
+      }
+      for (const action of actionsAvailable) {
+        for (const arg of action.graphql.arguments) {
+          if (!arg.source) continue
+          fieldKeys.add(arg.source.itemField)
+        }
+      }
+
+      const fieldsToQuery = [...fieldKeys]
+        .filter(fieldKey => fieldKey !== 'id') // id is always included
+        .map(fieldKey => list.fields[fieldKey]?.controller.graphqlSelection)
+        .filter(Boolean)
+        .join('\n')
+
+      // TODO: less interpolation
+      return gql`
+        query (
+          $where: ${list.graphql.names.whereInputName},
+          $take: Int!,
+          $skip: Int!,
+          $orderBy: [${list.graphql.names.listOrderName}!]
+        ) {
+          items: ${list.graphql.names.listQueryName}(
+            where: $where,
+            take: $take,
+            skip: $skip,
+            orderBy: $orderBy
+          ) {
+            id
+            ${fieldsToQuery}
+          }
+          count: ${list.graphql.names.listQueryCountName}(where: $where)
+        }
+      `
+    }, [list, list.fields, columns, actionsAvailable, actionConditionalFilterFieldKeys]),
+    {
+      fetchPolicy: 'cache-and-network',
+      errorPolicy: 'all',
+      variables: {
+        where: {
+          ...(where.length ? { AND: where } : {}),
+          ...(search.length ? { OR: search } : {}),
+        },
+        take: pageSize,
+        skip: (currentPage - 1) * pageSize,
+        orderBy: sort
+          ? [
+              {
+                [sort.column]: sort.direction === 'ascending' ? 'asc' : 'desc',
+              },
+            ]
+          : undefined,
+      },
+    }
+  )
+
+  useEffect(() => {
+    if (typeof data?.count !== 'number') return
+
+    const lastPage = Math.max(Math.ceil(data.count / pageSize), 1)
+    if (currentPage > lastPage) {
+      setCurrentPage(lastPage)
+    }
+  }, [data])
+
+  const selectedItemIds = (
+    selectedItems === 'all' ? (data?.items?.map(item => item.id) ?? []) : Array.from(selectedItems)
+  ).map(String)
+  const isEmpty = Boolean(data?.count === 0 && !isConstrained)
+  const headers = columns
+    .map(column => {
+      const field = list.fields[column]
+      if (!field) return
+      return {
+        id: field.key,
+        label: field.label,
+        allowsSorting: !isConstrained && !data?.items?.length ? false : field.isOrderable,
+      }
+    })
+    .filter((x): x is NonNullable<typeof x> => Boolean(x))
+
+  function onAddFilter(newFilter: Filter) {
+    setFilters(prevFilters => [...prevFilters, newFilter])
+  }
+
+  function resetToDefaults() {
+    const defaultFilters = getFilters(list, {})
+    const defaultSort = getSort(list, {})
+    setSearchString('')
+    setColumns(list.initialColumns)
+    setFilters(defaultFilters)
+    setSort(defaultSort)
+  }
+
+  const actionsList = [
+    ...actionsAvailable,
+    ...(list.hideDelete
+      ? []
+      : [
+          {
+            key: 'delete',
+            label: 'Delete',
+            icon: 'trash2Icon',
+            graphql: {
+              arguments: [],
+              names: {
+                one: list.graphql.names.deleteMutationName,
+                many: list.graphql.names.deleteManyMutationName,
+              },
+            },
+            messages: {
+              promptTitle: 'Delete {singular}?',
+              promptTitleMany: 'Delete {count} {singular|plural}?',
+              prompt: 'Are you sure you want to delete {singular}? This action cannot be undone.',
+              promptMany:
+                'Are you sure you want to delete {count} {singular|plural}? This action cannot be undone.',
+              promptConfirmLabel: 'Yes, delete',
+              promptConfirmLabelMany: 'Yes, delete',
+              success: 'Deleted {singular}.',
+              successMany: 'Deleted {countSuccess} {singular|plural}.',
+              fail: 'Unable to delete {singular}.',
+              failMany: 'Unable to delete {countFail} {singular|plural}.',
+            },
+            itemView: null as any, // unusud
+            listView: { actionMode: list.hideDelete ? 'hidden' : 'enabled' },
+          } as const,
+        ]),
+  ]
+  const selectionMode = actionsList.length > 0 ? 'multiple' : 'none'
+  const selectedRows = useMemo(
+    () => data?.items?.filter(item => selectedItemIds.includes(String(item.id))) ?? [],
+    [data?.items, selectedItemIds]
+  )
+  const actionConditionalFilterFields = useMemo(
+    () => pick(list.fields, actionConditionalFilterFieldKeys),
+    [actionConditionalFilterFieldKeys, list.fields]
+  )
+  const serializedSelectedRows = useMemo(
+    () =>
+      selectedRows.map(row => {
+        const value = deserializeItemToValue(actionConditionalFilterFields, row)
+        return serializeItemForConditionalFilters(actionConditionalFilterFields, value)
+      }),
+    [actionConditionalFilterFields, selectedRows]
+  )
+  const { actions, disabledKeys: disabledActionKeys } = useMemo(() => {
+    const disabledKeys: string[] = []
+    const actions: ActionMeta[] = []
+    for (const action of actionsList) {
+      let actionMode
+      for (const serializedValue of serializedSelectedRows) {
+        const mode = resolveActionMode(action.listView.actionMode, serializedValue)
+        if (mode === 'hidden') {
+          actionMode = 'hidden'
+          break
+        }
+        if (mode === 'disabled') actionMode = 'disabled'
+      }
+      if (actionMode === 'hidden') continue
+      if (actionMode === 'disabled') disabledKeys.push(action.key)
+      actions.push(action)
+    }
+    return { actions, disabledKeys }
+  }, [actionsList, serializedSelectedRows])
+
+  return (
+    <PageContainer
+      header={<ListPageHeader listKey={listKey} showCreate={allowCreate} />}
+      title={list.label}
+    >
+      <VStack flex gap="large" paddingX="xlarge" paddingY="xlarge" minHeight={0} minWidth={0}>
+        <HStack gap="regular" alignItems="center">
+          <SearchField
+            aria-label="Search"
+            isDisabled={isEmpty}
+            onClear={() => setSearchString('')}
+            onChange={v => setSearchString(v)}
+            placeholder="Search…"
+            value={searchString}
+            width="alias.singleLineWidth"
+            flexGrow={{ mobile: 1, tablet: 0 }}
+          />
+          <FilterAdd listKey={listKey} onAdd={onAddFilter} isDisabled={isEmpty} />
+          <MenuTrigger>
+            <ActionButton isDisabled={isEmpty}>
+              <Text>Columns</Text>
+              <Icon src={chevronDownIcon} />
+            </ActionButton>
+            <Menu
+              items={readableFields}
+              disallowEmptySelection
+              onSelectionChange={selection => {
+                if (selection === 'all') {
+                  setColumns(readableFields.map(field => field.id))
+                } else {
+                  setColumns(readableFields.filter(f => selection.has(f.id)).map(f => f.id))
+                }
+              }}
+              selectionMode="multiple"
+              selectedKeys={columns}
+            >
+              {item => <Item key={item.value}>{item.label}</Item>}
+            </Menu>
+          </MenuTrigger>
+          {dirty ? (
+            <TooltipTrigger>
+              <ActionButton aria-label="reset" onPress={resetToDefaults} prominence="low">
+                <Icon src={undo2Icon} />
+              </ActionButton>
+              <Tooltip>Reset to defaults</Tooltip>
+            </TooltipTrigger>
+          ) : null}
+          {isReady && loading && (
+            <ProgressCircle aria-label="Loading…" size="small" isIndeterminate />
+          )}
+        </HStack>
+
+        {filters.length ? (
+          <Flex gap="small" wrap>
+            {filters.map((filter, i) => {
+              const field = list.fields[filter.field]
+              function onRemove() {
+                setFilters(prevFilters => prevFilters.filter(f => f !== filter))
+              }
+              function onChange(updatedFilter: Filter) {
+                setFilters(prevFilters => [...prevFilters.filter(f => f !== filter), updatedFilter])
+              }
+
+              return (
+                <FilterTag
+                  key={i}
+                  field={field}
+                  filter={filter}
+                  onChange={onChange}
+                  onRemove={onRemove}
+                />
+              )
+            })}
+          </Flex>
+        ) : null}
+
+        <GraphQLErrorNotice errors={[error]} />
+
+        <ActionBarContainer flex minHeight="scale.3000">
+          <TableView
+            aria-labelledby={LIST_PAGE_TITLE_ID}
+            selectionMode={selectionMode}
+            onSortChange={setSort}
+            sortDescriptor={sort ?? undefined}
+            density="spacious"
+            overflowMode="truncate"
+            onSelectionChange={setSelectedItems}
+            selectedKeys={selectedItems}
+            renderEmptyState={() =>
+              loading ? (
+                <ProgressCircle aria-label="Preparing items" isIndeterminate />
+              ) : isConstrained ? (
+                <EmptyState
+                  icon={searchXIcon}
+                  title="No results"
+                  message="No items found. Try adjusting your search or filters."
+                />
+              ) : (
+                <EmptyState
+                  icon={textSelectIcon}
+                  title="Empty list"
+                  message="Add the first item to see it here."
+                />
+              )
+            }
+            flex
+            UNSAFE_style={{
+              opacity: loading && !!data ? 0.5 : undefined,
+            }}
+          >
+            <TableHeader columns={headers}>
+              {({ label, id, ...options }) => (
+                <Column key={id} isRowHeader {...options}>
+                  {label}
+                </Column>
+              )}
+            </TableHeader>
+            <TableBody items={data?.items ?? []}>
+              {row => {
+                return (
+                  <Row href={`/${list.path}/${row?.id}`}>
+                    {key => {
+                      const field = list.fields[key]
+                      const value = row[key]
+                      const CellContent = field.views.Cell
+                      return (
+                        <Cell>
+                          {CellContent ? (
+                            <CellContent value={value} field={field.controller} item={row} />
+                          ) : (
+                            <Text>{value?.toString()}</Text>
+                          )}
+                        </Cell>
+                      )
+                    }}
+                  </Row>
+                )
+              }}
+            </TableBody>
+          </TableView>
+
+          <ActionBar
+            selectedItemCount={selectedItemIds.length}
+            onClearSelection={() => setSelectedItems(new Set())}
+            UNSAFE_className={css({
+              // TODO: update in @keystar/ui package
+              // make `tokenSchema.size.shadow.regular` token "0 1px 4px"
+              'div:has([data-focus-scope-start])': {
+                backgroundColor: tokenSchema.color.background.canvas,
+                border: `${tokenSchema.size.border.regular} solid ${tokenSchema.color.border.emphasis}`,
+                borderRadius: tokenSchema.size.radius.regular,
+                boxShadow: `0 1px 4px ${tokenSchema.color.shadow.regular}`,
+              },
+            })}
+            disabledKeys={disabledActionKeys}
+            onAction={setActiveAction}
+          >
+            {[
+              ...(function* () {
+                for (const action of actions) {
+                  const iconComponent = action.icon ? KeystarIcons[action.icon] : null
+                  yield (
+                    <Item key={action.key} textValue={action.label}>
+                      {iconComponent ? <Icon src={iconComponent} /> : null}
+                      <Text>{action.label}</Text>
+                    </Item>
+                  )
+                }
+              })(),
+            ]}
+          </ActionBar>
+        </ActionBarContainer>
+
+        {!!data?.count && (
+          <PaginationControls
+            singular={list.singular}
+            plural={list.plural}
+            currentPage={currentPage}
+            pageSize={pageSize}
+            total={data.count}
+            onChangePage={(page: number) => setCurrentPage(page)}
+            onChangePageSize={(pageSize: number) => setPageSize(pageSize)}
+            defaultPageSize={list.pageSize}
+          />
+        )}
+
+        <DialogContainer
+          onDismiss={() => {
+            setActiveAction(null)
+          }}
+        >
+          {actions
+            .filter(action => action.key === activeAction)
+            .map(action => {
+              return (
+                <ActionItemsDialog
+                  itemIds={selectedItemIds}
+                  items={data?.items ?? []}
+                  action={action}
+                  list={list}
+                  onSuccess={remaining => {
+                    refetch()
+                    setSelectedItems(remaining)
+                  }}
+                  onErrors={setActionResult}
+                />
+              )
+            })
+            .pop()}
+        </DialogContainer>
+        <DialogContainer onDismiss={() => setActionResult(null)} isDismissable>
+          {actionResult ? (
+            <Dialog>
+              <Heading>Error details for {actionResult.action.label} action</Heading>
+              <Content>
+                <VStack gap="large">
+                  {[
+                    ...(function* () {
+                      const { action, errors: actionErrors } = actionResult
+                      for (const [itemId, itemActionErrors] of Object.entries(actionErrors)) {
+                        const item = data?.items?.find(i => i.id === itemId) ?? null
+                        const itemLabel = (item?.[list.labelField] as string | null) ?? itemId
+                        const href = `/${list.path}/${itemId}`
+
+                        for (const error of itemActionErrors) {
+                          yield (
+                            <VStack key={itemId} gap="regular">
+                              <Notice tone="critical">
+                                <Content>
+                                  <Text>
+                                    You might try running the action again from{' '}
+                                    <TextLink href={href}>
+                                      the {list.singular.toLowerCase()}.
+                                    </TextLink>
+                                  </Text>
+                                  <Box
+                                    elementType="pre"
+                                    backgroundColor="critical"
+                                    borderRadius="regular"
+                                    maxHeight="100%"
+                                    overflow="auto"
+                                  >
+                                    <Text
+                                      color="critical"
+                                      UNSAFE_className={css({
+                                        fontFamily: tokenSchema.typography.fontFamily.code,
+                                      })}
+                                    >
+                                      {error.message}
+                                    </Text>
+                                  </Box>
+                                </Content>
+                                <div>
+                                  <Heading>
+                                    {replace(
+                                      action.messages.fail,
+                                      list,
+                                      { ...action, itemLabel },
+                                      false
+                                    )}
+                                  </Heading>
+                                </div>
+                              </Notice>
+                            </VStack>
+                          )
+                        }
+                      }
+                    })(),
+                  ]}
+                </VStack>
+              </Content>
+            </Dialog>
+          ) : null}
+        </DialogContainer>
+      </VStack>
+    </PageContainer>
+  )
+}
+
+const LIST_PAGE_TITLE_ID = 'nixxie-list-page-title'
+
+function ListPageHeader({ listKey, showCreate }: { listKey: string; showCreate?: boolean }) {
+  const list = useList(listKey)
+  return (
+    <Fragment>
+      <Heading id={LIST_PAGE_TITLE_ID} elementType="h1" size="small">
+        {list.label}
+      </Heading>
+      {showCreate && (
+        <CreateButtonLink
+          list={list}
+        >{`New ${list.singular.toLocaleLowerCase()}`}</CreateButtonLink>
+      )}
+    </Fragment>
+  )
+}
+
+function replace(
+  s: string,
+  list: ListMeta,
+  args: ActionMeta & {
+    itemLabel?: string
+    count?: number
+    countFail?: number
+    countSuccess?: number
+  },
+  many: boolean
+) {
+  s = s.replaceAll('{Label}', args.label)
+  s = s.replaceAll('{label}', args.label.toLowerCase())
+  if (s.includes('{singular|plural}'))
+    s = s.replaceAll('{singular|plural}', many ? '{plural}' : '{singular}')
+  if (s.includes('{Singular}')) s = s.replaceAll('{Singular}', list.singular)
+  if (s.includes('{Plural}')) s = s.replaceAll('{Plural}', list.plural)
+  if (s.includes('{singular}')) s = s.replaceAll('{singular}', list.singular.toLowerCase())
+  if (s.includes('{plural}')) s = s.replaceAll('{plural}', list.plural.toLowerCase())
+  if ('count' in args) s = s.replaceAll('{count}', String(args.count))
+  if ('countFail' in args) s = s.replaceAll('{countFail}', String(args.countFail))
+  if ('countSuccess' in args) s = s.replaceAll('{countSuccess}', String(args.countSuccess))
+  if ('itemLabel' in args) s = s.replaceAll('{itemLabel}', args.itemLabel ?? '')
+  return s
+}
+
+type ActionErrors = Record<string, GraphQLFormattedError[]>
+type ActionErrorResult = {
+  action: ActionMeta
+  errors: ActionErrors
+}
+
+function ActionItemsDialog({
+  list,
+  itemIds,
+  items,
+  onSuccess,
+  onErrors,
+  action,
+}: {
+  list: ListMeta
+  itemIds: string[]
+  items: Record<string, unknown>[]
+  onSuccess: (remaining: Set<string>) => void
+  onErrors: (result: ActionErrorResult) => void
+  action: ActionMeta
+}) {
+  const actionMutation =
+    action.key === 'delete'
+      ? gql`mutation($where: [${list.graphql.names.whereUniqueInputName}!]!) {
+      results: ${action.graphql.names.many}(where: $where) {
+        id
+      }
+    }`
+      : gql`mutation($data: [${action.graphql.names.one[0].toUpperCase()}${action.graphql.names.one.slice(1)}Args!]!) {
+      results: ${action.graphql.names.many}(data: $data) {
+        id
+      }
+    }`
+  const [actionOnItems] = useMutation<{ results?: ({ id: string } | null)[] }>(actionMutation, {
+    variables:
+      action.key === 'delete'
+        ? { where: itemIds.map(id => ({ id })) }
+        : {
+            data: itemIds.flatMap(id => {
+              const row = items.find(item => String(item.id) === id)
+              if (!row) {
+                return []
+              }
+              const deserialized = deserializeItemToValue(list.fields, row)
+              const args = getActionArguments(list, action, deserialized)
+              return { where: { id }, ...args }
+            }),
+          },
+    errorPolicy: 'all',
+  })
+  const { messages: m } = action
+
+  async function onTryAction() {
+    try {
+      const { error } = await actionOnItems()
+      const failed = new Set<string>()
+      const actionErrors: ActionErrors = {}
+      let countFail = 0
+      if (CombinedGraphQLErrors.is(error)) {
+        countFail = error.errors.length
+        for (const err of error.errors ?? []) {
+          const i = err.path?.[1]
+          if (typeof i !== 'number') continue
+          const itemId = itemIds[i]
+
+          failed.add(itemId)
+          actionErrors[itemId] ??= []
+          actionErrors[itemId].push(err)
+        }
+      }
+      const countSuccess = itemIds.length - countFail
+
+      if (countSuccess) {
+        toastQueue.neutral(
+          replace(
+            m.successMany,
+            list,
+            {
+              ...action,
+              count: itemIds.length,
+              countFail,
+              countSuccess,
+            },
+            countSuccess > 1
+          ),
+          { timeout: 5000 }
+        )
+      }
+
+      if (countFail) {
+        toastQueue.critical(
+          replace(
+            m.failMany,
+            list,
+            {
+              ...action,
+              count: itemIds.length,
+              countFail,
+              countSuccess,
+            },
+            countFail > 1
+          ),
+          {
+            actionLabel: 'Details',
+            onAction: () => onErrors({ action, errors: actionErrors }),
+            shouldCloseOnAction: true,
+          }
+        )
+      }
+
+      return onSuccess(failed)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return (
+    <AlertDialog
+      tone={action.key === 'delete' ? 'critical' : 'neutral'}
+      title={replace(
+        m.promptTitleMany,
+        list,
+        { ...action, count: itemIds.length },
+        itemIds.length > 1
+      )}
+      cancelLabel="Cancel"
+      primaryActionLabel={replace(
+        m.promptConfirmLabelMany,
+        list,
+        { ...action, count: itemIds.length },
+        itemIds.length > 1
+      )}
+      onPrimaryAction={onTryAction}
+    >
+      <Text>
+        {replace(m.promptMany, list, { ...action, count: itemIds.length }, itemIds.length > 1)}
+      </Text>
+    </AlertDialog>
+  )
+}