542 Blocks filter menu

[tevanburen]

Description

• Add a filter menu for the Blocks menu panel
• Allow filtering by section
• Allow filtering by "most commonly used" using local storage

How to Test

1. Pull up a drag & drop app in edit mode
2. Click the Tune icon in the search bar
3. Verify that the filter menu appears
4. Click on a few sections
5. Click Apply
6. Verify that the filters are applied
7. Open the menu again
8. Click Clear All
9. Verify that the filters are back to normal
10. Drag a few blocks into the designer
11. Open the menu and click Most Commonly Used
12. Click Apply and verify that the blocks you dragged in are shown in the panel

[github-actions]

@CodiumAI-Agent /describe

[QodoAI-Agent]

Title

542 Blocks filter menu

---

User description

WIP

Description

Changes Made

How to Test

1. Steps to reproduce/test the behavior
2. Expected outcomes

Notes

---

PR Type

• Enhancement

---

Description

• Add search input adornments with icons

• Update icon imports and remove unused React import

• Remove outdated TODO comments and clean code

---

Changes walkthrough 📝

	Relevant files
Enhancement	BlocksMenuPanel.tsx Update BlocksMenuPanel search input with adornments            packages/client/src/components/blocks-workspace/panels/BlocksMenuPanel.tsx Removed default React import in favor of named hooks Replaced SearchOff with Tune icon from MUI Added InputAdornment and IconButton wrappers in TextField Cleaned up obsolete comments +18/-5

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

@CodiumAI-Agent /review

[github-actions]

@CodiumAI-Agent /improve

[QodoAI-Agent]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility Verify that the added icon adornments (using InputAdornment and IconButton) include proper accessibility attributes, such as aria-labels, and that their interactive behavior (if intended) is clearly defined. InputProps={{ startAdornment: ( <InputAdornment position="start"> <Search /> </InputAdornment> ), endAdornment: ( <InputAdornment position="end"> <IconButton size="small"> <Tune /> </IconButton> </InputAdornment> ), }} Import Consistency Confirm that the use of IconButton from @semoss/ui together with icons imported from @mui/icons-material is intentional and consistent with the project's design system. import { useMemo, useState } from 'react'; import { observer } from 'mobx-react-lite'; import { styled, Grid, Stack, TextField, ToggleTabsGroup, Typography, Divider, InputAdornment, IconButton, } from '@semoss/ui';

[QodoAI-Agent]

PR Code Suggestions ✨

Category	Suggestion	Impact
Possible issue	Add filter activation handler Attach an onClick handler and add an aria-label to the IconButton to enable filter menu functionality and improve accessibility. packages/client/src/components/blocks-workspace/panels/BlocksMenuPanel.tsx [154-174] <TextField placeholder="Search Components" size="small" fullWidth value={search} onChange={(e) => setSearch(e.target.value)} InputProps={{ startAdornment: ( <InputAdornment position="start"> <Search /> </InputAdornment> ), endAdornment: ( <InputAdornment position="end"> - <IconButton size="small"> + <IconButton size="small" onClick={() => {/* trigger filter functionality */}} aria-label="filter options"> <Tune /> </IconButton> </InputAdornment> ), }} /> Suggestion importance[1-10]: 6 __ Why: The suggestion adds an onClick handler and aria-label to improve accessibility for the filter button, which is a useful enhancement even though it is a minor improvement and uses placeholder functionality.	Low

[github-actions]

@CodiumAI-Agent /update_changelog

[QodoAI-Agent]

Changelog updates: 🔄

2025-03-17

Added

• Filter menu for the blocks panel with section and frequently used filtering.
• Integration of local storage to track block usage.

to commit the new content to the CHANGELOG.md file, please type:
'/update_changelog --pr_update_changelog.push_changelog_changes=true'