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

3 files changed, 79 insertions, 2 deletions

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 />}>