Render issue state with GitHub-style octicons and colors #13

Closed AtlantisPleb opened this 8h ago 1 comment

Outcome

Issue lists and headers use the same state iconography as GitHub: a green issue-opened circle icon for open issues and a purple issue-closed check-circle icon for closed issues, at 16px, vertically aligned with the title.

Reference

GitHub renders open as:

<span class="d-flex" style="color:var(--fgColor-open)">
  <svg class="octicon octicon-issue-opened" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
    <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
  </svg>
</span>

Closed uses octicon-issue-closed with color:var(--fgColor-closed), which resolves to the same purple as open's green in GitHub Primer dark terms (--fgColor-success / --fgColor-done).

Work

Add issue-opened and issue-closed glyphs to the vendored Apps SDK icon set served by OpenAgentsWeb.UI.icon/1, or record why in docs/ICONS.md if the set already covers them.
Use them on the issue index, issue show header, workspace views, and any API-driven list rendering.
Color from tokens, not literals: map open to our success token and closed to our done/purple token in both light and dark palettes so contrast holds.
Keep aria-hidden on the decorative icon and keep the state word in text for screen readers.

Acceptance criteria

Open issues show the green circle-dot icon; closed issues show the purple check-circle icon.
Colors follow palette tokens in light and dark modes.
No inline <svg> outside the shared icon component.

Verification

Pixel proof of the issue index and show page in both palettes; mix precommit.

AtlantisPleb opened this issue 8h ago
A AtlantisPleb Author 7h ago
Implemented and on main (8514ad9).
- Vendored issue-opened and issue-closed from Primer Octicons (MIT) into priv/octicons at a pinned commit, embedded by OpenAgentsWeb.Icons under octicon-* names and rendered only through .icon/1.
- Open issues now show the green circle-dot (--success); completed closes show the purple check-circle (new --done token, light + dark values matching GitHub). Not-planned keeps the cancelled glyph.
- The mapping lives in the shared Circle.issue_status/IssuePresentation.category paths, so the repository list, workspace list, issue page, and close-event feed all read the same way. Icons stay aria-hidden; the state word remains visible text.
Note for the next precommit runner: this worktree also carries untracked forum WIP whose own tests fail independently of this change — verified by stashing.
closed this as completed 7h ago