refactor: search input (#1205)

apps/web/src/components/quick-search/index.tsx

@@ -1,15 +1,16 @@
 import { Modal, ModalWrapper } from '@affine/component';
+import { useTranslation } from '@affine/i18n';
 import { Command } from 'cmdk';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useModal } from '@/store/globalModal';
 import { getUaHelper } from '@/utils';
 
 import { Footer } from './Footer';
-import { Input } from './Input';
 import { PublishedResults } from './PublishedResults';
 import { Results } from './Results';
+import { SearchInput } from './SearchInput';
 import {
   StyledContent,
   StyledModalDivider,
@@ -17,10 +18,12 @@ import {
   StyledModalHeader,
   StyledShortcut,
 } from './style';
+
 type TransitionsModalProps = {
   open: boolean;
   onClose: () => void;
 };
+
 const isMac = () => {
   return getUaHelper().isMacOs;
 };
@@ -28,8 +31,9 @@ const isMac = () => {
 // fixme(himself65): support ssr
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const router = useRouter();
+  const { t } = useTranslation();
+  const inputRef = useRef<HTMLInputElement>(null);
   const [query, setQuery] = useState('');
-  const [loading, setLoading] = useState(true);
   const [isPublic, setIsPublic] = useState(false);
   const [publishWorkspaceName, setPublishWorkspaceName] = useState('');
   const [showCreatePage, setShowCreatePage] = useState(true);
@@ -38,7 +42,6 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
     return isPublic && query.length === 0;
   };
   const handleClose = () => {
-    setQuery('');
     onClose();
   };
   // Add  ‘⌘+K’ shortcut keys as switches
@@ -73,10 +76,19 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   }, [router]);
   useEffect(() => {
     if (router.pathname.startsWith('/404')) {
-      return onClose();
+      onClose();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect(() => {
+    if (open) {
+      // Waiting for DOM rendering
+      requestAnimationFrame(() => {
+        const inputElement = inputRef.current;
+        inputElement?.focus();
+      });
+    }
+  }, [open]);
 
   return (
     <Modal
@@ -108,13 +120,25 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
           }}
         >
           <StyledModalHeader>
-            <Input
-              open={open}
-              query={query}
-              setQuery={setQuery}
-              setLoading={setLoading}
-              isPublic={isPublic}
-              publishWorkspaceName={publishWorkspaceName}
+            <SearchInput
+              ref={inputRef}
+              onValueChange={value => {
+                setQuery(value);
+              }}
+              onKeyDown={e => {
+                // Avoid triggering the cmdk onSelect event when the input method is in use
+                if (e.nativeEvent.isComposing) {
+                  e.stopPropagation();
+                  return;
+                }
+              }}
+              placeholder={
+                isPublic
+                  ? t('Quick search placeholder2', {
+                      workspace: publishWorkspaceName,
+                    })
+                  : t('Quick search placeholder')
+              }
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
@@ -128,16 +152,12 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
               {!isPublic ? (
                 <Results
                   query={query}
-                  loading={loading}
-                  setLoading={setLoading}
                   onClose={handleClose}
                   setShowCreatePage={setShowCreatePage}
                 />
               ) : (
                 <PublishedResults
                   query={query}
-                  loading={loading}
-                  setLoading={setLoading}
                   onClose={handleClose}
                   setPublishWorkspaceName={setPublishWorkspaceName}
                   data-testid="publishedSearchResults"