feat: implement template search functionality (#2376)

- Added  function to handle template searches based on user input
- Introduced in the TRPC router to facilitate authenticated template
searches
- Updated to include template search results alongside document search
results
- Enhanced query handling by enabling searches only when the input is
valid
- Created corresponding Zod schemas for request and response validation
in

apps/remix/app/components/general/app-command-menu.tsx

@@ -4,6 +4,7 @@ import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { keepPreviousData } from '@tanstack/react-query';
 import { CheckIcon, Loader, Monitor, Moon, Sun } from 'lucide-react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router';
@@ -65,14 +66,16 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
   const [pages, setPages] = useState<string[]>([]);
 
   const debouncedSearch = useDebouncedValue(search, 200);
+  const hasValidSearch = debouncedSearch.trim().length > 0;
 
-  const { data: searchDocumentsData, isPending: isSearchingDocuments } =
+  const { data: searchDocumentsData, isFetching: isFetchingDocuments } =
     trpcReact.document.search.useQuery(
       {
         query: debouncedSearch,
       },
       {
-        placeholderData: (previousData) => previousData,
+        enabled: open === true && hasValidSearch,
+        placeholderData: keepPreviousData,
         // Do not batch this due to relatively long request time compared to
         // other queries which are generally batched with this.
         ...SKIP_QUERY_BATCH_META,
@@ -80,6 +83,19 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
       },
     );
 
+  const { data: searchTemplatesData, isFetching: isFetchingTemplates } =
+    trpcReact.template.search.useQuery(
+      {
+        query: debouncedSearch,
+      },
+      {
+        enabled: open === true && hasValidSearch,
+        placeholderData: keepPreviousData,
+        ...SKIP_QUERY_BATCH_META,
+        ...DO_NOT_INVALIDATE_QUERY_ON_MUTATION,
+      },
+    );
+
   const teamUrl = useMemo(() => {
     let teamUrl = currentTeam?.url || null;
 
@@ -134,17 +150,23 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
     ];
   }, [currentTeam, organisations]);
 
-  const searchResults = useMemo(() => {
-    if (!searchDocumentsData) {
-      return [];
-    }
+  const documentSearchResults =
+    hasValidSearch && searchDocumentsData
+      ? searchDocumentsData.map((document) => ({
+          label: document.title,
+          path: document.path,
+          value: document.value,
+        }))
+      : [];
 
-    return searchDocumentsData.map((document) => ({
-      label: document.title,
-      path: document.path,
-      value: document.value,
-    }));
-  }, [searchDocumentsData]);
+  const templateSearchResults =
+    hasValidSearch && searchTemplatesData
+      ? searchTemplatesData.map((template) => ({
+          label: template.title,
+          path: template.path,
+          value: template.value,
+        }))
+      : [];
 
   const currentPage = pages[pages.length - 1];
 
@@ -222,19 +244,9 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
       />
 
       <CommandList>
-        {isSearchingDocuments ? (
-          <CommandEmpty>
-            <div className="flex items-center justify-center">
-              <span className="animate-spin">
-                <Loader />
-              </span>
-            </div>
-          </CommandEmpty>
-        ) : (
-          <CommandEmpty>
-            <Trans>No results found.</Trans>
-          </CommandEmpty>
-        )}
+        <CommandEmpty>
+          <Trans>No results found.</Trans>
+        </CommandEmpty>
 
         {!currentPage && (
           <>
@@ -263,9 +275,27 @@ export function AppCommandMenu({ open, onOpenChange }: AppCommandMenuProps) {
               </CommandItem>
             </CommandGroup>
 
-            {searchResults.length > 0 && (
+            {(isFetchingDocuments || documentSearchResults.length > 0) && (
               <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Your documents`)}>
-                <Commands push={push} pages={searchResults} />
+                {isFetchingDocuments ? (
+                  <div className="flex items-center justify-center py-2">
+                    <Loader className="h-4 w-4 animate-spin" />
+                  </div>
+                ) : (
+                  <Commands push={push} pages={documentSearchResults} />
+                )}
+              </CommandGroup>
+            )}
+
+            {(isFetchingTemplates || templateSearchResults.length > 0) && (
+              <CommandGroup className="mx-2 p-0 pb-2" heading={_(msg`Your templates`)}>
+                {isFetchingTemplates ? (
+                  <div className="flex items-center justify-center py-2">
+                    <Loader className="h-4 w-4 animate-spin" />
+                  </div>
+                ) : (
+                  <Commands push={push} pages={templateSearchResults} />
+                )}
               </CommandGroup>
             )}
           </>