Add global admin user-view preview

frontend/app/lib/viewMode.ts

@@ -0,0 +1,48 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+const USER_VIEW_STORAGE_KEY = 'magent_user_view_preview'
+const USER_VIEW_EVENT = 'magent:user-view-change'
+
+const readUserViewPreview = () => {
+  if (typeof window === 'undefined') return false
+  return window.sessionStorage.getItem(USER_VIEW_STORAGE_KEY) === '1'
+}
+
+const applyDocumentMode = (enabled: boolean) => {
+  if (typeof document === 'undefined') return
+  document.documentElement.dataset.userView = enabled ? 'true' : 'false'
+}
+
+export const setUserViewPreview = (enabled: boolean) => {
+  if (typeof window === 'undefined') return
+  if (enabled) {
+    window.sessionStorage.setItem(USER_VIEW_STORAGE_KEY, '1')
+  } else {
+    window.sessionStorage.removeItem(USER_VIEW_STORAGE_KEY)
+  }
+  applyDocumentMode(enabled)
+  window.dispatchEvent(new CustomEvent(USER_VIEW_EVENT, { detail: { enabled } }))
+}
+
+export const useUserViewPreview = () => {
+  const [enabled, setEnabled] = useState(false)
+
+  useEffect(() => {
+    const sync = () => {
+      const nextValue = readUserViewPreview()
+      applyDocumentMode(nextValue)
+      setEnabled(nextValue)
+    }
+    sync()
+    window.addEventListener(USER_VIEW_EVENT, sync)
+    window.addEventListener('storage', sync)
+    return () => {
+      window.removeEventListener(USER_VIEW_EVENT, sync)
+      window.removeEventListener('storage', sync)
+    }
+  }, [])
+
+  return enabled
+}