Scaffold

web/apps/locker/.env

@@ -0,0 +1 @@
+NEXT_TELEMETRY_DISABLED = 1

web/apps/locker/eslint.config.mjs

@@ -0,0 +1 @@
+export { default } from "ente-build-config/eslintrc-next-app.mjs";

web/apps/locker/next.config.js

@@ -0,0 +1 @@
+module.exports = require("ente-base/next.config.base.js");

web/apps/locker/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "locker",
+    "version": "0.0.0",
+    "private": true,
+    "dependencies": {
+        "ente-base": "*"
+    },
+    "devDependencies": {
+        "ente-build-config": "*"
+    }
+}

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

@@ -0,0 +1,24 @@
+import "@fontsource-variable/inter";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { staticAppTitle } from "ente-base/app";
+import { CustomHead } from "ente-base/components/Head";
+import { useSetupLogs } from "ente-base/components/utils/hooks-app";
+import { lockerTheme } from "ente-base/components/utils/theme";
+import type { AppProps } from "next/app";
+import React from "react";
+
+const App: React.FC<AppProps> = ({ Component, pageProps }) => {
+    useSetupLogs({ disableDiskLogs: true });
+
+    // We don't provide BaseContext. Nothing in the cast app needs it yet.
+
+    return (
+        <ThemeProvider theme={lockerTheme}>
+            <CustomHead title={staticAppTitle} />
+            <CssBaseline enableColorScheme />
+            <Component {...pageProps} />
+        </ThemeProvider>
+    );
+};
+
+export default App;

web/apps/locker/src/pages/index.tsx

@@ -0,0 +1,14 @@
+import { Stack, Typography } from "@mui/material";
+import { EnteLogo } from "ente-base/components/EnteLogo";
+import React from "react";
+
+const Page: React.FC = () => {
+    return (
+        <Stack sx={{ justifyContent: "center", gap: 2 }}>
+            <EnteLogo height={45} />
+            <Typography variant="h2">Coming soon</Typography>
+        </Stack>
+    );
+};
+
+export default Page;

web/apps/locker/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "ente-build-config/tsconfig-next.json",
+    "compilerOptions": {
+        /* Set the base directory from which to resolve bare module names. */
+        "baseUrl": "./src"
+    },
+    "include": [
+        "src",
+        "next-env.d.ts",
+        "../../packages/base/global-electron.d.ts",
+        "../../packages/base/components/utils/mui-theme.d.ts"
+    ]
+}

web/package.json

@@ -11,6 +11,7 @@
         "build:accounts": "yarn workspace accounts next build",
         "build:auth": "yarn workspace auth next build",
         "build:cast": "yarn workspace cast next build",
+        "build:locker": "yarn workspace locker next build",
         "build:payments": "yarn workspace payments build",
         "build:photos": "yarn workspace photos next build",
         "dev": "yarn dev:photos",
@@ -18,6 +19,7 @@
         "dev:albums": "yarn workspace photos next dev -p 3002",
         "dev:auth": "yarn workspace auth next dev -p 3003",
         "dev:cast": "yarn workspace cast next dev -p 3004",
+        "dev:locker": "yarn workspace locker next dev -p 3005",
         "dev:payments": "yarn workspace payments dev",
         "dev:photos": "yarn workspace photos next dev -p 3000",
         "lint": "concurrently --names 'prettier,eslint,tsc' \"yarn prettier --check --log-level warn .\" \"yarn workspaces run eslint\" \"yarn workspaces run tsc\"",

web/packages/accounts/services/redirect.ts

@@ -9,6 +9,7 @@ export const appHomeRoute: string = {
     accounts: "/passkeys",
     auth: "/auth",
     cast: "/" /* The cast app doesn't use this, this is an arbitrary value. */,
+    locker: "/" /* The locker app also doesn't use this. */,
     photos: "/gallery",
 }[appName];
 

web/packages/base/app.ts

@@ -1,4 +1,10 @@
-export const appNames = ["accounts", "auth", "cast", "photos"] as const;
+export const appNames = [
+    "accounts",
+    "auth",
+    "cast",
+    "locker",
+    "photos",
+] as const;
 
 /**
  * Arbitrary names that we used as keys for indexing various constants
@@ -56,6 +62,7 @@ export const staticAppTitle = {
     accounts: "Ente Accounts",
     auth: "Ente Auth",
     cast: "Ente Photos",
+    locker: "Ente Locker",
     photos: "Ente Photos",
 }[appName];
 
@@ -77,6 +84,7 @@ export const clientPackageName = (() => {
         accounts: "io.ente.accounts.web",
         auth: "io.ente.auth.web",
         cast: "io.ente.cast.web",
+        locker: "io.ente.locker.web",
         photos: "io.ente.photos.web",
     }[appName];
 })();

web/packages/base/components/utils/theme.ts

@@ -125,7 +125,12 @@ const getColors = (appName: AppName) => ({
         },
     },
     ...{
-        accent: appName == "auth" ? _colors.accentAuth : _colors.accentPhotos,
+        accent:
+            appName == "auth"
+                ? _colors.accentAuth
+                : appName == "locker"
+                  ? _colors.accentLocker
+                  : _colors.accentPhotos,
     },
 });
 
@@ -139,6 +144,7 @@ const getColors = (appName: AppName) => ({
 const _colors = {
     accentPhotos: { dark: "#00b33c", main: "#1db954", light: "#01de4d" },
     accentAuth: { dark: "#8e0fcb", main: "#9610d6", light: "#8e2de2" },
+    accentLocker: { dark: "#615bff", main: "#5ba8ff", light: "#5bf9ff" },
     fixed: {
         white: "#fff",
         black: "#000",
@@ -764,3 +770,8 @@ export const authTheme = getTheme("auth");
  * This is the same as the dark theme for the photos app.
  */
 export const castTheme = getTheme("cast");
+
+/**
+ * The MUI {@link Theme} to use for the locker app.
+ */
+export const lockerTheme = getTheme("locker");