diff --git a/app/src/App.jsx b/app/src/App.jsx index 7e52f01..de593f5 100644 --- a/app/src/App.jsx +++ b/app/src/App.jsx @@ -114,7 +114,14 @@ function FindingRow({ f, quarantineDir, onQuarantined, actionsDisabled = false } return (
  • - {f.entry.path} + + {f.entry.path} + {f.category && ( + + {CATEGORY_LABEL[f.category] ?? f.category} + + )} + {humanBytes(f.entry.size)} {/* Every reason, not just the matched rule: "referenced by 3 projects" is what explains a risky row, and it is never the diff --git a/app/src/App.test.mjs b/app/src/App.test.mjs index e431e91..a79e5e2 100644 --- a/app/src/App.test.mjs +++ b/app/src/App.test.mjs @@ -75,6 +75,14 @@ test("capped lists retain the findings and duplicate-path styling hooks", () => assert.match(jsx, /className="dup-paths"/); }); +test("finding rows display a category badge", () => { + assert.match( + jsx, + /\s*\{CATEGORY_LABEL\[f\.category\] \?\? f\.category\}\s*<\/span>/, + "each finding row should show a readable category badge" + ); +}); + const liveRegion = /]*>([\s\S]*?)<\/p>/.exec( jsx ); diff --git a/app/src/styles.css b/app/src/styles.css index a89cf36..118ec7b 100644 --- a/app/src/styles.css +++ b/app/src/styles.css @@ -105,6 +105,22 @@ button { padding: 0.6rem 1.4rem; font-size: 1rem; cursor: pointer; } border-radius: 6px; } .path { grid-column: 1; font-family: ui-monospace, monospace; font-size: 0.85rem; overflow-wrap: anywhere; } +/* Category badge: small, visually quiet classification badge on finding rows */ +.category-badge { + display: inline-block; + margin-left: 0.5rem; + padding: 0.15rem 0.45rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 0.72rem; + font-weight: 500; + line-height: 1.2; + border-radius: 4px; + background: rgba(128, 128, 128, 0.14); + border: 1px solid rgba(128, 128, 128, 0.25); + opacity: 0.85; + white-space: nowrap; + vertical-align: middle; +} .size { grid-column: 2; font-size: 0.82rem; opacity: 0.8; white-space: nowrap; font-variant-numeric: tabular-nums; } /* min-width pins the auto column to the widest state (the confirm cluster), so idle → confirm → working swaps don't resize the row and diff --git a/app/src/styles.test.mjs b/app/src/styles.test.mjs index 5ecf8e9..ab8c2a0 100644 --- a/app/src/styles.test.mjs +++ b/app/src/styles.test.mjs @@ -95,3 +95,9 @@ test("preview rows have a quiet non-action label", () => { assert.match(css, /\.preview-note\s*\{/); assert.match(css, /\.preview-only\s*\{[^}]*opacity\s*:/s); }); + +test("category badges have quiet styling", () => { + assert.match(css, /\.category-badge\s*\{/); + assert.match(css, /\.category-badge\s*\{[^}]*font-size\s*:/s); +}); + diff --git a/changelog.d/154-category-badges-on-result-rows.added.md b/changelog.d/154-category-badges-on-result-rows.added.md new file mode 100644 index 0000000..f381d0d --- /dev/null +++ b/changelog.d/154-category-badges-on-result-rows.added.md @@ -0,0 +1,2 @@ +- Display small, readable category badges on finding result rows so users can + scan and identify result categories faster.