From 1f7fe5a2b2d05c7a200cbeabdadfc70f355b13d9 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 14 Feb 2024 13:54:59 +0800
Subject: [PATCH] Fix issue where multiselect control would be disabled during
 search

---
 .../templates/homeFeed/LibraryHeader.tsx      | 48 ++++++++-----------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 3d444209f..ec6decb0e 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -36,7 +36,6 @@ import { HeaderCheckboxIcon } from '../../elements/icons/HeaderCheckboxIcon'
 import { HeaderSearchIcon } from '../../elements/icons/HeaderSearchIcon'
 import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon'
 import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon'
-import useWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
 
 export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
 
@@ -124,7 +123,6 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
 }
 
 function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
-  const dimensions = useWindowDimensions()
   const [showSearchBar, setShowSearchBar] = useState(false)
   const [pinnedSearches, setPinnedSearches] = usePersistedState<
     PinnedSearch[] | null
@@ -134,10 +132,6 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
     isSessionStorage: false,
   })
 
-  const isWideWindow = useMemo(() => {
-    return dimensions.width >= 480
-  }, [dimensions])
-
   return (
     <HStack
       alignment="center"
@@ -154,29 +148,25 @@ function LargeHeaderLayout(props: LibraryHeaderProps): JSX.Element {
         </HStack>
       ) : (
         <>
-          {(!showSearchBar || isWideWindow) && (
-            <>
-              <SpanBox
-                css={{
-                  display: 'none',
-                  '@mdDown': { display: 'flex' },
-                }}
-              >
-                <MenuHeaderButton {...props} />
-              </SpanBox>
-              <Button
-                title="Select multiple"
-                style="plainIcon"
-                css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
-                onClick={(e) => {
-                  props.setMultiSelectMode('visible')
-                  e.preventDefault()
-                }}
-              >
-                <HeaderCheckboxIcon />
-              </Button>
-            </>
-          )}
+          <SpanBox
+            css={{
+              display: 'none',
+              '@mdDown': { display: 'flex' },
+            }}
+          >
+            <MenuHeaderButton {...props} />
+          </SpanBox>
+          <Button
+            title="Select multiple"
+            style="plainIcon"
+            css={{ display: 'flex', '&:hover': { opacity: '1.0' } }}
+            onClick={(e) => {
+              props.setMultiSelectMode('visible')
+              e.preventDefault()
+            }}
+          >
+            <HeaderCheckboxIcon />
+          </Button>
 
           {showSearchBar ? (
             <SearchBox {...props} setShowSearchBar={setShowSearchBar} />