Group separation, no result handling and filtering

src/components/CommandMenu/CommandMenu.tsx

@@ -46,11 +46,13 @@ export function CommandMenu() {
 
     const normalizedSearchText = searchedText.trim().toLowerCase();
     getAllPages().then((unfilteredPages = defaultPages) => {
-      const filteredPages = unfilteredPages.filter((currPage: PageType) => {
+      const filteredPages = unfilteredPages
+        .filter((currPage: PageType) => {
           return (
             currPage.title.toLowerCase().indexOf(normalizedSearchText) !== -1
           );
-      });
+        })
+        .slice(0, 10);
 
       setActiveCounter(0);
       setSearchResults(filteredPages);
@@ -63,7 +65,7 @@ export function CommandMenu() {
 
   return (
     <div className="fixed left-0 right-0 top-0 z-50 flex h-full justify-center overflow-y-auto overflow-x-hidden bg-black/50">
-      <div className="relative top-20 h-full w-full max-w-lg p-2 md:h-auto">
+      <div className="relative top-0 sm:top-20 h-full w-full max-w-lg p-2 md:h-auto">
         <div className="relative rounded-lg bg-white shadow">
           <input
             autofocus={true}
@@ -87,6 +89,8 @@ export function CommandMenu() {
                 );
               } else if (e.key === 'Tab') {
                 e.preventDefault();
+              } else if (e.key === 'Escape') {
+                setIsActive(false);
               } else if (e.key === 'Enter') {
                 const activePage = searchResults[activeCounter];
                 if (activePage) {
@@ -98,7 +102,21 @@ export function CommandMenu() {
 
           <div class="px-2 py-2">
             <div className="flex flex-col">
-              {searchResults.map((page, counter) => (
+              {searchResults.length === 0 && (
+                <div class="p-5 text-center text-sm text-gray-400">
+                  No results found
+                </div>
+              )}
+
+              {searchResults.map((page, counter) => {
+                const prevPage = searchResults[counter - 1];
+                const groupChanged = prevPage && prevPage.group !== page.group;
+
+                return (
+                  <>
+                    {groupChanged && (
+                      <div class="border-b border-gray-100"></div>
+                    )}
                     <a
                       class={`block w-full rounded p-2 text-sm ${
                         counter === activeCounter ? 'bg-gray-100' : ''
@@ -114,7 +132,9 @@ export function CommandMenu() {
                       )}
                       {page.title}
                     </a>
-              ))}
+                  </>
+                );
+              })}
             </div>
           </div>
         </div>