use new selected file options and navbars

src/pages/deduplicate/index.tsx

@@ -18,7 +18,7 @@ import {
     DefaultDeduplicateContext,
 } from 'types/deduplicate';
 import Router from 'next/router';
-import DeduplicateOptions from 'components/pages/gallery/SelectedFileOptions/DeduplicateOptions';
+import DeduplicateOptions from 'components/pages/dedupe/SelectedFileOptions';
 import { PAGES } from 'constants/pages';
 import router from 'next/router';
 import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';

src/pages/gallery/index.tsx

@@ -50,8 +50,7 @@ import {
     mergeMetadata,
     sortFiles,
 } from 'utils/file';
-import SearchBar from 'components/Search';
-import SelectedFileOptions from 'components/pages/gallery/SelectedFileOptions/GalleryOptions';
+import SelectedFileOptions from 'components/pages/gallery/SelectedFileOptions';
 import CollectionSelector, {
     CollectionSelectorAttributes,
 } from 'components/pages/gallery/CollectionSelector';
@@ -59,7 +58,6 @@ import CollectionNamer, {
     CollectionNamerAttributes,
 } from 'components/Collections/CollectionNamer';
 import AlertBanner from 'components/pages/gallery/AlertBanner';
-import UploadButton from 'components/pages/gallery/UploadButton';
 import PlanSelector from 'components/pages/gallery/PlanSelector';
 import Upload from 'components/pages/gallery/Upload';
 import {
@@ -110,6 +108,7 @@ import ToastNotification from 'components/ToastNotification';
 import { ElectronFile } from 'types/upload';
 import importService from 'services/importService';
 import Collections from 'components/Collections';
+import { GalleryNavbar } from 'components/pages/gallery/Navbar';
 
 export const DeadCenter = styled.div`
     flex: 1;
@@ -134,6 +133,8 @@ const defaultGalleryContext: GalleryContextType = {
     syncWithRemote: () => null,
     setNotificationAttributes: () => null,
     setBlockingLoad: () => null,
+    sidebarView: false,
+    closeSidebar: () => null,
 };
 
 export const GalleryContext = createContext<GalleryContextType>(
@@ -210,6 +211,11 @@ export default function Gallery() {
     const [electronFiles, setElectronFiles] = useState<ElectronFile[]>(null);
     const [uploadTypeSelectorView, setUploadTypeSelectorView] = useState(false);
 
+    const [sidebarView, setSidebarView] = useState(false);
+
+    const closeSidebar = () => setSidebarView(false);
+    const openSidebar = () => setSidebarView(true);
+
     useEffect(() => {
         const key = getKey(SESSION_KEYS.ENCRYPTION_KEY);
         if (!key) {
@@ -239,7 +245,6 @@ export default function Gallery() {
             setIsFirstFetch(false);
         };
         main();
-        appContext.showNavBar(true);
     }, []);
 
     useEffect(
@@ -579,6 +584,8 @@ export default function Gallery() {
                 syncWithRemote,
                 setNotificationAttributes,
                 setBlockingLoad,
+                closeSidebar,
+                sidebarView,
             }}>
             <FullScreenDropZone
                 getRootProps={getRootProps}
@@ -603,16 +610,19 @@ export default function Gallery() {
                     attributes={notificationAttributes}
                     clearAttributes={clearNotificationAttributes}
                 />
-                <SearchBar
-                    isOpen={isInSearchMode}
-                    setOpen={setIsInSearchMode}
+                <GalleryNavbar
+                    openSidebar={openSidebar}
                     isFirstFetch={isFirstFetch}
+                    openUploader={openUploader}
+                    isInSearchMode={isInSearchMode}
+                    setIsInSearchMode={setIsInSearchMode}
                     collections={collections}
                     files={getNonTrashedUniqueUserFiles(files)}
                     setActiveCollection={setActiveCollection}
-                    setSearch={updateSearch}
+                    updateSearch={updateSearch}
                     searchStats={searchStats}
                 />
+
                 <Collections
                     collections={collections}
                     isInSearchMode={isInSearchMode}
@@ -666,10 +676,7 @@ export default function Gallery() {
                     setUploadTypeSelectorView={setUploadTypeSelectorView}
                 />
                 <Sidebar collectionSummaries={collectionSummaries} />
-                <UploadButton
-                    isFirstFetch={isFirstFetch}
-                    openUploader={openUploader}
-                />
+
                 <PhotoFrame
                     files={files}
                     setFiles={setFiles}

src/pages/shared-albums/index.tsx

@@ -32,6 +32,7 @@ import { useRouter } from 'next/router';
 import SingleInputForm from 'components/SingleInputForm';
 import { Card } from 'react-bootstrap';
 import { logError } from 'utils/sentry';
+import SharedAlbumNavbar from 'components/pages/sharedAlbum/Navbar';
 
 const Loader = () => (
     <VerticallyCentered>
@@ -62,7 +63,6 @@ export default function PublicCollectionGallery() {
         useState<CollectionSummaries>(new Map());
 
     useEffect(() => {
-        appContext.showNavBar(true);
         const currentURL = new URL(window.location.href);
         if (currentURL.pathname !== PAGES.ROOT) {
             router.replace(
@@ -292,6 +292,7 @@ export default function PublicCollectionGallery() {
                 accessedThroughSharedURL: true,
                 openReportForm,
             }}>
+            <SharedAlbumNavbar />
             <PhotoFrame
                 files={publicFiles}
                 setFiles={setPublicFiles}

src/types/gallery/index.ts

@@ -30,6 +30,8 @@ export type GalleryContextType = {
     syncWithRemote: (force?: boolean, silent?: boolean) => Promise<void>;
     setNotificationAttributes: (attributes: NotificationAttributes) => void;
     setBlockingLoad: (value: boolean) => void;
+    sidebarView: boolean;
+    closeSidebar: () => void;
 };
 
 export interface NotificationAttributes {