Split types

web/apps/accounts/src/pages/passkeys/flow/Recover.tsx

@@ -1,16 +1,12 @@
 import { TwoFactorType } from "@ente/accounts/constants/twofactor";
-import RecoverPage from "@ente/accounts/pages/recover";
+import RecoverPage from "@ente/accounts/pages/two-factor/recover";
-import { APPS } from "@ente/shared/apps/constants";
+import { useAppContext } from "../../_app";
-import { AppContext } from "pages/_app";
-import { useContext } from "react";
 
-export default function Recover() {
+const Page = () => (
-    const appContext = useContext(AppContext);
-    return (
     <RecoverPage
-            appContext={appContext}
+        appContext={useAppContext()}
-            appName={APPS.PHOTOS}
         twoFactorType={TwoFactorType.PASSKEY}
     />
 );
-}
+
+export default Page;

web/apps/photos/src/components/Sidebar/index.tsx

@@ -602,7 +602,7 @@ const UtilitySection: React.FC<UtilitySectionProps> = ({ closeSidebar }) => {
                 label={t("PREFERENCES")}
             />
             <RecoveryKey
-                appContext={appContext}
+                isMobile={appContext.isMobile}
                 show={recoverModalView}
                 onHide={closeRecoveryKeyModal}
                 somethingWentWrong={somethingWentWrong}

web/packages/accounts/pages/change-email.tsx

@@ -7,7 +7,6 @@ import {
     appNameToAppNameOld,
     type APPS,
 } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -22,6 +21,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Trans } from "react-i18next";
 import * as Yup from "yup";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName } = appContext;

web/packages/accounts/pages/change-password.tsx

@@ -14,7 +14,6 @@ import {
     convertBufferToBase64,
 } from "@ente/accounts/utils";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -34,6 +33,7 @@ import type { KEK, KeyAttributes, User } from "@ente/shared/user/types";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName } = appContext;

web/packages/accounts/pages/credentials.tsx

@@ -2,7 +2,6 @@ import { isDevBuild } from "@/next/env";
 import log from "@/next/log";
 import { ensure } from "@/utils/ensure";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
@@ -51,6 +50,7 @@ import {
     generateSRPSetupAttributes,
     loginViaSRP,
 } from "../services/srp";
