Limit # in sidebar, tweak spacing

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -6,10 +6,7 @@ import {
   useTrendingSettings,
   useTrendingSettingsApi,
 } from '#/state/preferences/trending'
-import {
-  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
-  useTrendingTopics,
-} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -24,6 +21,8 @@ import {
 } from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 
+const TRENDING_LIMIT = 6
+
 export function SidebarTrendingTopics() {
   const {enabled} = useTrendingConfig()
   const {trendingDisabled} = useTrendingSettings()
@@ -40,7 +39,7 @@ function Inner() {
 
   return error || noTopics ? null : (
     <>
-      <View style={[a.gap_md]}>
+      <View style={[a.gap_sm, {paddingBottom: 2}]}>
         <View style={[a.flex_row, a.align_center, a.gap_xs]}>
           <Graph size="sm" />
           <Text
@@ -65,14 +64,14 @@ function Inner() {
 
         <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
           {isLoading ? (
-            Array(TRENDING_TOPICS_COUNT)
+            Array(TRENDING_LIMIT)
               .fill(0)
               .map((_n, i) => (
                 <TrendingTopicSkeleton key={i} size="small" index={i} />
               ))
           ) : !trending?.topics ? null : (
             <>
-              {trending.topics.map(topic => (
+              {trending.topics.slice(0, TRENDING_LIMIT).map(topic => (
                 <TrendingTopicLink key={topic.link} topic={topic}>
                   {({hovered}) => (
                     <TrendingTopic