feat: support filter media type in media panel#45
Conversation
👷 Deploy request for appcut pending review.Visit the deploys page to approve it
|
WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MediaPanel
User->>MediaPanel: Selects media type filter or enters search query
MediaPanel->>MediaPanel: Updates searchQuery and/or mediaFilter state
MediaPanel->>MediaPanel: useEffect triggers filtering logic
MediaPanel->>MediaPanel: Computes filteredMediaItems
MediaPanel-->>User: Renders filtered media items in UI
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/src/components/editor/media-panel.tsx (2)
83-83: Consider initializing as empty array.While the current initialization works, consider initializing
filteredMediaItemsas an empty array to be more explicit about the initial state before the useEffect runs.- const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems); + const [filteredMediaItems, setFilteredMediaItems] = useState<any[]>([]);
210-250: Enhance accessibility of form controls.The new UI layout looks good, but the dropdown and search input could benefit from accessibility improvements.
<select value={mediaFilter} onChange={(e) => setMediaFilter(e.target.value)} className="px-2 py-1 text-xs border rounded bg-background" + aria-label="Filter media by type" > <option value="all">All</option> <option value="video">Video</option> <option value="audio">Audio</option> <option value="image">Image</option> </select> <input type="text" placeholder="Search media..." className="min-w-[60px] flex-1 px-2 py-1 text-xs border rounded bg-background" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} + aria-label="Search media items" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/editor/media-panel.tsx(5 hunks)
🔇 Additional comments (3)
apps/web/src/components/editor/media-panel.tsx (3)
10-10: LGTM!The
useEffectimport is correctly added to support the new filtering functionality.
85-99: Well-implemented filtering logic.The filtering logic correctly handles both media type filtering and search functionality:
- Filters by media type when not "all"
- Performs case-insensitive search on item names
- Uses proper dependency array for the useEffect
The implementation is clean and efficient.
255-255: Correct implementation of filtered rendering.The changes to use
filteredMediaItemsinstead ofmediaItemsfor both the empty state check and the mapping logic are implemented correctly. This ensures the UI properly reflects the current filter and search state.Also applies to: 270-270
…lter feat: support filter media type in media panel
2 participants
Description
support filter media type in media panel
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Test Configuration:
Screenshots (if applicable)
Checklist:
Summary by CodeRabbit