From d8245e96eab165d5446254e23e8ae5849354e7e5 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 13 Feb 2024 00:40:39 -0800
Subject: Add copy to feeds page (#2852)

* move `IconCircle` to `components` for reuse

* add copy to feeds page

* start of a header

* saveit

* add lg size

* add your feeds

* don't show Your Feeds if you don't have any

* Minor ui tweaks

* cleanup

* remove unused activity indicator

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
---
 src/components/IconCircle.tsx                      |  51 +++++
 src/screens/Onboarding/IconCircle.tsx              |  51 -----
 src/screens/Onboarding/StepAlgoFeeds/index.tsx     |   2 +-
 src/screens/Onboarding/StepFinished.tsx            |   2 +-
 src/screens/Onboarding/StepFollowingFeed.tsx       |   2 +-
 src/screens/Onboarding/StepInterests/index.tsx     |   2 +-
 src/screens/Onboarding/StepModeration/index.tsx    |   2 +-
 .../Onboarding/StepSuggestedAccounts/index.tsx     |   2 +-
 src/screens/Onboarding/StepTopicalFeeds.tsx        |   2 +-
 src/view/screens/Feeds.tsx                         | 208 ++++++++++++---------
 10 files changed, 178 insertions(+), 146 deletions(-)
 create mode 100644 src/components/IconCircle.tsx
 delete mode 100644 src/screens/Onboarding/IconCircle.tsx

diff --git a/src/components/IconCircle.tsx b/src/components/IconCircle.tsx
new file mode 100644
index 000000000..aa779e37f
--- /dev/null
+++ b/src/components/IconCircle.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {
+  useTheme,
+  atoms as a,
+  ViewStyleProp,
+  TextStyleProp,
+  flatten,
+} from '#/alf'
+import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
+import {Props} from '#/components/icons/common'
+
+export function IconCircle({
+  icon: Icon,
+  size = 'xl',
+  style,
+  iconStyle,
+}: ViewStyleProp & {
+  icon: typeof Growth
+  size?: Props['size']
+  iconStyle?: TextStyleProp['style']
+}) {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.justify_center,
+        a.align_center,
+        a.rounded_full,
+        {
+          width: size === 'lg' ? 52 : 64,
+          height: size === 'lg' ? 52 : 64,
+          backgroundColor:
+            t.name === 'light' ? t.palette.primary_50 : t.palette.primary_950,
+        },
+        flatten(style),
+      ]}>
+      <Icon
+        size={size}
+        style={[
+          {
+            color: t.palette.primary_500,
+          },
+          flatten(iconStyle),
+        ]}
+      />
+    </View>
+  )
+}
diff --git a/src/screens/Onboarding/IconCircle.tsx b/src/screens/Onboarding/IconCircle.tsx
deleted file mode 100644
index a54c8b4e4..000000000
--- a/src/screens/Onboarding/IconCircle.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-
-import {
-  useTheme,
-  atoms as a,
-  ViewStyleProp,
-  TextStyleProp,
-  flatten,
-} from '#/alf'
-import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
-import {Props} from '#/components/icons/common'
-
-export function IconCircle({
-  icon: Icon,
-  size = 'xl',
-  style,
-  iconStyle,
-}: ViewStyleProp & {
-  icon: typeof Growth
-  size?: Props['size']
-  iconStyle?: TextStyleProp['style']
-}) {
-  const t = useTheme()
-
-  return (
-    <View
-      style={[
-        a.justify_center,
-        a.align_center,
-        a.rounded_full,
-        {
-          width: 64,
-          height: 64,
-          backgroundColor:
-            t.name === 'light' ? t.palette.primary_50 : t.palette.primary_950,
-        },
-        flatten(style),
-      ]}>
-      <Icon
-        size={size}
-        style={[
-          {
-            color: t.palette.primary_500,
-          },
-          flatten(iconStyle),
-        ]}
-      />
-    </View>
-  )
-}
diff --git a/src/screens/Onboarding/StepAlgoFeeds/index.tsx b/src/screens/Onboarding/StepAlgoFeeds/index.tsx
index 33e519207..1a4e4c493 100644
--- a/src/screens/Onboarding/StepAlgoFeeds/index.tsx
+++ b/src/screens/Onboarding/StepAlgoFeeds/index.tsx
@@ -20,7 +20,7 @@ import {
   OnboardingControls,
 } from '#/screens/Onboarding/Layout'
 import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
