# Dossier — templates-dormant (light pass)

Group note: module is dormant; same method, shallower depth. Routes:
`/templates`, `/templates/new`, `/templates/:id/edit`, `/templates/:id`
(`App.tsx:83-87`, gated `RequireRole minRole="marketing"`).

## Templates.tsx (772 lines, 68 legacy markers, 5 raw `<input>`/`<select>`)

- **IA/concept count** — status tabs (6) + search + folder filter + sort +
  per-row folder reassignment + tags + health badge + inline folder
  create/rename/delete dialogs. Many concepts stacked on one list screen, but
  each earns its place (no redundant views).
- **Interaction** — no dead ends; tabs (`role="tablist"`/`aria-selected"`),
  sortable headers, native selects all keyboard-operable. `FolderDialog`
  already replaced `window.prompt()` — good precedent.
- **Content/copy** — plain ("Sync status", "+ New folder"); no jargon or
  AI-isms.
- **Visual/tokens** — 68 legacy markers, worst in the group. Nearly every
  element styled via inline `React.CSSProperties` objects on
  `var(--navy)`/`var(--gold-2)`/`var(--gold-soft)` (dead per DECISIONS) plus
  raw `#fff` hex, not `--cm-*`. Custom inline `<svg>` search icon.
- **a11y/responsive** — labels present (`aria-label` on search/folder
  selects); table wrapped in `so-table-scroll`; folder bar has `flexWrap` so
  it survives narrow widths; not verified at 320px live.

**VERDICT: polish** — IA and interaction already sound (this is the file the
`c7fbd4d`/`26b77b5` history shows was hand-tuned); the debt is 100% visual
(navy/gold inline styles), not conceptual.

## TemplateDetail.tsx (348 lines, 33 legacy markers, 0 raw inputs)

- **IA/concept** — single entity, single concept: one template's lifecycle
  (status/health → edit/submit/duplicate/delete) with a compact Details card,
  tags, stats, and "used by campaigns" below. Clean.
- **Interaction** — context-aware Back (`backTo`/`backLabel` from router
  state); actions gate correctly (delete disabled + tooltipped when a
  campaign blocks it); no raw form controls.
- **Content/copy** — plain; rejection reason surfaced inline under a labelled
  "Rejected by Meta" box.
- **Visual/tokens** — 33 legacy markers; same inline-style-on-legacy-vars
  pattern as above (`var(--navy)`, `var(--red)`, `var(--warn)`).
- **a11y/responsive** — rejection box has `role="alert"` (good); `heroGrid`
  is a fixed `minmax(0,1fr) minmax(0,280px)` grid with no documented
  breakpoint collapse — will compress hard under ~600px.

**VERDICT: polish** — token pass + add a responsive collapse for `heroGrid`;
nothing conceptually wrong.

## TemplateEditor.tsx (328 lines, 26 legacy markers, 0 raw inputs in this file)

- **IA/concept** — two-column compose: form left, live WhatsApp-style preview
  pinned right; a duplicate-name pre-check before Submit. Single clear
  concept (author → preview → submit to Meta).
- **Interaction** — Save/Submit/Delete gated on read-only + pending +
  duplicate-name states; Meta rejection shown inline under the button (not a
  toast) by design. The actual data-entry controls live in the child
  `components/templates/TemplateEditorForm.tsx` (57 legacy markers, out of
  this trio but the real raw-input surface — see fork below).
- **Content/copy** — plain ("Meta reviews it and flags any problems").
- **Visual/tokens** — 26 legacy markers; preview rail uses a hardcoded
  `top: 88` sticky offset tied to `AppShell`'s header height instead of a
  token/CSS var.
- **a11y/responsive** — read-only banner is a plain `<span>` with no `role`;
  two-column `layout` grid (`1fr 380px`) has no narrow-width collapse noted.

**VERDICT: polish** — sound compose+preview IA; needs token conversion, a
`role` on the banner, and a responsive collapse. Should be swept together
with `TemplateEditorForm.tsx` (its actual input surface), not scoped alone.

## Forks

1. Folders (create/rename/delete, per-row assignment) and Tags both exist as
   organizing overlays on templates in `Templates.tsx`. Per "one concept, one
   surface" — should the redesign merge them (folder becomes a tag facet), or
   do they stay separate because Meta's own template folders are a distinct
   mechanism? *Recommend: keep separate — folder is a Meta-synced structural
   property, tags are local metadata; different lifecycles.*
2. Group note says dormant. Given the debt here is visual-only (not IA), does
   this trio get a token/visual pass in this sweep regardless of dormancy, or
   does it wait until the module is reactivated? *Recommend: defer the visual
   pass until reactivation — no user-facing win from re-skinning a module
   nobody is using, and it avoids touching code that will likely change again
   when it's picked back up.*