Align components

src/components/TrendingTopics.tsx

@@ -1,42 +1,20 @@
 import React from 'react'
 import {View} from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {AtUri} from '@atproto/api'
 import {hasMutedWord} from '@atproto/api/dist/moderation/mutewords'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
+import {makeProfileLink} from '#/lib/routes/links'
+import {feedUriToHref} from '#/lib/strings/url-helpers'
+// import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
+// import {CloseQuote_Filled_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
+// import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
 import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import {feedUriToHref} from '#/lib/strings/url-helpers'
-import {makeProfileLink} from '#/lib/routes/links'
-import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
-import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {usePreferencesQuery} from '#/state/queries/preferences'
-import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
-
-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,
-        t.atoms.bg,
-        style,
-      ]}>
-      <Text
-        style={[a.flex_1, a.text_sm, a.font_bold, a.leading_tight]}
-        numberOfLines={1}>
-        {topic}
-      </Text>
-    </View>
-  )
-}
 
 export function TrendingTopic({
   topic: raw,
@@ -48,41 +26,76 @@ export function TrendingTopic({
 
   if (!topic) return null
 
-  const hasAvi = topic.type === 'feed' || topic.type === 'profile'
+  const isSmall = size === 'small'
+  // const hasAvi = topic.type === 'feed' || topic.type === 'profile'
+  // const aviSize = isSmall ? 16 : 20
+  // const iconSize = isSmall ? 16 : 20
 
   return (
     <View
       style={[
         a.flex_row,
         a.align_center,
-        {
-          padding: 6,
-          gap: hasAvi ? 6 : 2,
-        },
-        a.pr_md,
         a.rounded_full,
         a.border,
         t.atoms.border_contrast_medium,
         t.atoms.bg,
+        isSmall
+          ? [
+              {
+                paddingVertical: 5,
+                paddingHorizontal: 10,
+              },
+            ]
+          : [a.py_sm, a.px_md],
         style,
+        /*
+        {
+          padding: 6,
+          gap: hasAvi ? 4 : 2,
+        },
+        a.pr_md,
+       */
       ]}>
-      <View style={[a.align_center, a.justify_center, a.rounded_full, a.overflow_hidden, {
+      {/*
-        width: 20,
+      <View
-        height: 20,
+        style={[
-      }]}>
+          a.align_center,
+          a.justify_center,
+          a.rounded_full,
+          a.overflow_hidden,
+          {
+            width: aviSize,
+            height: aviSize,
+          },
+        ]}>
         {topic.type === 'tag' ? (
-          <Hashtag size='sm' />
+          <Hashtag width={iconSize} />
         ) : topic.type === 'topic' ? (
-          <Search size='sm' />
+          <Quote width={iconSize - 2} />
         ) : topic.type === 'feed' ? (
-          <UserAvatar type='user' size={20} avatar='https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:vpkhqolt662uhesyj6nxm7ys/bafkreigpxhbzcwowt3fu6zrhdlen5hdw4onza2lnzg4rv7h5oddvhy4rpq@jpeg' />
+          <UserAvatar
+            type="user"
+            size={aviSize}
+            avatar=""
+          />
         ) : (
-          <UserAvatar type='user' size={20} avatar='https://cdn.bsky.app/img/avatar/plain/did:plc:ragtjsm2j2vknwkz3zp4oxrd/bafkreihhpqdyntku66himwor5wlhtdo44hllmngj2ofmbqnm25bdm454wq@jpeg' />
+          <UserAvatar
+            type="user"
+            size={aviSize}
+            avatar=""
+          />
         )}
       </View>
+        */}
 
       <Text
-        style={[a.flex_1, a.text_md, a.font_bold, a.leading_tight, { paddingBottom: 1 }]}
+        style={[
+          a.flex_1,
+          a.font_bold,
+          a.leading_tight,
+          isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
+        ]}
         numberOfLines={1}>
         {topic.name}
       </Text>
@@ -113,43 +126,6 @@ export function TrendingTopicLink({
   )
 }
 
-export function Link({
-  topic,
-  children,
-  style,
-  ...rest
-}: {
-  topic: string
-} & Omit<LinkProps, 'to' | 'label'>) {
-  const {_} = useLingui()
-  return (
-    <InternalLink
-      label={_(msg`Search posts that include ${topic}`)}
-      to={{
-        screen: 'Search',
-        params: {q: topic},
-      }}
-      style={[a.flex_col, style]}
-      {...rest}>
-      {children}
-    </InternalLink>
-  )
-}
-
-// temp
-export const TOPICS = [
-  '#atproto',
-  'South Korea',
-  'Wired',
-  'Basket Weaving',
-  'Coup',
-  'Chappel Roan',
-  'the juice',
-  'Superman',
-  '#FCF',
-  'Open Web',
-]
-
 type ParsedTrendingTopic =
   | {
       type: 'topic' | 'tag'
@@ -180,10 +156,13 @@ export function useTopic(raw: TrendingTopic): ParsedTrendingTopic | undefined {
   return React.useMemo(() => {
     const {topic: name, link: uri} = raw
 
-    if (hasMutedWord({
+    if (
-      mutedWords,
+      hasMutedWord({
-      text: name
+        mutedWords,
-    })) return
+        text: name,
+      })
+    )
+      return
 
     if (!uri.startsWith('at://')) {
       if (uri.startsWith('/search')) {
@@ -226,5 +205,5 @@ export function useTopic(raw: TrendingTopic): ParsedTrendingTopic | undefined {
         }
       }
     }
-  }, [raw, mutedWords])
+  }, [_, raw, mutedWords])
 }

src/view/shell/desktop/RightNav.tsx

@@ -5,22 +5,14 @@ import {useLingui} from '@lingui/react'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
-import {
-  useTrendingSettings,
-  useTrendingSettingsApi,
-} from '#/state/preferences/trending'
 import {useSession} from '#/state/session'
 import {DesktopFeeds} from '#/view/shell/desktop/Feeds'
 import {DesktopSearch} from '#/view/shell/desktop/Search'
+import {SidebarTrendingTopics} from '#/view/shell/desktop/SidebarTrendingTopics'
 import {atoms as a, useGutters, useTheme, web} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
 import {Divider} from '#/components/Divider'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
 import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
-import * as Prompt from '#/components/Prompt'
-import * as Trending from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
@@ -65,7 +57,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
         </>
       )}
 
-      {!isSearchScreen && <TrendingTopics />}
+      {!isSearchScreen && <SidebarTrendingTopics />}
 
       <Text style={[a.leading_snug, t.atoms.text_contrast_low]}>
         {hasSession && (
@@ -113,68 +105,3 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
     </View>
   )
 }
-
-function TrendingTopics() {
-  const t = useTheme()
-  const {_} = useLingui()
-  const trendingPrompt = Prompt.usePromptControl()
-
-  const {trendingSidebarHidden} = useTrendingSettings()
-  const {setTrendingSidebarHidden} = useTrendingSettingsApi()
-
-  return trendingSidebarHidden ? null : (
-    <>
-      <View style={[a.gap_md]}>
-        <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-          <Graph size="sm" />
-          <Text
-            style={[
-              a.flex_1,
-              a.text_sm,
-              a.font_bold,
-              t.atoms.text_contrast_medium,
-            ]}>
-            <Trans>Trending</Trans>
-          </Text>
-          <Button
-            label={_(msg`Hide trending topics from your sidebar`)}
-            size="tiny"
-            variant="ghost"
-            color="secondary"
-            shape="round"
-            onPress={() => trendingPrompt.open()}>
-            <ButtonIcon icon={X} />
-          </Button>
-        </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>
-      <Prompt.Basic
-        control={trendingPrompt}
-        title={_(msg`Hide trending topics?`)}
-        description={_(
-          msg`This is a device setting, and will apply to all accounts on this device. You can update this later from your settings.`,
-        )}
-        confirmButtonCta={_(msg`Hide`)}
-        onConfirm={() => setTrendingSidebarHidden(true)}
-      />
-      <Divider />
-    </>
-  )
-}

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -0,0 +1,92 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {
+  useTrendingSettings,
+  useTrendingSettingsApi,
+} from '#/state/preferences/trending'
+import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {Divider} from '#/components/Divider'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
+import * as Prompt from '#/components/Prompt'
+import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
+import {Text} from '#/components/Typography'
+
+export function SidebarTrendingTopics() {
+  const {trendingSidebarHidden} = useTrendingSettings()
+  return trendingSidebarHidden ? null : <Inner />
+}
+
+function Inner() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const trendingPrompt = Prompt.usePromptControl()
+  const {setTrendingSidebarHidden} = useTrendingSettingsApi()
+
+  const {data: topics, error, isLoading} = useTrendingTopics()
+
+  return (
+    <>
+      <View style={[a.gap_md]}>
+        <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+          <Graph size="sm" />
+          <Text
+            style={[
+              a.flex_1,
+              a.text_sm,
+              a.font_bold,
+              t.atoms.text_contrast_medium,
+            ]}>
+            <Trans>Trending</Trans>
+          </Text>
+          <Button
+            label={_(msg`Hide trending topics from your sidebar`)}
+            size="tiny"
+            variant="ghost"
+            color="secondary"
+            shape="round"
+            onPress={() => trendingPrompt.open()}>
+            <ButtonIcon icon={X} />
+          </Button>
+        </View>
+
+        <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+          {isLoading ? null : error || !topics ? null : (
+            <>
+              {topics.map(topic => (
+                <TrendingTopicLink key={topic.link} topic={topic}>
+                  {({hovered}) => (
+                    <TrendingTopic
+                      size="small"
+                      topic={topic}
+                      style={[
+                        hovered && [
+                          t.atoms.border_contrast_high,
+                          t.atoms.bg_contrast_25,
+                        ],
+                      ]}
+                    />
+                  )}
+                </TrendingTopicLink>
+              ))}
+            </>
+          )}
+        </View>
+      </View>
+      <Prompt.Basic
+        control={trendingPrompt}
+        title={_(msg`Hide trending topics?`)}
+        description={_(
+          msg`This is a device setting, and will apply to all accounts on this device. You can update this later from your settings.`,
+        )}
+        confirmButtonCta={_(msg`Hide`)}
+        onConfirm={() => setTrendingSidebarHidden(true)}
+      />
+      <Divider />
+    </>
+  )
+}