fix search result ui bugs

src/components/Collections/CollectionInfo.tsx

@@ -4,19 +4,8 @@ import constants from 'utils/strings/constants';
 export function CollectionInfo({ name, fileCount }) {
     return (
         <div>
-            <Typography
-                css={`
-                    font-size: 24px;
-                    font-weight: 600;
-                    line-height: 36px;
-                `}>
-                {name}
-            </Typography>
-            <Typography
-                css={`
-                    font-size: 14px;
-                    line-height: 20px;
-                `}>
+            <Typography variant="subtitle">{name}</Typography>
+            <Typography variant="body2">
                 {constants.PHOTO_COUNT(fileCount)}
             </Typography>
         </div>

src/components/Collections/CollectionInfoWithOptions.tsx

@@ -1,7 +1,10 @@
 import { CollectionInfo } from './CollectionInfo';
 import React from 'react';
 import { Collection, CollectionSummary } from 'types/collection';
-import { CollectionSectionWrapper } from 'components/Collections/styledComponents';
+import {
+    CollectionSectionWrapper,
+    Hider,
+} from 'components/Collections/styledComponents';
 import CollectionOptions from 'components/Collections/CollectionOptions';
 import { SetCollectionNamerAttributes } from 'components/Collections/CollectionNamer';
 import { SPECIAL_COLLECTION_TYPES } from 'constants/collection';
@@ -10,6 +13,7 @@ import { SpaceBetweenFlex } from 'components/Container';
 interface Iprops {
     activeCollection: Collection;
     collectionSummary: CollectionSummary;
+    isInSearchMode: boolean;
     setCollectionNamerAttributes: SetCollectionNamerAttributes;
     showCollectionShareModal: () => void;
     redirectToAll: () => void;
@@ -25,13 +29,15 @@ export default function collectionInfoWithOptions({
     const { name, type, fileCount } = collectionSummary;
 
     return (
-        <CollectionSectionWrapper>
-            <SpaceBetweenFlex>
-                <CollectionInfo name={name} fileCount={fileCount} />
-                {!SPECIAL_COLLECTION_TYPES.has(type) && (
-                    <CollectionOptions {...props} />
-                )}
-            </SpaceBetweenFlex>
-        </CollectionSectionWrapper>
+        <Hider hide={props.isInSearchMode}>
+            <CollectionSectionWrapper>
+                <SpaceBetweenFlex>
+                    <CollectionInfo name={name} fileCount={fileCount} />
+                    {!SPECIAL_COLLECTION_TYPES.has(type) && (
+                        <CollectionOptions {...props} />
+                    )}
+                </SpaceBetweenFlex>
+            </CollectionSectionWrapper>
+        </Hider>
     );
 }

src/components/Collections/index.tsx

@@ -60,6 +60,7 @@ export default function Collections(props: Iprops) {
             />
 
             <CollectionInfoWithOptions
+                isInSearchMode={isInSearchMode}
                 collectionSummary={collectionSummaries.get(activeCollectionID)}
                 activeCollection={activeCollection.current}
                 setCollectionNamerAttributes={setCollectionNamerAttributes}

src/components/Navbar/SidebarToggler.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import MenuIcon from '@mui/icons-material/Menu';
 import IconButton from '@mui/material/IconButton';
 
-export default function SidebarToggler({ openSidebar }) {
+interface Iprops {
+    openSidebar: () => void;
+}
+export default function SidebarToggler({ openSidebar }: Iprops) {
     return (
         <IconButton onClick={openSidebar}>
             <MenuIcon />

src/components/Search/SearchResultInfo.tsx

@@ -1,26 +1,27 @@
 import React from 'react';
-import { CollectionSummary } from 'types/collection';
 import { CollectionInfo } from 'components/Collections/CollectionInfo';
 import constants from 'utils/strings/constants';
 import { Typography } from '@mui/material';
 import { CollectionSectionWrapper } from 'components/Collections/styledComponents';
+import { SearchResultSummary } from 'types/search';
 
 interface Iprops {
-    searchResult: CollectionSummary;
+    searchResultSummary: SearchResultSummary;
 }
-export default function SearchResultInfo({ searchResult }: Iprops) {
-    if (!searchResult) {
+export default function SearchResultInfo({ searchResultSummary }: Iprops) {
+    if (!searchResultSummary) {
         return <></>;
     }
 
-    const { name, fileCount } = searchResult;
+    const { optionName, fileCount } = searchResultSummary;
 
+    console.log(optionName, fileCount);
     return (
         <CollectionSectionWrapper>
             <Typography variant="subtitle" color="text.secondary">
                 {constants.SEARCH_RESULTS}
             </Typography>
-            <CollectionInfo name={name} fileCount={fileCount} />
+            <CollectionInfo name={optionName} fileCount={fileCount} />
         </CollectionSectionWrapper>
     );
 }

src/components/Search/index.tsx

@@ -14,7 +14,7 @@ interface Props {
     isFirstFetch: boolean;
     setOpen: (value: boolean) => void;
     setSearch: (search: Search) => void;
-    setSearchResultInfo: SetSearchResultSummary;
+    setSearchResultSummary: SetSearchResultSummary;
     collections: Collection[];
     setActiveCollection: (id: number) => void;
     files: EnteFile[];

src/components/Search/input.tsx

@@ -22,7 +22,7 @@ interface Iprops {
     files: EnteFile[];
     collections: Collection[];
     setActiveCollection: (id: number) => void;
-    setSearchResultInfo: SetSearchResultSummary;
+    setSearchResultSummary: SetSearchResultSummary;
 }
 
 export default function SearchInput(props: Iprops) {
@@ -78,7 +78,7 @@ export default function SearchInput(props: Iprops) {
                 setValue(null);
                 break;
         }
-        props.setSearchResultInfo({
+        props.setSearchResultSummary({
             optionName: selectedOption.label,
             fileCount: selectedOption.fileCount,
         });

src/components/pages/gallery/Navbar.tsx

@@ -6,7 +6,22 @@ import { getNonTrashedUniqueUserFiles } from 'utils/file';
 import SearchBar from 'components/Search';
 import { FluidContainer } from 'components/Container';
 import { EnteLogo } from 'components/EnteLogo';
+import { Collection } from 'types/collection';
+import { EnteFile } from 'types/file';
+import { Search, SearchResultSummary } from 'types/search';
 
+interface Iprops {
+    openSidebar: () => void;
+    isFirstFetch: boolean;
+    openUploader: () => void;
+    isInSearchMode: boolean;
+    setIsInSearchMode: (value: boolean) => void;
+    collections: Collection[];
+    files: EnteFile[];
+    setActiveCollection: (id: number) => void;
+    updateSearch: (search: Search) => void;
+    setSearchResultSummary: (info: SearchResultSummary) => void;
+}
 export function GalleryNavbar({
     openSidebar,
     isFirstFetch,
@@ -17,8 +32,8 @@ export function GalleryNavbar({
     files,
     setActiveCollection,
     updateSearch,
-    setSearchResultInfo,
-}) {
+    setSearchResultSummary,
+}: Iprops) {
     return (
         <NavbarBase>
             {!isInSearchMode && <SidebarToggler openSidebar={openSidebar} />}
@@ -36,7 +51,7 @@ export function GalleryNavbar({
                     files={getNonTrashedUniqueUserFiles(files)}
                     setActiveCollection={setActiveCollection}
                     setSearch={updateSearch}
-                    setSearchResultInfo={setSearchResultInfo}
+                    setSearchResultSummary={setSearchResultSummary}
                 />
             )}
             {!isInSearchMode && (

src/components/pages/gallery/UploadButton.tsx

@@ -12,7 +12,12 @@ const Wrapper = styled.div<{ isDisabled: boolean }>`
     cursor: pointer;
     opacity: ${(props) => (props.isDisabled ? 0 : 1)};
 `;
-function UploadButton({ isFirstFetch, openUploader }) {
+
+interface Iprops {
+    isFirstFetch: boolean;
+    openUploader: () => void;
+}
+function UploadButton({ isFirstFetch, openUploader }: Iprops) {
     return (
         <Wrapper onClick={openUploader} isDisabled={isFirstFetch}>
             <Button

src/pages/gallery/index.tsx

@@ -90,11 +90,7 @@ import DeleteBtn from 'components/DeleteBtn';
 import FixCreationTime, {
     FixCreationTimeAttributes,
 } from 'components/FixCreationTime';
-import {
-    Collection,
-    CollectionSummaries,
-    CollectionSummary,
-} from 'types/collection';
+import { Collection, CollectionSummaries } from 'types/collection';
 import { EnteFile } from 'types/file';
 import { GalleryContextType, SelectedState } from 'types/gallery';
 import { VISIBILITY_STATE } from 'types/magicMetadata';
@@ -103,7 +99,7 @@ import { ElectronFile } from 'types/upload';
 import importService from 'services/importService';
 import Collections from 'components/Collections';
 import { GalleryNavbar } from 'components/pages/gallery/Navbar';
-import { Search } from 'types/search';
+import { Search, SearchResultSummary } from 'types/search';
 import SearchResultInfo from 'components/Search/SearchResultInfo';
 import { NotificationAttributes } from 'types/Notification';
 
@@ -173,7 +169,7 @@ export default function Gallery() {
 
     const [isInSearchMode, setIsInSearchMode] = useState(false);
     const [searchResultSummary, setSetSearchResultSummary] =
-        useState<CollectionSummary>(null);
+        useState<SearchResultSummary>(null);
     const syncInProgress = useRef(true);
     const resync = useRef(false);
     const [deleted, setDeleted] = useState<number[]>([]);
@@ -635,7 +631,7 @@ export default function Gallery() {
                     files={getNonTrashedUniqueUserFiles(files)}
                     setActiveCollection={setActiveCollection}
                     updateSearch={updateSearch}
-                    setSearchResultInfo={setSetSearchResultSummary}
+                    setSearchResultSummary={setSetSearchResultSummary}
                 />
 
                 <Collections
@@ -647,7 +643,9 @@ export default function Gallery() {
                     setCollectionNamerAttributes={setCollectionNamerAttributes}
                 />
                 {isInSearchMode && (
-                    <SearchResultInfo searchResult={searchResultSummary} />
+                    <SearchResultInfo
+                        searchResultSummary={searchResultSummary}
+                    />
                 )}
 
                 <Upload