SearchFooter visual tweaks

Finally playing with this, now that we've been doing paginated search results in the main element! Let's see how it goes 😳

I made a thing to make the pagination toolbar smaller (might want to do that on the mobile view too?), and also to put the search suggestions in a popover floating at the top of the search box.

src/app/WardrobePage/SearchFooter.js

@@ -3,6 +3,7 @@ import * as Sentry from "@sentry/react";
 import { Box, Flex } from "@chakra-ui/react";
 import SearchToolbar, { emptySearchQuery } from "./SearchToolbar";
 import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util";
+import PaginationToolbar from "../components/PaginationToolbar";
 
 /**
  * SearchFooter appears on large screens only, to let you search for new items
@@ -35,8 +36,23 @@ function SearchFooter() {
           <Box fontWeight="600" flex="0 0 auto">
             Add new items:
           </Box>
-          <Box width="4" />
+          <Box width="8" />
-          <SearchToolbar query={query} onChange={setQuery} flex="0 1 100%" />
+          <SearchToolbar
+            query={query}
+            onChange={setQuery}
+            flex="0 1 100%"
+            suggestionsPlacement="top"
+          />
+          <Box width="8" />
+          <Box flex="0 0 auto">
+            <PaginationToolbar
+              numTotalPages={1}
+              currentPageNumber={1}
+              goToPageNumber={() => alert("TODO")}
+              buildPageUrl={() => null}
+              size="sm"
+            />
+          </Box>
         </Flex>
       </Sentry.ErrorBoundary>
     </Box>

src/app/WardrobePage/SearchToolbar.js

@@ -35,6 +35,17 @@ export function searchQueryIsEmpty(query) {
   return Object.values(query).every((value) => !value);
 }
 
+const SUGGESTIONS_PLACEMENT_PROPS = {
+  inline: {
+    borderBottomRadius: "md",
+  },
+  top: {
+    position: "absolute",
+    bottom: "100%",
+    borderTopRadius: "md",
+  },
+};
+
 /**
  * SearchToolbar is rendered above both the ItemsPanel and the SearchPanel,
  * and contains the search field where the user types their query.
@@ -53,6 +64,7 @@ function SearchToolbar({
   showItemsLabel = false,
   background = null,
   boxShadow = null,
+  suggestionsPlacement = "inline",
   ...props
 }) {
   const [suggestions, setSuggestions] = React.useState([]);
@@ -84,7 +96,7 @@ function SearchToolbar({
     }
   };
 
-  const suggestionBgColor = useColorModeValue("transparent", "whiteAlpha.100");
+  const suggestionBgColor = useColorModeValue("white", "whiteAlpha.100");
   const highlightedBgColor = useColorModeValue("gray.100", "whiteAlpha.300");
 
   const renderSuggestion = React.useCallback(
@@ -110,11 +122,11 @@ function SearchToolbar({
           {({ css, cx }) => (
             <Box
               {...otherContainerProps}
-              borderBottomRadius="md"
               boxShadow="md"
               overflow="auto"
               transition="all 0.4s"
               maxHeight="48"
+              width="100%"
               className={cx(
                 className,
                 css`
@@ -123,6 +135,7 @@ function SearchToolbar({
                   }
                 `
               )}
+              {...SUGGESTIONS_PLACEMENT_PROPS[suggestionsPlacement]}
             >
               {children}
               {!children && advancedSearchIsOpen && (
@@ -140,7 +153,7 @@ function SearchToolbar({
         </ClassNames>
       );
     },
-    [advancedSearchIsOpen]
+    [advancedSearchIsOpen, suggestionsPlacement]
   );
 
   // When we change the query filters, clear out the suggestions.
@@ -183,7 +196,7 @@ function SearchToolbar({
   const focusBorderColor = useColorModeValue("green.600", "green.400");
 
   return (
-    <Box {...props}>
+    <Box position="relative" {...props}>
       <Autosuggest
         suggestions={advancedSearchIsOpen ? allSuggestions : suggestions}
         onSuggestionsFetchRequested={({ value }) => {

src/app/components/PaginationToolbar.js

@@ -9,6 +9,7 @@ function PaginationToolbar({
   currentPageNumber,
   goToPageNumber,
   buildPageUrl,
+  size = "md",
   ...props
 }) {
   const pagesAreLoaded = currentPageNumber != null && numTotalPages != null;
@@ -32,11 +33,12 @@ function PaginationToolbar({
           opacity: 0.4,
         }}
         isDisabled={!hasPrevPage}
+        size={size}
       >
         ← Prev
       </LinkOrButton>
       {numTotalPages > 0 && (
-        <Flex align="center">
+        <Flex align="center" paddingX="4" fontSize={size}>
           <Box flex="0 0 auto">Page</Box>
           <Box width="1" />
           <PageNumberSelect
@@ -61,6 +63,7 @@ function PaginationToolbar({
           opacity: 0.4,
         }}
         isDisabled={!hasNextPage}
+        size={size}
       >
         Next →
       </LinkOrButton>