feat: search and filtering UX improvements

[rando128]

Description

This PR brings some usability enhancements for searching and filtering the dashboard symbols.

4 main capabilities have been added:

• The user can filter by asset directly from the account balance section
• The user can filter symbols with active trades by clicking on open trades in the order stats section
• The user can filter symbols with open orders by clicking on open orders - buy in the order stats section
• The order stats section now renders the current filter:
  • Specific searchkeyword (from the filterIcon view)
  • Open trades
  • Open orders
  • Hidden disabled symbols

A toast has been added to inform which symbols are shown in the dashboard and the filtering icon of the header shows the red dot only when disabled symbols are hidden.

Changes:

• 2 special searchKeywords (open trades, open orders) are now filtering symbols with open trades or orders. The logic has been added to common.js.
• The OrderStats class includes the logic for displaying the current filter and making open trades/orders sections clickable (if their value is not 0)
• AccountWrapper.js and AccountWrapperAsset.js classes have been updated to include a search button in the account balance section
• The setSearchKeyword function of App.js now handles toasts
• FilterIcon.js has been updated to propagate the searchKeyword changes only when the form is submitted
• The app.css has been extended for button handling in the order stats section

Caveats:

• The existing saveNumberOfBuyOpenOrders calculation doesn't always get all the symbols with active trades. This is something I discovered while developing this PR. I will open a separate bug as I couldn't find a straightforward reason.

Motivation and Context

I often struggle to find myself scrolling and changing paginations and search to get the relevant symbols. These improvements will hopefully make the experience smoother.

How Has This Been Tested?

This is working on my production server

Screenshots (if appropriate):

Filtering from Account balance

Active filter with informative toast

SearchKeyword filtering

Open trades filtering

Open orders filtering

Only with hidden disabled symbols

[rando128]

@chrisleekr, I saw you assigned the ticket to me. What do you want me to do?

[chrisleekr]

@rando128 don't worry. I just assigned you because it was opened by you.

I am writing test cases for your changes.

The only feedback is I didn't realise I could click "Open buy orders" or "Open trades" until I saw the code.
But otherwise, all looks good. Once I finish writing test cases, I will merge them in.

[rando128]

Yeah, I initially put a filter/search icon next to the "Open buy orders" and "Open trades" element, but it was making the UI very busy. After second thought, would a simple text-decoration: underline; be sufficient (only in case the value is not zero)?

[chrisleekr]

@rando128 To be honest, I am not sure. Haha. I am not good at UX. Hence, I researched some other cases.
Could we add a filtering icon? Or make the text button?

In any way, probably don't worry too much about it. I will merge in, and we can improve later on.

[chrisleekr]

@rando128
It's merged. Thanks for your code! It's a good improvement.

[rando128]

Thx. I'll address the UX improvement in another PR.

Sorry for leaking a console.log statement 😅