+import type { PageProps } from "../types/page";
 import type { SRPAttributes } from "../types/srp";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {

web/packages/accounts/pages/generate.tsx

@@ -8,7 +8,6 @@ import { PAGES } from "@ente/accounts/constants/pages";
 import { configureSRP } from "@ente/accounts/services/srp";
 import { generateKeyAndSRPAttributes } from "@ente/accounts/utils/srp";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
@@ -30,6 +29,7 @@ import type { KeyAttributes, User } from "@ente/shared/user/types";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName, logout } = appContext;
@@ -105,7 +105,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
                 </VerticallyCentered>
             ) : recoverModalView ? (
                 <RecoveryKey
-                    appContext={appContext}
+                    isMobile={appContext.isMobile}
                     show={recoverModalView}
                     onHide={() => {
                         setRecoveryModalView(false);

web/packages/accounts/pages/login.tsx

@@ -1,4 +1,3 @@
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
@@ -7,6 +6,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Login } from "../components/Login";
 import { PAGES } from "../constants/pages";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName, showNavBar } = appContext;

web/packages/accounts/pages/passkeys/finish.tsx

@@ -4,9 +4,9 @@ import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
 import { LS_KEYS, getData, setData } from "@ente/shared/storage/localStorage";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 
-const Page = () => {
+const Page: React.FC = () => {
     const router = useRouter();
 
     const init = async () => {

web/packages/accounts/pages/recover.tsx

@@ -3,7 +3,6 @@ import { ensure } from "@/utils/ensure";
 import { sendOtt } from "@ente/accounts/api/user";
 import { PAGES } from "@ente/accounts/constants/pages";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -24,6 +23,7 @@ import type { KeyAttributes, User } from "@ente/shared/user/types";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../types/page";
 
 const bip39 = require("bip39");
 // mobile client library only supports english.

web/packages/accounts/pages/signup.tsx

@@ -1,12 +1,12 @@
 import { PAGES } from "@ente/accounts/constants/pages";
 import { LS_KEYS, getData } from "@ente/shared//storage/localStorage";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { SignUp } from "../components/SignUp";
+import type { PageProps } from "../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { appName } = appContext;

web/packages/accounts/pages/two-factor/recover.tsx

@@ -1,9 +1,10 @@
 import log from "@/next/log";
+import type { BaseAppContextT } from "@/next/types/app";
 import { ensure } from "@/utils/ensure";
 import { recoverTwoFactor, removeTwoFactor } from "@ente/accounts/api/user";
 import { PAGES } from "@ente/accounts/constants/pages";
 import { TwoFactorType } from "@ente/accounts/constants/twofactor";
-import type { PageProps } from "@ente/shared/apps/types";
+import { APPS } from "@ente/shared/apps/constants";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
@@ -29,7 +30,13 @@ const bip39 = require("bip39");
 // mobile client library only supports english.
 bip39.setDefaultWordlist("english");
 
-const Page: React.FC<PageProps> = ({
+export interface RecoverPageProps {
+    appContext: BaseAppContextT;
+    appName?: APPS;
+    twoFactorType?: TwoFactorType;
+}
+
+const Page: React.FC<RecoverPageProps> = ({
     appContext,
     twoFactorType = TwoFactorType.TOTP,
 }) => {

web/packages/accounts/pages/two-factor/setup.tsx

@@ -7,7 +7,6 @@ import VerifyTwoFactor, {
 import { TwoFactorSetup } from "@ente/accounts/components/two-factor/setup";
 import type { TwoFactorSecret } from "@ente/accounts/types/user";
 import { APP_HOMES, appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import LinkButton from "@ente/shared/components/LinkButton";
 import { encryptWithRecoveryKey } from "@ente/shared/crypto/helpers";
@@ -17,6 +16,7 @@ import Card from "@mui/material/Card";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../../types/page";
 
 export enum SetupMode {
     QR_CODE,

web/packages/accounts/pages/two-factor/verify.tsx

@@ -4,7 +4,6 @@ import VerifyTwoFactor, {
     type VerifyTwoFactorCallback,
 } from "@ente/accounts/components/two-factor/VerifyForm";
 import { PAGES } from "@ente/accounts/constants/pages";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
@@ -18,6 +17,7 @@ import { HttpStatusCode } from "axios";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import type { PageProps } from "../../types/page";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {
     const { logout } = appContext;

web/packages/accounts/pages/verify.tsx

@@ -1,7 +1,6 @@
 import { ensure } from "@/utils/ensure";
 import type { UserVerificationResponse } from "@ente/accounts/types/user";
 import { appNameToAppNameOld } from "@ente/shared/apps/constants";
-import type { PageProps } from "@ente/shared/apps/types";
 import { VerticallyCentered } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
@@ -31,6 +30,7 @@ import { Trans } from "react-i18next";
 import { putAttributes, sendOtt, verifyOtt } from "../api/user";
 import { PAGES } from "../constants/pages";
 import { configureSRP } from "../services/srp";
+import type { PageProps } from "../types/page";
 import type { SRPSetupAttributes } from "../types/srp";
 
 const Page: React.FC<PageProps> = ({ appContext }) => {

web/packages/accounts/types/page.ts

@@ -0,0 +1,16 @@
+import type { BaseAppContextT } from "@/next/types/app";
+
+/**
+ * The default type for pages exposed by this package.
+ *
+ * Some specific pages might extend this further (e.g. the two-factor/recover).
+ */
+export interface PageProps {
+    /**
+     * The common denominator AppContext.
+     *
+     * Within this package we do not have access to the context object declared
+     * with the app's code, so we need to take the context as a parameter.
+     */
+    appContext: BaseAppContextT;
+}

web/packages/shared/apps/types.ts

@@ -1,9 +0,0 @@
-import type { BaseAppContextT } from "@/next/types/app";
-import { TwoFactorType } from "@ente/accounts/constants/twofactor";
-import { APPS } from "./constants";
-
-export interface PageProps {
-    appContext: BaseAppContextT;
-    appName?: APPS;
-    twoFactorType?: TwoFactorType;
-}

web/packages/shared/components/RecoveryKey/index.tsx

@@ -1,5 +1,4 @@
 import { ensure } from "@/utils/ensure";
-import type { PageProps } from "@ente/shared/apps/types";
 import CodeBlock from "@ente/shared/components/CodeBlock";
 import DialogTitleWithCloseButton from "@ente/shared/components/DialogBox/TitleWithCloseButton";
 import { getRecoveryKey } from "@ente/shared/crypto/helpers";
@@ -22,13 +21,13 @@ bip39.setDefaultWordlist("english");
 const RECOVERY_KEY_FILE_NAME = "ente-recovery-key.txt";
 
 interface Props {
-    appContext: PageProps["appContext"];
+    isMobile: boolean;
     show: boolean;
     onHide: () => void;
     somethingWentWrong: any;
 }
 
-function RecoveryKey({ somethingWentWrong, appContext, ...props }: Props) {
+function RecoveryKey({ somethingWentWrong, isMobile, ...props }: Props) {
     const [recoveryKey, setRecoveryKey] = useState<string | null>(null);
 
     useEffect(() => {
@@ -54,7 +53,7 @@ function RecoveryKey({ somethingWentWrong, appContext, ...props }: Props) {
 
     return (
         <Dialog
-            fullScreen={appContext.isMobile}
+            fullScreen={isMobile}
             open={props.show}
             onClose={props.onHide}
             maxWidth="xs"