== 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 — type selection is one click.
**Live prototype:** [[https://sudhanshugtm.github.io/Article_Creation_V2/ | sudhanshugtm.github.io/Article_Creation_V2]]
= Scope =
This task covers the **article type selection screen** — the manual fallback when T414902 (Title Entry & Topic Matching) doesn't resolve a topic automatically.
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 or all results have local articles |
== 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 |
= Layout == State A: Type Cards (Initial) =
Responsive, single-column layout following Codex design principles. Same content on all screen sizes — centered column (max-width `600–720px`) on tablet/desktop{F71767995, full-width on mobile.size=full}
* Header: back button (←) + centered bold title ("New article").
* Question heading: **What is "[query]"?**
* Four type cards stacked vertically.
* Separator line.
* "Similar to existing articles" search input with autocomplete dropdown.
* Detection result card (appears after selecting a similar article)Responsive, single-column layout. Centered column (max-width `600–720px`) on tablet/desktop, full-width on mobile.
NOTE: The live prototype uses a phone-frame mockup for demonstration purposes only. The production implementation should be a standard responsive page.
= Codex Components =* Header: `CdxButton` (quiet) with `CdxIcon` (`cdxIconArrowPrevious`) for back navigation. Centered bold title: "New article".
| Component | Usage |* Question heading: **What is "[query]"?**
| --- | --- |* Four `CdxCard` components stacked vertically — each with an icon, bold label, and description.
| `CdxCard` | Type selection cards (4 total) with icon + label + description |* Separator line below cards.
| `CdxIcon` | Type icons inside cards (`cdxIconUserAvatar`, `cdxIconMapPin`, `cdxIconUserGroup`, `cdxIconCalendar`) and back arrow in header |* `CdxLabel`: "Similar to existing articles".
|* `CdxTextInput` | Similar-article search input |: search input with placeholder "Search Wikipedia or paste a URL".
== Type cards ==
| `CdxLabel` | "Similar to existing articles" sec| Card | Icon | Description label ||
| `CdxMenu` | Similar-article search results dropdown (with keyboard nav and search query highlighting) || --- | --- | --- |
| `CdxMessage` | Warning when type detection fails (`type="warning"`, `inline`, `fade-in`) || Person | `cdxIconUserAvatar` | Someone's biography |
| `CdxProgressIndicator| Place | `cdxIconMapPin` | Loading states (similar searchcation, city, type detection) |or landmark |
| `CdxButton` | Quiet back button in header |
= Design Tokens =Organization | `cdxIconUserGroup` | School, company, group, or team |
| Event | `cdxIconCalendar` | Festival, battle, election, or ceremony |
== Type Cardokens ==
| What || 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 |
| Suggested card (detected) | `| Separator | `border-top: 1px solid --border-color: --color-progressive`-subtle`, `margin-top: 24px`, `box-shadow: 0 0 0 1px --color-progressive` |`padding-top: 16px` |
=== State B: Similar-Article Section == Search Results =
| What | Token / Value |
| --- | --- |{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.
| Separator | `border-top: 1px solid --border-color-subtle`, `margin-top: 24px`, `padding-top: 16px` |* Search query is highlighted in results.
| Label, dropdown,* Clicking a results | Handled by `CdxLabel` selects it and `CdxMenu` — no custom styling needed |triggers type detection.
== Detection Result Card ==== Components ==
| What | Token / Value || Component | Detail |
| --- | --- |
| Background | `--background-color-interactive-subtle` |
| Border | `1px solid --border-color-subtle` |
| Border radius | `4px` |
| Padding | `12px` |
| Success text | `--font-size-small``CdxMenu` | Dropdown with keyboard nav and search query highlighting, `--color-base` |
| Basis text | `--font-size-x-small`, `--color-subtle` |`hide-description-overflow`, `render-in-place` |
= State C: Type Detecting =
| Failed state | Handled by `CdxMessage type="warning"` — no custom styling needed |{F71767999, size=full}
= States =**Trigger:** User selects a similar article from the dropdown (or pastes a Wikipedia URL).
== State A: Type Cards (Initial) ==* Search input becomes disabled (grayed out, shows selected article title).
{F71767995, size=full}* Detection result card appears with spinner and "Detecting type..." label.
* Four type cards visible: Person, Place, Organization, Event.
* Each card has an icon, bold label, and description.== Components ==
* "Similar to existing articles" section below a subtle separator.| Component | Detail |
* Search input is empty with placeholder: "Search Wikipedia or paste a URL".| --- | --- |
* Back button visible in header.| `CdxProgressIndicator` | Inline spinner inside the detection result card |
== State B: Similar Search Result== Detection result card tokens ==
{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.| Token | Value |
* Search query is highlighted in results.| --- | --- |
* Clicking a result selects it and triggers type detection.
== State C: Type Detecting ==| Background | `--background-color-interactive-subtle` |
{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).| Border | `1px solid --border-color-subtle` |
| Border radius | `4px` |
* Detection result card appears with `CdxProgressIndicator` spinner and "Detecting type..." label.| 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 (`--color-progressive` border + box-shadow).
* 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).
* `CdxMessage type="w* Warning"` displays: 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 |