acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Align components

Browse Source
This commit is contained in:
Eric Bailey
2024-12-16 14:58:28 -06:00
parent 682dc446bf
commit a59802a54a
3 changed files with 161 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/shell/desktop/RightNav.tsx
+2 -75
View File
@@ -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
+92
View File
@@ -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 />
</>
)
}