search results page

pages/search-results.tsx

@@ -8,12 +8,12 @@ import PageNextJs from 'nextjs/PageNextJs';
 
 import LayoutSearchResults from 'ui/shared/layout/LayoutSearchResults';
 
-// const SearchResults = dynamic(() => import('ui/pages/SearchResults'), { ssr: false });
+const SearchResults = dynamic(() => import('ui/pages/SearchResults'), { ssr: false });
 
 const Page: NextPageWithLayout<Props> = (props: Props) => {
   return (
     <PageNextJs pathname="/search-results" query={ props.query }>
-      { /* <SearchResults/> */ }
+      <SearchResults/>
     </PageNextJs>
   );
 };

ui/pages/SearchResults.tsx

-import { Box, chakra, Table, Tbody, Tr, Th, Show, Hide } from '@chakra-ui/react';
+import { Box, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import type { FormEvent } from 'react';
 import React from 'react';
@@ -11,20 +11,20 @@ import { useSettingsContext } from 'lib/contexts/settings';
 import * as regexp from 'lib/regexp';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import removeQueryParam from 'lib/router/removeQueryParam';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import SearchResultListItem from 'ui/searchResults/SearchResultListItem';
 import SearchResultsInput from 'ui/searchResults/SearchResultsInput';
 import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem';
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import AppErrorBoundary from 'ui/shared/AppError/AppErrorBoundary';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as Layout from 'ui/shared/layout/components';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
-import Thead from 'ui/shared/TheadSticky';
 import HeaderAlert from 'ui/snippets/header/HeaderAlert';
 import HeaderDesktop from 'ui/snippets/header/HeaderDesktop';
 import HeaderMobile from 'ui/snippets/header/HeaderMobile';
@@ -144,7 +144,7 @@ const SearchResultsPageContent = () => {
 
     return (
       <>
-        <Show below="lg" ssr={ false }>
+        <Box hideFrom="lg">
           { displayedItems.map((item, index) => (
             <SearchResultListItem
               key={ (isLoading ? 'placeholder_' : 'actual_') + index }
@@ -154,18 +154,18 @@ const SearchResultsPageContent = () => {
               addressFormat={ settingsContext?.addressFormat }
             />
           )) }
-        </Show>
-        <Hide below="lg" ssr={ false }>
-          <Table fontWeight={ 500 }>
-            <Thead top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
-              <Tr>
-                <Th width="30%">Search result</Th>
-                <Th width="35%"/>
-                <Th width="35%" pr={ 10 }/>
-                <Th width="150px">Category</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
+        </Box>
+        <Box hideBelow="lg">
+          <TableRoot fontWeight={ 500 }>
+            <TableHeaderSticky top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
+              <TableRow>
+                <TableColumnHeader width="30%">Search result</TableColumnHeader>
+                <TableColumnHeader width="35%"/>
+                <TableColumnHeader width="35%" pr={ 10 }/>
+                <TableColumnHeader width="150px">Category</TableColumnHeader>
+              </TableRow>
+            </TableHeaderSticky>
+            <TableBody>
               { displayedItems.map((item, index) => (
                 <SearchResultTableItem
                   key={ (isLoading ? 'placeholder_' : 'actual_') + index }
@@ -175,9 +175,9 @@ const SearchResultsPageContent = () => {
                   addressFormat={ settingsContext?.addressFormat }
                 />
               )) }
-            </Tbody>
-          </Table>
-        </Hide>
+            </TableBody>
+          </TableRoot>
+        </Box>
       </>
     );
   })();
@@ -190,7 +190,7 @@ const SearchResultsPageContent = () => {
     const resultsCount = pagination.page === 1 && !data?.next_page_params ? displayedItems.length : '50+';
 
     const text = isLoading && pagination.page === 1 ? (
-      <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
+      <Skeleton loading h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
     ) : (
       (
         <>
@@ -214,9 +214,9 @@ const SearchResultsPageContent = () => {
 
     return (
       <>
-        <Box display={{ base: 'block', lg: 'none' }}>{ text }</Box>
+        <Box hideFrom="lg">{ text }</Box>
         <ActionBar mt={{ base: 0, lg: -6 }} alignItems="center">
-          <Box display={{ base: 'none', lg: 'block' }}>{ text }</Box>
+          <Box hideBelow="lg">{ text }</Box>
           <Pagination { ...pagination }/>
         </ActionBar>
       </>

ui/searchResults/SearchResultsInput.tsx

-import { PopoverTrigger, PopoverContent, PopoverBody, useDisclosure } from '@chakra-ui/react';
 import { debounce } from 'es-toolkit';
 import type { FormEvent, FocusEvent } from 'react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { getRecentSearchKeywords } from 'lib/recentSearchKeywords';
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import SearchBarBackdrop from 'ui/snippets/searchBar/SearchBarBackdrop';
 import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
 import SearchBarRecentKeywords from 'ui/snippets/searchBar/SearchBarRecentKeywords';
@@ -17,7 +17,7 @@ type Props = {
 };
 
 const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }: Props) => {
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { open, onClose, onOpen } = useDisclosure();
   const inputRef = React.useRef<HTMLFormElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const menuWidth = React.useRef<number>(0);
@@ -25,6 +25,10 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
 
   const recentSearchKeywords = getRecentSearchKeywords();
 
+  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    open && onOpen();
+  }, [ onOpen ]);
+
   const handleFocus = React.useCallback(() => {
     onOpen();
   }, [ onOpen ]);
@@ -47,7 +51,7 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
     inputRef.current?.querySelector('input')?.focus();
   }, [ handleSearchTermChange ]);
 
-  const menuPaddingX = isMobile ? 32 : 0;
+  const menuPaddingX = isMobile ? 24 : 0;
   const calculateMenuWidth = React.useCallback(() => {
     menuWidth.current = (inputRef.current?.getBoundingClientRect().width || 0) - menuPaddingX;
   }, [ menuPaddingX ]);
@@ -68,17 +72,15 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
     };
   }, [ calculateMenuWidth ]);
 
-  const isSuggestOpen = isOpen && recentSearchKeywords.length > 0 && searchTerm.trim().length === 0;
+  const isSuggestOpen = open && recentSearchKeywords.length > 0 && searchTerm.trim().length === 0;
 
   return (
     <>
-      <Popover
-        isOpen={ isSuggestOpen }
+      <PopoverRoot
+        open={ isSuggestOpen }
         autoFocus={ false }
-        onClose={ onClose }
-        placement="bottom-start"
-        offset={ isMobile ? [ 16, -12 ] : [ 0, 8 ] }
-        isLazy
+        onOpenChange={ handleOpenChange }
+        positioning={{ offset: { mainAxis: isMobile ? 0 : 8, crossAxis: isMobile ? 12 : 0 } }}
       >
         <PopoverTrigger>
           <SearchBarInput
@@ -98,7 +100,7 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
             <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
           </PopoverBody>
         </PopoverContent>
-      </Popover>
+      </PopoverRoot>
       <SearchBarBackdrop isOpen={ isSuggestOpen }/>
     </>
   );