diff --git a/src/app/WardrobePage/ItemsAndSearchPanels.js b/src/app/WardrobePage/ItemsAndSearchPanels.js index 9956fbe..a855d97 100644 --- a/src/app/WardrobePage/ItemsAndSearchPanels.js +++ b/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,19 +34,29 @@ 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 ( - - - - {!searchQueryIsEmpty(searchQuery) ? ( + {isShowingSearchFooter && } + {!isShowingSearchFooter && ( + + + + )} + {!isShowingSearchFooter && !searchQueryIsEmpty(searchQuery) ? (