feat: redo search UI

[thelostone-mc]

Description

• redo search UI based on sketch
• built out search in vue
• add new vue filters
• split results into categories
• description is trimmed
• design is responsive
• layout is built as per the sketch
• hides the categories until 3 chars are entered
• if a category has no results -> no matches found message is shown

Refers/Fixes

#5835

Test

https://share.vidyard.com/watch/gjPeWcUnystHYCXSGJTRBN?

[codecov]

Codecov Report

Merging #6419 into master will increase coverage by 0.44%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #6419      +/-   ##
==========================================
+ Coverage   27.20%   27.64%   +0.44%     
==========================================
  Files         290      287       -3     
  Lines       26540    28117    +1577     
  Branches     3930     4547     +617     
==========================================
+ Hits         7219     7774     +555     
- Misses      19055    19991     +936     
- Partials      266      352      +86     

Impacted Files	Coverage Δ
app/app/urls.py	82.85% <0.00%> (-3.59%)	⬇️
app/townsquare/admin.py	35.34% <0.00%> (-2.16%)	⬇️
app/dashboard/router.py	34.14% <0.00%> (-1.91%)	⬇️
app/grants/models.py	48.38% <0.00%> (-0.22%)	⬇️
app/avatar/views_3d.py	9.52% <0.00%> (ø)
app/grants/management/commands/estimate_clr.py	0.00% <0.00%> (ø)
...rketing/management/commands/no_applicants_email.py	0.00% <0.00%> (ø)
...eting/management/commands/assemble_leaderboards.py	40.48% <0.00%> (ø)
app/economy/tx.py
...nts/management/commands/ingest_givingblock_txns.py
... and 8 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b5978bd...3f49c61. Read the comment docs.

[owocki]

this is very awesome. good work!

some feedback when i put on my user hat

• when i click the magnifying glass, the cursor should go in the text field so i dont have to click ther
• a 'loading indicator' while searching would be a nice ttouch.
• how many chars are required before serach in sent? i just typed 'fo' inthe search box and its not doing anything? is it thinking? is that not enough chars? idk?
• when the results load i want to be able to tab through them with my arrow keys (right left on tabs with left/right andup /down on the existin gresutls)
• why is the default tab 'profiles'? seems that we should add a 'all results' tab or at least be smart enough to load the tab that has results https://bits.owocki.com/lluDmn7g
• is there a 'no results' view? https://bits.owocki.com/z8uxp4b8

[thelostone-mc]

Current State

when i click the magnifying glass, the cursor should go in the text field so i dont have to click ther

when the results load i want to be able to tab through them with my arrow keys (right left on tabs with left/right andup /down on the existin gresutls)

✅ a 'loading indicator' while searching would be a nice ttouch.

✅ how many chars are required before serach in sent? i just typed 'fo' inthe search box and its not doing anything? is it thinking? is that not enough chars? idk?
A: It's 2 characters and the UI guides you

✅ why is the default tab 'profiles'? seems that we should add a 'all results' tab or at least be smart enough to load the tab that has results https://bits.owocki.com/lluDmn7g

✅ is there a 'no results' view? https://bits.owocki.com/z8uxp4b8

[thelostone-mc]

@owocki so i had a lil bit of trouble with the first two !
Spoke with @danlipert + @octavioamu
We'll get this in and @octavioamu will help fixing the other two