Add search footer to layout, behind a feature flag

Yeah it looks cute as a starting point! Definitely a lot to do here tho 😳

src/app/WardrobePage/SearchFooter.js

@@ -0,0 +1,46 @@
+import React from "react";
+import * as Sentry from "@sentry/react";
+import { Box, Flex } from "@chakra-ui/react";
+import SearchToolbar, { emptySearchQuery } from "./SearchToolbar";
+import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util";
+
+/**
+ * SearchFooter appears on large screens only, to let you search for new items
+ * while still keeping the rest of the item screen open!
+ */
+function SearchFooter() {
+  const [canUseSearchFooter, setCanUseSearchFooter] = useLocalStorage(
+    "DTIFeatureFlagCanUseSearchFooter",
+    false
+  );
+
+  React.useEffect(() => {
+    if (window.location.search.includes("feature-flag-can-use-search-footer")) {
+      setCanUseSearchFooter(true);
+    }
+  }, [setCanUseSearchFooter]);
+
+  const [query, setQuery] = React.useState(emptySearchQuery);
+
+  // TODO: Show the new footer to other users, too!
+  if (!canUseSearchFooter) {
+    return null;
+  }
+
+  return (
+    <Box paddingX="4" paddingY="4">
+      <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
+        <TestErrorSender />
+        <Flex as="label" align="center">
+          <Box fontWeight="600" flex="0 0 auto">
+            Add new items:
+          </Box>
+          <Box width="4" />
+          <SearchToolbar query={query} onChange={setQuery} flex="0 1 100%" />
+        </Flex>
+      </Sentry.ErrorBoundary>
+    </Box>
+  );
+}
+
+export default SearchFooter;

src/app/WardrobePage/SearchToolbar.js

@@ -53,6 +53,7 @@ function SearchToolbar({
   showItemsLabel = false,
   background = null,
   boxShadow = null,
+  ...props
 }) {
   const [suggestions, setSuggestions] = React.useState([]);
   const [advancedSearchIsOpen, setAdvancedSearchIsOpen] = React.useState(false);
@@ -182,6 +183,7 @@ function SearchToolbar({
   const focusBorderColor = useColorModeValue("green.600", "green.400");
 
   return (
+    <Box {...props}>
       <Autosuggest
         suggestions={advancedSearchIsOpen ? allSuggestions : suggestions}
         onSuggestionsFetchRequested={({ value }) => {
@@ -189,7 +191,9 @@ function SearchToolbar({
           //       set to the _chosen suggestion_ after choosing it? Has that
           //       always happened? Idk? Let's just, gate around it, I guess?
           if (typeof value === "string") {
-          setSuggestions(getSuggestions(value, query, zoneLabels, isLoggedIn));
+            setSuggestions(
+              getSuggestions(value, query, zoneLabels, isLoggedIn)
+            );
           }
         }}
         onSuggestionSelected={(e, { suggestion }) => {
@@ -203,7 +207,8 @@ function SearchToolbar({
             filterToZoneLabel: suggestion.zoneLabel || query.filterToZoneLabel,
             filterToItemKind: suggestion.itemKind || query.filterToItemKind,
             filterToCurrentUserOwnsOrWants:
-            suggestion.userOwnsOrWants || query.filterToCurrentUserOwnsOrWants,
+              suggestion.userOwnsOrWants ||
+              query.filterToCurrentUserOwnsOrWants,
           });
         }}
         getSuggestionValue={(zl) => zl}
@@ -315,6 +320,7 @@ function SearchToolbar({
           },
         }}
       />
+    </Box>
   );
 }
 

src/app/WardrobePage/WardrobePageLayout.js

@@ -1,8 +1,15 @@
 import React from "react";
-import { Box, Grid, useColorModeValue } from "@chakra-ui/react";
+import { Box, Grid, useColorModeValue, useToken } from "@chakra-ui/react";
+import { useCommonStyles } from "../util";
 
-function WardrobePageLayout({ previewAndControls, itemsAndSearch }) {
+function WardrobePageLayout({
+  previewAndControls = null,
+  itemsAndMaybeSearchPanel = null,
+  searchFooter = null,
+}) {
   const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
+  const searchBackground = useCommonStyles().bodyBackground;
+  const searchShadowColorValue = useToken("colors", "gray.400");
 
   return (
     <Box
@@ -18,12 +25,13 @@ function WardrobePageLayout({ previewAndControls, itemsAndSearch }) {
       <Grid
         templateAreas={{
           base: `"previewAndControls"
-                 "itemsAndSearch"`,
+                 "itemsAndMaybeSearchPanel"`,
-          md: `"previewAndControls itemsAndSearch"`,
+          md: `"previewAndControls itemsAndMaybeSearchPanel"
+               "searchFooter searchFooter"`,
         }}
         templateRows={{
           base: "minmax(100px, 45%) minmax(300px, 55%)",
-          md: "100%",
+          md: "minmax(300px, 1fr) auto",
         }}
         templateColumns={{
           base: "100%",
@@ -40,8 +48,15 @@ function WardrobePageLayout({ previewAndControls, itemsAndSearch }) {
         >
           {previewAndControls}
         </Box>
-        <Box gridArea="itemsAndSearch" bg={itemsAndSearchBackground}>
+        <Box gridArea="itemsAndMaybeSearchPanel" bg={itemsAndSearchBackground}>
-          {itemsAndSearch}
+          {itemsAndMaybeSearchPanel}
+        </Box>
+        <Box
+          gridArea="searchFooter"
+          bg={searchBackground}
+          boxShadow={`0 0 8px ${searchShadowColorValue}`}
+        >
+          {searchFooter}
         </Box>
       </Grid>
     </Box>

src/app/WardrobePage/index.js

@@ -4,6 +4,7 @@ import { useToast } from "@chakra-ui/react";
 import { loadable } from "../util";
 
 import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
+import SearchFooter from "./SearchFooter";
 import SupportOnly from "./support/SupportOnly";
 import useOutfitSaving from "./useOutfitSaving";
 import useOutfitState, { OutfitStateContext } from "./useOutfitState";
@@ -104,7 +105,7 @@ function WardrobePage() {
             dispatchToOutfit={dispatchToOutfit}
           />
         }
-        itemsAndSearch={
+        itemsAndMaybeSearchPanel={
           <ItemsAndSearchPanels
             loading={loading}
             outfitState={outfitState}
@@ -112,6 +113,7 @@ function WardrobePage() {
             dispatchToOutfit={dispatchToOutfit}
           />
         }
+        searchFooter={<SearchFooter />}
       />
     </OutfitStateContext.Provider>
   );