Skip to content

feat(view): add icon picker component for visual icon selection#186

Merged
kubrickcode merged 1 commit intomainfrom
develop/shlee/185
Nov 30, 2025
Merged

feat(view): add icon picker component for visual icon selection#186
kubrickcode merged 1 commit intomainfrom
develop/shlee/185

Conversation

@kubrickcode
Copy link
Owner

Previously users had to manually type icon syntax like $(terminal) This required knowing icon names, creating poor UX for new users

  • Add IconPicker component with search and grid selection for 510 VS Code codicons
  • Separate Command Name field into IconPicker + Display Text (UI only, no schema change)
  • Auto-combine icon and text into $(icon) format internally
  • Implement unified field UX with focus-within styling
  • Add 18 e2e tests for icon picker functionality

fix #185

@github-actions github-actions bot added improvement Improvements to existing features feature New feature labels Nov 30, 2025
@gemini-code-assist
Copy link

Summary of Changes

Hello @kubrickcode, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience for defining commands by introducing a visual icon picker. Previously, users had to remember and manually type icon names, which was cumbersome. The new IconPicker component provides a searchable grid of 510 VS Code codicons, making icon selection intuitive. It refactors the command naming input to separate icon choice from display text, automatically formatting them for internal use, and includes extensive e2e tests to guarantee reliability.

Highlights

  • Visual Icon Selection: Introduced an IconPicker component allowing users to visually select from 510 VS Code codicons, replacing manual typing.
  • Improved Command Naming UX: The "Command Name" input is now split into an IconPicker and a "Display Text" field, enhancing usability without changing the underlying schema.
  • Automatic Icon/Text Combination: The selected icon and display text are automatically combined into the $(icon) Text format internally.
  • Enhanced Input Styling: Implemented unified field UX with focus-within styling for better visual feedback.
  • Comprehensive E2E Testing: Added 18 end-to-end tests to ensure the robustness and correct functionality of the new icon picker component.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@kubrickcode
Copy link
Owner Author

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a very useful IconPicker component, which significantly improves the user experience for adding icons to commands. The implementation is solid, with a new component for icon selection, updates to the command form to integrate it, and a comprehensive set of e2e tests to ensure its functionality. The code is well-structured and follows the project's conventions. I have a few suggestions for minor refactorings to improve maintainability and consistency, but overall this is a great addition.

@kubrickcode
Copy link
Owner Author

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a well-designed IconPicker component to improve the user experience of selecting command icons. The implementation is solid, splitting the command name into a separate icon and display text, and the new component is backed by a comprehensive set of e2e tests. My review includes a few suggestions to improve code consistency and test suite maintainability by removing some duplicated test cases and refining hook usage, in line with the repository's style guide.

@kubrickcode
Copy link
Owner Author

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new IconPicker component, which is a great UX improvement for selecting command icons. The implementation is well-structured, with a new IconPicker component, a comprehensive set of E2E tests, and updates to the command form to integrate the new picker. The code is clean and the feature seems to work as described.

I have a few suggestions to improve the code further:

  • In command-form.tsx, I've pointed out a useEffect usage that could be refactored to better align with the repository's style guide on handling state updates.
  • In icon-picker.tsx, I've suggested adding data-testid attributes to improve the robustness of the E2E tests.

These are relatively minor points in an otherwise excellent pull request. Great work!

Previously users had to manually type icon syntax like $(terminal) This required knowing icon names, creating poor UX for new users

- Add IconPicker component with search and grid selection for 510 VS Code codicons
- Separate Command Name field into IconPicker + Display Text (UI only, no schema change)
- Auto-combine icon and text into $(icon) format internally
- Implement unified field UX with focus-within styling
- Add 18 e2e tests for icon picker functionality

fix #185
@kubrickcode
Copy link
Owner Author

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces an excellent IconPicker component that significantly improves the user experience for selecting command icons. The implementation is robust, featuring a clean component structure, comprehensive E2E tests, and seamless integration into the command form. The code adheres well to React best practices, such as separating UI concerns and managing state updates effectively within event handlers. I have provided a few suggestions in the detailed comments to further enhance code organization and ensure full alignment with the repository's style guide.

@kubrickcode kubrickcode merged commit d6353fe into main Nov 30, 2025
5 of 6 checks passed
@kubrickcode kubrickcode deleted the develop/shlee/185 branch November 30, 2025 05:27
@kubrickcode
Copy link
Owner Author

🎉 This PR is included in version 0.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature New feature improvement Improvements to existing features released

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Button name icon selection feature

1 participant