== 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 as 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): Article types shown as clickable cards, always visible.
# **Similar-Article Search** (secondary): optional Wikipedia search that can auto-detect the article type.
== 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 =
The layout is responsive and follows Codex design principles.
== Mobile ==
* Full-screen page, content fills the viewport.
* Header: back button (←) + centered bold title ("New article").
* Question heading: **What is "[query]"?**
* Type cards stacked vertically (Person, Place, Organization, Event).
* Separator line.
* "Similar to existing articles" search input with autocomplete dropdown.
* Detection result card (appears after selecting a similar article).
== Tablet / Desktop ==
* Single centered column, max-width `600–720px`, with comfortable reading width.
* Same content and flow as mobile — no side panels or multi-column layouts.
* Spacing and typography scale with Codex responsive tokens.
NOTE: The live prototype uses a phone-frame mockup for demonstration purposes only. The production implementation should be a standard responsive page.
= Codex Components =
| Component | Usage |
| --- | --- |
| `CdxCard` | Type selection cards (4 total) with icon + label + description |
| `CdxIcon` | Type icons inside cards (`cdxIconUserAvatar`, `cdxIconMapPin`, `cdxIconUserGroup`, `cdxIconCalendar`) and back arrow in header |
| `CdxTextInput` | Similar-article search input |
| `CdxProgressIndicator` | Loading states (similar search, type detection) |
| `CdxButton` | Quiet back button in header |
= Design Tokens =
== Type Cards ==
| What | Token / Value |
| --- | --- |
| Card gap | `12px` between cards |
| Icon-label gap | `6px` inline |
| Icon size | `CdxIcon size="small"` |
| Card hover | `--background-color-interactive-subtle` (#f8f9fa) |
| Card active/pressed | `--background-color-interactive` (#eaecf0) |
| Card focus-visible | `--color-progressive` (#36c), 2px outline |
| Suggested card (detected) | `border-color: --color-progressive`, `box-shadow: 0 0 0 1px --color-progressive` |
== Similar-Article Section ==
| What | Token / Value |
| --- | --- |
| Separator | `border-top: 1px solid --border-color-subtle` (#c8ccd1), `margin-top: 24px`, `padding-top: 16px` |
| Section label | `--font-size-small` (14px), `--color-subtle` (#54595d) |
| Dropdown border | `--border-color-base` (#a2a9b1), no top border |
| Dropdown shadow | `0 2px 6px rgba(0, 0, 0, 0.1)` |
| Result item padding | `10px 12px` |
| Result hover | `--background-color-interactive-subtle` (#f8f9fa) |
== Detection Result Card ==
| What | Token / Value |
| --- | --- |
| Background | `--background-color-interactive-subtle` (#f8f9fa) |
| Border | `1px solid --border-color-subtle` (#c8ccd1) |
| Border radius | `4px` |
| Padding | `12px` |
| Success text | `--font-size-small`, `--color-base` (#202122) |
| Basis text | `--font-size-x-small` (12px), `--color-subtle` |
| Failed text | `--font-size-small`, `--color-warning` (#edab00) |
== Text & Color ==
| What | Token |
| --- | --- |
| Primary text (headings, labels) | `--color-base` (#202122) |
| Secondary text (subtitles, hints, descriptions) | `--color-subtle` (#54595d) |
| Links and focus rings | `--color-progressive` (#36c) |
| Question heading ("What is X?") | `--font-size-large` (18px), bold |
| Section label and hint text | `--font-size-small` (14px) |
= States =
== State A: Type Cards (Initial) ==
{F_REPLACE_01, size=full}
* Four type cards visible: Person, Place, Organization, Event.
* Each card has an icon, bold label, and description.
* "Similar to existing articles" section below a subtle separator.
* Search input is empty with placeholder: "Search Wikipedia or paste a URL".
* Back button visible in header.
== State B: Similar Search Results ==
{F_REPLACE_02, size=full}
**Trigger:** User types in the similar-article search input.
* Dropdown appears below the input with up to 5 matching Wikipedia article titles.
* Each result shows the article title; some include a description.
* Clicking a result selects it and triggers type detection.
== State C: Type Detecting ==
{F_REPLACE_03, 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 `CdxProgressIndicator` spinner and "Detecting type..." label.
== State D: Type Detected (Success) ==
{F_REPLACE_04, 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.
== State E: Detection Failed ==
{F_REPLACE_05, size=full}
**Trigger:** Type detection fails (no match found, or a network error occurs).
* Amber warning message: "Couldn't detect the type. Pick one above."
* No card is highlighted.
* User picks a type card manually.