QuickFind Panel Prototype

ℹ️The prototype is lower on the page. Scroll down to see it.

I am a contributor at Zettlr - an open source project that ships a Markdown text editor optimized for academia and professional knowledge work.

At some point we received user feedback stating that when many documents are open as tabs it becomes difficult to find and switch between these tabs because they overflow the tab bar.

To address this pain point we collaboratively designed a solution that I like to call the QuickFind Panel. Throughout our collaboration I focused our discussion on UX/UI design and built early ideas in Figma which I then coded using Vue.js. The result is the prototype you see lower on this page.

✨ Take it for a spin, it's fully interactive! ✨

And if you are interested, you can read how the feature progressively took shape in this GitHub Issue discussion.

Features:

• Filters results based on a provided search query.
• The search is case-insensitive. Try searching for "dom" and "DOM".
• Highlights matched substrings in results.
• Displays a message when no matches are found.
• The input is focusable with a keyboard shortcut. The keyboard shortcut hint disappears when the input is not empty.
• It is possible to close a tab by hovering over it and then clicking the "close" icon.
• When closing a tab, a confirmation dialog appears.
• Users can restore the QuickFind Panel to its initial state with the "Reset" button that becomes enabled whenever any changes to the panel have been made.