import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Page Templates / Page Types" />

<div className="sb-doc">

# Page types

<p className="excerpt">The vocabulary for naming the kinds of pages Ghost Admin has. When a new feature shows up, the first question is "what page type is this?" — then reach for the matching pattern instead of inventing chrome.</p>

## List page

Browsing or scanning a collection of items.

**Live examples**: Members, Tags, Comments, Automations, ActivityPub.

**Chrome shape**: `PageHeader` (title + count + search/filter/actions) → table or list → empty state → pagination.

**Page template**: [`ListPage`](?path=/docs/page-templates-list-page--docs) (composes [`PageHeader`](?path=/docs/patterns-pageheader--docs)). Heavy filter UI uses [`Filters`](?path=/docs/patterns-filters--docs).

## Detail page

Working with a single item — viewing, editing, or both.

**Live examples**: Post editor.

**Chrome shape**: `PageHeader` with breadcrumb + title + meta, a primary action area (save/cancel), and a content area dedicated to the item itself.

**Pattern**: not built this milestone. Named here so new product surfaces can identify the page type and avoid forcing detail flows into modals or Settings.

## Not in the taxonomy

- **Settings** — out of scope for this milestone. The page types above exist partly to give new features somewhere else to live.
- **Workflow / multi-step flows** — too few live examples to standardise. Add the page type when there are 2+ concrete examples.

## Example

```tsx
import {ListPage} from '@tryghost/shade/page-templates';
import {PageHeader, ViewBar, FilterBar} from '@tryghost/shade/patterns';
import {Button, EmptyIndicator, Table} from '@tryghost/shade/components';

<ListPage>
  <ListPage.Header>
    {/* Pass sticky={false} — ListPage.Header handles stickiness and blur */}
    <PageHeader sticky={false} blurredBackground={false}>
      <PageHeader.Left>
        <PageHeader.Title>Members<PageHeader.Count>{count}</PageHeader.Count></PageHeader.Title>
      </PageHeader.Left>
      <PageHeader.Actions>
        <PageHeader.ActionGroup>
          <Button>Add member</Button>
        </PageHeader.ActionGroup>
      </PageHeader.Actions>
    </PageHeader>
    <ViewBar>{/* optional */}</ViewBar>
    <FilterBar>{/* optional — auto-collapses when empty */}</FilterBar>
  </ListPage.Header>
  <ListPage.Body>
    {items.length === 0 ? <EmptyIndicator title='No members yet' /> : <Table>...</Table>}
  </ListPage.Body>
</ListPage>
```

</div>
