fix(stage-web): nprogress disabled when PWA

apps/stage-web/src/styles/main.css

@@ -3,7 +3,6 @@
 :root {
   --bg-color-light: rgb(255 255 255);
   --bg-color-dark: rgb(18 18 18);
-  --progress-bar-color: rgb(244 114 182);
   --bg-color: var(--bg-color-light);
 }
 
@@ -31,7 +30,7 @@ html.dark {
 }
 
 #nprogress .bar {
-  background: var(--progress-bar-color);
+  background: color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 70%, oklch(50% 0 360));
   opacity: 0.75;
   position: fixed;
   z-index: 1031;
@@ -40,3 +39,16 @@ html.dark {
   width: 100%;
   height: 2px;
 }
+
+.dark #nprogress .bar {
+  background: `color-mix(in srgb, oklch(95% var(--chromatic-chroma-900) calc(var(--chromatic-hue) + ${0})) 90%, oklch(90% 0 360))`;
+}
+
+@media (display-mode: standalone) {
+  #nprogress {
+    display: none;
+  }
+  #nprogress .bar {
+    display: none;
+  }
+}

apps/stage-web/src/utils/platform.ts

@@ -1,3 +1,18 @@
 export function isPlatformTamagotchi() {
   return import.meta.env.MODE === 'tamagotchi'
 }
+
+export function isStandalone() {
+  if (import.meta.env.SSR) {
+    return false
+  }
+  if (!('window' in globalThis && globalThis.window != null)) {
+    return false
+  }
+
+  const mediaStandalone = ('matchMedia' in window) && window.matchMedia('(display-mode: standalone)').matches
+  const navigatorStandalone = ('navigator' in window && 'standalone' in window.navigator && window.navigator.standalone)
+  const referrerStandalone = document.referrer.includes('android-app://')
+
+  return mediaStandalone || navigatorStandalone || referrerStandalone
+}

cspell.config.yaml

@@ -135,6 +135,7 @@ words:
   - nolyfill
   - nomic
   - novita
+  - nprogress
   - nuxi
   - nuxt
   - nuxtjs
@@ -189,6 +190,7 @@ words:
   - Sniglet
   - sonner
   - specta
+  - srgb
   - ssml
   - staticlib
   - stepfun