improve patterns selector (#1248)

## Problem

There is broken counter how in search box for pattern selector. Also
there is no clear indication that nothing is matched.


## Solution

See screenshots how it is improved:

Old:
  counter:

![broken_counter](https://github.com/openSUSE/agama/assets/478871/5196c843-4927-497b-8806-ad0b38584590)

  empty result:

![broken_empty](https://github.com/openSUSE/agama/assets/478871/aa5834d8-52e5-4c21-a720-73961d6db213)

New:
  counter:

![new_counter](https://github.com/openSUSE/agama/assets/478871/bc79e039-05e5-4dfc-976c-5d35ff7ce032)

  empty result (attempt 1):

![new_empty](https://github.com/openSUSE/agama/assets/478871/3c2095cc-3ce6-46c7-b20f-a7a572ea8bb5)

   empty result (attempt 2):

![new_empty](https://github.com/openSUSE/agama/assets/478871/67034797-4c92-4ebe-af51-beb4802441d8)

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Thu May 23 07:28:44 UTC 2024 - Josef Reidinger <jreidinger@suse.com>
+
+- Fix showing count in pattern search and also improve visuals
+  when there are no matching text (gh#openSUSE/agama#1248)
+
 -------------------------------------------------------------------
 Wed May 22 14:26:18 UTC 2024 - Josef Reidinger <jreidinger@suse.com>
 

web/src/components/software/PatternSelector.jsx

@@ -143,7 +143,7 @@ function PatternSelector({ patterns, onSelectionChanged = noop }) {
     </div>
   );
 
-  const selector = sortGroups(groups).map((groupName) => {
+  let selector = sortGroups(groups).map((groupName) => {
     const selectedIds = groups[groupName].filter((p) => p.selectedBy !== SelectedBy.NONE).map((p) =>
       p.name
     );
@@ -166,6 +166,12 @@ function PatternSelector({ patterns, onSelectionChanged = noop }) {
     );
   });
 
+  if (selector.length === 0) {
+    selector = (
+      <b>{_("None of the patterns match the filter.")}</b>
+    );
+  }
+
   return (
     <>
       <Section aria-label={_("Software summary and filter options")}>
@@ -176,8 +182,7 @@ function PatternSelector({ patterns, onSelectionChanged = noop }) {
           value={searchValue}
           onChange={(_event, value) => setSearchValue(value)}
           onClear={() => setSearchValue("")}
-          // do not display the counter when search filter is empty
-          resultsCount={searchValue === "" ? 0 : groups.length}
+          resultsCount={visiblePatterns.length}
         />
       </Section>