Update trending topics UI (#11304)

src/view/com/posts/PostFeed.tsx

@@ -211,6 +211,10 @@ export type PostFeedRef = {
 // const REFRESH_AFTER = STALE.HOURS.ONE
 const CHECK_LATEST_AFTER = STALE.SECONDS.THIRTY
 
+const TRENDING_TOPICS_INDEX = 5
+const TRENDING_VIDEO_INDEX = 30
+const SUGGESTED_FOR_YOU_INDEX = 15
+
 let PostFeed = ({
   feed,
   description,
@@ -570,19 +574,19 @@ let PostFeed = ({
                         key: 'composerPrompt-' + sliceIndex,
                       })
                     }
-                  } else if (sliceIndex === 1) {
+                  } else if (sliceIndex === TRENDING_TOPICS_INDEX) {
                     arr.push({
                       type: 'interstitialFeedTrendingTopics',
                       key: 'interstitialFeedTrendingTopics-' + sliceIndex,
                     })
-                  } else if (sliceIndex === 15) {
+                  } else if (sliceIndex === TRENDING_VIDEO_INDEX) {
                     if (areVideoFeedsEnabled && !trendingVideoDisabled) {
                       arr.push({
                         type: 'interstitialTrendingVideos',
                         key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
                       })
                     }
-                  } else if (sliceIndex === 30) {
+                  } else if (sliceIndex === SUGGESTED_FOR_YOU_INDEX) {
                     arr.push({
                       type: 'interstitialFollows',
                       key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -9,7 +9,7 @@ import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
 import {useTrendingConfig} from '#/state/service-config'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
-import {DotGrid3x1_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
+import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
 import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
 import * as Prompt from '#/components/Prompt'
 import {TrendingTopicLink} from '#/components/TrendingTopics'
@@ -50,7 +50,7 @@ function Inner() {
         style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}>
         <View style={[a.flex_row, a.align_center, a.gap_xs, a.pb_md]}>
           <TrendingIcon width={16} height={16} fill={t.atoms.text.color} />
-          <Text style={[a.flex_1, a.text_md, a.font_semi_bold, t.atoms.text]}>
+          <Text style={[a.flex_1, a.text_md, a.font_semi_bold]}>
             <Trans>Trending</Trans>
           </Text>
           <Button
@@ -60,8 +60,8 @@ function Inner() {
             shape="round"
             label={l`Trending options`}
             onPress={() => trendingPrompt.open()}
-            style={[a.bg_transparent, {marginTop: -6, marginRight: -6}]}>
-            <ButtonIcon icon={Ellipsis} size="xs" />
+            style={[a.bg_transparent]}>
+            <ButtonIcon icon={EllipsisIcon} size="xs" />
           </Button>
         </View>