[IDE] Add a search filter to Duo context menu

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Problem to solve

When using the context menu, make it easier to identify file languages by using their respective icons instead of the generic document icon.

See gitlab-org/editor-extensions/meta#223 for more details on the problem and user feedback.

Why it's important

This will make it easier for users to scan and understand context sources when using Duo in the IDE.

Proposal

Add a search filter to the context menu with custom focus behavior (allow typing to filter with focus on menu items) to speed up the time to find an add context sources.

General behavior:

1. Add a search filter input
2. Have cursor always be shown in the filter
3. User can always type to immediately filter but the keyboard focus stays on the menu items so the user can press Enter to select an item without needing to move focus out of the search input.

Filter behavior:

1. Fuzzy search all available categories depending on the menu level (e.g. globally at top-level, restricted if in a nested category)
2. Use prefix matching (e.g. "app" matches "apple," "application," etc.) and Token-based matching (e.g. "blue" matches "blue shirt" and "light blue pants")
3. Have the most relevant menu item focused while filtering
4. Prefetch issues and MRs assigned to the user so they can be filtered from global menu category
5. Based on engineering input on performance, prefetch N issues/MRs in current project when in a sub-category (e.g. Issues, MRs)

Example

Important links

• Figma
• Prototype iteration 3 (to illustrate the concept, not a 1:1 spec)