From 08af6ae27cc03b078d0b01a7a4fa97df298c7aad Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 11 Dec 2024 22:54:23 +0000
Subject: [PATCH] add status bar shadow

---
 src/screens/Profile/Header/Shell.tsx          |  2 +
 .../Profile/Header/StatusBarShadow.tsx        | 57 +++++++++++++++++++
 .../Profile/Header/StatusBarShadow.web.tsx    |  3 +
 src/view/com/pager/PagerHeaderContext.tsx     |  3 +-
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/screens/Profile/Header/StatusBarShadow.tsx
 create mode 100644 src/screens/Profile/Header/StatusBarShadow.web.tsx

diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx
index e6e6fc3dd2..dedbfd201e 100644
--- a/src/screens/Profile/Header/Shell.tsx
+++ b/src/screens/Profile/Header/Shell.tsx
@@ -23,6 +23,7 @@ import {LabelsOnMe} from '#/components/moderation/LabelsOnMe'
 import {ProfileHeaderAlerts} from '#/components/moderation/ProfileHeaderAlerts'
 import {GrowableAvatar} from './GrowableAvatar'
 import {GrowableBanner} from './GrowableBanner'
+import {StatusBarShadow} from './StatusBarShadow'
 
 interface Props {
   profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>
@@ -101,6 +102,7 @@ let ProfileHeaderShell = ({
       <View
         pointerEvents={isIOS ? 'auto' : 'box-none'}
         style={[a.relative, {height: 150}]}>
+        <StatusBarShadow />
         <GrowableBanner
           backButton={
             <>
diff --git a/src/screens/Profile/Header/StatusBarShadow.tsx b/src/screens/Profile/Header/StatusBarShadow.tsx
new file mode 100644
index 0000000000..1ff99f2019
--- /dev/null
+++ b/src/screens/Profile/Header/StatusBarShadow.tsx
@@ -0,0 +1,57 @@
+import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {LinearGradient} from 'expo-linear-gradient'
+
+import {isIOS} from '#/platform/detection'
+import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
+import {atoms as a} from '#/alf'
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient)
+
+export function StatusBarShadow() {
+  const {top: topInset} = useSafeAreaInsets()
+  const pagerContext = usePagerHeaderContext()
+
+  if (isIOS && pagerContext) {
+    const {scrollY} = pagerContext
+    return <StatusBarShadowInnner scrollY={scrollY} />
+  }
+
+  return (
+    <LinearGradient
+      colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)']}
+      style={[
+        a.absolute,
+        a.z_10,
+        {height: topInset, top: 0, left: 0, right: 0},
+      ]}
+    />
+  )
+}
+
+function StatusBarShadowInnner({scrollY}: {scrollY: SharedValue<number>}) {
+  const {top: topInset} = useSafeAreaInsets()
+
+  const animatedStyle = useAnimatedStyle(() => {
+    console.log(scrollY.get())
+    return {
+      transform: [
+        {
+          translateY: Math.min(0, scrollY.get()),
+        },
+      ],
+    }
+  })
+
+  return (
+    <AnimatedLinearGradient
+      colors={['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)']}
+      style={[
+        animatedStyle,
+        a.absolute,
+        a.z_10,
+        {height: topInset, top: 0, left: 0, right: 0},
+      ]}
+    />
+  )
+}
diff --git a/src/screens/Profile/Header/StatusBarShadow.web.tsx b/src/screens/Profile/Header/StatusBarShadow.web.tsx
new file mode 100644
index 0000000000..cd79871ea7
--- /dev/null
+++ b/src/screens/Profile/Header/StatusBarShadow.web.tsx
@@ -0,0 +1,3 @@
+export function StatusBarShadow() {
+  return null
+}
diff --git a/src/view/com/pager/PagerHeaderContext.tsx b/src/view/com/pager/PagerHeaderContext.tsx
index 235da50fec..c979f7a6dd 100644
--- a/src/view/com/pager/PagerHeaderContext.tsx
+++ b/src/view/com/pager/PagerHeaderContext.tsx
@@ -9,7 +9,8 @@ export const PagerHeaderContext = React.createContext<{
 } | null>(null)
 
 /**
- * Passes information about the
+ * Passes information about the scroll position and header height down via
+ * context for the pager header to consume.
  *
  * @platform ios, android
  */