feat: make the Explorer easier to use

[alixlahuec]

Description

Refactor the Explorer UI to make it easier to use and more intuitive:

• queries are entered as a single string of text, rather than using multiple buttons & dropdowns
• suggestions are shown during typing to show what filters are available & the values they take, and to speed up insertion

This unblocks rendering the Notes tab and having a functional PDFs tab, since both were unfinished pending the revamp.

TODO:

• [ ] Solve the search trigger problem
• [ ] Finish components styling
• [ ] Add stories
• [ ] Expand filters for PDFs and Notes

Related Tickets

Closes RM-735

Validation

XXX

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 92.96875% with 18 lines in your changes missing coverage. Please review.

Project coverage is 84.07%. Comparing base (e8b185a) to head (16f3819).

Files	Patch %	Lines
...omponents/Dashboard/Explorer/QueryItems/filters.ts	87.18%	5 Missing :warning:
...components/Dashboard/Explorer/QueryPDFs/filters.ts	16.67%	5 Missing :warning:
...omponents/Dashboard/Explorer/QueryNotes/filters.ts	20.00%	4 Missing :warning:
...c/components/Dashboard/Explorer/QueryBar/index.tsx	97.92%	1 Missing :warning:
.../components/Dashboard/Explorer/QueryPDFs/index.tsx	75.00%	1 Missing :warning:
src/components/Dashboard/Explorer/helpers.ts	97.30%	1 Missing :warning:
src/hooks/useSearchQuery/helpers.ts	98.58%	1 Missing :warning:

Additional details and impacted files

[](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec) ```diff @@ Coverage Diff @@ ## beta #702 +/- ## ========================================== + Coverage 83.53% 84.07% +0.54% ========================================== Files 159 159 Lines 4918 4846 -72 Branches 1407 1353 -54 ========================================== - Hits 4108 4074 -34 + Misses 785 750 -35 + Partials 25 22 -3 ``` | [Files](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec) | Coverage Δ | | |---|---|---| | [mocks/zotero/notes.ts](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=mocks%2Fzotero%2Fnotes.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-bW9ja3Mvem90ZXJvL25vdGVzLnRz) | `100.00% <ø> (ø)` | | | [...components/Dashboard/Explorer/QueryItems/index.tsx](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fcomponents%2FDashboard%2FExplorer%2FQueryItems%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2NvbXBvbmVudHMvRGFzaGJvYXJkL0V4cGxvcmVyL1F1ZXJ5SXRlbXMvaW5kZXgudHN4) | `100.00% <100.00%> (+5.89%)` | :arrow_up: | | [...components/Dashboard/Explorer/QueryNotes/index.tsx](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fcomponents%2FDashboard%2FExplorer%2FQueryNotes%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2NvbXBvbmVudHMvRGFzaGJvYXJkL0V4cGxvcmVyL1F1ZXJ5Tm90ZXMvaW5kZXgudHN4) | `100.00% <100.00%> (+100.00%)` | :arrow_up: | | [src/components/Dashboard/Explorer/index.tsx](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fcomponents%2FDashboard%2FExplorer%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2NvbXBvbmVudHMvRGFzaGJvYXJkL0V4cGxvcmVyL2luZGV4LnRzeA==) | `96.30% <ø> (ø)` | | | [src/hooks/useSearchQuery/index.ts](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fhooks%2FuseSearchQuery%2Findex.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2hvb2tzL3VzZVNlYXJjaFF1ZXJ5L2luZGV4LnRz) | `100.00% <100.00%> (ø)` | | | [...c/components/Dashboard/Explorer/QueryBar/index.tsx](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fcomponents%2FDashboard%2FExplorer%2FQueryBar%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2NvbXBvbmVudHMvRGFzaGJvYXJkL0V4cGxvcmVyL1F1ZXJ5QmFyL2luZGV4LnRzeA==) | `97.92% <97.92%> (ø)` | | | [.../components/Dashboard/Explorer/QueryPDFs/index.tsx](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fcomponents%2FDashboard%2FExplorer%2FQueryPDFs%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2NvbXBvbmVudHMvRGFzaGJvYXJkL0V4cGxvcmVyL1F1ZXJ5UERGcy9pbmRleC50c3g=) | `70.84% <75.00%> (-0.13%)` | :arrow_down: | | [src/components/Dashboard/Explorer/helpers.ts](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fcomponents%2FDashboard%2FExplorer%2Fhelpers.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2NvbXBvbmVudHMvRGFzaGJvYXJkL0V4cGxvcmVyL2hlbHBlcnMudHM=) | `97.30% <97.30%> (ø)` | | | [src/hooks/useSearchQuery/helpers.ts](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fhooks%2FuseSearchQuery%2Fhelpers.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2hvb2tzL3VzZVNlYXJjaFF1ZXJ5L2hlbHBlcnMudHM=) | `98.58% <98.58%> (ø)` | | | [...omponents/Dashboard/Explorer/QueryNotes/filters.ts](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree&filepath=src%2Fcomponents%2FDashboard%2FExplorer%2FQueryNotes%2Ffilters.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec#diff-c3JjL2NvbXBvbmVudHMvRGFzaGJvYXJkL0V4cGxvcmVyL1F1ZXJ5Tm90ZXMvZmlsdGVycy50cw==) | `20.00% <20.00%> (ø)` | | | ... and [2 more](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec) | | ... and [2 files with indirect coverage changes](https://app.codecov.io/gh/alixlahuec/zotero-roam/pull/702/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Alix+Lahuec)

[socket-security[bot]]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/chrono-node@2.7.7	None	+1	3.34 MB	wanasit

View full report↗︎

[linear[bot]]

RM-735 Improve usability of the Explorer