Refactor sidebar (#6971)

* Refactor RightNav

(cherry picked from commit 96bb02acfd2d7452df18a0e7410e6a7169a583ed)

* Better gutter handling

* Clean up styles

* Memoize breakpoints

* Format

* Comment

* Loosen spacing, handle overflow, smaller text to match prod

* Fix circular imports on native

* Return 0 instead of undefined for easier calculations

* Re-assign

* Fix

* Port over fix from subs/base

* Space out right nav feeds, widen sidebar to match prod

* Fix lost padding on home header

* Fix perf by not actually linking to new URL

* Remove underline on focus

* Foramt

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 43 insertions, 59 deletions

diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx
index 383d8f953..83b5420ce 100644
--- a/src/view/shell/desktop/Feeds.tsx
+++ b/src/view/shell/desktop/Feeds.tsx
@@ -1,18 +1,18 @@
-import {StyleSheet, View} from 'react-native'
+import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
 import {getCurrentRoute} from '#/lib/routes/helpers'
 import {NavigationProp} from '#/lib/routes/types'
 import {emitSoftReset} from '#/state/events'
 import {usePinnedFeedsInfos} from '#/state/queries/feed'
 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
-import {TextLink} from '#/view/com/util/Link'
+import {atoms as a, useTheme, web} from '#/alf'
+import {createStaticClick, InlineLinkText} from '#/components/Link'
 
 export function DesktopFeeds() {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {_} = useLingui()
   const {data: pinnedFeedInfos} = usePinnedFeedsInfos()
   const selectedFeed = useSelectedFeed()
@@ -24,76 +24,60 @@ export function DesktopFeeds() {
     }
     return getCurrentRoute(state)
   })
+
   if (!pinnedFeedInfos) {
     return null
   }
+
   return (
-    <View style={[styles.container, pal.view]}>
+    <View
+      style={[
+        a.flex_1,
+        web({
+          gap: 10,
+          /*
+           * Small padding prevents overflow prior to actually overflowing the
+           * height of the screen with lots of feeds.
+           */
+          paddingVertical: 2,
+          overflowY: 'auto',
+        }),
+      ]}>
       {pinnedFeedInfos.map(feedInfo => {
         const feed = feedInfo.feedDescriptor
+        const current = route.name === 'Home' && feed === selectedFeed
+
         return (
-          <FeedItem
-            key={feed}
-            href={'/?' + new URLSearchParams([['feed', feed]])}
-            title={feedInfo.displayName}
-            current={route.name === 'Home' && feed === selectedFeed}
-            onPress={() => {
+          <InlineLinkText
+            key={feedInfo.uri}
+            label={feedInfo.displayName}
+            {...createStaticClick(() => {
               setSelectedFeed(feed)
               navigation.navigate('Home')
               if (route.name === 'Home' && feed === selectedFeed) {
                 emitSoftReset()
               }
-            }}
-          />
+            })}
+            style={[
+              a.text_md,
+              a.leading_snug,
+              current
+                ? [a.font_heavy, t.atoms.text]
+                : [t.atoms.text_contrast_medium],
+            ]}
+            numberOfLines={1}>
+            {feedInfo.displayName}
+          </InlineLinkText>
         )
       })}
-      <View style={{paddingTop: 8, paddingBottom: 6}}>
-        <TextLink
-          type="lg"
-          href="/feeds"
-          text={_(msg`More feeds`)}
-          style={[pal.link]}
-        />
-      </View>
-    </View>
-  )
-}
 
-function FeedItem({
-  title,
-  href,
-  current,
-  onPress,
-}: {
-  title: string
-  href: string
-  current: boolean
-  onPress: () => void
-}) {
-  const pal = usePalette('default')
-  return (
-    <View style={{paddingVertical: 6}}>
-      <TextLink
-        type="xl"
-        href={href}
-        text={title}
-        onPress={onPress}
-        style={[
-          current ? pal.text : pal.textLight,
-          {letterSpacing: 0.15, fontWeight: current ? '600' : '400'},
-        ]}
-      />
+      <InlineLinkText
+        to="/feeds"
+        label={_(msg`More feeds`)}
+        style={[a.text_md, a.leading_snug]}
+        numberOfLines={1}>
+        {_(msg`More feeds`)}
+      </InlineLinkText>
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // @ts-ignore web only -prf
-    overflowY: 'auto',
-    width: 300,
-    paddingHorizontal: 12,
-    paddingVertical: 18,
-  },
-})