Design source filter list search feature

[AetherUnbound]

Problem

The sources filter list is quite long for images, and can be difficult to navigate as a user.

Related issues

#3795

Proposal

Develop a new design for filtering / narrowing the list of sources. The goal is to reduce the visual footprint of the list to make it easier to navigate.

@fcoveram shared here an exploration of a potential design:

CleanShot.2024-02-22.at.15.57.10.mp4

Description

Mockups

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[sarayourfriend]

@AetherUnbound is this in "todo" for the designs or the actual implementation (or both)? While I agree it is an interesting and potentially valuable solution to some of the issues with the filter list, it's also potentially a very complex one, probably warranting a mini-implementation plan (not sure it would be a single PR, for example). Just not clear on what the action item is for this particular issue in its current state.

[AetherUnbound]

This issue is only for potential designs, and for determining whether or not this is a desirable approach for us. The implementation can be a separate issue once we determine the viability/desire for this.

[sarayourfriend]

Okay, thanks for clarifying. I hope it is okay, I've updated the issue title to reflect that it's for the designs, and to align with the design label. The previous title read to me like an implementation issue, hence my confusion.

[fcoveram]

I'd like to keep evolving this design to make it fit with the ongoing Dark mode project (#3592) and discuss the interaction within the drawer on small breakpoints.