feat: used/unused filtering for images and volumes#170
Conversation
📝 WalkthroughWalkthroughFiltering functionality has been added to both the Docker images and volumes lists. New reactive state variables and derived filtered arrays allow toggling the display of "used" and "unused" items. The UI now includes a filter dropdown with checkboxes for these options, and the table data is updated to reflect the selected filters. Changes
Assessment against linked issues
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/routes/images/+page.svelteOops! Something went wrong! :( ESLint: 9.26.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@sveltejs/adapter-node' imported from /svelte.config.js src/routes/volumes/+page.svelteOops! Something went wrong! :( ESLint: 9.26.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@sveltejs/adapter-node' imported from /svelte.config.js Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 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 (1)
src/routes/volumes/+page.svelte (1)
26-27: Good implementation of volume filtering flags.The volume filter flags are correctly added to the existing state object, with appropriate defaults showing all volumes.
While this implementation is valid, it differs slightly from the approach used in the images page. For consistency across the codebase, consider either:
- Using a separate
volumeFiltersobject like in the images page, or- Updating the images page to use a similar approach to this one
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/routes/images/+page.svelte(4 hunks)src/routes/volumes/+page.svelte(4 hunks)
🔇 Additional comments (7)
src/routes/images/+page.svelte (3)
6-6: Clean import addition.The Funnel icon is appropriately imported for use in the filtering UI component.
299-328: Well-implemented filter dropdown UI.The dropdown implementation provides a clean and intuitive way for users to filter images. The checkbox items are properly bound to the state variables and update the filters reactively.
359-359: Correct data source update.The table now correctly uses the filtered data source instead of the full images array.
src/routes/volumes/+page.svelte (4)
6-6: Clean import addition.The Funnel icon is appropriately imported for use in the filtering UI component.
30-30: Effective derived filtering implementation.The derived
filteredVolumesvariable correctly filters volumes based on the filter flags using the same logic as the images page.
190-219: Well-implemented filter dropdown UI.The filter dropdown implementation follows the same pattern as the images page, providing consistent UX throughout the application. The checkboxes are properly bound to the state variables.
241-241: Correct data source update.The table now correctly uses the filtered data source instead of the full volumes list.
1 participant
fixes: #152
Summary by CodeRabbit