Skip to content

feat(app): show category badges on finding result rows (#154) - #177

Open
littfed wants to merge 1 commit into
Coding-Moves:mainfrom
littfed:feat/category-badges-on-result-rows
Open

littfed wants to merge 1 commit into
Coding-Moves:mainfrom
littfed:feat/category-badges-on-result-rows

Conversation

@littfed

@littfed littfed commented Sep 13, 2026

Copy link
Copy Markdown

What & why

Closes #154

Result rows internally carry a category, but previously only displayed the file path, size, and matching reasons. Adding small category badges (e.g. "Browser cache", "Build artifacts", "Temporary files") makes the findings list much easier to scan and understand at a glance.

  • Readable category badges: Uses the existing CATEGORY_LABEL[f.category] ?? f.category dictionary in FindingRow.
  • Quiet & unobtrusive layout: Rendered inline inside <span className="path">, preserving the existing 3-column grid layout (1fr auto auto) and action cluster pin (min-width: 16rem) without crowding the path or shifting columns.
  • Subtle visual design: Styled with .category-badge using subtle background (rgba(128, 128, 128, 0.14)), 1px muted border, 0.72rem font size, and rounded 4px pill styling.
  • Tests: Added unit tests in app/src/App.test.mjs (JSX rendering) and app/src/styles.test.mjs (CSS styling).
  • Changelog fragment: Added changelog.d/154-category-badges-on-result-rows.added.md following repo guidelines.

Checklist

[✓] cargo fmt --check clean (no Rust code touched)
[✓] npm test in app/: 74/74 tests pass
[✓] python3 scripts/changelog.py check passes (2 change fragments validated)
[✓] python3 -m unittest discover -s tests passes (32/32 tests)
[✓] node --test tests/*.test.mjs passes
[✓] Commits are small, clean, and focused

)

- Render category badges in FindingRow using CATEGORY_LABEL mapping
- Add quiet styling for .category-badge (0.72rem, subtle border and background)
- Inline inside .path to preserve finding grid layout and action pin alignment
- Add unit and style tests verifying badge rendering and styling
- Add changelog fragment in changelog.d

@LouisDeconinck LouisDeconinck left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good — clean, minimal change.

  • Guarded render (f.category &&) so rows without a category stay unchanged, and CATEGORY_LABEL[..] ?? f.category keeps unknown categories readable.
  • Badge inherits the path column's wrap context correctly and the explicit non-mono font + white-space: nowrap keeps it visually quiet.
  • Tests follow the established source-assertion style and the changelog fragment validates.

Approved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show small category badges on result rows

3 participants