feat: refine mobile dashboard experience

apps/nextjs/src/components/board/mobile/mobile-dialog-stack.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import type { RefObject } from "react";
+import { useEffect, useState } from "react";
+
+const getDialogElement = (element: HTMLElement | null) => {
+  if (!element) return null;
+  if (element.matches('[role="dialog"]')) return element;
+  return element.closest<HTMLElement>('[role="dialog"]') ?? element.querySelector<HTMLElement>('[role="dialog"]');
+};
+
+const isOpenDialog = (element: Element) =>
+  element.getAttribute("aria-hidden") !== "true" &&
+  element.getAttribute("data-hidden") !== "true" &&
+  element.getAttribute("data-state") !== "closed" &&
+  !element.hasAttribute("hidden");
+
+export const hasOpenDialogOutside = (element: HTMLElement | null, root: ParentNode = document) => {
+  const currentDialog = getDialogElement(element);
+
+  return Array.from(root.querySelectorAll('[role="dialog"]')).some(
+    (dialog) => dialog !== currentDialog && isOpenDialog(dialog),
+  );
+};
+
+export const useHasNestedDialog = (opened: boolean, dialogRef: RefObject<HTMLDivElement | null>) => {
+  const [hasNestedDialog, setHasNestedDialog] = useState(false);
+
+  useEffect(() => {
+    if (!opened || typeof MutationObserver === "undefined") return;
+
+    const update = () => setHasNestedDialog(hasOpenDialogOutside(dialogRef.current));
+    update();
+
+    const observer = new MutationObserver(update);
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden", "data-hidden", "data-state", "hidden"],
+    });
+
+    return () => observer.disconnect();
+  }, [dialogRef, opened]);
+
+  return opened && hasNestedDialog;
+};