feat(NoteManager): Improve filtering by tags in note search #1510
Conversation
|
Looks very slick and reminds me of Nextcloud. FWIW the standard paradigm I have seen for tags is that when you hover over them, they have a small 'x' in the corner, with which you can remove the tag, but if you click on the tab it can be disabled or enabled. Dunno if that helps or note. Just a suggestion. Good job! I appreciate your efforts. |
Thanks! I never expected to be compared to a polished product like that
Similar to how tag bubbles are currently implemented in the Note Edit screen? That's certainly possible to do as well.
Not sure what you mean by this though. |
Meant to say tag, but essentially you click on it once it goes darker, to signify disabled, click again it gets brighter to show it is enabled. Otherwise, I see the red x is there so that makes sense. |
|
Works nice in general, my main complaint is that the autocomplete result div looks very disconnected
|
|
Pulled in the corners of the results so they don't extend to the rounded ends of the search box.
|
That looks better indeed |
This is one of the ideas I was talking about in #1500 (comment).
I tried my hand at revamping the NoteManager's tag searching capabilities. I went through several ideas before deciding on this solution. I tried integrating tag bubbles in the search bar, tried implementing an autocomplete feature to the main search bar, and several other ideas that seemed good in concept but fell flat in reality.
This PR makes a few changes. Firstly the new functionality: Tag filtering is separate from the search bar entirely. I believe that this makes the search bar feel more accurate because it will by default only search for titles, which is what I want most of the time. Tags are instead handled in the "Filter" section just below the search bar.
The new "Filter" section contains bubbles with the tag names which can be clicked to remove. It also has a search bar on the right side (hidden behind a '+' icon initially to keep a minimal look) to search through existing tags and add/remove them by clicking on their respective bubbles in a dropdown menu. They can also be iterated through using the arrow keys (see video 1).
I'm not sure if the '+'/'-' button is really necessary, but it seems to be a cleaner look to me, so I left it in. It would be simple enough to remove and just have the search bar always visible if so desired.
I also believe that the tag searchbar can be reused in the NoteEdit window to add tags to a shape. Though it would need to be able to add new tags as well as search for ones that already exist. The general idea would be pretty similar though. That implementation lies outside the scope of this PR though.
Another way to toggle tags in the new "Filter" section is with the tag bubbles in the note list. These bubbles are also now clickable, toggling the tag's status as a filter in the search (see video 2).
I'm not sure they should be able to toggle the tag or should just be used to enable the tag. I left it as a toggle until I got some feedback about this idea in general.
Finally, the new "Filter" section also contains the name of the selected shape, if any, instead of putting in the search bar. It is always the leftmost object in the "Filter" area. This seems to make sense to me and should make it more clear that the name can be interacted with to remove it as a filter. When the NoteManager first came about, I didn't know that clicking on the shape name next to the search bar would remove the shape filter. I've had players also say they didn't know until I told them (see video 3).
output.mp4
output.mp4
output.mp4