Clean up right nav

src/view/shell/desktop/Feeds.tsx

@@ -1,19 +1,20 @@
-import {StyleSheet, View} from 'react-native'
+import React from 'react'
-import {msg} from '@lingui/macro'
+import {View} from 'react-native'
-import {useLingui} from '@lingui/react'
+// 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 {InlineLinkText} from '#/components/Link'
 
 export function DesktopFeeds() {
-  const pal = usePalette('default')
+  const t = useTheme()
-  const {_} = useLingui()
+  // const {_} = useLingui()
   const {data: pinnedFeedInfos} = usePinnedFeedsInfos()
   const selectedFeed = useSelectedFeed()
   const setSelectedFeed = useSetSelectedFeed()
@@ -24,19 +25,30 @@ export function DesktopFeeds() {
     }
     return getCurrentRoute(state)
   })
+
   if (!pinnedFeedInfos) {
     return null
   }
+
   return (
-    <View style={[styles.container, pal.view]}>
+    <View
+      style={[
+        a.flex_1,
+        a.gap_md,
+        web({
+          paddingVertical: 2, // fixes overflow?
+          overflowY: 'auto',
+        }),
+      ]}>
       {pinnedFeedInfos.map(feedInfo => {
         const feed = feedInfo.feedDescriptor
+        const current = route.name === 'Home' && feed === selectedFeed
+
         return (
-          <FeedItem
+          <InlineLinkText
-            key={feed}
+            key={feedInfo.uri}
-            href={'/?' + new URLSearchParams([['feed', feed]])}
+            to={'/?' + new URLSearchParams([['feed', feed]])}
-            title={feedInfo.displayName}
+            label={feedInfo.displayName}
-            current={route.name === 'Home' && feed === selectedFeed}
             onPress={() => {
               setSelectedFeed(feed)
               navigation.navigate('Home')
@@ -44,56 +56,25 @@ export function DesktopFeeds() {
                 emitSoftReset()
               }
             }}
-          />
+            style={[
+              a.text_lg,
+              current
+                ? [a.font_heavy, t.atoms.text]
+                : [t.atoms.text_contrast_medium],
+            ]}>
+            {feedInfo.displayName}
+          </InlineLinkText>
         )
       })}
-      <View style={{paddingTop: 8, paddingBottom: 6}}>
+
-        <TextLink
+      {/*
-          type="lg"
+      <InlineLinkText
-          href="/feeds"
+        to="/feeds"
-          text={_(msg`More feeds`)}
+        label={_(msg`More feeds`)}
-          style={[pal.link]}
+        style={[a.text_lg]}>
-        />
+        {_(msg`More feeds`)}
-      </View>
+      </InlineLinkText>
+      */}
     </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'},
-        ]}
-      />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // @ts-ignore web only -prf
-    overflowY: 'auto',
-    width: 300,
-    paddingHorizontal: 12,
-    paddingVertical: 18,
-  },
-})

src/view/shell/desktop/RightNav.tsx

@@ -1,22 +1,21 @@
-import {StyleSheet, View} from 'react-native'
+import React from 'react'
+import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {s} from '#/lib/styles'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'
-import {TextLink} from '#/view/com/util/Link'
+import {DesktopFeeds} from '#/view/shell/desktop/Feeds'
-import {Text} from '#/view/com/util/text/Text'
+import {DesktopSearch} from '#/view/shell/desktop/Search'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
+import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
-import {DesktopFeeds} from './Feeds'
+import {Text} from '#/components/Typography'
-import {DesktopSearch} from './Search'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {_} = useLingui()
   const {hasSession, currentAccount} = useSession()
 
