Move feeds screen into common navigator, handle usages (#4365)

* Move feeds screen into common navigator, handle usages

* Add link to Feeds from home screen (#4366)

* Add link to feeds to home screen header

* Center logo

* Replace icons

* Tweak spacing

* Tweak spacing

* Swap icon, sizing

* Buttonize, size

* Make menu same alignment on all screens

* Remove FeedsTab support, enable drawer swipe on MessagesTab

* Add note

* Vertically align header

* Swap in Pin

* Use hashtag icon

* Remove png

* Fix reference

* Ensure alignment with home and other screens

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -1,22 +1,18 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import Animated from 'react-native-reanimated'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {CogIcon} from '#/lib/icons'
 import {useSession} from '#/state/session'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
-import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Logo} from '#/view/icons/Logo'
+import {atoms as a, useTheme} from '#/alf'
+import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
+import {Link} from '#/components/Link'
 import {useKawaiiMode} from '../../../state/preferences/kawaii'
-import {Link} from '../util/Link'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
 
 export function HomeHeaderLayout(props: {
@@ -38,7 +34,7 @@ function HomeHeaderLayoutDesktopAndTablet({
   children: React.ReactNode
   tabBarAnchor: JSX.Element | null | undefined
 }) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const headerMinimalShellTransform = useMinimalShellHeaderTransform()
   const {headerHeight} = useShellLayout()
   const {hasSession} = useSession()
@@ -51,31 +47,46 @@ function HomeHeaderLayoutDesktopAndTablet({
       {hasSession && (
         <View
           style={[
-            pal.view,
-            pal.border,
+            a.relative,
+            a.flex_row,
+            a.justify_end,
+            a.align_center,
+            a.pt_lg,
+            a.px_md,
+            a.pb_2xs,
+            t.atoms.bg,
+            t.atoms.border_contrast_low,
             styles.bar,
-            styles.topBar,
-            kawaii && {paddingTop: 4, paddingBottom: 0},
           ]}>
+          <View
+            style={[
+              a.absolute,
+              a.inset_0,
+              a.pt_lg,
+              a.m_auto,
+              kawaii && {paddingTop: 4, paddingBottom: 0},
+              {
+                width: kawaii ? 60 : 28,
+              },
+            ]}>
+            <Logo width={kawaii ? 60 : 28} />
+          </View>
+
           <Link
-            href="/settings/following-feed"
+            to="/feeds"
             hitSlop={10}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Following Feed Preferences`)}
-            accessibilityHint="">
-            <FontAwesomeIcon
-              icon="sliders"
-              style={pal.textLight as FontAwesomeIconStyle}
-            />
-          </Link>
-          <Logo width={kawaii ? 60 : 28} />
-          <Link
-            href="/settings/saved-feeds"
-            hitSlop={10}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Edit Saved Feeds`)}
-            accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}>
-            <CogIcon size={22} strokeWidth={2} style={pal.textLight} />
+            label={_(msg`View your feeds and explore more`)}
+            size="small"
+            variant="ghost"
+            color="secondary"
+            shape="square"
+            style={[
+              a.justify_center,
+              {
+                marginTop: -4,
+              },
+            ]}>
+            <FeedsIcon size="md" fill={t.atoms.text_contrast_medium.color} />
           </Link>
         </View>
       )}
@@ -85,8 +96,8 @@ function HomeHeaderLayoutDesktopAndTablet({
           headerHeight.value = e.nativeEvent.layout.height
         }}
         style={[
-          pal.view,
-          pal.border,
+          t.atoms.bg,
+          t.atoms.border_contrast_low,
           styles.bar,
           styles.tabBar,
           headerMinimalShellTransform,