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

This reverts commit f58a7fafa12269035d440cfa2d8cb1dbd562305f.
---
 src/components/Button.tsx                     |   1 -
 src/components/Layout/Header/index.tsx        |   3 +-
 .../components/ProfileSubpageHeader.tsx       | 252 +++++++-----------
 3 files changed, 91 insertions(+), 165 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index db51e51f2d..871c17ed51 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -76,7 +76,6 @@ 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 d6f8f1c1f9..321f7201f7 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -74,7 +74,6 @@ export function Content({
       style={[
         a.flex_1,
         a.justify_center,
-        a.z_20,
         isIOS && align === 'platform' && a.align_center,
         {minHeight: HEADER_SLOT_SIZE},
       ]}>
@@ -89,7 +88,7 @@ export function Slot({children}: {children?: React.ReactNode}) {
   return (
     <View
       style={[
-        a.z_10,
+        a.z_50,
         {
           width: HEADER_SLOT_SIZE,
         },
diff --git a/src/screens/Profile/components/ProfileSubpageHeader.tsx b/src/screens/Profile/components/ProfileSubpageHeader.tsx
index 0a27350112..7b56405227 100644
--- a/src/screens/Profile/components/ProfileSubpageHeader.tsx
+++ b/src/screens/Profile/components/ProfileSubpageHeader.tsx
@@ -1,20 +1,16 @@
-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, useGutters} from '#/alf'
+import {atoms as a, useTheme, useBreakpoints, web} 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,
@@ -31,167 +27,99 @@ export function ProfileSubpageHeader({
   const {gtPhone, gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const {top} = useSafeAreaInsets()
-  const [open, setOpen] = useState(false)
-  const baseGutters = useGutters(['compact'])
-
-  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
 
   return (
-    <>
-      {open && !isWeb && (
-        <View style={[
-          a.fixed,
-          a.inset_0,
-          a.z_40,
-          { backgroundColor: t.palette.black, opacity: 0.7 },
-        ]} />
-      )}
+    <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}],
+                    },
+                  ]}
+                />
 
-      <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.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+                  {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
-                    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>
+                </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>
   )
 }