feat: create a more seamless PWA top bar (#6960)

apps/client/src/assets/manifest.webmanifest

@@ -7,6 +7,9 @@
     "display": "standalone",
     "scope": "/",
     "start_url": "/",
+    "display_override": [
+        "window-controls-overlay"
+    ],
     "icons": [
         {
             "src": "icon.png",

apps/client/src/desktop.ts

@@ -45,6 +45,10 @@ if (utils.isElectron()) {
     electronContextMenu.setupContextMenu();
 }
 
+if (utils.isPWA()) {
+    initPWATopbarColor();
+}
+
 function initOnElectron() {
     const electron: typeof Electron = utils.dynamicRequire("electron");
     electron.ipcRenderer.on("globalShortcut", async (event, actionName) => appContext.triggerCommand(actionName));
@@ -113,3 +117,20 @@ function initDarkOrLightMode(style: CSSStyleDeclaration) {
     const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
     nativeTheme.themeSource = themeSource;
 }
+
+function initPWATopbarColor() {
+    const tracker = $("#background-color-tracker");
+
+    if (tracker.length) {
+        const applyThemeColor = () => {
+            let meta = $("meta[name='theme-color']");
+            if (!meta.length) {
+                meta = $(`<meta name="theme-color">`).appendTo($("head"));
+            }
+            meta.attr("content", tracker.css("color"));
+        };
+
+        tracker.on("transitionend", applyThemeColor);
+        applyThemeColor();
+    }
+}

apps/client/src/services/utils.ts

@@ -128,6 +128,18 @@ export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
+/**
+ * Returns `true` if the client is running as a PWA, otherwise `false`.
+ */
+export function isPWA() {
+    return (
+        window.matchMedia('(display-mode: standalone)').matches
+        || window.matchMedia('(display-mode: window-controls-overlay)').matches
+        || window.navigator.standalone
+        || window.navigator.windowControlsOverlay
+    );
+}
+
 export function isMac() {
     return navigator.platform.indexOf("Mac") > -1;
 }
@@ -869,6 +881,7 @@ export default {
     localNowDateTime,
     now,
     isElectron,
+    isPWA,
     isMac,
     isCtrlKey,
     assertArguments,

apps/server/src/assets/views/desktop.ejs

@@ -29,6 +29,10 @@
     }
 </style>
 
+<!-- Required for match the PWA's top bar color with the theme -->
+<!-- This works even when the user directly changes --root-background in CSS -->
+<div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
+
 <!-- Required for correct loading of scripts in Electron -->
 <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>