Align components
This commit is contained in:
Eric Bailey
@@ -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,
|
||||
height: 20,
|
||||
}]}>
|
||||
{/*
|
||||
<View
|
||||
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({
|
||||
mutedWords,
|
||||
text: name
|
||||
})) return
|
||||
if (
|
||||
hasMutedWord({
|
||||
mutedWords,
|
||||
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])
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user