fix: replace hardcoded colour maps with color-hash for consistent, scalable colouring#87
Merged
NotYuSheng merged 2 commits intomainfrom Mar 28, 2026
Merged
Conversation
…alable colouring Previously, protocol/app/category badges used three separate ad-hoc colour systems — a Bootstrap badge-class lookup (getProtocolBadgeClass), a small hand-maintained APP_COLORS map, and a CATEGORY_COLORS map — all falling back to a hardcoded purple for anything unknown. This replaces all three with a single deterministic string-to-colour approach using the `color-hash` library (v2.0.2), which hashes any string to a consistent HSL colour. Same name always produces the same colour, and any new protocol/app/category gets a distinct colour automatically without any code changes. Changes: - appColors.ts: replace APP_COLORS/CATEGORY_COLORS maps with color-hash; getAppColor() and getCategoryColor() now delegate to colorHash.hex() - constants.ts: export getProtocolColor() as single source of truth for protocol colours, used by both NetworkGraph (edge strokes) and conversation components - NetworkGraph.tsx: remove local duplicate getProtocolColor(); import from constants instead - ConversationList.tsx: replace getProtocolBadgeClass() Bootstrap-class lookup with inline style using getProtocolColor(); use getCategoryColor() for category badges - ConversationDetail.tsx: protocol badge uses getProtocolColor() instead of hardcoded bg-primary - ConversationFilterPanel.tsx: category pills use getCategoryColor() when active, consistent with app pills - CategoryBreakdownChart.tsx: already using getCategoryColor(), no change needed to logic - package.json: add color-hash ^2.0.2 and @types/color-hash ^2.0.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces hardcoded application colors with a dynamic color generation system using the color-hash library and centralizes protocol color logic. While these changes improve maintainability and visual variety, the reviewer identified accessibility issues where hardcoding white text on dynamically generated background colors (such as yellow for UDP) results in poor contrast. It is recommended to implement a utility function that calculates the appropriate text color (black or white) based on the background's luminance to ensure readability across all generated colors.
…sibility Hardcoded white text on hashed background colours fails WCAG contrast requirements for light hues (e.g. yellow). Added getTextColor(hex) to appColors.ts which picks '#000' or '#fff' based on perceived luminance (0.299R + 0.587G + 0.114B). Applied to all badge/pill sites: - ConversationList: protocol, app name, category badges - ConversationDetail: protocol and app name badges - ConversationFilterPanel: active app and category filter pills Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
APP_COLORSmap,CATEGORY_COLORSmap) with a single deterministic string-to-colour approach usingcolor-hashgetProtocolColor()fromfeatures/network/constants.tsas a single source of truth, used by both the network graph edge strokes and all conversation badge componentsgetProtocolColor()fromNetworkGraph.tsxgetProtocolBadgeClass()fromConversationList(Bootstrap class lookup that only covered 8 protocols)ConversationFilterPanelnow colour on active, consistent with app pillsTest plan
docker compose buildpasses cleanly🤖 Generated with Claude Code