Move and merge

web/apps/accounts/src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
+import { AppNavbar } from "@/base/components/Navbar";
 import { setupI18n } from "@/base/i18n";
 import { disableDiskLogs } from "@/base/log";
 import { logUnhandledErrorsAndRejections } from "@/base/log-web";
@@ -7,7 +8,6 @@ import { Overlay } from "@ente/shared/components/Container";
 import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
-import { AppNavbar } from "@ente/shared/components/Navbar/app";
 import { clearData } from "@ente/shared/storage/localStorage";
 import { getTheme } from "@ente/shared/themes";
 import { THEME_COLOR } from "@ente/shared/themes/constants";

web/apps/auth/src/pages/_app.tsx

@@ -2,6 +2,7 @@ import { accountLogout } from "@/accounts/services/logout";
 import type { AccountsContextT } from "@/accounts/types/context";
 import { clientPackageName, staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
+import { AppNavbar } from "@/base/components/Navbar";
 import { setupI18n } from "@/base/i18n";
 import {
     logStartupBanner,
@@ -13,7 +14,6 @@ import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { MessageContainer } from "@ente/shared/components/MessageContainer";
-import { AppNavbar } from "@ente/shared/components/Navbar/app";
 import { useLocalState } from "@ente/shared/hooks/useLocalState";
 import HTTPService from "@ente/shared/network/HTTPService";
 import {
@@ -24,7 +24,7 @@ import {
 import { getTheme } from "@ente/shared/themes";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import type { User } from "@ente/shared/user/types";
-import { CssBaseline, useMediaQuery } from "@mui/material";
+import { CssBaseline } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import { t } from "i18next";
 import type { AppProps } from "next/app";

web/apps/auth/src/pages/auth.tsx

@@ -1,3 +1,4 @@
+import { NavbarBase } from "@/base/components/Navbar";
 import { ensure } from "@/utils/ensure";
 import {
     HorizontalFlex,
@@ -6,7 +7,6 @@ import {
 import { EnteLogo } from "@ente/shared/components/EnteLogo";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { sessionExpiredDialogAttributes } from "@ente/shared/components/LoginComponents";
-import NavbarBase from "@ente/shared/components/Navbar/base";
 import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
 import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
 import { AUTH_PAGES as PAGES } from "@ente/shared/constants/pages";

web/apps/photos/src/components/pages/dedupe/SelectedFileOptions.tsx

@@ -1,5 +1,5 @@
+import { SelectionBar } from "@/base/components/Navbar";
 import { FluidContainer } from "@ente/shared/components/Container";
-import { SelectionBar } from "@ente/shared/components/Navbar/SelectionBar";
 import BackButton from "@mui/icons-material/ArrowBackOutlined";
 import CloseIcon from "@mui/icons-material/Close";
 import DeleteIcon from "@mui/icons-material/Delete";

web/apps/photos/src/components/pages/gallery/Navbar.tsx

@@ -1,6 +1,6 @@
+import { NavbarBase } from "@/base/components/Navbar";
 import { EnteFile } from "@/new/photos/types/file";
 import { FlexWrapper, HorizontalFlex } from "@ente/shared/components/Container";
-import NavbarBase from "@ente/shared/components/Navbar/base";
 import ArrowBack from "@mui/icons-material/ArrowBack";
 import MenuIcon from "@mui/icons-material/Menu";
 import { IconButton, Typography } from "@mui/material";

web/apps/photos/src/components/pages/gallery/SelectedFileOptions.tsx

@@ -1,5 +1,5 @@
+import { SelectionBar } from "@/base/components/Navbar";
 import { FluidContainer } from "@ente/shared/components/Container";
-import { SelectionBar } from "@ente/shared/components/Navbar/SelectionBar";
 import ClockIcon from "@mui/icons-material/AccessTime";
 import AddIcon from "@mui/icons-material/Add";
 import ArchiveIcon from "@mui/icons-material/ArchiveOutlined";

web/apps/photos/src/components/pages/sharedAlbum/Navbar.tsx

@@ -1,5 +1,5 @@
+import { NavbarBase } from "@/base/components/Navbar";
 import { FluidContainer } from "@ente/shared/components/Container";
-import NavbarBase from "@ente/shared/components/Navbar/base";
 import AddPhotoAlternateOutlined from "@mui/icons-material/AddPhotoAlternateOutlined";
 import { Box } from "@mui/material";
 import UploadButton from "components/Upload/UploadButton";

web/apps/photos/src/components/pages/sharedAlbum/SelectedFileOptions.tsx

@@ -1,5 +1,5 @@
+import { SelectionBar } from "@/base/components/Navbar";
 import { FluidContainer } from "@ente/shared/components/Container";
-import { SelectionBar } from "@ente/shared/components/Navbar/SelectionBar";
 import CloseIcon from "@mui/icons-material/Close";
 import DownloadIcon from "@mui/icons-material/Download";
 import { Box, IconButton, Stack, Tooltip } from "@mui/material";

web/apps/photos/src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AccountsContextT } from "@/accounts/types/context";
 import { clientPackageName, staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
+import { AppNavbar } from "@/base/components/Navbar";
 import { setupI18n } from "@/base/i18n";
 import log from "@/base/log";
 import {
@@ -21,7 +22,6 @@ import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { MessageContainer } from "@ente/shared/components/MessageContainer";
-import { AppNavbar } from "@ente/shared/components/Navbar/app";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { useLocalState } from "@ente/shared/hooks/useLocalState";
 import HTTPService from "@ente/shared/network/HTTPService";

web/packages/base/components/Navbar.tsx

@@ -0,0 +1,40 @@
+import { CenteredFlex, FlexWrapper } from "@ente/shared/components/Container";
+import { EnteLogo } from "@ente/shared/components/EnteLogo";
+import { styled } from "@mui/material";
+import React from "react";
+
+/**
+ * The "bar" at the top of the screen.
+ *
+ * Usually this area contains the App's main navigation bar ({@link AppNavbar}),
+ * but depending on the context it can also show the {@link SelectionBar}.
+ * */
+export const NavbarBase = styled(FlexWrapper)`
+    min-height: 64px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
+    background-color: ${({ theme }) => theme.colors.background.base};
+    margin-bottom: 16px;
+    padding: 0 24px;
+    @media (max-width: 720px) {
+        padding: 0 4px;
+    }
+`;
+
+export const AppNavbar: React.FC = () => {
+    return (
+        <NavbarBase>
+            <CenteredFlex>
+                <EnteLogo />
+            </CenteredFlex>
+        </NavbarBase>
+    );
+};
+
+export const SelectionBar = styled(NavbarBase)`
+    position: fixed;
+    z-index: 12;
+`;

web/packages/shared/components/Navbar/SelectionBar.tsx

@@ -1,6 +0,0 @@
-import { styled } from "@mui/material";
-import NavbarBase from "./base";
-export const SelectionBar = styled(NavbarBase)`
-    position: fixed;
-    z-index: 12;
-`;

web/packages/shared/components/Navbar/app.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { CenteredFlex } from "../../components/Container";
-import { EnteLogo } from "../EnteLogo";
-import NavbarBase from "./base";
-
-export const AppNavbar: React.FC = () => {
-    return (
-        <NavbarBase>
-            <CenteredFlex>
-                <EnteLogo />
-            </CenteredFlex>
-        </NavbarBase>
-    );
-};

web/packages/shared/components/Navbar/base.tsx

@@ -1,19 +0,0 @@
-import { styled } from "@mui/material";
-import { FlexWrapper } from "../../components/Container";
-
-const NavbarBase = styled(FlexWrapper)`
-    min-height: 64px;
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
-    background-color: ${({ theme }) => theme.colors.background.base};
-    margin-bottom: 16px;
-    padding: 0 24px;
-    @media (max-width: 720px) {
-        padding: 0 4px;
-    }
-`;
-
-export default NavbarBase;