Fix search / find panel

[khanniie]

Issue:

Fixes #4190

Demo:

desktop-cm-search-find.mov

mobile-cm-search-find.mov

Changes:

Creates a custom implementation of the search panel that more closely mirrors the vscode UX / UI design.

• New panel that is on the top right on desktop, bottom on mobile
• Replace functionality is hidden behind an arrow
• Ensured that the UI looks good across light/dark/contrast mode
• Re-implemented search-related keymaps
• Modified the selected highlights to be less jarring / have higher text contrast

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123
• meets the standards outlined in the accessibility guidelines

[khanniie]

Hi @SableRaf! I took a pass at the issue we discussed and ended up having to do the custom implementation anyways so I was able to tackle more of your requests. want to take a look and let me know what you think?

[SableRaf]

It looks amazing!

One minor nitpick: in the mobile layout, having the close button right next to the expand/collapse button doesn’t feel quite right. It also seems like it could lead to accidentally closing the search panel.

[khanniie]

It looks amazing!

One minor nitpick: in the mobile layout, having the close button right next to the expand/collapse button doesn’t feel quite right. It also seems like it could lead to accidentally closing the search panel.

I think I fixed it! good idea

mobile-cm-search-find.mov

[khanniie]

Hiii @raclim @clairep94 sorry to bug you guys! If you have time would you be able to look at this? Just want to make sure it doesn't fall through the cracks : )

[raclim]

I think this could be a great issue for folks!

[raclim]

Sorry for missing this, I thought I took a look and realized I never submitted 😅

I think this overall looks great to me!!! I think these improvements really align with the current editor appearance and adds a lot more clarity!

This is super minor, but I'm wondering if it might be worth having a fixed width for the search when a user toggles the dropdown chevron? I noticed the panel shifts in width between the two states (screenshots below), and wonder if keeping it consistent could reduce some visual movement. I'm not sure if this would might make the design a bit awkward, so definitely not a strong preference!

[khanniie]

Sorry for missing this, I thought I took a look and realized I never submitted 😅

I think this overall looks great to me!!! I think these improvements really align with the current editor appearance and adds a lot more clarity!

This is super minor, but I'm wondering if it might be worth having a fixed width for the search when a user toggles the dropdown chevron? I noticed the panel shifts in width between the two states (screenshots below), and wonder if keeping it consistent could reduce some visual movement. I'm not sure if this would might make the design a bit awkward, so definitely not a strong preference!

oooo good point! I did think about that, but if you're cool with it, i'd like to keep the current version because it keeps the zero state a little more condensed in design so that it doesn't overlap too much of the first line of code. wdyt?

also great point about the accessibility TODO! I''ll open an issue after this merges in : )

[khanniie]

also sorry to bother you again @raclim but i think i need another review since the code changed when i resolved some merge conflicts?

[raclim]

Keeping the current design sounds good to me! Also no worries at all, I'll re-approve!