docs: add re-anchored Phase 8 visual-conformance spec + record Grant's design calls

design/phase8-conformance.md — per-surface anatomy + deltas + line refs built
against the .dc.html defaults (not the screenshots), as the 8a–8i build reference.
Corrects the screenshot read (drop disposition badges + contact footer; 4-stage
funnel + swipe dirs already correct). Records two Grant decisions (2026-06-19):
Pipeline existing-LP uses the earmark (unify with Grid, overriding the dc star);
Contacts drops the investor/prospect type tabs (prospect type unused) but keeps a
Priority-flag sort. Refresh AGENTS.md Current state; ROADMAP Phase 8 points at the spec.
This commit is contained in:
Keysat
2026-06-19 20:12:11 -05:00
parent e3f5ef8dc8
commit 60d67f6b7d
3 changed files with 135 additions and 4 deletions
+131
View File
@@ -0,0 +1,131 @@
# Phase 8 — mobile visual-conformance build reference
**Status:** scoped 2026-06-19, not started. Working reference for ROADMAP Phase 8 (8a8i). Delete/archive once Phase 8 lands.
**Anchor (read first):** the source of truth is each `*.dc.html` in `design/_imports/2026-06-19_zip-file/Venture-CRM mobile redesign/` **rendered at its DEFAULT `data-props`** — NOT the `screenshots/` PNGs (those are option-history: rejected disposition badges, a 6-stage MEETING/FUNDED funnel, the star-everywhere flag, a contact-footer band). Defaults: all surfaces `theme=dark`; Grid `variant=compact, font=plex, lpFlag=earmark`; Pipeline `mode=swipe`. Spacing/type tokens (card radius 10, gap 10, title 16, body 15, detail title 22) **already match** — the gaps below are **anatomy/structure**, not spacing/theme.
> **Per-surface existing-LP signal:** **Grid = earmark corner-triangle · Pipeline = earmark corner-triangle** (Grant override 2026-06-19 — unify with Grid; the dc default was a ★ star, we don't follow it) **· Contacts = avatar ring**.
> **Contacts sort/tabs (decided, Grant 2026-06-19):** **remove the investor/prospect type tabs** — the `prospect` type isn't used anywhere useful (C2). **Keep a sort — by the Priority flag** — as a deliberate enhancement beyond the dc (which is search-only, no sort).
`*.dc.html:NN` = prototype line; `index.html:NN` = current app line.
---
## Surface 1 — GRID (`GridApp.dc.html`, app `MobileFundraisingGrid`)
**Authoritative card** (`GridApp:84108`): `--panel` bg, 1px `--border`, radius 10, padding 12×14, `--shadow-card`, gap 8.
- **Existing-LP = earmark corner-triangle, top-left** (`:8991`): `border-top:18px solid var(--accent); border-right:18px solid transparent`. At `lpFlag=earmark`, `lpEarmark` true / `lpStar`/`lpBanner` false (`:492494`).
- Row 1 (`:92102`): name 16px/600 left; **Priority** mono-10px pill right, *only if* `c.priority` (radius 4, amber `priBg/priText`). No investor/prospect badge.
- Row 2 (`:103106`): `$amount` mono 15/600 (`amtColor` green if >0 else muted) · **4-stage chip** (mono 11, radius-999 pill; lead/engaged/diligence/commitment colors `:405409`).
- Row 3 (`:107`): recency mono 12 ("2d ago"/"30d stale"; amber ≥10d, red ≥30d, `:421426`).
**List header** (`:6581`): tappable view-name 21/600 + ▾; row 2 = mono count (left) + **SORT pill** (right, mono 11 uppercase, sort-icon + label, `:7275`); then search (44px) + gradient `+`. Sort sheet (`:633`): Name / Pipeline stage / Committed / Last contact / Priority.
**Investor detail** = full-screen (`:177293`): title 22 + Edit; chip row = Priority + **"Existing LP" pill** (`:192194`) + "Last contact …"; **Pipeline stage** card (tappable chip + "Change "); **Contacts** pills + "+ Add"; **Commitments** (read-only + Total); **Reminder** card; **Notes timeline** (dot-and-line, type tag + date + summary, "+ Log").
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| G1 | Existing-LP wrong: app uses `border-left:3px` + `★` in detail title → **earmark corner-triangle** on card + **"Existing LP" pill** in detail | `2321`,`9659`,`9754` | `8991`,`192194` | **HIGH** |
| G2 | Priority is a `★` glyph → make it a **"PRIORITY" text pill** (collides with existing-LP star today) | `9662`,`2323` | `99101` | **HIGH** |
| G3 | **No sort control** (only a count) → add SORT pill + sort sheet (5 opts) | `96879689` | `7275`,`633` | **HIGH** |
| G4 | Detail pipeline: "Stage" row + button → single tappable **stage card** (chip inline + "Change ") | `97629773` | `198207` | MED |
| G5 | No dedicated **Reminder card** (reminder is a row in Activity) → dedicated card (note + due / "No reminder", ) | `98029804` | `249262` | MED |
| G6 | Notes = single text blob → **timeline** (dot+line rail, per-entry tag+date+summary) | `9805` | `270289` | MED |
| G7 | Subtitle "$X committed · {lead}" → committed lives in Commitments card; subtitle = priority/LP/last-contact chips | `9757` | `188196` | LOW |
| G8 | Card amount color: verify zero-commit dims to muted (`.zero` token parity) | `9665`,`2330` | `495` | LOW |
**Corrections to prior read:** DROP the left-accent-border (never the default — replace with earmark); the `★` is the rejected `lpFlag=star` option (remove); Priority is a pill not a star; the 4-stage chip is **correct, keep**.
---
## Surface 2 — CONTACTS (`ContactsApp.dc.html`, app `MobileContactsPage`/`MobileContactDetail`)
**Header** (`:5965`): "Contacts" 21/600 + mono count; **search only — no segmented tabs, no sort**. List **always AZ** (sticky mono headers, `:337343`), hard-coded `name.localeCompare` (`:322`).
**Card** (`:7283`): row, panel/border/radius-10, padding 11×13.
- **Avatar** (`:74`): 40px, `--elev`, **two-letter initials** mono 13 accentlight; **existing-LP = ring** `border:1.5px solid var(--accent)` else 1px `--border` (`:329`).
- Name 15/600 (`:76`); below: **org** 13 `--t3` **+ 4-stage pill** mono 9 (`:79`).
- Right: **recency** mono 11 (`:82`, `:272278`).
**Detail = bottom sheet** (`:119179`, *not* full-screen): 52px avatar+initials+ring, name 19 + org; **email-copy pill** ("EMAIL" + mono accent address + copy, `:134140`); **two action buttons** — "Log communication" (gradient, flex 2) + "Email" (flex 1, `:143146`); **Organization card** = earmark + org + stage pill + **Committed / Last-contact** stat pair + last-note tag + **"Open investor in Grid "** (`:149175`).
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| C1 | Card has **disposition (investor/prospect) badge** → remove; right-side signal is **4-stage pill (under name) + recency** | `5220`,`52195222` | `79`,`82` | **HIGH** |
| C2 | **Remove the All/Investors/Prospects type tabs** (prospect type unused); **keep a sort — by Priority flag** (enhancement; dc is search-only) — Grant 2026-06-19 | `52405250` | `5965` | **HIGH** |
| C3 | Avatar = one initial, no ring → **two-letter initials + existing-LP ring** (`amt>0`) | `5214`,`22222227`,`5068` | `74`,`329`,`285289` | **HIGH** |
| C4 | Card meta shows raw **date** (`formatDate`) → **recency text** ("2d ago") | `5221` | `82` | MED |
| C5 | Detail = full-screen field-dump → **bottom sheet** (email-copy pill, Log/Email pair, Org card w/ "Open in Grid") | `50755137` | `119175` | **HIGH** |
| C6 | Card sub = org only → org **+ stage pill** same line | `5217` | `7780` | MED |
**Corrections:** DROP the disposition badge (classifying signal is stage-pill + ring); the segmented tabs are an app-only addition, not in the design.
---
## Surface 3 — PIPELINE (`PipelineApp.dc.html`, app `MobilePipeline`)
**Header** (`:5968`): "Pipeline" 21 + mono total + **SORT pill** (Name/Amount/Staleness/Priority, `:6467`,`:422`). **4 stages** lead/engaged/diligence/commitment (`:369370`).
**Swipe mode** (`:71132`): horizontally-scrollable **segmented stage pills** (height 36, radius 999) with mono uppercase label **+ count badge** (`:7679`); full-width **scroll-snap stage columns** (header = stage chip + count + sum; card list); **page dots** (active = 22px bar, `:125132`).
**Card** (`:97117`): panel/radius-10; tappable region + **divider + two move buttons** ( / , disabled at ends, `:112115`).
- Row 1: **existing-LP = earmark corner-triangle** (Grant override 2026-06-19 — dc default was `★` at `:101`; **use the Grid earmark instead** for consistency) + name 16/600; **Priority pill** right (`:104`).
- Row 2: `$amount` mono 15/600 · 3px dot · recency mono 12 (`:106110`).
**Detail = bottom sheet** (`:204272`): name 19 + Priority/Existing-LP pills + last-contact; **Committed / Contacts stat tiles** (`:222231`); **"Move stage" inline radio list** w/ checkmarks (`:233241`); **Notes timeline + "+ Log"** (`:243266`); separate **Log sheet** over it (`:274302`).
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| P1 | Segmented control = vertical count-over-label boxes → **horizontal-scroll pills + count badge** | `59455958`,`24002414` | `7382` | MED |
| P2 | Cards lack **existing-LP flag, Priority pill, recency** (app = name + contact·org sub + amount) → **earmark** (Grant override, not ★) + name / Priority pill / amount·dot·recency | `59165933` | `99110` | **HIGH** |
| P3 | **No SORT control** on header | `59355977` | `6467` | MED |
| P4 | Detail = full-screen field-dump → **bottom sheet** (stat tiles + inline move-stage radio list + notes timeline + inline Log) | `59806036` | `204272` | **HIGH** |
| P5 | Stage change = button → sub-sheet → make move-stage list **inline in the sheet** | `60056007`,`60236035` | `233241` | MED |
| P6 | Page total "N deals · $X" → stage-column header = **chip + count + sum** | `59635966` | `8894` | LOW |
**Corrections:** the app's **4-stage funnel is CORRECT** (dc `stages()` resolves to lead/engaged/diligence/commitment; the 6-stage MEETING/FUNDED/OUTREACH in screenshots is stale seed). Don't add a type/disposition badge. **Pipeline existing-LP = earmark corner-triangle** (Grant override 2026-06-19; the dc default was `★`, we don't follow it — reuse the Grid earmark component).
---
## Surface 4 — REMINDERS (`RemindersApp.dc.html`, app `MobileReminders`/`ReminderRow`)
**Header** (`:5662`): "Reminders" 21 + a **mono summary** ("2 overdue · 1 today · 7 open", red when overdue, `:313315`) + gradient `+`. **No Active/Done/All filter** — only a collapsible **Completed** section at list end (`:109130`).
**Buckets** (`:317332`): **4** — Overdue / Today / This week / Later, each header = **colored dot** (red/amber/blue/grey) + mono label + count.
**Row** (`:7594`): swipe wrapper; **right=Snooze** (`:7780`), **left=Complete** (`:8285`), threshold 70 (`:257`). Card (`:8793`): note 15/500; below = org 13 + **due-chip pill** (mono 10, radius 999, urgency bg/text/border, "3d overdue"/"Today"/"in 4d"/"Jun 24", `:91`,`:228240`).
**Completed** (`:109130`): collapsible; done row = filled check circle + strikethrough note + org.
**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| R1 | Due = plain colored mono text → **urgency-colored chip pill** | `4620`,`2480` | `91` | **HIGH** |
| R2 | Buckets: Overdue/Due-soon/Later → **Overdue / Today / This week / Later** ("Today" its own bucket) | `45574563` | `318`,`235239` | MED |
| R3 | Header = Active/Done/All filter + "+ New" → title + **summary line** + `+` | `47444755`,`4766` | `5662` | **HIGH** |
| R4 | Group headers lack the **colored dot** (7px, red/amber/blue/grey) | `4766`,`24552461` | `6872`,`317` | MED |
| R5 | Completed via filter tabs → **collapsible "Completed" section** at list end (active list is default) | `47484751`,`4764` | `109130` | MED |
| R6 | Swipe left=Done / right=Snooze **matches** — keep (labels cosmetic) | `46074608` | `77,82` | LOW |
| R7 | Edit = bottom sheet — **correct**, keep | `4782` | `159173` | — |
**Corrections:** left=Done/right=Snooze is correct (don't flip); edit-via-sheet is correct.
---
## Phase 8 punch-list (visual/structural only — DB-wiring parity is the separate functional report)
- **8a Grid card (HIGH):** G1 earmark corner-triangle (replace left-border); G2 PRIORITY text pill (replace ★); G8 zero-commit dim token parity.
- **8f Pipeline card (HIGH):** P2 add ★ + Priority pill + recency line; P1 horizontal-scroll pills + count badge; P6 stage-column header chip+count+sum.
- **8b Detail actions/structure (HIGH):** C5+P4 convert Contacts & Pipeline detail full-screen → **bottom sheets** with the dc anatomy; G4/G5/G6 Grid detail → tappable stage card + dedicated Reminder card + notes **timeline**; P5 inline move-stage list.
- **8c Quick-log (MED):** Grid/Pipeline notes post into a **timeline** (tag+date); dc Grid has a **top-bar quick-log pencil** (`GridApp:5355`) the shell lacks → 8i.
- **8d Sort (HIGH/MED):** add SORT pill → sort sheet to Grid (`9687`) + Pipeline (`5935`). **Contacts (Grant decided): remove the investor/prospect type tabs** (`52405250`); **keep a Priority-flag sort** as an enhancement (dc had none).
- **8e Reminders (HIGH):** R1 due-chip pill; R3 header summary line (reconsider Active/Done/All vs dc collapsible Completed, R5); R2/R4 re-bucket Overdue/Today/This-week/Later with colored dots.
- **8i Shell (MED):** Contacts avatars → two-letter initials + existing-LP ring (C3); drop disposition badges (C1) + Contacts tabs (C2); dc top-bar = quick-log pencil + theme + account cluster (every dc `:5058`).
**Severity order (whole phase):** G1, G2, C1, C2, C3, C5, P2, P4, R1, R3 (HIGH) → G3, P3, sort/bucket/dot/chip (MED) → G7, G8, P6, R6 (LOW).
**Theme-var note (DESIGN convention):** every new color (earmark, priority pill, ring, due-chip, segment count-badge) MUST use `:root` theme vars, not literals. Authoritative dark/light pairs: `GridApp.dc.html` `stageColors`/`priColors`/`recency` (`:400442`), `RemindersApp.dc.html` `urgency` (`:228240`).