feat: add search pill to filters

[CzarekDryl]

Description

• Added search pill next to filters
• When clicking 'enter' key while typing in search input - filter menu closes

Testing

• Go to any page with filters i.e. activity feed, balances
• Open filters menu and use search
• Click 'enter' key and check if menu closes

Resolves #3666

[mmioana]

Nice start on this issue @CzarekDryl 🙌

Tested your changes and it looks good on desktop

However, on mobile, I did notice the modal has a scroll even though there is enough space for it not to be shown

Screen.Recording.2024-11-26.at.17.02.49.mov

Also I left some refactoring comments which should help keep our codebase more maintainable, if you can please tackle them 🙏

[mmioana]

Given this code

const [isSearchOpened, setIsSearchOpened] = useState(false);

const { getTooltipProps, setTooltipRef, setTriggerRef } = usePopperTooltip({
    delayShow: 200,
    delayHide: 200,
    placement: 'bottom-start',
    trigger: 'click',
    interactive: true,
    visible: isSearchOpened,
    onVisibleChange: setIsSearchOpened,
  });

is duplicated in 6 files could we please extract it into a global hook useSearchFilter

const useSearchFilter = () => {
  const [isSearchOpened, setIsSearchOpened] = useState(false);
  const { getTooltipProps, setTooltipRef, setTriggerRef } = usePopperTooltip({
    delayShow: 200,
    delayHide: 200,
    placement: 'bottom-start',
    trigger: 'click',
    interactive: true,
    visible: isSearchOpened,
    onVisibleChange: setIsSearchOpened,
  });

  const closeSearch = () => {
    setIsSearchOpened(false);
  }

  const openSearch = () => {
    setIsSearchOpened(true);
  }

  const toggleSearch = () => {
    setIsSearchOpened((prev) => !prev);
  }

  return {
    getTooltipProps,
    setTooltipRef,
    setTriggerRef,
    isSearchOpened,
    closeSearch,
    openSearch,
    toggleSearch
  }
};

and then use it here?

  const {
    isSearchOpened,
    openSearch,
    closeSearch,
    toggleSearch,
    getTooltipProps,
    setTooltipRef,
    setTriggerRef,
  } = useSearchFilter();

[mmioana]

Please use the useSearchFilter hook here

[mmioana]

Please use the useSearchFilter hook here

[mmioana]

Please use the useSearchFilter hook here

[mmioana]

Please use the useSearchFilter hook here

[mmioana]

And then use the new component here

        {!isMobile && (
          <SearchPill value={searchValue} onClick={() => onSearch('')} />
        )}

[mmioana]

And then use the new component here

        {isMobile && (
          <SearchPill value={searchValue} onClick={() => onSearch('')} />
        )}

[mmioana]

And then use the new component here

        {!isMobile && (
          <SearchPill value={searchValue} onClick={() => onSearch('')} />
        )}

[mmioana]

And then use the new component here

        <SearchPill value={searchValue} onClick={() => onSearch('')} />

[mmioana]

Also use the new component here

         <SearchPill
            value={searchValue}
            onClick={() => setSearchValue('')}
          />

[CzarekDryl]

@mmioana Thanks for comments, I think scroll in search modal should be fixed in other issue.