generated from coulomb/repo-seed
321 lines
16 KiB
Markdown
321 lines
16 KiB
Markdown
---
|
|
title: UI Feedback
|
|
---
|
|
|
|
```js
|
|
import {API, POLL_HEAVY, apiFetch, pollDelay, waitForVisible} from "./components/config.js";
|
|
```
|
|
|
|
```js
|
|
// Ordered workflow steps for dashboard-improvement suggestions
|
|
const STEPS = ["submitted", "analyse", "plan", "implement", "test", "review", "finished"];
|
|
const STEP_LABEL = {
|
|
submitted: "Submitted",
|
|
analyse: "Analyse",
|
|
plan: "Plan",
|
|
implement: "Implement",
|
|
test: "Test",
|
|
review: "Review",
|
|
finished: "Finished",
|
|
addressed: "Addressed",
|
|
resolved: "Resolved",
|
|
wont_fix: "Won't Fix",
|
|
};
|
|
const STEP_COLOR = {
|
|
submitted: "#94a3b8",
|
|
analyse: "#3b82f6",
|
|
plan: "#8b5cf6",
|
|
implement: "#f59e0b",
|
|
test: "#06b6d4",
|
|
review: "#6366f1",
|
|
finished: "#16a34a",
|
|
addressed: "#16a34a",
|
|
resolved: "#16a34a",
|
|
wont_fix: "#9ca3af",
|
|
};
|
|
const STEP_HINT = {
|
|
submitted: "New suggestion — not yet triaged.",
|
|
analyse: "Investigating the issue and its scope.",
|
|
plan: "Designing the solution approach.",
|
|
implement: "Building the change.",
|
|
test: "Verifying the implementation works correctly.",
|
|
review: "Awaiting review by the original suggester.",
|
|
finished: "Shipped and confirmed.",
|
|
addressed: "Implemented before the current workflow labels existed.",
|
|
resolved: "Resolved before the current workflow labels existed.",
|
|
wont_fix: "Decided not to implement.",
|
|
};
|
|
const CLOSED_STATUSES = new Set(["finished", "addressed", "resolved", "wont_fix"]);
|
|
function nextStep(current) {
|
|
const i = STEPS.indexOf(current);
|
|
return i >= 0 && i < STEPS.length - 1 ? STEPS[i + 1] : null;
|
|
}
|
|
```
|
|
|
|
```js
|
|
const feedbackState = (async function*() {
|
|
let failures = 0;
|
|
while (true) {
|
|
let data = [], ok = false;
|
|
try {
|
|
const r = await apiFetch("/technical-debt/?debt_type=dashboard-improvement");
|
|
ok = r.ok;
|
|
if (ok) {
|
|
const items = await r.json();
|
|
data = items
|
|
.filter(t => t.debt_type === "dashboard-improvement")
|
|
.sort((a, b) => {
|
|
const st = {submitted:0, analyse:1, plan:2, implement:3, test:4, review:5, finished:6, addressed:7, resolved:8, wont_fix:9, open:10, in_progress:11};
|
|
return (st[a.status] ?? 99) - (st[b.status] ?? 99);
|
|
});
|
|
}
|
|
} catch {}
|
|
failures = ok ? 0 : failures + 1;
|
|
yield {data, ok, ts: new Date()};
|
|
await waitForVisible(pollDelay({ok, base: POLL_HEAVY, failures}));
|
|
}
|
|
})();
|
|
```
|
|
|
|
```js
|
|
const data = feedbackState.data ?? [];
|
|
const _ok = feedbackState.ok ?? false;
|
|
const _ts = feedbackState.ts;
|
|
```
|
|
|
|
# UI Feedback
|
|
|
|
```js
|
|
import {injectTocTop} from "./components/toc-sidebar.js";
|
|
import {withDocHelp} from "./components/doc-overlay.js";
|
|
|
|
const _active = data.filter(t => !CLOSED_STATUSES.has(t.status));
|
|
const _finished = data.filter(t => ["finished", "addressed", "resolved"].includes(t.status));
|
|
const _wontfix = data.filter(t => t.status === "wont_fix");
|
|
|
|
const _kpiBox = html`<div class="kpi-infobox">
|
|
<div class="kpi-infobox-title">UI Feedback</div>
|
|
<div class="kpi-row">
|
|
<span class="kpi-row-label">active</span>
|
|
<div class="kpi-row-right"><div class="kpi-row-value" style="color:${_active.length > 0 ? '#6366f1' : 'inherit'}">${_active.length}</div></div>
|
|
</div>
|
|
<div class="kpi-row">
|
|
<span class="kpi-row-label">finished</span>
|
|
<div class="kpi-row-right"><div class="kpi-row-value">${_finished.length}</div></div>
|
|
</div>
|
|
<div class="kpi-row">
|
|
<span class="kpi-row-label">won't fix</span>
|
|
<div class="kpi-row-right"><div class="kpi-row-value">${_wontfix.length}</div></div>
|
|
</div>
|
|
</div>`;
|
|
|
|
const _liveEl = html`<div class="live-indicator">
|
|
<span style="color:${_ok ? 'var(--theme-foreground-focus)' : 'red'}">●</span>
|
|
${_ok
|
|
? `Live · updated ${_ts?.toLocaleTimeString()}`
|
|
: html`<span style="color:red">Offline — run: <code>make api</code></span>`}
|
|
</div>`;
|
|
|
|
injectTocTop("fb-kpi-box", _kpiBox);
|
|
injectTocTop("live-indicator", _liveEl);
|
|
```
|
|
|
|
> Shift+click any widget on any dashboard page to submit a suggestion.
|
|
> Each suggestion moves through the workflow below; the **Review** step
|
|
> is for the original suggester to confirm the implementation is correct.
|
|
|
|
## Active
|
|
|
|
```js
|
|
async function _advance(td, newStatus) {
|
|
return fetch(`${API}/technical-debt/${td.id}`, {
|
|
method: "PATCH",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({status: newStatus}),
|
|
});
|
|
}
|
|
|
|
async function _addNote(td_id, step, content) {
|
|
return fetch(`${API}/technical-debt/${td_id}/notes/`, {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json"},
|
|
body: JSON.stringify({step, content, author: "custodian"}),
|
|
});
|
|
}
|
|
|
|
function renderSuggestionCard(t) {
|
|
const isWorkflow = STEPS.includes(t.status);
|
|
const next = nextStep(t.status);
|
|
const color = STEP_COLOR[t.status] ?? "#94a3b8";
|
|
const stepIdx = STEPS.indexOf(t.status);
|
|
|
|
// ── Stepper ─────────────────────────────────────────────────────────
|
|
const stepperEl = html`<div class="fb-stepper">
|
|
${STEPS.map((s, i) => {
|
|
const done = i < stepIdx;
|
|
const current = i === stepIdx;
|
|
return html`<div class="fb-step ${done ? 'fb-step-done' : ''} ${current ? 'fb-step-current' : ''}">
|
|
<div class="fb-step-dot" style="${current ? `background:${color};border-color:${color}` : done ? 'background:#16a34a;border-color:#16a34a' : ''}"></div>
|
|
<div class="fb-step-label">${STEP_LABEL[s]}</div>
|
|
</div>
|
|
${i < STEPS.length - 1 ? html`<div class="fb-step-line ${done || current && i < stepIdx ? 'fb-step-line-done' : ''}"></div>` : ""}`;
|
|
})}
|
|
</div>`;
|
|
|
|
// ── Notes ────────────────────────────────────────────────────────────
|
|
const notesEl = html`<div class="fb-notes">
|
|
${(t.notes ?? []).length === 0
|
|
? html`<p class="fb-no-notes">No notes yet for this step.</p>`
|
|
: (t.notes ?? []).map(n => html`<div class="fb-note">
|
|
<span class="fb-note-step" style="background:${STEP_COLOR[n.step] ?? '#94a3b8'}20;color:${STEP_COLOR[n.step] ?? '#64748b'}">${STEP_LABEL[n.step] ?? n.step}</span>
|
|
<span class="fb-note-author">${n.author ?? "anon"}</span>
|
|
<span class="fb-note-time">${new Date(n.created_at).toLocaleString()}</span>
|
|
<div class="fb-note-content">${n.content}</div>
|
|
</div>`)}
|
|
</div>`;
|
|
|
|
// ── Add note form ────────────────────────────────────────────────────
|
|
const noteTA = html`<textarea class="fb-note-ta" rows="2" placeholder="Add a note for this step…"></textarea>`;
|
|
const noteBtn = html`<button class="fb-btn fb-btn-note">+ note</button>`;
|
|
noteBtn.addEventListener("click", async () => {
|
|
const txt = noteTA.value.trim();
|
|
if (!txt) return;
|
|
noteBtn.disabled = true;
|
|
const r = await _addNote(t.id, t.status, txt);
|
|
if (r.ok) {
|
|
noteTA.value = "";
|
|
// Refresh: remove and re-fetch by reloading feedbackState on next poll
|
|
}
|
|
noteBtn.disabled = false;
|
|
});
|
|
const noteForm = html`<div class="fb-note-form">${noteTA}${noteBtn}</div>`;
|
|
|
|
// ── Actions ──────────────────────────────────────────────────────────
|
|
const actionsEl = html`<div class="fb-actions">
|
|
${t.status === "review"
|
|
? html`<span class="fb-review-hint">⬆ Awaiting confirmation from the original suggester</span>`
|
|
: ""}
|
|
${next ? html`<button class="fb-btn fb-btn-advance" style="border-color:${STEP_COLOR[next]};color:${STEP_COLOR[next]}"
|
|
onclick=${async (e) => { e.currentTarget.disabled = true; await _advance(t, next); }}>
|
|
→ ${STEP_LABEL[next]}
|
|
</button>` : ""}
|
|
<button class="fb-btn fb-btn-wontfix"
|
|
onclick=${async (e) => { e.currentTarget.disabled = true; await _advance(t, "wont_fix"); }}>
|
|
✕ won't fix
|
|
</button>
|
|
</div>`;
|
|
|
|
return html`<div class="fb-card" style="border-left-color:${color}">
|
|
<div class="fb-card-header">
|
|
${t.td_id ? html`<span class="td-ref">${t.td_id}</span>` : ""}
|
|
<span class="fb-step-badge" style="background:${color}20;color:${color}">${STEP_LABEL[t.status] ?? t.status}</span>
|
|
<span class="fb-location">${t.location ?? ""}</span>
|
|
</div>
|
|
<div class="fb-title">${t.title.replace(/^UI:\s*/, "")}</div>
|
|
<div class="fb-suggestion">${t.description ?? ""}</div>
|
|
${stepperEl}
|
|
<details class="fb-notes-section" open>
|
|
<summary class="fb-notes-toggle">Notes (${(t.notes ?? []).length})</summary>
|
|
${notesEl}
|
|
${noteForm}
|
|
</details>
|
|
${actionsEl}
|
|
</div>`;
|
|
}
|
|
|
|
if (_active.length === 0) {
|
|
display(html`<p class="dim">No active suggestions. Shift+click any dashboard widget to submit one.</p>`);
|
|
} else {
|
|
display(html`<div class="fb-list">${_active.map(renderSuggestionCard)}</div>`);
|
|
}
|
|
```
|
|
|
|
## Finished & Won't Fix
|
|
|
|
```js
|
|
const _closed = [..._finished, ..._wontfix];
|
|
if (_closed.length === 0) {
|
|
display(html`<p class="dim">Nothing closed yet.</p>`);
|
|
} else {
|
|
display(html`<div class="fb-list fb-list-closed">${_closed.map(t => {
|
|
const color = STEP_COLOR[t.status] ?? "#94a3b8";
|
|
return html`<div class="fb-card fb-card-closed" style="border-left-color:${color}">
|
|
<div class="fb-card-header">
|
|
${t.td_id ? html`<span class="td-ref">${t.td_id}</span>` : ""}
|
|
<span class="fb-step-badge" style="background:${color}20;color:${color}">${STEP_LABEL[t.status] ?? t.status}</span>
|
|
<span class="fb-location">${t.location ?? ""}</span>
|
|
</div>
|
|
<div class="fb-title">${t.title.replace(/^UI:\s*/, "")}</div>
|
|
<div class="fb-suggestion">${t.description ?? ""}</div>
|
|
${(t.notes ?? []).length > 0 ? html`<div class="fb-notes fb-notes-compact">
|
|
${t.notes.slice(-2).map(n => html`<div class="fb-note">
|
|
<span class="fb-note-step" style="background:${STEP_COLOR[n.step] ?? '#94a3b8'}20;color:${STEP_COLOR[n.step] ?? '#64748b'}">${STEP_LABEL[n.step] ?? n.step}</span>
|
|
<div class="fb-note-content">${n.content}</div>
|
|
</div>`)}
|
|
</div>` : ""}
|
|
</div>`;
|
|
})}</div>`);
|
|
}
|
|
```
|
|
|
|
<style>
|
|
.live-indicator { font-size: 0.8rem; color: gray; position: relative; padding: 0.55rem 1.8rem 0.55rem 0.7rem; margin-bottom: 0.75rem; }
|
|
.kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.3rem 0; border-top: 1px solid var(--theme-foreground-faint, #eee); }
|
|
.kpi-row:first-of-type { border-top: none; }
|
|
.kpi-row-label { font-size: 0.8rem; color: var(--theme-foreground-muted, #666); }
|
|
.kpi-row-right { text-align: right; }
|
|
.kpi-row-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
|
|
|
|
/* ── Cards ─────────────────────────────────────────────────────────── */
|
|
.fb-list { display: flex; flex-direction: column; gap: 1rem; }
|
|
.fb-list-closed { opacity: 0.72; }
|
|
.fb-card { border-left: 3px solid #6366f1; border-radius: 0 8px 8px 0; background: var(--theme-background-alt); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
|
|
.fb-card-closed { gap: 0.4rem; }
|
|
.fb-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
|
|
.fb-location { font-size: 0.72rem; color: var(--theme-foreground-faint); font-style: italic; flex: 1; }
|
|
.fb-title { font-weight: 700; font-size: 1rem; }
|
|
.fb-suggestion { font-size: 0.85rem; color: var(--theme-foreground-muted); line-height: 1.5; white-space: pre-wrap; }
|
|
.fb-step-badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
|
|
.td-ref { font-family: monospace; font-size: 0.72rem; color: var(--theme-foreground-muted); background: var(--theme-background); border: 1px solid var(--theme-foreground-faint, #ddd); border-radius: 4px; padding: 0.05rem 0.35rem; }
|
|
|
|
/* ── Stepper ────────────────────────────────────────────────────────── */
|
|
.fb-stepper { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 0.5rem 0; gap: 0; }
|
|
.fb-step { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 54px; }
|
|
.fb-step-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--theme-foreground-faint, #ccc); background: var(--theme-background); }
|
|
.fb-step-done .fb-step-dot { background: #16a34a; border-color: #16a34a; }
|
|
.fb-step-current .fb-step-dot { width: 12px; height: 12px; }
|
|
.fb-step-label { font-size: 0.62rem; color: var(--theme-foreground-faint); margin-top: 0.25rem; text-align: center; white-space: nowrap; }
|
|
.fb-step-done .fb-step-label { color: #16a34a; }
|
|
.fb-step-current .fb-step-label { font-weight: 700; color: var(--theme-foreground); }
|
|
.fb-step-line { flex: 1; height: 2px; background: var(--theme-foreground-faint, #ddd); min-width: 12px; margin-bottom: 18px; }
|
|
.fb-step-line-done { background: #16a34a; }
|
|
|
|
/* ── Notes ──────────────────────────────────────────────────────────── */
|
|
.fb-notes-section { margin-top: 0.1rem; }
|
|
.fb-notes-toggle { cursor: pointer; font-size: 0.75rem; color: var(--theme-foreground-muted); user-select: none; padding: 0.15rem 0; }
|
|
.fb-notes { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.5rem; }
|
|
.fb-notes-compact { margin-top: 0.3rem; }
|
|
.fb-no-notes { font-size: 0.75rem; color: var(--theme-foreground-faint); font-style: italic; margin: 0.2rem 0 0.4rem; }
|
|
.fb-note { background: var(--theme-background); border-radius: 5px; padding: 0.4rem 0.6rem; font-size: 0.82rem; line-height: 1.45; }
|
|
.fb-note-step { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 8px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; margin-right: 0.35rem; }
|
|
.fb-note-author { font-size: 0.7rem; color: var(--theme-foreground-muted); margin-right: 0.35rem; }
|
|
.fb-note-time { font-size: 0.68rem; color: var(--theme-foreground-faint); }
|
|
.fb-note-content { margin-top: 0.2rem; white-space: pre-wrap; }
|
|
.fb-note-form { display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 0.25rem; }
|
|
.fb-note-ta { flex: 1; font-size: 0.82rem; font-family: inherit; border: 1px solid var(--theme-foreground-faint, #ccc); border-radius: 5px; padding: 0.35rem 0.5rem; background: var(--theme-background); resize: vertical; line-height: 1.45; color: inherit; }
|
|
|
|
/* ── Actions ────────────────────────────────────────────────────────── */
|
|
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.1rem; }
|
|
.fb-review-hint { font-size: 0.75rem; color: #6366f1; font-style: italic; flex: 1; }
|
|
.fb-btn { padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.78rem; font-family: inherit; cursor: pointer; font-weight: 600; border: 1px solid transparent; transition: opacity 0.1s; background: var(--theme-background); }
|
|
.fb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.fb-btn-advance { border-width: 1.5px; }
|
|
.fb-btn-advance:hover:not(:disabled) { opacity: 0.75; }
|
|
.fb-btn-note { border-color: var(--theme-foreground-faint, #ccc); color: var(--theme-foreground-muted); }
|
|
.fb-btn-note:hover:not(:disabled) { background: var(--theme-background-alt); }
|
|
.fb-btn-wontfix { color: #9ca3af; border-color: #e5e7eb; }
|
|
.fb-btn-wontfix:hover:not(:disabled) { background: #f3f4f6; }
|
|
|
|
.dim { color: gray; font-style: italic; }
|
|
</style>
|