diff --git a/src/screens/Onboarding/IconCircle.tsx b/src/components/IconCircle.tsx similarity index 91% rename from src/screens/Onboarding/IconCircle.tsx rename to src/components/IconCircle.tsx index a54c8b4e..aa779e37 100644 --- a/src/screens/Onboarding/IconCircle.tsx +++ b/src/components/IconCircle.tsx @@ -30,8 +30,8 @@ export function IconCircle({ a.align_center, a.rounded_full, { - width: 64, - height: 64, + width: size === 'lg' ? 52 : 64, + height: size === 'lg' ? 52 : 64, backgroundColor: t.name === 'light' ? t.palette.primary_50 : t.palette.primary_950, }, diff --git a/src/screens/Onboarding/StepAlgoFeeds/index.tsx b/src/screens/Onboarding/StepAlgoFeeds/index.tsx index 33e51920..1a4e4c49 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 72d53658..944dcb96 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 114e274b..898afad1 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 4eaf0366..ea23b74f 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 c831b688..543a5b15 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 3caa38d4..14faddc1 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 3640b764..4a221085 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 7216fd10..2e604410 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 @@ -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 ( - + ) } else if (item.type === 'savedFeedsHeader') { - if (!isMobile) { - return ( - - - My Feeds - - - - - - - - + return ( + <> + {!isMobile && ( + + + Feeds + + + + + + + + + - - ) - } - return + )} + {preferences?.feeds?.saved?.length !== 0 && } + + ) } else if (item.type === 'savedFeedNoResults') { return ( - - - Discover new feeds - - - {!isMobile && ( - - )} + + + - - {isMobile && ( - - - - )} ) } 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 ? : } - + + + + My Feeds + + + All the feeds you've saved, right in one place. + + + + ) +} + +function FeedsAboutHeader() { + const t = useTheme() + + return ( + + + + + Discover New Feeds + + + + Custom feeds built by the community bring you new experiences and + help you find the content you love. + + + + + ) +} + const styles = StyleSheet.create({ container: { flex: 1,