fix: enhance leaderboard search with hybrid filtering

[devpavan04]

Summary of changes

• enhance leaderboard search with hybrid filtering (server-side & client-side for identity names filtering).
• add CLAUDE.md for documentation.

Proposed area of change

• apps/tangle-dapp
• apps/tangle-cloud
• apps/leaderboard
• libs/tangle-shared-ui
• libs/ui-components

Screen Recordings

CleanShot.2025-09-08.at.07.03.56.mp4

[netlify]

✅ Deploy Preview for tangle-cloud ready!

Name	Link
🔨 Latest commit	46a13c3
🔍 Latest deploy log	https://app.netlify.com/projects/tangle-cloud/deploys/68bef178a8514400081eb283
😎 Deploy Preview	https://deploy-preview-3062--tangle-cloud.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for tangle-leaderboard ready!

Name	Link
🔨 Latest commit	46a13c3
🔍 Latest deploy log	https://app.netlify.com/projects/tangle-leaderboard/deploys/68bef17847ceb700086634b0
😎 Deploy Preview	https://deploy-preview-3062--tangle-leaderboard.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	46a13c3
🔍 Latest deploy log	https://app.netlify.com/projects/tangle-dapp/deploys/68bef178b88fc500080389d2
😎 Deploy Preview	https://deploy-preview-3062--tangle-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[claude]

Claude finished @devpavan04's task —— View job

---

PR Review Complete ✅

Todo List:

• Read and analyze CLAUDE.md addition
• Review LeaderboardTable.tsx changes for hybrid filtering implementation
• Check code quality and best practices
• Evaluate performance implications
• Check for security considerations
• Provide comprehensive feedback

---

Overall Assessment

This PR successfully enhances leaderboard search with a smart hybrid filtering approach. The implementation is well-thought-out and follows the project's coding standards. The CLAUDE.md addition is comprehensive and valuable for future development.

Code Quality & Best Practices ✅

CLAUDE.md (New File):

• Excellent documentation: Comprehensive guide covering project structure, commands, architecture, and guidelines
• Well-structured: Clear sections with practical examples and commands
• Valuable addition: This will significantly help future contributors and Claude Code interactions
• Minor suggestion: Consider adding a section about the hybrid filtering approach for future reference

LeaderboardTable.tsx Changes:

• Clean implementation: Code follows the project's style guidelines (arrow functions, proper TypeScript usage)
• Good separation of concerns: Server-side vs client-side filtering logic is clearly separated
• Proper memoization: useMemo is used appropriately for expensive computations (lines 230-244, 277-323)
• Consistent naming: Variables and functions follow the project's naming conventions

Technical Implementation ⚠️

Strengths:

1. Smart filtering strategy (lines 237-244):

   // Use server-side filtering only for valid addresses
   if (isValidAddress(trimmedQuery)) {
     return trimmedQuery;
   }
   // Use client-side filtering for identity names and other searches
   return undefined;

2. Dynamic data loading (lines 254-262): Intelligently loads more data (100 vs pageSize) when client-side filtering to avoid missing results

3. Comprehensive client-side search (lines 303-315): Searches both identity names and addresses with case-insensitive matching

Areas for Improvement:

1. Performance concern at LeaderboardTable.tsx:254-256:

   searchQuery && !accountQuery
     ? Math.max(100, pagination.pageSize)
     : pagination.pageSize,

   Loading 100+ records for client-side filtering could impact performance. Consider:

   • Adding a loading indicator when switching between filter modes
   • Implementing debounced search with minimum character requirements
   • Consider pagination reset when switching between server/client filtering modes

2. UX inconsistency at LeaderboardTable.tsx:384:

   The placeholder only mentions addresses, but the implementation also searches identity names. Should be updated to reflect full capabilities.

Security Considerations ✅

• Input sanitization: trim() is properly used on search queries (line 235, 300)
• No XSS risks: All user inputs are properly handled through React's built-in sanitization
• Address validation: Proper use of isValidAddress() helper prevents invalid queries reaching the server

Performance Implications ⚠️

Concerns:

1. Memory usage: Loading 100+ records for client-side filtering increases memory footprint
2. Multiple re-renders: The complex dependency array in the data useMemo (lines 316-323) could cause unnecessary re-computations
3. Search efficiency: No minimum character requirement for search could lead to expensive operations on single characters

Suggestions:

• Add minimum search length (e.g., 3 characters) for client-side filtering
• Consider virtualizing the table if dealing with large datasets
• Monitor bundle size impact of the filtering logic

Minor Issues

1. Inconsistent placeholder text (line 384): Update to reflect both address and identity name search capabilities
2. TODO comment (line 219): Consider addressing the mainnet/testnet block handling
3. Magic number (line 255): Math.max(100, pagination.pageSize) - consider making this configurable

Recommendations

1. Update search placeholder:

2. Add minimum search length:

   const shouldUseClientFiltering = searchQuery.length >= 3 && !accountQuery;

3. Consider adding a loading state when switching between filter modes

4. Document the hybrid approach in CLAUDE.md for future reference

Summary

This is a solid implementation that cleverly balances server and client-side filtering. The code quality is high and follows project standards. The main concerns are around performance optimization and UX clarity, which are relatively minor. The CLAUDE.md addition is particularly valuable.

Recommendation: ✅ Approve with minor suggestions

---