Cloonar/coding-lab
3
0
Fork 0
Code Issues 26 Pull requests 6 Projects Releases Packages 1 Wiki Activity Actions

Frontend component reuse: inventory repeated UI patterns, then file per-family extraction issues #276

New issue
Open
opened 2026-08-04 14:20:55 +02:00 by dominik.polakovics · 1 comment
dominik.polakovics commented 2026-08-04 14:20:55 +02:00
Owner
Copy link

Goal

Umbrella follow-up to #275: make the frontend easy to maintain by moving repeated hand-rolled UI patterns into shared, reusable components — so visual/spacing fixes land in one place instead of ~16.

Approach: inventory first

Phase 1 — inventory pass (done, 2026-08-04 — see triage comment): catalog the repeated patterns across web/src, e.g.:

  • Empty states: <p class="empty"> at ~16 call sites (routes outside the settings sections migrated by #275: Tokens, Credentials, History, Repos, RepoIssues, RepoCRs, RunChat, NewRun, …). → #279
  • Head rows: the two competing patterns .section-head (shell.css) and .card-head (cards.css) — unify onto the SectionCard head from #275 or a shared head component. → #280
  • Form cards (.form-card + heading + ErrorBanner + submit button pattern). → #281
  • List rows (article.card + .card-head + title + danger-action rows, e.g. ImportRow/TokenCard/CredentialCard). → #282
  • Banner usage: inline <div class="banner error" role="alert"> copies vs the ErrorBanner component. → #283

Phase 2 — the per-family issues are triaged and labeled individually; this umbrella tracks them and closes when the last family lands.

Constraints

  • No visual redesign: extraction preserves the current look (tokens/spacing come along unchanged).
  • Keep PRs small and per-family; avoid one mega-refactor PR.
  • SectionCard from #275 is the exemplar for shape and test style.

Blocked by

## Goal Umbrella follow-up to #275: make the frontend easy to maintain by moving repeated hand-rolled UI patterns into shared, reusable components — so visual/spacing fixes land in one place instead of ~16. ## Approach: inventory first Phase 1 — inventory pass (**done, 2026-08-04** — see triage comment): catalog the repeated patterns across `web/src`, e.g.: - Empty states: `<p class="empty">` at ~16 call sites (routes outside the settings sections migrated by #275: Tokens, Credentials, History, Repos, RepoIssues, RepoCRs, RunChat, NewRun, …). → #279 - Head rows: the two competing patterns `.section-head` (shell.css) and `.card-head` (cards.css) — unify onto the `SectionCard` head from #275 or a shared head component. → #280 - Form cards (`.form-card` + heading + ErrorBanner + submit button pattern). → #281 - List rows (`article.card` + `.card-head` + title + danger-action rows, e.g. ImportRow/TokenCard/CredentialCard). → #282 - Banner usage: inline `<div class="banner error" role="alert">` copies vs the `ErrorBanner` component. → #283 Phase 2 — the per-family issues are triaged and labeled individually; this umbrella tracks them and closes when the last family lands. ## Constraints - No visual redesign: extraction preserves the current look (tokens/spacing come along unchanged). - Keep PRs small and per-family; avoid one mega-refactor PR. - `SectionCard` from #275 is the exemplar for shape and test style. ## Blocked by - #279 - #280 - #281 - #282 - #283
dominik.polakovics commented 2026-08-04 19:25:35 +02:00
Author
Owner
Copy link

This was generated by AI during triage.

Triage outcome: phase 1 (inventory) done — this issue is now a tracking umbrella

The inventory pass was performed during triage and the per-family issues are filed, each with an agent brief and ready-for-agent:

  • #279 — Empty states: 17 class="empty" occurrences, ~16 production call sites across 13 files (list routes, RunChat ×4, NewRun, settings sections).
  • #280 — Head rows: .section-head ×20 (13 route files, shell.css) vs .card-head ×26 (cards.css); SectionCard from #275 is the exemplar; cards.css already mirrors .section-head h2 sizing by hand.
  • #281 — Form cards: 9 hand-rolled .card.form-card shells (create token/credential, AddRepo, NewIssue, secrets/imports/schedules add-forms) duplicating heading + ErrorBanner + busy-submit wiring.
  • #282 — List rows: TokenCard, CredentialCard, ImportRow each hand-roll article.card + .card-title head + danger action + .card-sub.
  • #283 — Banners: ~20 inline <div class="banner error" role="alert"> copies plus inline banner success and extra-class variants, while ErrorBanner exists but lacks non-dismissible/success/extra-class support.

Nothing remains for an agent to do on this issue — the family issues carry the work. #276 stays open as the tracker: the ## Blocked by section in the body now lists the five family issues, and this closes when the last of them lands. Removing needs-triage; deliberately not applying ready-for-agent here so the scheduler never hands the umbrella itself to an agent.

> *This was generated by AI during triage.* ## Triage outcome: phase 1 (inventory) done — this issue is now a tracking umbrella The inventory pass was performed during triage and the per-family issues are filed, each with an agent brief and `ready-for-agent`: - #279 — **Empty states**: 17 `class="empty"` occurrences, ~16 production call sites across 13 files (list routes, RunChat ×4, NewRun, settings sections). - #280 — **Head rows**: `.section-head` ×20 (13 route files, shell.css) vs `.card-head` ×26 (cards.css); `SectionCard` from #275 is the exemplar; cards.css already mirrors `.section-head h2` sizing by hand. - #281 — **Form cards**: 9 hand-rolled `.card.form-card` shells (create token/credential, AddRepo, NewIssue, secrets/imports/schedules add-forms) duplicating heading + ErrorBanner + busy-submit wiring. - #282 — **List rows**: `TokenCard`, `CredentialCard`, `ImportRow` each hand-roll `article.card` + `.card-title` head + danger action + `.card-sub`. - #283 — **Banners**: ~20 inline `<div class="banner error" role="alert">` copies plus inline `banner success` and extra-class variants, while `ErrorBanner` exists but lacks non-dismissible/success/extra-class support. Nothing remains for an agent to do **on this issue** — the family issues carry the work. #276 stays open as the tracker: the `## Blocked by` section in the body now lists the five family issues, and this closes when the last of them lands. Removing `needs-triage`; deliberately **not** applying `ready-for-agent` here so the scheduler never hands the umbrella itself to an agent.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
lab/20260908-1942
afk/290
afk/283
afk/281
afk/273
afk/188
afk/216
afk/269
afk/199
afk/257
afk/255
afk/251
afk/250
afk/249
afk/247
afk/243
afk/235
afk/195
afk/230
afk/222
afk/218
afk/207
afk/201
afk/198
afk/194
afk/191
afk/176
afk/189
afk/182
afk/185
lab/20260718-0240
afk/165
afk/163
afk/160
afk/126
afk/159
afk/156
afk/151
afk/154
afk/149
afk/145
afk/137
afk/142
afk/140
afk/134
afk/132
No results found.
Labels
Clear labels   
bug
Something is broken

  
chore

   
enhancement
New feature or improvement

  
needs-info
Waiting on reporter for more information

  
needs-triage
Maintainer needs to evaluate this issue

  
ready-for-agent
Fully specified, ready for an AFK agent

  
ready-for-human
Requires human implementation

  
wontfix
Will not be actioned

No labels
bug
chore
enhancement
needs-info
needs-triage
ready-for-agent
ready-for-human
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Cloonar/coding-lab#276
No description provided.