Add favorites feature with heart icons and IndexedDB storage to CustomCard components

[Copilot]

This PR implements a complete favorites system for CA Resources, allowing users to bookmark their favorite resources with persistent storage across browser sessions.

🎯 Features Added

Heart Icon Integration: Each CustomCard now displays a clickable heart icon that users can tap to add or remove items from their favorites. The heart fills with red when favorited and remains outline when not.

Persistent Storage: Favorites are stored locally using IndexedDB, ensuring they persist across page refreshes and browser sessions without requiring user accounts or external storage.

Auto-Generated IDs: Each card automatically generates a unique identifier based on its title and href, ensuring consistent identification across the application.

Visual Feedback: Clear visual indication of favorite status with smooth transitions and proper accessibility labels.

🛠️ Technical Implementation

• lib/favorites.ts: New utility file containing IndexedDB operations, ID generation, and React hooks for state management
• Enhanced CustomCard: Modified to include heart icon functionality while maintaining backward compatibility
• Client-Side Rendering: Properly handles SSR/hydration to work seamlessly with MDX files
• Event Handling: Heart clicks are isolated from card navigation to prevent unintended page redirects

🎨 Visual Result

The feature integrates seamlessly with the existing design:

⚡ Performance & Compatibility

• Zero Breaking Changes: All existing CustomCard usage continues to work without modification
• Minimal Bundle Impact: Only adds necessary dependencies (IndexedDB utilities)
• Cross-Page Consistency: Favorites state is shared across all pages using the same components
• Error Handling: Graceful fallbacks if IndexedDB is unavailable

The implementation follows the project's styling guidelines and maintains the existing component API while adding powerful new functionality for user experience enhancement.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• gvmemz92tx.ufs.sh
  • Triggering command: next-server (v15.4.1) (dns block)
• https://api.github.com/repos/bryan308/ca-resources/commits
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/ca-resources/ca-resources/node_modules/next/dist/compiled/jest-worker/processChild.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ca-resources	Ready	Preview	Comment	Aug 21, 2025 11:56am
v1-ca-resources	Ready	Preview	Comment	Aug 21, 2025 11:56am