Replace Hashtag header (#6928)

src/screens/Hashtag.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ListRenderItemInfo, Pressable, View} from 'react-native'
+import {ListRenderItemInfo, View} from 'react-native'
 import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -13,16 +13,16 @@ import {shareUrl} from '#/lib/sharing'
 import {cleanError} from '#/lib/strings/errors'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {enforceLen} from '#/lib/strings/helpers'
-import {isNative, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {useSearchPostsQuery} from '#/state/queries/search-posts'
 import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
 import {Pager} from '#/view/com/pager/Pager'
 import {TabBar} from '#/view/com/pager/TabBar'
 import {Post} from '#/view/com/post/Post'
 import {List} from '#/view/com/util/List'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {CenteredView} from '#/view/com/util/Views'
-import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox'
+import {Button, ButtonIcon} from '#/components/Button'
+import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
 import * as Layout from '#/components/Layout'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 
@@ -111,27 +111,30 @@ export default function HashtagScreen({
   return (
     <Layout.Screen>
       <CenteredView sideBorders={true}>
-        <ViewHeader
+        <Layout.Header.Outer>
-          showOnDesktop
+          <Layout.Header.BackButton />
-          title={headerTitle}
+          <Layout.Header.Content>
-          subtitle={author ? _(msg`From @${sanitizedAuthor}`) : undefined}
+            <Layout.Header.TitleText>{headerTitle}</Layout.Header.TitleText>
-          canGoBack
+            {author && (
-          renderButton={
+              <Layout.Header.SubtitleText>
-            isNative
+                {_(msg`From @${sanitizedAuthor}`)}
-              ? () => (
+              </Layout.Header.SubtitleText>
-                  <Pressable
+            )}
-                    accessibilityRole="button"
+          </Layout.Header.Content>
-                    onPress={onShare}
+          <Layout.Header.Slot>
-                    hitSlop={HITSLOP_10}>
+            <Button
-                    <ArrowOutOfBox_Stroke2_Corner0_Rounded
+              label={_(msg`Share`)}
-                      size="lg"
+              size="small"
-                      onPress={onShare}
+              variant="ghost"
-                    />
+              color="primary"
-                  </Pressable>
+              shape="round"
-                )
+              onPress={onShare}
-              : undefined
+              hitSlop={HITSLOP_10}
-          }
+              style={[{right: -3}]}>
-        />
+              <ButtonIcon icon={Share} size="md" />
+            </Button>
+          </Layout.Header.Slot>
+        </Layout.Header.Outer>
       </CenteredView>
       <Pager
         onPageSelected={onPageSelected}