Redesign search filtering experience to be consistent with mobile

[myreli]

Hi! I hope you are doing well today. 😁

This PR provides a redesign for the filtering options. The goal is to provide a more consistent experience cross platform, bringing the search options as bubbles instead of switches on a modal.

screencast_sn_search_options.mp4

Summary

Redesigned the SearchOptions component to create a similar experience to the one we have on mobile when filtering:

• Removed the search options modal and previous options
• Changed the search trigger to OnFocus instead of modal
• Created the new headless Bubble component
• Removed the previous onBlur effect from Search to ensure a more consistent flow with the new experience

Approach

I inspected the experience provided on mobile and did my best to replicate on web, given the difference in usability.

Probably the biggest difference is that I've renamed "Include protected [Option]" to simply "[Option]" to improve readability and avoid horizontal scroll (when possible). Do you think that could mislead users?

Thoughts

• ⚠️ I don't have Front End experience so I would appreciate an extra look on CSS and React specifics.
• 💭 I realized this components aren't tested, except for NoteView that contains heavy logic. Is there any other place I should consider for e2e or perhaps am I missing something?
• 🧪 I created a small collection of notes to test it, if you wish to try it out importing simulated-data.txt

---

Thank you for your review!

[amanharwara]

Hi @myreli, thanks for the contribution! 🚀 You're not missing anything regarding the tests, btw. For the React and CSS, there are a few things that need to be adjusted, but looks good overall 🙂👍

[myreli]

Hi @amanharwara! Thank you for the review.

I have just updated the PR with fdecd9c, that improves the code and result with yours and @moughxyz's suggestions. Could you check again when you have the time?

Here's a summary of the changes:

• Animated the search options appearance and improved the existing transition
• Increased the padding of each bubble
• Improved the spacing of the search options
• Fixed a regression on the input search borders
• Refactored the CSS to use utility classes instead of component specifics ¹

¹ I tried to keep the new utility classes next to the similar existing. However I was unsure when choosing sn.scss instead of ui.scss.

[amanharwara]

However I was unsure when choosing sn.scss instead of ui.scss.

sn.scss is where the utility classes should go.

[myreli]

Hey @amanharwara! Thank you again.

Since the video is failing, here's how it looks so far:

[amanharwara]

Looks good! One small issue with this is that since this is using justify-between, if the user increases the size of the notes column, the bubbles would be spread too far apart. I would suggest using regular margins or the gap property instead so that they don't get too far apart or too close to each other.

[myreli]

Got it @amanharwara. I increased gap and justified on center.

[amanharwara]

Looks good!

[amanharwara]

Probably the biggest difference is that I've renamed "Include protected [Option]" to simply "[Option]" to improve readability and avoid horizontal scroll (when possible). Do you think that could mislead users?

I was giving this a go locally and I think this might actually end up being a bit confusing, as I found out myself. Having just "Protected" conveys that you are filtering based on whether the note is protected or not (like the Archived/Trashed options), instead of conveying that the user will be toggling whether to search contents of protected files or not. It might be better to have the whole "Include Protected Contents" label, which might make sizing tricky, but will be better in terms of clarity.