gui: NavBar Search should work and search for something? about ossapp HOT 11 CLOSED

@getneil I think something like this:

https://www.loom.com/share/973c382092c446d89550f3aaad4cc6f3

Figma link:

https://www.figma.com/file/wHrDx1KLGTnkig8spPwa6p/tea_gui_app?node-id=1%3A2&t=zmjTxxfKZIPVrJmA-1

I think we'll need to do an overlay for the search module, as the sidebar with the search bar is fixed, so someone searching while at the bottom of the page would need to scroll back up.

from ossapp.

what does this search for I assume for everything
then in the result we classify the searched items by type:

• package
• blog / article
• tutorial
• document

from ossapp.

@tsmitty11 we probably need a design for this first. Where do we show the results a popup or a page? Id prefer a page for full detailed results and a popup for partial top-3-ish result.

from ossapp.

does this search work if offline?

from ossapp.

@getneil I'll draft the design for search results. I think page > pop up. Searching will replace main content with results.

Regarding offline, that depends. I assume we won't allow offline searching... in which case we'd just have a 'go online to search' message

from ossapp.

strategy: store.results then expand a component in +layout.svelte

from ossapp.

@tsmitty11 added a try https://d136rfg5iewpir.cloudfront.net/

from ossapp.

@getneil that looks really great! I can design around that and apply some styling. I think we can speed up that open/collapse a little but... maybe 0.2s ease-in-out;

from ossapp.

@getneil We'll go with something like this for search module design.

https://www.figma.com/file/wHrDx1KLGTnkig8spPwa6p/tea_gui_app?node-id=0%3A1&t=JoSGFfkx7ol4lfFD-1

from ossapp.

I'll add in a UX paradigm for differentiating between media types, but the above can be the general 'look and feel'

from ossapp.

we need to determine what can we search? also where do we search.
@owenjames we would probably need to build a localized index of all packages, articles etc. just a giant json file of objects hahahaha then load them into fuse.js to make this search thing work.

from ossapp.