fix(website): filters to package list

[AkihisaY]

Fixed CAN-746

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​radix-ui/​react-toggle@​1.1.9
	@​radix-ui/​react-label@​2.1.0 ⏵ 2.1.2
	@​radix-ui/​react-toggle-group@​1.1.10
	@​radix-ui/​react-separator@​1.1.0 ⏵ 1.1.2
	@​radix-ui/​react-aspect-ratio@​1.1.0 ⏵ 1.1.2
	@​radix-ui/​react-slot@​1.1.1 ⏵ 1.1.2
	@​radix-ui/​react-tooltip@​1.1.3 ⏵ 1.2.4			-3	+1
	@​radix-ui/​react-switch@​1.1.2 ⏵ 1.1.3
	@​radix-ui/​react-collapsible@​1.1.1 ⏵ 1.1.3
	@​radix-ui/​react-checkbox@​1.1.2 ⏵ 1.1.4
	@​radix-ui/​react-tabs@​1.1.1 ⏵ 1.1.3
	@​radix-ui/​react-dropdown-menu@​2.1.2 ⏵ 2.1.6
	@​radix-ui/​react-popover@​1.1.2 ⏵ 1.1.6
	@​radix-ui/​react-accordion@​1.2.1 ⏵ 1.2.3
	@​radix-ui/​react-dialog@​1.1.2 ⏵ 1.1.6
	@​radix-ui/​react-scroll-area@​1.2.1 ⏵ 1.2.3
	@​radix-ui/​react-select@​2.1.4 ⏵ 2.1.6
	@​ethersproject/​bignumber@​5.8.0
	@​monaco-editor/​react@​4.6.0 ⏵ 4.7.0
	@​bahmutov/​cypress-esbuild-preprocessor@​2.2.2 ⏵ 2.2.4				-3
	@​next/​third-parties@​14.2.6 ⏵ 14.2.26
	@​rollup/​plugin-node-resolve@​15.2.3 ⏵ 15.3.1
	@​safe-global/​api-kit@​2.4.4 ⏵ 2.5.11			+1	-6
	@​cypress/​webpack-preprocessor@​6.0.2 ⏵ 6.0.4	+1			+1
	@​rollup/​plugin-commonjs@​26.0.1 ⏵ 26.0.3
	@​next/​bundle-analyzer@​14.2.6 ⏵ 14.2.26
	@​rainbow-me/​rainbowkit@​2.2.1 ⏵ 2.2.4			+1	+3
	@​cypress/​code-coverage@​3.13.11 ⏵ 3.14.0	+1			-2
	@​hookform/​resolvers@​3.9.1 ⏵ 3.10.0	+1
	@​sentry/​nextjs@​8.26.0 ⏵ 8.55.0	-1	+5	+1

View full report

[claude]

Code Review

This PR successfully adds filtering functionality to the package list. Overall, the implementation is solid but there are a few areas for improvement:

✅ Positive Aspects

1. Clean Implementation: The search functionality is well-integrated using the existing SearchInput component
2. Responsive Design: Good use of Tailwind classes for mobile-first responsive layout (flex-col sm:flex-row)
3. Proper State Management: Uses local state appropriately for the search term
4. Consistent API: The searchTerm prop is properly optional and backward compatible

🔧 Code Quality Issues

1. Redundant React Import (PackageCard.tsx:6):
   The React import is unnecessary since useState is already imported from 'react' on line 4. Should be:
   import { FC, useState } from 'react';

2. Missing Null Safety (PackageTable.tsx:57-65):
   The filtering logic doesn't handle cases where row.version, row.preset, or row.deployUrl might be null/undefined:
   Consider using optional chaining: row.version?.toLowerCase().includes(searchTerm.toLowerCase()) || false

3. TypeScript Type Safety (PackageTable.tsx:16, 57):
   Using any type reduces type safety. Consider creating a proper interface for PackageRowData

🚀 Performance Considerations

1. Search Performance: The filtering logic runs on every render when searchTerm changes. Consider using useMemo to optimize the filtering operation.

🔒 Security & Best Practices

1. XSS Prevention: The search input properly uses controlled components which helps prevent XSS attacks
2. Input Validation: Consider adding client-side validation for search terms (length limits, character restrictions)

📝 Minor Suggestions

1. Accessibility: Consider adding aria-label or placeholder to the SearchInput for better UX
2. Empty State: When search returns no results, consider showing a "No packages found" message instead of hiding the table
3. Search Scope: The current search includes deployUrl which might contain long hashes - consider if this provides value to users

🧪 Test Coverage

The PR doesn't include tests. Consider adding:

• Unit tests for the filtering logic
• Component tests for the search interaction
• Integration tests for the search behavior

Summary

This is a solid implementation that successfully adds the requested filtering functionality. The main areas for improvement are around type safety, null handling, and performance optimization. The changes maintain backward compatibility and follow the existing code patterns well.

Recommendation: Approve with minor revisions to address the type safety and null handling issues.

[codecov]

Codecov Report

❌ Patch coverage is 20.00000% with 8 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...e/src/features/Search/PackageCard/PackageTable.tsx	22.22%	7 Missing ⚠️
...te/src/features/Search/PackageCard/PackageCard.tsx	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[dbeal-eth]

beautiful 👍