Make preferences searchable

[joedolson]

What problem does this address?

Being able to search preferences would be very helpful for users to locate specific feature and options without needing to know where they are located or hunt for them. It could also allow us to make groupings less linear by using keywords and metadata to tag aspects of preferences.

Topic raised in #57018

What is your proposed solution?

• Add a search tool in the Preferences navigation.
• Make preferences searchable from the command palette.
• Categorize or tag preferences so that we can locate by topics in a broader, less linear manner than the current model.

[seifeldinio]

To implement this, we can utilize the SearchControl Component within the preferences modal. Below are the explored approaches:

✒️ Figma File (Mockups & Documentation): Detailed mockups & documentation

Approach 1:

👉 Figma Prototype: Prototype for the 1st approach

Mockups:

Key Interactions:

1. Initiate Search:
   • Action: User clicks on the search input field.
   • Response: The field gains focus, indicating readiness for input.
2. Filter List Menu Items:
   • Action: User types keywords into the search field.
   • Response: Menu items dynamically filter to display relevant results in real-time.
3. Select and Navigate:
   • Action: User clicks on a filtered menu item.
   • Response: Navigation to the corresponding section.

Empty State Handling:

• No Results Found:
  • Condition: If no tags match the search term.
  • Response: Display "No results found" with a "Clear" tertiary button to revert to the previous state.

Approach 2:

👉 Figma Prototype: Prototype for the 2nd approach

Mockups:

Key Interactions:

1. Initiate Search:
   • Action: User clicks on the search input field.
   • Response: Focus on the input field for typing.
2. Display Filtered Results:
   • Action: User types keywords.
   • Response: Section content filters to show relevant results dynamically.
3. Clear Search Field:
   • Action: User clears the search input.
   • Response: Section content reverts to original state with menu item indication.

Empty State Handling:

• No Results Found:
  • Condition: If no tags match the search term.
  • Response: Display "No results found" with a "Clear" tertiary button.

Command Palette

👉 Figma Prototype: Prototype for the command palette

Mockup:

Key Interactions:

1. Open Command Palette:
   • Action: User activates the command palette.
   • Response: Palette opens for keyword input.
2. Typing Keywords:
   • Action: User types keywords into the search field.
   • Response: Matching menu items dynamically appear.
3. Select Menu Item:
   • Action: User selects a menu item.
   • Response: Preferences modal opens with the selected menu item.

Thank you for reviewing these approaches. Please let me know if any further adjustments are needed!