From f58a7fafa12269035d440cfa2d8cb1dbd562305f Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 10 Dec 2024 21:09:50 -0600
Subject: [PATCH] Playing around

---
 src/components/Button.tsx                     |   1 +
 src/components/Layout/Header/index.tsx        |   3 +-
 .../components/ProfileSubpageHeader.tsx       | 250 +++++++++++-------
 3 files changed, 164 insertions(+), 90 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 871c17ed51..db51e51f2d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -76,6 +76,7 @@ export type ButtonProps = Pick<
   | 'onHoverOut'
   | 'onPressIn'
   | 'onPressOut'
+  | 'onLayout'
 > &
   AccessibilityProps &
   VariantProps & {
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
index 321f7201f7..d6f8f1c1f9 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -74,6 +74,7 @@ export function Content({
       style={[
         a.flex_1,
         a.justify_center,
+        a.z_20,
         isIOS && align === 'platform' && a.align_center,
         {minHeight: HEADER_SLOT_SIZE},
       ]}>
@@ -88,7 +89,7 @@ export function Slot({children}: {children?: React.ReactNode}) {
   return (
     <View
       style={[
-        a.z_50,
+        a.z_10,
         {
           width: HEADER_SLOT_SIZE,
         },
diff --git a/src/screens/Profile/components/ProfileSubpageHeader.tsx b/src/screens/Profile/components/ProfileSubpageHeader.tsx
index 7b56405227..0a27350112 100644
--- a/src/screens/Profile/components/ProfileSubpageHeader.tsx
+++ b/src/screens/Profile/components/ProfileSubpageHeader.tsx
@@ -1,16 +1,20 @@
+import {useRef, useState} from 'react'
 import {View, Text as RNText} from 'react-native'
 import {useLingui} from '@lingui/react'
 import {msg, plural, Trans} from '@lingui/macro'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
+import {isWeb} from '#/platform/detection'
 import * as Layout from '#/components/Layout'
-import {atoms as a, useTheme, useBreakpoints, web} from '#/alf'
+import {atoms as a, useTheme, useBreakpoints, web, useGutters} from '#/alf'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Text} from '#/components/Typography'
 import {Pin_Stroke2_Corner0_Rounded as Pin} from '#/components/icons/Pin'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 import {Button, ButtonIcon} from '#/components/Button'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import * as Menu from '#/components/Menu'
 
 export function ProfileSubpageHeader({
   title,
@@ -27,99 +31,167 @@ export function ProfileSubpageHeader({
   const {gtPhone, gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const {top} = useSafeAreaInsets()
+  const [open, setOpen] = useState(false)
+  const baseGutters = useGutters(['compact'])
 
-  return (
-    <Layout.Center
-      style={[t.atoms.bg, a.z_10, {paddingTop: top}, web([a.sticky, a.z_10, {top: 0}])]}
-    >
-      <Layout.Header.Outer>
-        <Layout.Header.BackButton />
-        <Layout.Header.Content align="left">
-          <Button
-            label={_(msg`Open feed info screen`)}
-            style={[
-              a.justify_start,
-              {
-                paddingVertical: 6,
-                paddingHorizontal: 8,
-                paddingRight: 12,
-              },
-            ]}>
-            {({hovered}) => (
-              <>
-                <View
-                  style={[
-                    a.absolute,
-                    a.inset_0,
-                    a.rounded_sm,
-                    a.transition_transform,
-                    t.atoms.bg_contrast_25,
-                    hovered && {
-                      transform: [{scaleX: 1.01}, {scaleY: 1.1}],
-                    },
-                  ]}
-                />
+  const outerSize = useRef({width: 0, height: 0})
+  const buttonSize = useRef({width: 0, height: 0})
+  const outerOffset = ((outerSize.current.width - buttonSize.current.width) / 2) - baseGutters.paddingLeft
 
-                <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                  {avatar && (
-                    <UserAvatar size={32} type="algo" avatar={avatar} />
-                  )}
+  return (
+    <>
+      {open && !isWeb && (
+        <View style={[
+          a.fixed,
+          a.inset_0,
+          a.z_40,
+          { backgroundColor: t.palette.black, opacity: 0.7 },
+        ]} />
+      )}
 
-                  <View style={[a.flex_1]}>
-                    {/* Should roughly matchl Layout.Header.TitleText */}
-                    <Text
-                      style={[
-                        a.text_md,
-                        a.font_heavy,
-                        a.leading_tight,
-                        gtMobile && a.text_lg,
-                      ]}
-                      numberOfLines={2}>
-                      {title}
-                    </Text>
-                    {/* Should roughly matchl Layout.Header.SubtitleText */}
-                    <Text
-                      style={[
-                        a.flex_1,
-                        a.text_xs,
-                        a.leading_snug,
-                        t.atoms.text_contrast_medium,
-                        gtPhone && a.text_sm,
-                      ]}>
-                      <RNText numberOfLines={1}>
-                        <Trans>By {sanitizeHandle(creator.handle, '@')}</Trans>
-                      </RNText>
-                      {' • '}
-                      <RNText numberOfLines={1}>
-                        {plural(likeCount, {
-                          one: '# like',
-                          other: '# likes',
-                        })}
-                      </RNText>
-                    </Text>
+      <Layout.Center
+        style={[t.atoms.bg, a.z_50, {paddingTop: top}, web([a.sticky, {top: 0}])]}
+        onLayout={({nativeEvent}) => {
+          outerSize.current = {
+            width: nativeEvent.layout.width,
+            height: nativeEvent.layout.height,
+          }
+        }}
+      >
+        <Layout.Header.Outer>
+          <Layout.Header.BackButton />
+          <Layout.Header.Content align="left">
+            <Button
+              label={_(msg`Open feed info screen`)}
+              style={[
+                a.justify_start,
+                {
+                  paddingVertical: 6,
+                  paddingHorizontal: 8,
+                  paddingRight: 12,
+                },
+              ]}
+              onPress={() => setOpen(!open)}
+              onLayout={({nativeEvent}) => {
+                buttonSize.current = {
+                  width: nativeEvent.layout.width,
+                  height: nativeEvent.layout.height,
+                }
+              }}
+            >
+              {({hovered}) => (
+                <>
+                  <View
+                    style={[
+                      a.absolute,
+                      a.inset_0,
+                      a.rounded_sm,
+                      a.transition_transform,
+                      t.atoms.bg_contrast_25,
+                      (hovered && !open) && {
+                        transform: [{scaleX: 1.01}, {scaleY: 1.1}],
+                      },
+                    ]}
+                  />
+                  <View
+                    style={[
+                      a.absolute,
+                      a.inset_0,
+                      a.rounded_sm,
+                      a.transition_transform,
+                      a.z_20,
+                      t.atoms.bg_contrast_25,
+                      {
+                        opacity: 0,
+                      },
+                      open && [t.atoms.shadow_lg, {
+                        opacity: 1,
+                        bottom: 'auto',
+                        left: outerOffset * -1,
+                        right: outerOffset * -1,
+                      }]
+                    ]}
+                  >
+                    {open && (
+                      <View style={[baseGutters]}>
+                        <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+                          <UserAvatar
+                            type='algo'
+                            size={58}
+                            avatar={avatar}
+                          />
+                          <View style={[
+                          ]}>
+                            <Text style={[a.text_xl, a.font_heavy]}>{title}</Text>
+                          </View>
+                        </View>
+                      </View>
+                    )}
                   </View>
 
-                  <ChevronDown
-                    size="md"
-                    fill={t.atoms.text_contrast_low.color}
-                  />
-                </View>
-              </>
-            )}
-          </Button>
-        </Layout.Header.Content>
+                  <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm, open && {
+                    left: outerOffset * -1,
+                  }]}>
+                    {avatar && (
+                      <UserAvatar size={32} type="algo" avatar={avatar} />
+                    )}
+
+                    <View style={[a.flex_1]}>
+                      {/* Should roughly matchl Layout.Header.TitleText */}
+                      <Text
+                        style={[
+                          a.text_md,
+                          a.font_heavy,
+                          a.leading_tight,
+                          gtMobile && a.text_lg,
+                        ]}
+                        numberOfLines={2}>
+                        {title}
+                      </Text>
+                      {/* Should roughly matchl Layout.Header.SubtitleText */}
+                      <Text
+                        style={[
+                          a.flex_1,
+                          a.text_xs,
+                          a.leading_snug,
+                          t.atoms.text_contrast_medium,
+                          gtPhone && a.text_sm,
+                        ]}>
+                        <RNText numberOfLines={1}>
+                          <Trans>By {sanitizeHandle(creator.handle, '@')}</Trans>
+                        </RNText>
+                        {' • '}
+                        <RNText numberOfLines={1}>
+                          {plural(likeCount, {
+                            one: '# like',
+                            other: '# likes',
+                          })}
+                        </RNText>
+                      </Text>
+                    </View>
+
+                    <ChevronDown
+                      size="md"
+                      fill={t.atoms.text_contrast_low.color}
+                    />
+                  </View>
+                </>
+              )}
+            </Button>
+          </Layout.Header.Content>
 
-        <Layout.Header.Slot>
-          <Button
-            label={_(msg`Pin ${title} to your home screen`)}
-            size="small"
-            variant="ghost"
-            shape="square"
-            color="secondary">
-            <ButtonIcon icon={Pin} size="lg" />
-          </Button>
-        </Layout.Header.Slot>
-      </Layout.Header.Outer>
-    </Layout.Center>
+          <Layout.Header.Slot>
+            <Button
+              label={_(msg`Pin ${title} to your home screen`)}
+              size="small"
+              variant="ghost"
+              shape="square"
+              color="secondary">
+              <ButtonIcon icon={Pin} size="lg" />
+            </Button>
+          </Layout.Header.Slot>
+        </Layout.Header.Outer>
+      </Layout.Center>
+    </>
   )
 }