feat(frontend): overlay window controls

Might need manual intervention in browsers, e.g.
https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay#enable-the-window-controls-overlay-api-in-microsoft-edge

7 files changed, 140 insertions, 2 deletions

diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index aa453cd0..448b9710 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -40,8 +40,10 @@
     "@material-icons/svg": "^1.0.32",
     "@mui/icons-material": "5.8.4",
     "@mui/material": "5.10.1",
+    "@types/lodash-es": "^4.17.6",
     "ansi-styles": "^6.1.0",
     "escape-string-regexp": "^5.0.0",
+    "lodash-es": "^4.17.21",
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
     "mobx": "^6.6.1",
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 5ad80d40..4424e6b3 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -1,11 +1,47 @@
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import React from 'react';
+import { throttle } from 'lodash-es';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import ToggleDarkModeButton from './ToggleDarkModeButton';
 
+function useWindowControlsOverlayVisible(): boolean {
+  const [windowControlsOverlayVisible, setWindowControlsOverlayVisible] =
+    useState(false);
+  const updateWindowControlsOverlayVisible = useMemo(
+    () =>
+      throttle(
+        ({ visible }: WindowControlsOverlayGeometryChangeEvent) =>
+          setWindowControlsOverlayVisible(visible),
+        250,
+      ),
+    [],
+  );
+  useEffect(() => {
+    if ('windowControlsOverlay' in navigator) {
+      const { windowControlsOverlay } = navigator;
+      setWindowControlsOverlayVisible(windowControlsOverlay.visible);
+      windowControlsOverlay.addEventListener(
+        'geometrychange',
+        updateWindowControlsOverlayVisible,
+      );
+      return () => {
+        windowControlsOverlay.removeEventListener(
+          'geometrychange',
+          updateWindowControlsOverlayVisible,
+        );
+      };
+    }
+    // Nothing to clean up if `windowControlsOverlay` is unsupported.
+    return () => {};
+  }, [updateWindowControlsOverlayVisible]);
+  return windowControlsOverlayVisible;
+}
+
 export default function TopBar(): JSX.Element {
+  const overlayVisible = useWindowControlsOverlayVisible();
+
   return (
     <AppBar
       position="static"
@@ -14,9 +50,27 @@ export default function TopBar(): JSX.Element {
       sx={(theme) => ({
         background: theme.palette.outer.background,
         borderBottom: `1px solid ${theme.palette.outer.border}`,
+        appRegion: 'drag',
+        '.MuiButtonBase-root': {
+          appRegion: 'no-drag',
+        },
       })}
     >
-      <Toolbar>
+      <Toolbar
+        sx={{
+          ...(overlayVisible
+            ? {
+                marginLeft: 'env(titlebar-area-x, 0)',
+                marginTop: 'env(titlebar-area-y, 0)',
+                width: 'env(titlebar-area-width, 100%)',
+                minHeight: 'env(titlebar-area-height, auto)',
+              }
+            : {
+                minHeight: 'auto',
+              }),
+          py: 0.5,
+        }}
+      >
         <Typography variant="h6" component="h1" flexGrow={1}>
           Refinery
         </Typography>
diff --git a/subprojects/frontend/src/WindowControlsOverlayColor.tsx b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
new file mode 100644
index 00000000..14eda566
--- /dev/null
+++ b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material/styles';
+import { useEffect } from 'react';
+
+export default function WindowControlsOverlayColor(): null {
+  const {
+    palette: {
+      outer: { background },
+    },
+  } = useTheme();
+  useEffect(() => {
+    document.head
+      .querySelectorAll('meta[name="theme-color"]')
+      .forEach((meta) => meta.remove());
+    const meta = document.createElement('meta');
+    meta.name = 'theme-color';
+    meta.content = background;
+    document.head.appendChild(meta);
+  }, [background]);
+
+  return null;
+}
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index a65821ef..460f6f77 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -6,6 +6,7 @@ import { createRoot } from 'react-dom/client';
 import Loading from './Loading';
 import RegisterServiceWorker from './RegisterServiceWorker';
 import RootStore, { RootStoreProvider } from './RootStore';
+import WindowControlsOverlayColor from './WindowControlsOverlayColor';
 import ThemeProvider from './theme/ThemeProvider';
 import getLogger from './utils/getLogger';
 
@@ -67,6 +68,7 @@ const app = (
     <RootStoreProvider rootStore={rootStore}>
       <ThemeProvider>
         <CssBaseline enableColorScheme />
+        <WindowControlsOverlayColor />
         <SnackbarProvider>
           <RegisterServiceWorker />
           <Suspense fallback={<Loading />}>
diff --git a/subprojects/frontend/types/windowControlsOverlay.d.ts b/subprojects/frontend/types/windowControlsOverlay.d.ts
new file mode 100644
index 00000000..d8f3182f
--- /dev/null
+++ b/subprojects/frontend/types/windowControlsOverlay.d.ts
@@ -0,0 +1,32 @@
+interface WindowControlsOverlayGeometryChangeEvent extends Event {
+  titlebarAreaRect: DOMRect;
+
+  visible: boolean;
+}
+
+interface WindowControlsOverlay {
+  readonly visible: boolean;
+
+  getTitlebarAreaRect(): DOMRect;
+
+  addEventListener(
+    type: 'geometrychange',
+    listener: (
+      this: WindowControlsOverlay,
+      event: WindowControlsOverlayGeometryChangeEvent,
+    ) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  );
+
+  removeEventListener(
+    type: 'geometrychange',
+    listener: (
+      this: WindowControlsOverlay,
+      event: WindowControlsOverlayGeometryChangeEvent,
+    ) => unknown,
+  );
+}
+
+interface Navigator {
+  windowControlsOverlay?: WindowControlsOverlay;
+}
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index 6ec2d513..f2e0f15c 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -111,6 +111,8 @@ export default defineConfig({
         description:
           'An efficient graph sovler for generating well-formed models',
         theme_color: '#21252b',
+        display_override: ['window-controls-overlay'],
+        display: 'standalone',
         background_color: '#21252b',
         icons: [
           {
diff --git a/yarn.lock b/yarn.lock
index 472025aa..ca217f1a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2010,6 +2010,7 @@ __metadata:
     "@mui/material": 5.10.1
     "@types/eslint": ^8.4.6
     "@types/html-minifier-terser": ^7.0.0
+    "@types/lodash-es": ^4.17.6
     "@types/node": ^18.7.8
     "@types/prettier": ^2.7.0
     "@types/react": ^18.0.17
@@ -2031,6 +2032,7 @@ __metadata:
     eslint-plugin-react: ^7.30.1
     eslint-plugin-react-hooks: ^4.6.0
     html-minifier-terser: ^7.0.0
+    lodash-es: ^4.17.21
     loglevel: ^1.8.0
     loglevel-plugin-prefix: ^0.8.4
     mobx: ^6.6.1
@@ -2180,6 +2182,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash-es@npm:^4.17.6":
+  version: 4.17.6
+  resolution: "@types/lodash-es@npm:4.17.6"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: 9bd239dd525086e278821949ce12fbdd4f100a060fed9323fc7ad5661113e1641f28a7ebab617230ed3474680d8f4de705c1928b48252bb684be6ec9eed715db
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.184
+  resolution: "@types/lodash@npm:4.14.184"
+  checksum: 6d9a4d67f7f9d0ec3fd21174f3dd3d00629dc1227eb469450eace53adbc1f7e2330699c28d0fe093e5f0fef0f0e763098be1f779268857213224af082b62be21
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*, @types/node@npm:^18.7.8":
   version: 18.7.8
   resolution: "@types/node@npm:18.7.8"
@@ -4849,6 +4867,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"