From 14c94eb52cfc52035b060208f28d117b843c14e4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 9 Jun 2023 18:46:37 +0800
Subject: [PATCH] Display multi select tools on small screens

---
 .../templates/homeFeed/LibraryHeader.tsx      | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 3edf6b49f..28a3e98a4 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -153,7 +153,7 @@ function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         </HStack>
       ) : (
         <>
-          <MenuHeaderButton {...props} />
+          {props.multiSelectMode === 'off' && <MenuHeaderButton {...props} />}
           <ControlButtonBox
             layout={props.layout}
             updateLayout={props.updateLayout}
@@ -228,6 +228,10 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
   const [focused, setFocused] = useState(false)
   const [searchTerm, setSearchTerm] = useState(props.searchTerm ?? '')
 
+  useEffect(() => {
+    setSearchTerm(props.searchTerm ?? '')
+  }, [props.searchTerm])
+
   const border = props.compact
     ? focused
       ? '1px solid $omnivoreCtaYellow'
@@ -514,18 +518,6 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
     }
   }, [props.multiSelectMode])
 
-  const breakpoints = {
-    width: '95%',
-    '@media (min-width: 930px)': {
-      width: '640px',
-    },
-    '@media (min-width: 1280px)': {
-      width: '1000px',
-    },
-    '@media (min-width: 1600px)': {
-      width: '1340px',
-    },
-  }
   return (
     <>
       <HStack
@@ -534,9 +526,18 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
         css={{
           gap: '10px',
           '@mdDown': {
-            display: 'none',
+            display: props.multiSelectMode !== 'off' ? 'flex' : 'none',
+          },
+          width: '95%',
+          '@media (min-width: 930px)': {
+            width: '640px',
+          },
+          '@media (min-width: 1280px)': {
+            width: '1000px',
+          },
+          '@media (min-width: 1600px)': {
+            width: '1340px',
           },
-          ...breakpoints,
         }}
       >
         {props.multiSelectMode !== 'off' && (
@@ -546,6 +547,9 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
               display: 'flex',
               gap: '2px',
               alignItems: 'center',
+              '@mdDown': {
+                mx: '20px',
+              },
             }}
           >
             <CardCheckbox
@@ -604,13 +608,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
         )}
         {props.multiSelectMode !== 'off' ? (
           <>
-            <MultiSelectControlButtonBox
-              {...props}
-              // setInMultiSelect={(set: boolean) => {
-              //   setIsChecked(false)
-              //   props.setInMultiSelect(set)
-              // }}
-            />
+            <MultiSelectControlButtonBox {...props} />
             <SpanBox css={{ flex: 1 }}></SpanBox>
           </>
         ) : (
@@ -618,7 +616,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
         )}
       </HStack>
 
-      {props.setShowInlineSearch && (
+      {props.setShowInlineSearch && props.multiSelectMode === 'off' && (
         <HStack
           alignment="center"
           distribution="end"