[Layout] Bleed profile banner into safe area (#6967)

* bleed profile banner into safe area

(cherry picked from commit 50b3a4d0c6fd94b583ffe4efa65de35c81ae7f4e)

* pointer events none when hidden

(cherry picked from commit bae2c7b2dd6d7f858a98812196628308c0877755)

* fix web

(cherry picked from commit e3f9597170375f2903b6e567b963f008ec95aed1)

* add status bar shadow

* rm log

* rm mini header

* speed up animation

* pass bool rather than int in light status bar

src/state/shell/light-status-bar.tsx

@@ -0,0 +1,45 @@
+import {createContext, useContext, useEffect, useState} from 'react'
+
+import {isWeb} from '#/platform/detection'
+import {IS_DEV} from '#/env'
+
+const LightStatusBarRefCountContext = createContext<boolean>(false)
+const SetLightStatusBarRefCountContext = createContext<React.Dispatch<
+  React.SetStateAction<number>
+> | null>(null)
+
+export function useLightStatusBar() {
+  return useContext(LightStatusBarRefCountContext)
+}
+
+export function useSetLightStatusBar(enabled: boolean) {
+  const setRefCount = useContext(SetLightStatusBarRefCountContext)
+  useEffect(() => {
+    // noop on web -sfn
+    if (isWeb) return
+
+    if (!setRefCount) {
+      if (IS_DEV)
+        console.error(
+          'useLightStatusBar was used without a SetLightStatusBarRefCountContext provider',
+        )
+      return
+    }
+    if (enabled) {
+      setRefCount(prev => prev + 1)
+      return () => setRefCount(prev => prev - 1)
+    }
+  }, [enabled, setRefCount])
+}
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [refCount, setRefCount] = useState(0)
+
+  return (
+    <SetLightStatusBarRefCountContext.Provider value={setRefCount}>
+      <LightStatusBarRefCountContext.Provider value={refCount > 0}>
+        {children}
+      </LightStatusBarRefCountContext.Provider>
+    </SetLightStatusBarRefCountContext.Provider>
+  )
+}