Add filter chips with theme-aware borders to show active filters on search contact page

[Copilot]

This PR implements filter chips functionality for the contact search page, addressing the issue where users could only see the number of active filters but not which specific filters were applied.

Filter Chips Implementation

Added a FilterChips component that displays active filters as dismissible badges with theme-aware borders for better visibility. Users can now see exactly which filters are active at a glance and remove individual filters with one click.

Key Features

• Visual Filter Indication: Active filters are displayed as labeled chips (e.g., "Callsign: W1AW", "Mode: FT8", "Band: 20m")
• One-Click Removal: Each chip has an X button to remove that specific filter
• Smart Labeling: Human-readable labels for all filter types including text fields, dropdowns, dates, and DXCC entities
• Theme-Aware Borders: Chips have visible borders that automatically adapt to light/dark themes using CSS variables
• Complete Integration: Works with all existing filter types including quick filters, advanced filters, and dropdown selections

Technical Implementation

The implementation uses the existing Badge component with additional styling for theme-responsive borders (border border-border). The getActiveFilterChips() helper function converts filter state into human-readable chip data, handling special cases like date formatting and DXCC entity name resolution.

Demo Page

Created a comprehensive demo at /filter-chips-demo showcasing the functionality with interactive examples, making it easy to test the feature without database setup.

Impact

• Before: Users saw "5 active" but had to scan form fields to identify which filters were applied
• After: Users see individual filter chips like "Callsign: W1AW", "Mode: FT8" with clear visual boundaries
• Improved workflow efficiency for power users managing complex filter combinations
• Better mobile experience with compact, bordered chip display

The implementation maintains backward compatibility and adds zero breaking changes to existing functionality.

Fixes #65.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nodelog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 11, 2025 2:29pm

[patrickrb]

@copilot the chips are working perfectly, but they dont have a visible border. Lets give it a border, it should be based on the theme the user has selected.

[Copilot]

@copilot the chips are working perfectly, but they dont have a visible border. Lets give it a border, it should be based on the theme the user has selected.

Added theme-aware borders to the filter chips! The chips now have visible borders using border border-border classes that automatically adapt to the selected theme (light/dark mode). The borders use the theme's CSS variables to ensure they maintain proper contrast and visual consistency.

Changes implemented in commit 502d596.

[patrickrb]

Chips are working great, Tested on deployed environment. LGTM..merging