feat (wip): search result groups

src/components/SearchModal/SearchList.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useMemo } from "react";
 
 import { SearchItem } from "types";
+import { groupItemBy } from "utils/array";
 import SearchListItem from "./SearchListItem";
 
 import styles from "./search.module.scss";
@@ -16,22 +17,31 @@ export default function SearchList({
   cursor: number;
   setCursor: (cursor: number) => void;
 }) {
+  const searchItemsGrouped = useMemo(
+    () => groupItemBy(items, "category.name"),
+    [items]
+  );
+  const groupedItems = useMemo<any>(
+    () => Object.entries(searchItemsGrouped),
+    [searchItemsGrouped]
+  );
+
   return (
     <ul className={styles["search-list"]}>
-      {items.length > 0 ? (
-        items.map((item, index) => (
-          <SearchListItem
-            item={{
-              id: item.id,
-              name: item.name,
-              url: item.url,
-              type: item.type,
-            }}
-            setCursor={setCursor}
-            selected={index === cursor}
-            index={index}
-            key={item.type + "-" + item.id}
-          />
+      {groupedItems.length > 0 ? (
+        groupedItems.map(([key, items], index) => (
+          <li key={key + "-" + key}>
+            <span>{typeof key === "undefined" ? "-" : key}</span>
+            {items.map((item) => (
+              <SearchListItem
+                item={item}
+                setCursor={setCursor}
+                selected={index === cursor}
+                index={index}
+                key={item.id}
+              />
+            ))}
+          </li>
         ))
       ) : noItem ? (
         noItem