fix(ui): add standalone PWA browser controls

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-06-01 17:28:34 +00:00
parent 96feaa331a
commit 7ce96e36a0
5 changed files with 216 additions and 0 deletions
@@ -0,0 +1,26 @@
+export const CHROMELESS_DISPLAY_MODES = ["standalone", "fullscreen", "window-controls-overlay"] as const;
+
+type DisplayMode = (typeof CHROMELESS_DISPLAY_MODES)[number];
+type MatchDisplayMode = (query: string) => Pick<MediaQueryList, "matches">;
+
+function displayModeQuery(mode: DisplayMode) {
+  return `(display-mode: ${mode})`;
+}
+
+function defaultMatchMedia(): MatchDisplayMode | undefined {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return undefined;
+  return window.matchMedia.bind(window);
+}
+
+export function isChromelessDisplayMode(
+  matchMedia: MatchDisplayMode | undefined = defaultMatchMedia(),
+  iosStandalone: boolean | undefined =
+    typeof navigator === "undefined"
+      ? undefined
+      : (navigator as Navigator & { standalone?: boolean }).standalone,
+) {
+  if (iosStandalone === true) return true;
+  if (!matchMedia) return false;
+
+  return CHROMELESS_DISPLAY_MODES.some((mode) => matchMedia(displayModeQuery(mode)).matches);
+}