-import {IconCircle} from '#/screens/Onboarding/IconCircle'
+import {IconCircle} from '#/components/IconCircle'
 
 export type FeedConfig = {
   default: boolean
diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx
index 72d53658b..944dcb96d 100644
--- a/src/screens/Onboarding/StepFinished.tsx
+++ b/src/screens/Onboarding/StepFinished.tsx
@@ -23,7 +23,7 @@ import {
   Description,
   OnboardingControls,
 } from '#/screens/Onboarding/Layout'
-import {IconCircle} from '#/screens/Onboarding/IconCircle'
+import {IconCircle} from '#/components/IconCircle'
 import {
   bulkWriteFollows,
   sortPrimaryAlgorithmFeeds,
diff --git a/src/screens/Onboarding/StepFollowingFeed.tsx b/src/screens/Onboarding/StepFollowingFeed.tsx
index 114e274b6..898afad13 100644
--- a/src/screens/Onboarding/StepFollowingFeed.tsx
+++ b/src/screens/Onboarding/StepFollowingFeed.tsx
@@ -22,7 +22,7 @@ import {
   usePreferencesQuery,
   useSetFeedViewPreferencesMutation,
 } from 'state/queries/preferences'
-import {IconCircle} from '#/screens/Onboarding/IconCircle'
+import {IconCircle} from '#/components/IconCircle'
 
 export function StepFollowingFeed() {
   const {_} = useLingui()
diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx
index 4eaf0366e..ea23b74f0 100644
--- a/src/screens/Onboarding/StepInterests/index.tsx
+++ b/src/screens/Onboarding/StepInterests/index.tsx
@@ -26,7 +26,7 @@ import {
   OnboardingControls,
 } from '#/screens/Onboarding/Layout'
 import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
-import {IconCircle} from '#/screens/Onboarding/IconCircle'
+import {IconCircle} from '#/components/IconCircle'
 
 export function StepInterests() {
   const {_} = useLingui()
diff --git a/src/screens/Onboarding/StepModeration/index.tsx b/src/screens/Onboarding/StepModeration/index.tsx
index c831b6880..543a5b159 100644
--- a/src/screens/Onboarding/StepModeration/index.tsx
+++ b/src/screens/Onboarding/StepModeration/index.tsx
@@ -26,7 +26,7 @@ import {
 import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption'
 import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref'
 import {Context} from '#/screens/Onboarding/state'
-import {IconCircle} from '#/screens/Onboarding/IconCircle'
+import {IconCircle} from '#/components/IconCircle'
 
 function AnimatedDivider() {
   return (
diff --git a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx
index 3caa38d4f..14faddc10 100644
--- a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx
+++ b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx
@@ -27,7 +27,7 @@ import {
   SuggestedAccountCardPlaceholder,
 } from '#/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard'
 import {aggregateInterestItems} from '#/screens/Onboarding/util'
-import {IconCircle} from '#/screens/Onboarding/IconCircle'
+import {IconCircle} from '#/components/IconCircle'
 
 export function Inner({
   profiles,
diff --git a/src/screens/Onboarding/StepTopicalFeeds.tsx b/src/screens/Onboarding/StepTopicalFeeds.tsx
index 3640b764d..4a2210853 100644
--- a/src/screens/Onboarding/StepTopicalFeeds.tsx
+++ b/src/screens/Onboarding/StepTopicalFeeds.tsx
@@ -21,7 +21,7 @@ import {
 } from '#/screens/Onboarding/Layout'
 import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
 import {aggregateInterestItems} from '#/screens/Onboarding/util'
-import {IconCircle} from '#/screens/Onboarding/IconCircle'
+import {IconCircle} from '#/components/IconCircle'
 
 export function StepTopicalFeeds() {
   const {_} = useLingui()
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
index 7216fd109..2e6044100 100644
--- a/src/view/screens/Feeds.tsx
+++ b/src/view/screens/Feeds.tsx
@@ -16,6 +16,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {ComposeIcon2, CogIcon, MagnifyingGlassIcon2} from 'lib/icons'
 import {s} from 'lib/styles'
+import {atoms as a, useTheme} from '#/alf'
 import {SearchInput, SearchInputRef} from 'view/com/util/forms/SearchInput'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {
@@ -41,8 +42,11 @@ import {
 import {cleanError} from 'lib/strings/errors'
 import {useComposerControls} from '#/state/shell/composer'
 import {useSession} from '#/state/session'
-import {isNative} from '#/platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
 import {HITSLOP_10} from 'lib/constants'
+import {IconCircle} from '#/components/IconCircle'
+import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
+import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass'
 
 type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
 
@@ -215,12 +219,7 @@ export function FeedsScreen(_props: Props) {
             // pendingItems: this.rootStore.preferences.savedFeeds.length || 3,
           })
         } else {
-          if (preferences?.feeds?.saved.length === 0) {
-            slices.push({
-              key: 'savedFeedNoResults',
-              type: 'savedFeedNoResults',
-            })
-          } else {
+          if (preferences?.feeds?.saved.length !== 0) {
             const {saved, pinned} = preferences.feeds
 
             slices = slices.concat(
@@ -400,46 +399,48 @@ export function FeedsScreen(_props: Props) {
       ) {
         return (
           <View style={s.p10}>
-            <ActivityIndicator />
+            <ActivityIndicator size="large" />
           </View>
         )
       } else if (item.type === 'savedFeedsHeader') {
-        if (!isMobile) {
-          return (
-            <View
-              style={[
-                pal.view,
-                styles.header,
-                pal.border,
-                {
-                  borderBottomWidth: 1,
-                },
-              ]}>
-              <Text type="title-lg" style={[pal.text, s.bold]}>
-                <Trans>My Feeds</Trans>
-              </Text>
-              <View style={styles.headerBtnGroup}>
-                <Pressable
-                  accessibilityRole="button"
-                  hitSlop={HITSLOP_10}
-                  onPress={searchInputRef.current?.focus}>
-                  <MagnifyingGlassIcon2
-                    size={22}
-                    strokeWidth={2}
-                    style={pal.icon}
-                  />
-                </Pressable>
-                <Link
-                  href="/settings/saved-feeds"
-                  accessibilityLabel={_(msg`Edit My Feeds`)}
-                  accessibilityHint="">
-                  <CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
-                </Link>
+        return (
+          <>
+            {!isMobile && (
+              <View
+                style={[
+                  pal.view,
+                  styles.header,
+                  pal.border,
+                  {
+                    borderBottomWidth: 1,
+                  },
+                ]}>
+                <Text type="title-lg" style={[pal.text, s.bold]}>
+                  <Trans>Feeds</Trans>
+                </Text>
+                <View style={styles.headerBtnGroup}>
+                  <Pressable
+                    accessibilityRole="button"
+                    hitSlop={HITSLOP_10}
+                    onPress={searchInputRef.current?.focus}>
+                    <MagnifyingGlassIcon2
+                      size={22}
+                      strokeWidth={2}
+                      style={pal.icon}
+                    />
+                  </Pressable>
+                  <Link
+                    href="/settings/saved-feeds"
+                    accessibilityLabel={_(msg`Edit My Feeds`)}
+                    accessibilityHint="">
+                    <CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
+                  </Link>
+                </View>
               </View>
-            </View>
-          )
-        }
-        return <View />
+            )}
+            {preferences?.feeds?.saved?.length !== 0 && <FeedsSavedHeader />}
+          </>
+        )
       } else if (item.type === 'savedFeedNoResults') {
         return (
           <View
@@ -457,47 +458,17 @@ export function FeedsScreen(_props: Props) {
       } else if (item.type === 'popularFeedsHeader') {
         return (
           <>
-            <View
-              style={[
-                pal.view,
-                styles.header,
-                {
-                  // This is first in the flatlist without a session -esb
-                  marginTop: hasSession ? 16 : 0,
-                  paddingLeft: isMobile ? 12 : undefined,
-                  paddingRight: 10,
-                  paddingBottom: isMobile ? 6 : undefined,
-                },
-              ]}>
-              <Text type="title-lg" style={[pal.text, s.bold]}>
-                <Trans>Discover new feeds</Trans>
-              </Text>
-
-              {!isMobile && (
-                <SearchInput
-                  ref={searchInputRef}
-                  query={query}
-                  onChangeQuery={onChangeQuery}
-                  onPressCancelSearch={onPressCancelSearch}
-                  onSubmitQuery={onSubmitQuery}
-                  setIsInputFocused={onChangeSearchFocus}
-                  style={{flex: 1, maxWidth: 250}}
-                />
-              )}
+            <FeedsAboutHeader />
+            <View style={{paddingHorizontal: 12, paddingBottom: 12}}>
+              <SearchInput
+                ref={searchInputRef}
+                query={query}
+                onChangeQuery={onChangeQuery}
+                onPressCancelSearch={onPressCancelSearch}
+                onSubmitQuery={onSubmitQuery}
+                setIsInputFocused={onChangeSearchFocus}
+              />
             </View>
-
-            {isMobile && (
-              <View style={{paddingHorizontal: 8, paddingBottom: 10}}>
-                <SearchInput
-                  ref={searchInputRef}
-                  query={query}
-                  onChangeQuery={onChangeQuery}
-                  onPressCancelSearch={onPressCancelSearch}
-                  onSubmitQuery={onSubmitQuery}
-                  setIsInputFocused={onChangeSearchFocus}
-                />
-              </View>
-            )}
           </>
         )
       } else if (item.type === 'popularFeedsLoading') {
@@ -529,15 +500,20 @@ export function FeedsScreen(_props: Props) {
       return null
     },
     [
-      _,
-      hasSession,
       isMobile,
-      pal,
+      pal.view,
+      pal.border,
+      pal.text,
+      pal.icon,
+      pal.textLight,
+      _,
+      preferences?.feeds?.saved?.length,
       query,
       onChangeQuery,
       onPressCancelSearch,
       onSubmitQuery,
       onChangeSearchFocus,
+      hasSession,
     ],
   )
 
@@ -552,8 +528,6 @@ export function FeedsScreen(_props: Props) {
         />
       )}
 
-      {preferences ? <View /> : <ActivityIndicator />}
-
       <List
         ref={listRef}
         style={[!isTabletOrDesktop && s.flex1, styles.list]}
@@ -660,6 +634,64 @@ function SavedFeedLoadingPlaceholder() {
   )
 }
 
+function FeedsSavedHeader() {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.px_md,
+        a.pt_2xl,
+        a.gap_md,
+        isWeb ? a.pb_2xl : a.pb_xl,
+        a.border_b,
+        t.atoms.border_contrast_low,
+      ]}>
+      <IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" />
+      <View style={[a.flex_1, a.gap_sm]}>
+        <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}>
+          <Trans>My Feeds</Trans>
+        </Text>
+        <Text style={[t.atoms.text_contrast_high]}>
+          <Trans>All the feeds you've saved, right in one place.</Trans>
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+function FeedsAboutHeader() {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.px_md,
+        a.pt_2xl,
+        a.gap_md,
+        isWeb ? a.pb_2xl : a.pb_xl,
+      ]}>
+      <IconCircle
+        icon={ListMagnifyingGlass_Stroke2_Corner0_Rounded}
+        size="lg"
+      />
+      <View style={[a.flex_1, a.gap_sm]}>
+        <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}>
+          <Trans>Discover New Feeds</Trans>
+        </Text>
+        <Text style={[t.atoms.text_contrast_high]}>
+          <Trans>
+            Custom feeds built by the community bring you new experiences and
+            help you find the content you love.
+          </Trans>
+        </Text>
+      </View>
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-- 
cgit 1.4.1