== Goal ==
* Let users manually choose an article type when auto-detection from topic matching (T414902) is unavailable.
* Provide optional type detection via a "similar article" search as a shortcut.
* Keep users moving forward.
= Scope =
This is a section that appears below the persistent title input (from T414902), not a separate screen. The title remains visible and editable above.
The screen has two functional zones:
# **Type Cards** (primary) — four article types shown as clickable cards, always visible.
# **Similar-Article Search** (secondary) — optional Wikipedia search that can auto-detect the article type.
It does **not** cover the title entry or topic disambiguation screens (see T414902).
== Entry points ==
| From | When |
| --- | --- |
| T414902 — "None of these? Pick a type instead" | User rejected all disambiguation topics |
| T414902 — No Wikidata results | Zero search results|
== Exit conditions ==
| Outcome | What happens next |
| --- | --- |
| User clicks a type card | Proceeds to T415484 (Reference check) |
| User clicks a type card after detection highlights it | Same — proceeds to T415484 |
= State A: Type Cards (Initial) =
{F71792123, size=full}
* Header: `CdxButton` (quiet) with `CdxIcon` (`cdxIconArrowPrevious`) for back navigation. Centered bold title: "New article".
* Question heading: **What is this?**
* Four `CdxCard` components stacked vertically — each with an icon, bold label, and description.
* Separator line below cards.
* `CdxLabel`: "Similar to existing articles".
* `CdxTextInput`: search input with placeholder "Search Wikipedia or paste a URL".
== Type cards ==
| Card | Icon | Description |
| --- | --- | --- |
| Person | `cdxIconArticle` | Someone's biography |
| Place | `cdxIconArticle` | Location, city, or landmark |
| Organization | `cdxIconArticle` | School, company, group, or team |
| Event | `cdxIconArticle` | Festival, battle, election, or ceremony |
== Tokens ==
| Token | Value |
| --- | --- |
| Card gap | `12px` between cards |
| Icon-label gap | `6px` inline |
| Icon size | `CdxIcon size="small"` |
| Card hover | `--background-color-interactive-subtle` |
| Card active/pressed | `--background-color-interactive` |
| Card focus-visible | `--color-progressive`, 2px outline |
| Separator | `border-top: 1px solid --border-color-subtle`, `margin-top: 24px`, `padding-top: 16px` |
= State B: Similar Search Results =
{F71767997, size=full}
**Trigger:** User types in the similar-article search input.
* `CdxMenu` dropdown appears below the input with up to 5 matching Wikipedia article titles.
* Search query is highlighted in results.
* Clicking a result selects it and triggers type detection.
== Components ==
| Component | Detail |
| --- | --- |
| `CdxMenu` | Dropdown with keyboard nav and search query highlighting, `hide-description-overflow`, `render-in-place` |
= State C: Type Detecting =
{F71767999, size=full}
**Trigger:** User selects a similar article from the dropdown (or pastes a Wikipedia URL).
* Search input becomes disabled (grayed out, shows selected article title).
* Detection result card appears with spinner and "Detecting type..." label.
== Components ==
| Component | Detail |
| --- | --- |
| `CdxProgressIndicator` | Inline spinner inside the detection result card |
== Detection result card tokens ==
| Token | Value |
| --- | --- |
| Background | `--background-color-interactive-subtle` |
| Border | `1px solid --border-color-subtle` |
| Border radius | `4px` |
| Padding | `12px` |
= State D: Type Detected (Success) =
{F71768001, size=full}
**Trigger:** Type detection finds a match.
* Detection result card shows: **"Looks like a [Type]"** with "Based on [article title]" below.
* The matching type card gets a blue border highlight.
* User can click the highlighted card (or any other card) to proceed.
== Tokens ==
| Token | Value |
| --- | --- |
| Suggested card border | `border-color: --color-progressive`, `box-shadow: 0 0 0 1px --color-progressive` |
| Success text | `--font-size-small`, `--color-base` |
| Basis text | `--font-size-x-small`, `--color-subtle` |
= State E: Detection Failed =
{F71768005, size=full}
**Trigger:** Type detection fails (no match found, or a network error occurs).
* Warning message: "Couldn't detect the type. Pick one above."
* No card is highlighted.
* User picks a type card manually.
== Components ==
| Component | Detail |
| --- | --- |
| `CdxMessage` | `type="warning"`, `inline`, `fade-in` — no custom styling needed |