Adjust safe area, make small refactoring

package-lock.json

@@ -104,7 +104,6 @@
         "jest-environment-jsdom": "^30.0.0",
         "lint-staged": "^16.1.2",
         "mrmime": "^2.0.0",
-        "os-browserify": "^0.3.0",
         "postcss": "^8.5.1",
         "postcss-loader": "^8.1.1",
         "prettier": "^3.5.3",
@@ -19090,13 +19089,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/os-browserify": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",

package.json

@@ -60,7 +60,6 @@
     "jest-environment-jsdom": "^30.0.0",
     "lint-staged": "^16.1.2",
     "mrmime": "^2.0.0",
-    "os-browserify": "^0.3.0",
     "postcss": "^8.5.1",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.5.3",

src/client/DarkModeButton.ts

@@ -20,7 +20,7 @@ export class DarkModeButton extends LitElement {
     return html`
       <button
         title="Toggle Dark Mode"
-        class="absolute top-0 safe-top right-0 md:top-[10px] md:right-[10px] border-none bg-none cursor-pointer text-2xl"
+        class="absolute top-[calc(0px+env(safe-area-inset-top))] right-0 md:top-[10px] md:right-[10px] border-none bg-none cursor-pointer text-2xl"
         @click=${() => this.toggleDarkMode()}
       >
         ${this.darkMode ? "☀️" : "🌙"}

src/client/discord-redirect.html

@@ -11,11 +11,11 @@
       if (window.location.hash.startsWith("#token=")) {
         const token = window.location.hash.substring("#token=".length);
         const redirectUrl = `${appDeepLink}?token=${encodeURIComponent(token)}`;
-        window.location.href = redirectUrl;
+        window.location.replace(redirectUrl);
       } else {
         const error = window.location.hash.substring(1);
         const redirectUrl = `${appDeepLink}?${error}`;
-        window.location.href = redirectUrl;
+        window.location.replace(redirectUrl);
       }
     </script>
   </body>

src/client/graphics/layers/GameLeftSidebar.ts

@@ -69,7 +69,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
   render() {
     return html`
       <aside
-        class=${`fixed top-[50px] lg:top-[10px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
+        class=${`fixed top-[calc(50px+env(safe-area-inset-top))] lg:top-[10px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
           this.isVisible ? "translate-x-0" : "-translate-x-full"
         }`}
       >

src/client/graphics/layers/TopBar.ts

@@ -54,7 +54,7 @@ export class TopBar extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed top-0 safe-top z-50 bg-slate-800/40 backdrop-blur-sm shadow-xs text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
+        class="fixed top-[calc(0px+env(safe-area-inset-top))] z-50 bg-slate-800/40 backdrop-blur-sm shadow-xs text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
       >
         <!-- Pop section (takes 2 columns on desktop) -->
         <div

src/client/styles.css

@@ -25,9 +25,6 @@
   .safe-pb {
     padding-bottom: env(safe-area-inset-bottom);
   }
-  .safe-top {
-    top: env(safe-area-inset-top);
-  }
   .safe-mb {
     margin-bottom: env(safe-area-inset-bottom);
   }

webpack.config.js

@@ -7,7 +7,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 import webpack from "webpack";
 
-export function getLocalIP() {
+function getLocalIP() {
   const interfaces = os.networkInterfaces();
   for (const interfaceName in interfaces) {
     const networkInterface = interfaces[interfaceName];
@@ -125,9 +125,6 @@ export default async (env, argv) => {
           "node_modules/protobufjs/minimal.js",
         ),
       },
-      fallback: {
-        os: path.resolve(__dirname, "node_modules/os-browserify/browser.js"),
-      },
     },
     plugins: [
       new HtmlWebpackPlugin({