Hide other search bar when search footer is visible

src/app/WardrobePage/ItemsAndSearchPanels.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
 import * as Sentry from "@sentry/react";
 
 import ItemsPanel from "./ItemsPanel";
@@ -8,7 +8,7 @@ import SearchToolbar, {
   searchQueryIsEmpty,
 } from "./SearchToolbar";
 import SearchPanel from "./SearchPanel";
-import { MajorErrorMessage, TestErrorSender } from "../util";
+import { MajorErrorMessage, TestErrorSender, useLocalStorage } from "../util";
 
 /**
  * ItemsAndSearchPanels manages the shared layout and state for:
@@ -34,10 +34,19 @@ function ItemsAndSearchPanels({
   const searchQueryRef = React.useRef();
   const firstSearchResultRef = React.useRef();
 
+  const hasRoomForSearchFooter = useBreakpointValue({ base: false, md: true });
+  const [canUseSearchFooter] = useLocalStorage(
+    "DTIFeatureFlagCanUseSearchFooter",
+    false
+  );
+  const isShowingSearchFooter = canUseSearchFooter && hasRoomForSearchFooter;
+
   return (
     <Sentry.ErrorBoundary fallback={MajorErrorMessage}>
       <TestErrorSender />
       <Flex direction="column" height="100%">
+        {isShowingSearchFooter && <Box height="2" />}
+        {!isShowingSearchFooter && (
           <Box paddingX="5" paddingTop="3" paddingBottom="2" boxShadow="sm">
             <SearchToolbar
               query={searchQuery}
@@ -46,7 +55,8 @@ function ItemsAndSearchPanels({
               onChange={setSearchQuery}
             />
           </Box>
-        {!searchQueryIsEmpty(searchQuery) ? (
+        )}
+        {!isShowingSearchFooter && !searchQueryIsEmpty(searchQuery) ? (
           <Box
             key="search-panel"
             flex="1 0 0"