pa.gf.cx cross-cutting sections — pill counters next to headers when content density warrants it
DARE.CO.UK · PARKED SKETCH · 2026-06-07
Mirrored from ~/.claude/.../memory/parked_sketch_pa_section_pill_counters_2026-06-06.md. This is a design sketch parked for future build — read for context, not as a current deliverable.
Now that the cross-cutting sections (Orders & Returns, Contractors, Inventory) default to closed, the headers lose the “how much is inside” signal. When a section grows past ~3 rows, add a count pill next to the header —
Orders & Returns <pill>3</pill>— so the reader can decide whether to expand without clicking.
Sketch: when a cross-cutting <details> section on pa.gf.cx contains ≥3 rows, the summary gains a small count pill next to the title: Orders & Returns <span class="count-pill">3</span>. Collapsed = pill visible at-a-glance. The reader chooses to expand based on whether 3 things merit the look.
Why (Dan 2026-06-06):
“We might upgrade to pill
if we think it warrants it”
Trigger came right after switching the section defaults from <details open> to <details> (clean first load). Default-closed makes the surface calmer, but it hides density — a reader can’t tell whether Inventory is empty or has 14 rows without clicking. Pill counters restore that signal at zero scroll cost.
Use-when threshold (proposal — refine when first pill ships):
- 0 rows: no pill (placeholder text already says “no records yet”)
- 1-2 rows: no pill (cost of the pill exceeds the cost of just clicking)
- ≥3 rows: pill =
<count> - ≥1 row in “alert” state: pill =
<count> ⚠or styled accent-red regardless of count (Aiper-return-style in-flight items)
Sketch — CSS + markup:
�STASH8�
�STASH9�
Build sketch: pills could be hand-typed in markup (3 sections, low maintenance) OR derived from a small JSON sidecar (sections-state.json) that the editorial composer updates. Hand-typed is cheaper until there are ≥6 cross-cutting sections.
Sister memories:
parked_sketch_pa_orders_returns_in_flight_2026-06-06— the section this pattern first lands onfeedback_editorial_actionability_min_one_link_per_paragraph_2026-06-02— pills are the at-a-glance equivalent of inline-link affordance: “you can tell something is here without clicking through”