enable search mode when search input is opened on mobile

src/components/Search/SearchBar/index.tsx

@@ -1,5 +1,5 @@
-import { SearchButton } from './searchButton';
-import React, { useState } from 'react';
+import { SearchBarMobile } from './searchBarMobile';
+import React from 'react';
 import { Collection } from 'types/collection';
 
 import { EnteFile } from 'types/file';
@@ -8,23 +8,31 @@ import SearchInput from './searchInput';
 import { UpdateSearch } from 'types/search';
 
 interface Props {
-    isFirstFetch: boolean;
     updateSearch: UpdateSearch;
     collections: Collection[];
     setActiveCollection: (id: number) => void;
     files: EnteFile[];
+    isInSearchMode: boolean;
+    setIsInSearchMode: (v: boolean) => void;
 }
-export default function SearchBar({ isFirstFetch, ...props }: Props) {
-    const [isOpen, setIsOpen] = useState(false);
-    const showSearchInput = () => setIsOpen(true);
+
+export default function SearchBar({
+    setIsInSearchMode,
+    isInSearchMode,
+    ...props
+}: Props) {
+    const showSearchInput = () => setIsInSearchMode(true);
 
     return (
         <SearchBarWrapper>
-            <SearchInput {...props} isOpen={isOpen} setOpen={setIsOpen} />
-            <SearchButton
-                isFirstFetch={isFirstFetch}
-                show={!isOpen}
-                openSearchInput={showSearchInput}
+            <SearchInput
+                {...props}
+                isOpen={isInSearchMode}
+                setIsOpen={setIsInSearchMode}
+            />
+            <SearchBarMobile
+                show={!isInSearchMode}
+                showSearchInput={showSearchInput}
             />
         </SearchBarWrapper>
     );

src/components/Search/SearchBar/searchBarMobile.tsx

@@ -0,0 +1,22 @@
+import { IconButton } from '@mui/material';
+import { FluidContainer } from 'components/Container';
+import { EnteLogo } from 'components/EnteLogo';
+import React from 'react';
+import { SearchMobileBox } from './styledComponents';
+import SearchIcon from '@mui/icons-material/Search';
+
+export function SearchBarMobile({ show, showSearchInput }) {
+    if (!show) {
+        return <></>;
+    }
+    return (
+        <SearchMobileBox>
+            <FluidContainer justifyContent="center" mr={1.5}>
+                <EnteLogo />
+            </FluidContainer>
+            <IconButton onClick={showSearchInput}>
+                <SearchIcon />
+            </IconButton>
+        </SearchMobileBox>
+    );
+}

src/components/Search/SearchBar/searchButton.tsx

@@ -1,17 +0,0 @@
-import SearchIcon from '@mui/icons-material/Search';
-import { IconButton } from '@mui/material';
-import React from 'react';
-import { SearchButtonWrapper } from './styledComponents';
-
-export function SearchButton({ isFirstFetch, show, openSearchInput }) {
-    if (!show) {
-        return <></>;
-    }
-    return (
-        <SearchButtonWrapper>
-            <IconButton onClick={() => !isFirstFetch && openSearchInput()}>
-                <SearchIcon />
-            </IconButton>
-        </SearchButtonWrapper>
-    );
-}

src/components/Search/SearchBar/searchInput/index.tsx

@@ -12,7 +12,6 @@ import {
 } from 'types/search';
 import constants from 'utils/strings/constants';
 import { ValueContainerWithIcon } from './valueContainerWithIcon';
-import { SearchInputWrapper } from './styledComponents';
 import { SelectStyles } from '../../../../styles/search';
 import AsyncSelect from 'react-select/async';
 import CloseIcon from '@mui/icons-material/Close';
@@ -20,11 +19,12 @@ import { UpdateSearch } from 'types/search';
 import { EnteFile } from 'types/file';
 import { Collection } from 'types/collection';
 import { OptionWithInfo } from './optionWithInfo';
+import { SearchInputWrapper } from '../styledComponents';
 
 interface Iprops {
     isOpen: boolean;
     updateSearch: UpdateSearch;
-    setOpen: (value: boolean) => void;
+    setIsOpen: (value: boolean) => void;
     files: EnteFile[];
     collections: Collection[];
     setActiveCollection: (id: number) => void;
@@ -46,7 +46,7 @@ export default function SearchInput(props: Iprops) {
             setTimeout(() => {
                 appContext.finishLoading();
             }, 10);
-            props.setOpen(false);
+            props.setIsOpen(false);
             setValue(null);
         }
     };
@@ -66,13 +66,13 @@ export default function SearchInput(props: Iprops) {
                 search = {
                     date: selectedOption.value as DateValue,
                 };
-                props.setOpen(true);
+                props.setIsOpen(true);
                 break;
             case SuggestionType.LOCATION:
                 search = {
                     location: selectedOption.value as Bbox,
                 };
-                props.setOpen(true);
+                props.setIsOpen(true);
                 break;
             case SuggestionType.COLLECTION:
                 search = { collection: selectedOption.value as number };

src/components/Search/SearchBar/searchInput/styledComponents.tsx

@@ -1,14 +0,0 @@
-import { CenteredFlex } from 'components/Container';
-import { css, styled } from '@mui/material';
-
-export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
-    max-width: 484px;
-    margin: auto;
-    ${(props) =>
-        !props.isOpen &&
-        css`
-            @media (max-width: 624px) {
-                display: none;
-            }
-        `}
-`;

src/components/Search/SearchBar/styledComponents.tsx

@@ -1,18 +1,33 @@
-import { FlexWrapper, FluidContainer } from 'components/Container';
-import { styled } from '@mui/material';
+import {
+    CenteredFlex,
+    FlexWrapper,
+    FluidContainer,
+} from 'components/Container';
+import { css, styled } from '@mui/material';
 import { SpecialPadding } from 'styles/SpecialPadding';
 
 export const SearchBarWrapper = styled(FlexWrapper)`
     ${SpecialPadding}
 `;
 
-export const SearchButtonWrapper = styled(FluidContainer)`
+export const SearchMobileBox = styled(FluidContainer)`
     display: flex;
     cursor: pointer;
     align-items: center;
     justify-content: flex-end;
-    min-height: 64px;
-    @media (min-width: 624px) {
+    @media (min-width: 625px) {
         display: none;
     }
 `;
+
+export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
+    max-width: 484px;
+    margin: auto;
+    ${(props) =>
+        !props.isOpen &&
+        css`
+            @media (max-width: 624px) {
+                display: none;
+            }
+        `}
+`;

src/components/pages/gallery/Navbar.tsx

@@ -15,6 +15,7 @@ interface Iprops {
     isFirstFetch: boolean;
     openUploader: () => void;
     isInSearchMode: boolean;
+    setIsInSearchMode: (v: boolean) => void;
     collections: Collection[];
     files: EnteFile[];
     setActiveCollection: (id: number) => void;
@@ -29,6 +30,7 @@ export function GalleryNavbar({
     files,
     setActiveCollection,
     updateSearch,
+    setIsInSearchMode,
 }: Iprops) {
     return (
         <NavbarBase>
@@ -40,7 +42,8 @@ export function GalleryNavbar({
                 </FluidContainer>
             ) : (
                 <SearchBar
-                    isFirstFetch={isFirstFetch}
+                    isInSearchMode={isInSearchMode}
+                    setIsInSearchMode={setIsInSearchMode}
                     collections={collections}
                     files={getNonTrashedUniqueUserFiles(files)}
                     setActiveCollection={setActiveCollection}

src/pages/gallery/index.tsx

@@ -628,6 +628,7 @@ export default function Gallery() {
                 <GalleryNavbar
                     openSidebar={openSidebar}
                     isFirstFetch={isFirstFetch}
+                    setIsInSearchMode={setIsInSearchMode}
                     openUploader={openUploader}
                     isInSearchMode={isInSearchMode}
                     collections={collections}