Add internal links to subs screen

This commit is contained in:
Eric Bailey
2024-10-28 14:42:08 -05:00
parent 67eaf1baa7
commit 898503a554
5 changed files with 56 additions and 0 deletions
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6 4.667A2.667 2.667 0 0 1 8.667 2c1.34 0 2.538.608 3.333 1.564A4.32 4.32 0 0 1 15.333 2 2.667 2.667 0 0 1 18 4.667c0 .859-.25 1.66-.681 2.333H20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-7V7h.667A2.333 2.333 0 0 0 16 4.667.667.667 0 0 0 15.333 4 2.333 2.333 0 0 0 13 6.333V7h-2v-.667A2.333 2.333 0 0 0 8.667 4 .667.667 0 0 0 8 4.667 2.333 2.333 0 0 0 10.333 7H11v4H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.681A4.3 4.3 0 0 1 6 4.667ZM11 13H4v7a1 1 0 0 0 1 1h6v-8Zm9 0h-7v8h6a1 1 0 0 0 1-1v-7Z" clip-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 617 B

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6 4.667A2.667 2.667 0 0 1 8.667 2c1.34 0 2.538.608 3.333 1.564A4.32 4.32 0 0 1 15.333 2 2.667 2.667 0 0 1 18 4.667c0 .859-.25 1.66-.681 2.333H20a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.681A4.3 4.3 0 0 1 6 4.667ZM10.333 7H11v-.667A2.333 2.333 0 0 0 8.667 4 .667.667 0 0 0 8 4.667 2.333 2.333 0 0 0 10.333 7ZM13 6.333V7h.667A2.333 2.333 0 0 0 16 4.667.667.667 0 0 0 15.333 4 2.333 2.333 0 0 0 13 6.333ZM11 9H5v2h6V9Zm2 2V9h6v2h-6Zm-2 2H6v6h5v-6Zm2 6v-6h5v6h-5Z" clip-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 659 B

+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Gift1_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M6 4.667A2.667 2.667 0 0 1 8.667 2c1.34 0 2.538.608 3.333 1.564A4.324 4.324 0 0 1 15.333 2 2.667 2.667 0 0 1 18 4.667c0 .859-.25 1.66-.681 2.333H20a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.681A4.313 4.313 0 0 1 6 4.667ZM10.333 7H11v-.667A2.333 2.333 0 0 0 8.667 4 .667.667 0 0 0 8 4.667 2.333 2.333 0 0 0 10.333 7ZM13 6.333V7h.667A2.333 2.333 0 0 0 16 4.667.667.667 0 0 0 15.333 4 2.333 2.333 0 0 0 13 6.333ZM11 9H5v2h6V9Zm2 2V9h6v2h-6Zm-2 2H6v6h5v-6Zm2 6v-6h5v6h-5Z',
})
export const Gift1_Filled_Corner0_Rounded = createSinglePathSVG({
path: 'M6 4.667A2.667 2.667 0 0 1 8.667 2c1.34 0 2.538.608 3.333 1.564A4.324 4.324 0 0 1 15.333 2 2.667 2.667 0 0 1 18 4.667c0 .859-.25 1.66-.681 2.333H20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-7V7h.667A2.333 2.333 0 0 0 16 4.667.667.667 0 0 0 15.333 4 2.333 2.333 0 0 0 13 6.333V7h-2v-.667A2.333 2.333 0 0 0 8.667 4 .667.667 0 0 0 8 4.667 2.333 2.333 0 0 0 10.333 7H11v4H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.681A4.313 4.313 0 0 1 6 4.667ZM11 13H4v7a1 1 0 0 0 1 1h6v-8Zm9 0h-7v8h6a1 1 0 0 0 1-1v-7Z',
})
@@ -16,6 +16,7 @@ import {atoms} from '#/alf'
import {useTheme} from '#/alf' import {useTheme} from '#/alf'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
import {Gift1_Stroke2_Corner0_Rounded as Gift} from '#/components/icons/Gift1'
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
import {Link} from '#/components/Link' import {Link} from '#/components/Link'
@@ -73,6 +74,9 @@ export function HomeHeaderLayoutMobile({
]}> ]}>
{IS_DEV && ( {IS_DEV && (
<> <>
<Link label="Jump to subscriptions" to="/subscriptions">
<Gift size="md" />
</Link>
<Link <Link
label="View storybook" label="View storybook"
to="/sys/debug" to="/sys/debug"
+41
View File
@@ -5,6 +5,7 @@ import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {StackActions, useNavigation} from '@react-navigation/native' import {StackActions, useNavigation} from '@react-navigation/native'
import {IS_INTERNAL} from '#/lib/app-info'
import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants' import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
import {PressableScale} from '#/lib/custom-animations/PressableScale' import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState' import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
@@ -30,6 +31,10 @@ import {
Bell_Stroke2_Corner0_Rounded as Bell, Bell_Stroke2_Corner0_Rounded as Bell,
} from '#/components/icons/Bell' } from '#/components/icons/Bell'
import {BulletList_Stroke2_Corner0_Rounded as List} from '#/components/icons/BulletList' import {BulletList_Stroke2_Corner0_Rounded as List} from '#/components/icons/BulletList'
import {
Gift1_Filled_Corner0_Rounded as GiftFilled,
Gift1_Stroke2_Corner0_Rounded as Gift,
} from '#/components/icons/Gift1'
import { import {
Hashtag_Filled_Corner0_Rounded as HashtagFilled, Hashtag_Filled_Corner0_Rounded as HashtagFilled,
Hashtag_Stroke2_Corner0_Rounded as Hashtag, Hashtag_Stroke2_Corner0_Rounded as Hashtag,
@@ -205,6 +210,11 @@ let DrawerContent = ({}: {}): React.ReactNode => {
setDrawerOpen(false) setDrawerOpen(false)
}, [navigation, setDrawerOpen]) }, [navigation, setDrawerOpen])
const onPressSubscriptions = React.useCallback(() => {
navigation.navigate('Subscriptions')
setDrawerOpen(false)
}, [navigation, setDrawerOpen])
const onPressFeedback = React.useCallback(() => { const onPressFeedback = React.useCallback(() => {
Linking.openURL( Linking.openURL(
FEEDBACK_FORM_URL({ FEEDBACK_FORM_URL({
@@ -266,6 +276,12 @@ let DrawerContent = ({}: {}): React.ReactNode => {
onPress={onPressProfile} onPress={onPressProfile}
/> />
<SettingsMenuItem onPress={onPressSettings} /> <SettingsMenuItem onPress={onPressSettings} />
{IS_INTERNAL && (
<SubscriptionsMenuItem
isActive={false}
onPress={onPressSubscriptions}
/>
)}
</> </>
) : ( ) : (
<> <>
@@ -562,6 +578,31 @@ let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
} }
SettingsMenuItem = React.memo(SettingsMenuItem) SettingsMenuItem = React.memo(SettingsMenuItem)
let SubscriptionsMenuItem = ({
isActive,
onPress,
}: {
isActive: boolean
onPress: () => void
}): React.ReactNode => {
const {_} = useLingui()
const t = useTheme()
return (
<MenuItem
icon={
isActive ? (
<GiftFilled style={[t.atoms.text]} width={iconWidth} />
) : (
<Gift style={[t.atoms.text]} width={iconWidth} />
)
}
label={_(msg`Support Bluesky`)}
onPress={onPress}
/>
)
}
SubscriptionsMenuItem = React.memo(SubscriptionsMenuItem)
function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) { function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
const t = useTheme() const t = useTheme()
return ( return (