Trending (Beta) (#7144)

* Add WIP UIs for trending topics and suggested starterpacks * Disable SPs for now * Improve explore treatment a bit, add some polish to cards * Add tiny option in RightNav * Add persisted option to hide trending from sidebar * Add to settings, abstract state, not updating in tab * Fix up hide/show toggle state, WITH broadcast hacK * Clean up persisted code, add new setting * Add new interstitial to Discover * Exploration * First hack at mute words * Wire up interstitial and Explore page * Align components * Some skeleton UI * Handle service config, enablement, load states, update lex contract * Centralize mute word handling * Stale time to 30m * Cache enabled value for reloads, use real data for service config * Remove broadcast hack * Remove titleChild * Gate settings too * Update package, rm langs * Add feature gate * Only english during beta period * Hook up real data * Tweak config * Straight passthrough links * Hook up prod agent * Fix no-show logic * Up config query to 5 min * Remove old file * Remove comment * Remove stray flex_1 * Make trending setting global * Quick placeholder state * Limit # in sidebar, tweak spacing * Tweak gaps * Handle hide/show of sidebar * Simplify messages * Remove interstitial * Revert "Remove interstitial" This reverts commit 1358ad47fd. * Only show interstitial on mobile * Fix gap * Add explore page recommendations * [topics] add topic screen (#7149) * add topic screen * decode * fix search query * decode * add server route * Fix potential bad destructure (undefined) --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com> Co-authored-by: Dan Abramov <dan.abramov@gmail.com> Co-authored-by: Hailey <me@haileyok.com>
2024-12-17 21:45:39 -06:00
parent a07949ec8e
commit a2019aceec
29 changed files with 1268 additions and 80 deletions
@@ -0,0 +1,111 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {
+  useTrendingSettings,
+  useTrendingSettingsApi,
+} from '#/state/preferences/trending'
+import {
+  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
+  useTrendingTopics,
+} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingConfig} from '#/state/trending-config'
+import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {GradientFill} from '#/components/GradientFill'
+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,
+  TrendingTopicSkeleton,
+} from '#/components/TrendingTopics'
+import {Text} from '#/components/Typography'
+
+export function TrendingInterstitial() {
+  const {enabled} = useTrendingConfig()
+  const {trendingDisabled} = useTrendingSettings()
+  return enabled && !trendingDisabled ? <Inner /> : null
+}
+
+export function Inner() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const gutters = useGutters(['wide', 'base'])
+  const trendingPrompt = Prompt.usePromptControl()
+  const {setTrendingDisabled} = useTrendingSettingsApi()
+  const {data: trending, error, isLoading} = useTrendingTopics()
+  const noTopics = !isLoading && !error && !trending?.topics?.length
+
+  return error || noTopics ? null : (
+    <View
+      style={[
+        gutters,
+        a.gap_lg,
+        a.border_t,
+        t.atoms.border_contrast_low,
+        t.atoms.bg_contrast_25,
+      ]}>
+      <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+        <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+          <Graph size="lg" />
+          <Text style={[a.text_lg, a.font_heavy]}>
+            <Trans>Trending</Trans>
+          </Text>
+          <View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
+            <GradientFill gradient={tokens.gradients.primary} />
+            <Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
+              <Trans>BETA</Trans>
+            </Text>
+          </View>
+        </View>
+
+        <Button
+          label={_(msg`Hide trending topics`)}
+          size="tiny"
+          variant="outline"
+          color="secondary"
+          shape="round"
+          onPress={() => trendingPrompt.open()}>
+          <ButtonIcon icon={X} />
+        </Button>
+      </View>
+
+      <View style={[a.flex_row, a.flex_wrap, {rowGap: 8, columnGap: 6}]}>
+        {isLoading ? (
+          Array(TRENDING_TOPICS_COUNT)
+            .fill(0)
+            .map((_n, i) => <TrendingTopicSkeleton key={i} index={i} />)
+        ) : !trending?.topics ? null : (
+          <>
+            {trending.topics.map(topic => (
+              <TrendingTopicLink key={topic.link} topic={topic}>
+                {({hovered}) => (
+                  <TrendingTopic
+                    topic={topic}
+                    style={[
+                      hovered && [
+                        t.atoms.border_contrast_high,
+                        t.atoms.bg_contrast_25,
+                      ],
+                    ]}
+                  />
+                )}
+              </TrendingTopicLink>
+            ))}
+          </>
+        )}
+      </View>
+
+      <Prompt.Basic
+        control={trendingPrompt}
+        title={_(msg`Hide trending topics?`)}
+        description={_(msg`You can update this later from your settings.`)}
+        confirmButtonCta={_(msg`Hide`)}
+        onConfirm={() => setTrendingDisabled(true)}
+      />
+    </View>
+  )
+}