add search result info bar

src/components/PhotoFrame.tsx

@@ -16,7 +16,7 @@ import {
 import { isSharedFile } from 'utils/file';
 import { isPlaybackPossible } from 'utils/photoFrame';
 import { PhotoList } from './PhotoList';
-import { SetFiles, SelectedState, SetSearchStats } from 'types/gallery';
+import { SetFiles, SelectedState } from 'types/gallery';
 import { FILE_TYPE } from 'constants/file';
 import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
@@ -57,7 +57,6 @@ interface Props {
     openUploader?;
     isInSearchMode?: boolean;
     search?: Search;
-    setSearchStats?: SetSearchStats;
     deleted?: number[];
     activeCollection: number;
     isSharedCollection?: boolean;
@@ -81,7 +80,6 @@ const PhotoFrame = ({
     openUploader,
     isInSearchMode,
     search,
-    setSearchStats,
     deleted,
     activeCollection,
     isSharedCollection,
@@ -90,7 +88,6 @@ const PhotoFrame = ({
     const [open, setOpen] = useState(false);
     const [currentIndex, setCurrentIndex] = useState<number>(0);
     const [fetching, setFetching] = useState<{ [k: number]: boolean }>({});
-    const startTime = Date.now();
     const galleryContext = useContext(GalleryContext);
     const appContext = useContext(AppContext);
     const deduplicateContext = useContext(DeduplicateContext);
@@ -136,12 +133,6 @@ const PhotoFrame = ({
     }, []);
 
     useEffect(() => {
-        if (isInSearchMode) {
-            setSearchStats({
-                resultCount: filteredData.length,
-                timeTaken: (Date.now() - startTime) / 1000,
-            });
-        }
         if (!isNaN(search?.file)) {
             const filteredDataIdx = filteredData.findIndex((file) => {
                 return file.id === search.file;

src/components/Search/SearchResultInfo.tsx

@@ -0,0 +1,32 @@
+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';
+
+interface Iprops {
+    searchResult: CollectionSummary;
+}
+export default function SearchResultInfo({ searchResult }: Iprops) {
+    if (!searchResult) {
+        return <></>;
+    }
+
+    const { name, fileCount } = searchResult;
+
+    return (
+        <CollectionSectionWrapper>
+            <Typography
+                css={`
+                    font-size: 24px;
+                    font-weight: 600;
+                    line-height: 36px;
+                    opacity: 50%;
+                `}>
+                {constants.SEARCH_RESULTS}
+            </Typography>
+            <CollectionInfo name={name} fileCount={fileCount} />
+        </CollectionSectionWrapper>
+    );
+}

src/components/Search/index.tsx

@@ -7,12 +7,14 @@ import { EnteFile } from 'types/file';
 import { SearchBarWrapper, SearchButtonWrapper } from './styledComponents';
 import SearchInput from './input';
 import { Search } from 'types/search';
+import { SetSearchResultInfo } from 'types/gallery';
 
 interface Props {
     isOpen: boolean;
     isFirstFetch: boolean;
     setOpen: (value: boolean) => void;
     setSearch: (search: Search) => void;
+    setSearchResultInfo: SetSearchResultInfo;
     collections: Collection[];
     setActiveCollection: (id: number) => void;
     files: EnteFile[];

src/components/Search/input.tsx

@@ -3,17 +3,18 @@ import debounce from 'debounce-promise';
 import { AppContext } from 'pages/_app';
 import React, { useContext, useEffect, useState } from 'react';
 import { getAutoCompleteSuggestions } from 'services/searchService';
-import { Bbox, DateValue, Suggestion, SuggestionType } from 'types/search';
+import { Bbox, DateValue, SearchOption, SuggestionType } from 'types/search';
 import constants from 'utils/strings/constants';
 import { ControlWithIcon } from './controlWithIcon';
 import { SearchInputWrapper } from './styledComponents';
 import { SelectStyles } from './styles';
 import AsyncSelect from 'react-select/async';
 import CloseIcon from '@mui/icons-material/Close';
-import { SetSearch } from 'types/gallery';
+import { SetSearch, SetSearchResultInfo } from 'types/gallery';
 import { EnteFile } from 'types/file';
 import { Collection } from 'types/collection';
 import { OptionWithInfo } from './optionWithInfo';
+import { CollectionType } from 'constants/collection';
 
 interface Iprops {
     isOpen: boolean;
@@ -22,12 +23,13 @@ interface Iprops {
     files: EnteFile[];
     collections: Collection[];
     setActiveCollection: (id: number) => void;
+    setSearchResultInfo: SetSearchResultInfo;
 }
 
 export default function SearchInput(props: Iprops) {
-    const [value, setValue] = useState<Suggestion>(null);
+    const [value, setValue] = useState<SearchOption>(null);
     const appContext = useContext(AppContext);
-    const handleChange = (value: Suggestion) => {
+    const handleChange = (value: SearchOption) => {
         setValue(value);
     };
 
@@ -50,7 +52,7 @@ export default function SearchInput(props: Iprops) {
         250
     );
 
-    const search = (selectedOption: Suggestion) => {
+    const search = (selectedOption: SearchOption) => {
         if (!selectedOption) {
             return;
         }
@@ -77,6 +79,11 @@ export default function SearchInput(props: Iprops) {
                 setValue(null);
                 break;
         }
+        props.setSearchResultInfo({
+            name: selectedOption.label,
+            fileCount: selectedOption.fileCount,
+            type: CollectionType.system,
+        });
     };
 
     return (

src/components/pages/gallery/Navbar.tsx

@@ -17,6 +17,7 @@ export function GalleryNavbar({
     files,
     setActiveCollection,
     updateSearch,
+    setSearchResultInfo,
 }) {
     return (
         <NavbarBase>
@@ -39,6 +40,7 @@ export function GalleryNavbar({
                     files={getNonTrashedUniqueUserFiles(files)}
                     setActiveCollection={setActiveCollection}
                     setSearch={updateSearch}
+                    setSearchResultInfo={setSearchResultInfo}
                 />
             )}
             {!isInSearchMode && (

src/pages/gallery/index.tsx

@@ -90,7 +90,11 @@ import DeleteBtn from 'components/DeleteBtn';
 import FixCreationTime, {
     FixCreationTimeAttributes,
 } from 'components/FixCreationTime';
-import { Collection, CollectionSummaries } from 'types/collection';
+import {
+    Collection,
+    CollectionSummaries,
+    CollectionSummary,
+} from 'types/collection';
 import { EnteFile } from 'types/file';
 import {
     GalleryContextType,
@@ -103,8 +107,8 @@ import { ElectronFile } from 'types/upload';
 import importService from 'services/importService';
 import Collections from 'components/Collections';
 import { GalleryNavbar } from 'components/pages/gallery/Navbar';
-import SearchStatsContainer from 'components/Search/SearchStatsContainer';
-import { SearchStats, Search } from 'types/search';
+import { Search } from 'types/search';
+import SearchResultInfo from 'components/Search/SearchResultInfo';
 
 export const DeadCenter = styled.div`
     flex: 1;
@@ -175,7 +179,8 @@ export default function Gallery() {
     });
 
     const [isInSearchMode, setIsInSearchMode] = useState(false);
-    const [searchStats, setSearchStats] = useState<SearchStats>(null);
+    const [searchResultInfo, setSearchResultInfo] =
+        useState<CollectionSummary>(null);
     const syncInProgress = useRef(true);
     const resync = useRef(false);
     const [deleted, setDeleted] = useState<number[]>([]);
@@ -497,7 +502,6 @@ export default function Gallery() {
     const updateSearch = (newSearch: Search) => {
         setActiveCollection(ALL_SECTION);
         setSearch(newSearch);
-        setSearchStats(null);
     };
 
     const closeCollectionSelector = (closeBtnClick?: boolean) => {
@@ -626,6 +630,7 @@ export default function Gallery() {
                     files={getNonTrashedUniqueUserFiles(files)}
                     setActiveCollection={setActiveCollection}
                     updateSearch={updateSearch}
+                    setSearchResultInfo={setSearchResultInfo}
                 />
 
                 <Collections
@@ -636,10 +641,8 @@ export default function Gallery() {
                     collectionSummaries={collectionSummaries}
                     setCollectionNamerAttributes={setCollectionNamerAttributes}
                 />
-                {searchStats && (
-                    <SearchStatsContainer>
-                        {constants.SEARCH_STATS(searchStats)}
-                    </SearchStatsContainer>
+                {isInSearchMode && (
+                    <SearchResultInfo searchResult={searchResultInfo} />
                 )}
 
                 <Upload
@@ -662,7 +665,7 @@ export default function Gallery() {
                     setUploadInProgress={setUploadInProgress}
                     fileRejections={fileRejections}
                     setFiles={setFiles}
-                    isFirstUpload={collectionSummaries.size === 0}
+                    isFirstUpload={collectionSummaries?.size === 0}
                     electronFiles={electronFiles}
                     setElectronFiles={setElectronFiles}
                     uploadTypeSelectorView={uploadTypeSelectorView}
@@ -682,7 +685,6 @@ export default function Gallery() {
                     openUploader={openUploader}
                     isInSearchMode={isInSearchMode}
                     search={search}
-                    setSearchStats={setSearchStats}
                     deleted={deleted}
                     activeCollection={activeCollection}
                     isSharedCollection={isSharedCollection(

src/types/gallery/index.ts

@@ -1,6 +1,6 @@
-import { Collection } from 'types/collection';
+import { Collection, CollectionSummary } from 'types/collection';
 import { EnteFile } from 'types/file';
-import { Search, SearchStats } from 'types/search';
+import { Search } from 'types/search';
 
 export type SelectedState = {
     [k: number]: boolean;
@@ -10,7 +10,9 @@ export type SelectedState = {
 export type SetFiles = React.Dispatch<React.SetStateAction<EnteFile[]>>;
 export type SetCollections = React.Dispatch<React.SetStateAction<Collection[]>>;
 export type SetLoading = React.Dispatch<React.SetStateAction<Boolean>>;
-export type SetSearchStats = React.Dispatch<React.SetStateAction<SearchStats>>;
+export type SetSearchResultInfo = React.Dispatch<
+    React.SetStateAction<CollectionSummary>
+>;
 export type SetSearch = React.Dispatch<React.SetStateAction<Search>>;
 
 export type GalleryContextType = {

src/types/search/index.ts

@@ -33,10 +33,6 @@ export type Search = {
     collection?: number;
     file?: number;
 };
-export interface SearchStats {
-    resultCount: number;
-    timeTaken: number;
-}
 
 export interface SearchOption extends Suggestion {
     fileCount: number;

src/utils/strings/englishConstants.tsx

@@ -405,6 +405,7 @@ const englishConstants = {
     DOWNLOAD_COLLECTION_FAILED: 'album downloading failed, please try again',
     CREATE_ALBUM_FAILED: 'failed to create album , please try again',
 
+    SEARCH_RESULTS: 'Search results',
     SEARCH_HINT: () => <span>Search for location, dates, themes</span>,
     SEARCH_TYPE: (type: SuggestionType) => {
         switch (type) {