@@ -28,117 +27,81 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
   }
 
   return (
-    <View style={[styles.rightNav, pal.view]}>
-      <View style={{paddingVertical: 20}}>
-        {routeName === 'Search' ? (
-          <View style={{marginBottom: 18}}>
-            <DesktopFeeds />
-          </View>
-        ) : (
-          <>
-            <DesktopSearch />
-
-            {hasSession && (
-              <>
-                <ProgressGuideList style={[{marginTop: 22, marginBottom: 8}]} />
-                <View style={[pal.border, styles.desktopFeedsContainer]}>
-                  <DesktopFeeds />
-                </View>
-              </>
-            )}
-          </>
-        )}
-
     <View
       style={[
-            styles.message,
+        web({
-            {
+          position: 'fixed',
-              paddingTop: hasSession ? 0 : 18,
+          left: 'calc(50vw + 300px + 20px)',
-            },
+          width: 300,
+          maxHeight: '100%',
+          overflowY: 'auto',
+        }),
       ]}>
-          <View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}>
+      <View style={[a.py_xl]}>
+        {routeName !== 'Search' && (
+          <View style={[a.pb_lg]}>
+            <DesktopSearch />
+          </View>
+        )}
         {hasSession && (
           <>
-                <TextLink
+            <ProgressGuideList style={[a.mt_xl, a.mb_sm]} />
-                  type="md"
+            <View
-                  style={pal.link}
+              style={[
-                  href={FEEDBACK_FORM_URL({
+                a.pb_lg,
+                a.mb_lg,
+                a.border_b,
+                t.atoms.border_contrast_low,
+              ]}>
+              <DesktopFeeds />
+            </View>
+          </>
+        )}
+
+        <Text style={[a.leading_snug, t.atoms.text_contrast_low]}>
+          {hasSession && (
+            <>
+              <InlineLinkText
+                to={FEEDBACK_FORM_URL({
                   email: currentAccount?.email,
                   handle: currentAccount?.handle,
                 })}
-                  text={_(msg`Feedback`)}
+                label={_(msg`Feedback`)}>
-                />
+                {_(msg`Feedback`)}
-                <Text type="md" style={pal.textLight}>
+              </InlineLinkText>
-                  &middot;
+              {' • '}
-                </Text>
             </>
           )}
-            <TextLink
+          <InlineLinkText
-              type="md"
+            to="https://bsky.social/about/support/privacy-policy"
-              style={pal.link}
+            label={_(msg`Privacy`)}>
-              href="https://bsky.social/about/support/privacy-policy"
+            {_(msg`Privacy`)}
-              text={_(msg`Privacy`)}
+          </InlineLinkText>
-            />
+          {' • '}
-            <Text type="md" style={pal.textLight}>
+          <InlineLinkText
-              &middot;
+            to="https://bsky.social/about/support/tos"
+            label={_(msg`Terms`)}>
+            {_(msg`Terms`)}
+          </InlineLinkText>
+          {' • '}
+          <InlineLinkText label={_(msg`Help`)} to={HELP_DESK_URL}>
+            {_(msg`Help`)}
+          </InlineLinkText>
         </Text>
-            <TextLink
+
-              type="md"
-              style={pal.link}
-              href="https://bsky.social/about/support/tos"
-              text={_(msg`Terms`)}
-            />
-            <Text type="md" style={pal.textLight}>
-              &middot;
-            </Text>
-            <TextLink
-              type="md"
-              style={pal.link}
-              href={HELP_DESK_URL}
-              text={_(msg`Help`)}
-            />
-          </View>
         {kawaii && (
-            <Text type="md" style={[pal.textLight, {marginTop: 12}]}>
+          <Text style={[t.atoms.text_contrast_medium, {marginTop: 12}]}>
             <Trans>
               Logo by{' '}
-                <TextLink
+              <InlineLinkText
-                  type="md"
+                label={_(msg`Logo by @sawaratsuki.bsky.social`)}
-                  href="/profile/sawaratsuki.bsky.social"
+                to="/profile/sawaratsuki.bsky.social">
-                  text="@sawaratsuki.bsky.social"
+                @sawaratsuki.bsky.social
-                  style={pal.link}
+              </InlineLinkText>
-                />
             </Trans>
           </Text>
         )}
       </View>
     </View>
-    </View>
   )
 }
-
-const styles = StyleSheet.create({
-  rightNav: {
-    // @ts-ignore web only
-    position: 'fixed',
-    // @ts-ignore web only
-    left: 'calc(50vw + 300px + 20px)',
-    width: 300,
-    maxHeight: '100%',
-    overflowY: 'auto',
-  },
-
-  message: {
-    paddingVertical: 18,
-    paddingHorizontal: 12,
-  },
-  messageLine: {
-    marginBottom: 10,
-  },
-  desktopFeedsContainer: {
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    marginTop: 18,
-    marginBottom: 18,
-  },
-})