Skip to content

feat(filter-ui): Add filters bar, help modal, and better tooltips#156

Open
maddada wants to merge 3 commits intocardisoft:masterfrom
maddada:feat/add-explanation-for-search-syntax-with-examples
Open

feat(filter-ui): Add filters bar, help modal, and better tooltips#156
maddada wants to merge 3 commits intocardisoft:masterfrom
maddada:feat/add-explanation-for-search-syntax-with-examples

Conversation

@maddada
Copy link

@maddada maddada commented Mar 7, 2026

Hey there,

This is another separate feature PR which adds the following filters bar to the app.

Closes #44 and #113

2026-03-07_Code_14-20-35@2x 2026-03-07_cardinal_13-41-07@2x CleanShot X 2026-03-07 13 39 11

Full user facing requirements (generated by Codex 5.4 high based on the plan I worked on with it):

  • The files-tab search area now has a Filters toggle button on the right side of the main search bar. Clicking it or hides a secondary filter bar below the search input without changing the current query.

  • The filter bar appears only on the files tab.

  • The filter bar is visually grouped with separators between filter categories.

  • The filter controls are:

    • In Folder
    • Parent Folder
    • No Subfolders
    • Kind
    • Type
    • Extension
    • Date
    • Size
    • Regex Example
    • a right-aligned Info button
  • The In Folder, Parent Folder, and No Subfolders controls open a folder picker and insert the selected folder
    into the query using the corresponding search filter syntax.

  • The non-path filters use dropdowns where that interaction makes sense.

  • The Regex Example control appends a fixed example regex filter to the query.

  • The toolbar edits the existing search query directly rather than maintaining a separate filter state.

  • Filter behavior is query-aware:

    • ext: selections merge into a single extension filter such as ext:pdf;md
    • mutually exclusive filter families like kind, type, date, size, and folder scope replace only the existing from that same family
    • when a filter is replaced or merged, it stays in its existing position in the search input instead of being moved to the end
    • new filters append when there is no existing filter of that family
  • The filter controls were normalized visually:

    • dropdowns and fixed-width filter buttons use the same width
    • the width is 90px
    • scope and regex button labels are left-aligned
    • dropdowns use a text caret ▼ instead of the previous SVG/background arrow
    • the dropdown caret remains visible on hover and is vertically centered
  • The Info button is part of the filter bar, not the search input row, and is always right-aligned at the end of the last wrapped row.


Search Help Modal

  • Clicking Info opens a dedicated search help modal.
  • The modal is focused on file search syntax only.
  • The modal layout is organized with:
    • examples first at the top
    • one consolidated guide section below for the rest of the syntax explanation
  • Example chips are interactive:
    • clicking an example copies/applies that example into the search input immediately
    • hovering an example shows a tooltip describing what that example demonstrates
  • The help copy explicitly explains what gets matched, such as full file paths, folder paths, path segments, type/ filters, scope filters, date filters, size filters, regex, and content matching.
  • The modal includes a button to open the Full Search Docs on GitHub.

@maddada maddada changed the title feat(filters UI): Add filters bar, help modal, and better tooltips feat(filter-ui): Add filters bar, help modal, and better tooltips Mar 7, 2026
@maddada
Copy link
Author

maddada commented Mar 7, 2026

@ldm0 Also implemented this feature because I need it, checked the code and it all looks good to me. I modified some of the styling by hand to make it better. Used Codex 5.4 high for the implementation but created a full plan before implementing and I believe the UX is perfect now. Please let me know what you think. It closes 2 issues (#44 and #113).

@ldm0 ldm0 requested review from Copilot and ldm0 and removed request for Copilot March 7, 2026 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FR] Query syntax discoverability/learnability

1 participant