Filter tags and folders

[amedora]

Description

This PR is a continuation work to #2779

Issue fixed

• Filter tags / folder list #2027

Type of changes

• ⚪ Bug fix (Change that fixed an issue)
• ⚪ Breaking change (Change that can cause existing functionality to change)
• ⚪ Improvement (Change that improves the code. Maybe performance or development improvement)
• 🔘 Feature (Change that adds new functionality)
• ⚪ Documentation change (Change that modifies documentation. Maybe typo fixes)

Checklist:

• 🔘 My code follows the project code style
• ⚪ I have written test for my code and it has been tested
• ⚪ All existing tests have been passed
• 🔘 I have attached a screenshot/video to visualize my change if possible

[AWolf81]

Thanks for continuing the work from the other PR. You've took the other branch as base to start your work, right?

I'd like to review this but I'm having troubles to run yarn - seems like the js-sequence-diagrams dependency is wrong (see screenshot below).
I think it should be @rokt33r/js-sequence-diagrams - I'll add this locally and check if I get it to work.

[AWolf81]

You've perfectly aligned the search glass to bottom (see first screenshot below). But I think it would be visually better to move it slightly up.

The following is with 2px as top

[AWolf81]

This looks good so far.

Just the mentioned dependency issue & styling is open - requires two locations in code to update import in MarkdownPreview.js and script tag in main.html. In main.html you can search for the string fucknpm 😄
You can also merge master into your branch. This will also fix the dependency issue.

I have two points that needs to be discussed:

• Empty folder list is a bit confusing (see screenshot below) - not sure how to handle this. Should there be a no match indication if there is no item in a storage location?
• It looks like we're having two search locations one with the search glass and the other with the text field to search all notes. What do you think the search function for tags/folders is more a filtering and we could also change the search symbol to a filter symbol that will open the filter box. Filter icon could be like this one
  

[amedora]

Thanks for detailed reviewing, @AWolf81 😄

I've merged master into this branch, so the dependency issue has resolved.
I agree with you about filter icon. It looks better I think.

@ZeroX-DG Do you have any ideas?

[ZeroX-DG]

I think it looks good now, people will aware that they're in search mode so I don't think we need a "no match" indicator.

[ZeroX-DG]

LGTM 🎉

[ZeroX-DG]

On second thought, I think you're right @AWolf81 the glass icon can make people confuse with the search box next to it. How should we indicate that this is a button for filter tags/folders? Maybe add a placeholder "filter tags/folders..." to the text box when it appears

[AWolf81]

@ZeroX-DG good idea to add the placeholder filter tags/folders...

I mentioned the indication for not matching anything because I was confused during testing - I thought there is something broken with-out noticing that it's not matching anything from my three test tags (#1st, #2nd, #Typescript).
Maybe that was probably also caused by my test tags as everything you type except 1,2,T will have no match.

I think a small text with No match for <filter-term>... would be good - also the UI will look better as there is no empty space.

An indication about the active filter (e.g. changing the color of the search glass) would make sense if the feature can also be active with a freshly started app but I think after start the glass is disabled by default, right? So it's probably OK to have no mode indication & have just the seach box as indication.

[amedora]

adding placeholder has done 👍

[Rokt33r]

@ZeroX-DG Could you review this again?

[ZeroX-DG]

@amedora can you fix the conflicts so and can approve it?

[amedora]

@ZeroX-DG done 👍

[ZeroX-DG]

Very nice, LGTM 🎉

[Rokt33r]

@amedora Could you fix the conflicts?

[amedora]

@Rokt33r done 👍

[amedora]

ping @Rokt33r