Add tiny option in RightNav

src/components/TrendingTopics.tsx

@@ -6,7 +6,7 @@ import {atoms as a, useGutters, useTheme, ViewStyleProp} from '#/alf'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function Topic({topic, style}: {topic: string} & ViewStyleProp) {
+export function TopicLarge({topic, style}: {topic: string} & ViewStyleProp) {
   const t = useTheme()
   return (
     <View
@@ -18,7 +18,30 @@ export function Topic({topic, style}: {topic: string} & ViewStyleProp) {
         t.atoms.border_contrast_medium,
         style,
       ]}>
-      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+      <Text
+        style={[a.flex_1, a.text_md, a.font_bold, a.leading_tight]}
+        numberOfLines={1}>
+        {topic}
+      </Text>
+    </View>
+  )
+}
+
+export function TopicSmall({topic, style}: {topic: string} & ViewStyleProp) {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.p_xs,
+        a.px_sm,
+        a.rounded_sm,
+        a.border,
+        t.atoms.border_contrast_medium,
+        style,
+      ]}>
+      <Text
+        style={[a.flex_1, a.text_sm, a.font_bold, a.leading_tight]}
+        numberOfLines={1}>
         {topic}
       </Text>
     </View>
@@ -56,7 +79,7 @@ export function Grid({topics}: {topics: string[]}) {
       {topics.map(topic => (
         <Link key={topic} topic={topic}>
           {({hovered}) => (
-            <Topic
+            <TopicLarge
               topic={topic}
               style={[
                 hovered && [
@@ -71,3 +94,17 @@ export function Grid({topics}: {topics: string[]}) {
     </View>
   )
 }
+
+// temp
+export const TOPICS = [
+  '#atproto',
+  'South Korea',
+  'Wired',
+  'Basket Weaving',
+  'Coup',
+  'Chappel Roan',
+  'the juice',
+  'Superman',
+  '#FCF',
+  'Open Web',
+]

src/view/shell/desktop/RightNav.tsx

@@ -9,8 +9,11 @@ import {useSession} from '#/state/session'
 import {DesktopFeeds} from '#/view/shell/desktop/Feeds'
 import {DesktopSearch} from '#/view/shell/desktop/Search'
 import {atoms as a, useGutters, useTheme, web} from '#/alf'
+import {Divider} from '#/components/Divider'
+import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
 import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
+import * as Trending from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
@@ -19,6 +22,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
   const {hasSession, currentAccount} = useSession()
   const kawaii = useKawaiiMode()
   const gutters = useGutters(['base', 0, 'base', 'wide'])
+  const isSearchScreen = routeName === 'Search'
 
   const {isTablet} = useWebMediaQueries()
   if (isTablet) {
@@ -29,6 +33,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
     <View
       style={[
         gutters,
+        a.gap_lg,
         web({
           position: 'fixed',
           left: '50%',
@@ -43,18 +48,46 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
           overflowY: 'auto',
         }),
       ]}>
-      {routeName !== 'Search' && (
-        <View style={[a.pb_lg]}>
-          <DesktopSearch />
-        </View>
-      )}
+      {!isSearchScreen && <DesktopSearch />}
+
       {hasSession && (
         <>
-          <ProgressGuideList style={[a.pb_xl]} />
-          <View
-            style={[a.pb_lg, a.mb_lg, a.border_b, t.atoms.border_contrast_low]}>
-            <DesktopFeeds />
+          <ProgressGuideList />
+          <DesktopFeeds />
+          <Divider />
+        </>
+      )}
+
+      {!isSearchScreen && (
+        <>
+          <View style={[a.gap_md]}>
+            <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+              <Graph size="sm" />
+              <Text
+                style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}>
+                <Trans>Trending</Trans>
+              </Text>
+            </View>
+
+            <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+              {Trending.TOPICS.slice(0, 8).map(topic => (
+                <Trending.Link key={topic} topic={topic}>
+                  {({hovered}) => (
+                    <Trending.TopicSmall
+                      topic={topic}
+                      style={[
+                        hovered && [
+                          t.atoms.border_contrast_high,
+                          t.atoms.bg_contrast_25,
+                        ],
+                      ]}
+                    />
+                  )}
+                </Trending.Link>
+              ))}
+            </View>
           </View>
+          <Divider />
         </>
       )}