diff --git a/eslint-suppressions.json b/eslint-suppressions.json index 20427ab32b..0bc3b4e372 100644 --- a/eslint-suppressions.json +++ b/eslint-suppressions.json @@ -683,11 +683,6 @@ "count": 1 } }, - "src/view/screens/DebugMod.tsx": { - "@typescript-eslint/no-explicit-any": { - "count": 1 - } - }, "src/view/shell/createNativeStackNavigatorWithAuth.tsx": { "@typescript-eslint/no-explicit-any": { "count": 1 diff --git a/jest/jestSetup.js b/jest/jestSetup.js index 73a509d036..ca04d54261 100644 --- a/jest/jestSetup.js +++ b/jest/jestSetup.js @@ -17,10 +17,6 @@ jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => { } }) -jest.mock('@fortawesome/react-native-fontawesome', () => ({ - FontAwesomeIcon: '', -})) - jest.mock('react-native-safe-area-context', () => { const inset = {top: 0, right: 0, bottom: 0, left: 0} return { diff --git a/package.json b/package.json index 1787e76315..0c472bb0fc 100644 --- a/package.json +++ b/package.json @@ -116,10 +116,6 @@ "@formatjs/intl-locale": "^4.2.13", "@formatjs/intl-numberformat": "^8.15.6", "@formatjs/intl-pluralrules": "^5.4.6", - "@fortawesome/fontawesome-svg-core": "^6.1.1", - "@fortawesome/free-regular-svg-icons": "^6.1.1", - "@fortawesome/free-solid-svg-icons": "^6.1.1", - "@fortawesome/react-native-fontawesome": "^0.3.2", "@growthbook/growthbook": "^1.6.5", "@growthbook/growthbook-react": "^1.6.5", "@ipld/dag-cbor": "^9.2.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c60bd415d..cccd2a3619 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -313,18 +313,6 @@ importers: '@formatjs/intl-pluralrules': specifier: ^5.4.6 version: 5.4.6 - '@fortawesome/fontawesome-svg-core': - specifier: ^6.1.1 - version: 6.7.2 - '@fortawesome/free-regular-svg-icons': - specifier: ^6.1.1 - version: 6.7.2 - '@fortawesome/free-solid-svg-icons': - specifier: ^6.1.1 - version: 6.7.2 - '@fortawesome/react-native-fontawesome': - specifier: ^0.3.2 - version: 0.3.2(@fortawesome/fontawesome-svg-core@6.7.2)(react-native-svg@15.12.1(patch_hash=31401fa6ff01498773afb51a7b066821c471eb3e71b0764a10017938beed49e9)(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0)) '@growthbook/growthbook': specifier: ^1.6.5 version: 1.6.5 @@ -2105,29 +2093,6 @@ packages: '@formatjs/intl-pluralrules@5.4.6': resolution: {integrity: sha512-2HlOq+c7KsSps829SJ3B5987coX5mzKx9NbPcNwQ07eq8FBHgB3HfMoxt5HvLsdk4oQwCjAEnocbtd+wVwZ2Kg==} - '@fortawesome/fontawesome-common-types@6.7.2': - resolution: {integrity: sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==} - engines: {node: '>=6'} - - '@fortawesome/fontawesome-svg-core@6.7.2': - resolution: {integrity: sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==} - engines: {node: '>=6'} - - '@fortawesome/free-regular-svg-icons@6.7.2': - resolution: {integrity: sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==} - engines: {node: '>=6'} - - '@fortawesome/free-solid-svg-icons@6.7.2': - resolution: {integrity: sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==} - engines: {node: '>=6'} - - '@fortawesome/react-native-fontawesome@0.3.2': - resolution: {integrity: sha512-CiWfJWSZHRg12VXlaeFnaa5yJVPOrjsSFEvF6ntz3cnjg4oN3cvauL+JATacMCl0v9xzib32qC1WZAvvGkfB4w==} - peerDependencies: - '@fortawesome/fontawesome-svg-core': ~1 || ~6 - react-native: '>= 0.67' - react-native-svg: '>= 11.x' - '@gorhom/portal@1.0.14': resolution: {integrity: sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==} peerDependencies: @@ -6087,9 +6052,6 @@ packages: resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==} engines: {node: '>=14.18.0'} - humps@2.0.1: - resolution: {integrity: sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==} - husky@9.1.7: resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==} engines: {node: '>=18'} @@ -11144,28 +11106,6 @@ snapshots: decimal.js: 10.6.0 tslib: 2.8.1 - '@fortawesome/fontawesome-common-types@6.7.2': {} - - '@fortawesome/fontawesome-svg-core@6.7.2': - dependencies: - '@fortawesome/fontawesome-common-types': 6.7.2 - - '@fortawesome/free-regular-svg-icons@6.7.2': - dependencies: - '@fortawesome/fontawesome-common-types': 6.7.2 - - '@fortawesome/free-solid-svg-icons@6.7.2': - dependencies: - '@fortawesome/fontawesome-common-types': 6.7.2 - - '@fortawesome/react-native-fontawesome@0.3.2(@fortawesome/fontawesome-svg-core@6.7.2)(react-native-svg@15.12.1(patch_hash=31401fa6ff01498773afb51a7b066821c471eb3e71b0764a10017938beed49e9)(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))': - dependencies: - '@fortawesome/fontawesome-svg-core': 6.7.2 - humps: 2.0.1 - prop-types: 15.8.1 - react-native: 0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0) - react-native-svg: 15.12.1(patch_hash=31401fa6ff01498773afb51a7b066821c471eb3e71b0764a10017938beed49e9)(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0) - '@gorhom/portal@1.0.14(react-native@0.81.5(patch_hash=2656ac6deb71b92a4df4af4593d13ace6a5740936432e5e7e8ef32bc3cd05194)(@babel/core@7.29.0)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)': dependencies: nanoid: 3.3.12 @@ -15769,8 +15709,6 @@ snapshots: human-signals@4.3.1: {} - humps@2.0.1: {} - husky@9.1.7: {} hyphenate-style-name@1.1.0: {} diff --git a/src/App.native.tsx b/src/App.native.tsx index 7bbe72a8d1..2654c6ed83 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -1,5 +1,4 @@ import '#/logger/sentry/setup' -import '#/view/icons' import {Fragment, useEffect, useState} from 'react' import {GestureHandlerRootView} from 'react-native-gesture-handler' diff --git a/src/App.web.tsx b/src/App.web.tsx index 178d3b8298..5c22b3c921 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -1,5 +1,4 @@ import '#/logger/sentry/setup' // must be near top -import '#/view/icons' import './style.css' import {Fragment, useEffect, useState} from 'react' diff --git a/src/screens/StarterPack/StarterPackLandingScreen.tsx b/src/screens/StarterPack/StarterPackLandingScreen.tsx index 8d29a27057..2b08212794 100644 --- a/src/screens/StarterPack/StarterPackLandingScreen.tsx +++ b/src/screens/StarterPack/StarterPackLandingScreen.tsx @@ -7,7 +7,6 @@ import { AtUri, type ModerationOpts, } from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/core/macro' import {useLingui} from '@lingui/react' import {Trans} from '@lingui/react/macro' @@ -29,6 +28,7 @@ import {Button, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' import * as FeedCard from '#/components/FeedCard' import {useRichText} from '#/components/hooks/useRichText' +import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending' import * as Layout from '#/components/Layout' import {LinearGradientBackground} from '#/components/LinearGradientBackground' import {ListMaybePlaceholder} from '#/components/Lists' @@ -209,18 +209,16 @@ function LandingScreenLoaded({ - - + @@ -491,11 +490,10 @@ function Header({ ) : null} {joinedAllTimeCount >= 25 ? ( - - + - + )} diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 0df31da625..55eabf336a 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/src/view/com/composer/photos/Gallery.tsx @@ -11,7 +11,6 @@ import { type ViewStyle, } from 'react-native' import {Image} from 'expo-image' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/core/macro' import {useLingui} from '@lingui/react' import {Trans} from '@lingui/react/macro' @@ -23,6 +22,10 @@ import {type ComposerImage, cropImage} from '#/state/gallery' import {atoms as a, tokens, useTheme} from '#/alf' import {Admonition} from '#/components/Admonition' import * as Dialog from '#/components/Dialog' +import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check' +import {Pencil_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil' +import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus' +import {TimesLarge_Stroke2_Corner0_Rounded as TimesIcon} from '#/components/icons/Times' import {MediaInsetBorder} from '#/components/MediaInsetBorder' import {Text} from '#/components/Typography' import {useAnalytics} from '#/analytics' @@ -198,17 +201,9 @@ const GalleryItem = ({ onPress={onAltTextEdit} style={[styles.altTextControl, altTextControlStyle]}> {image.alt.length !== 0 ? ( - + ) : ( - + )} ALT @@ -222,7 +217,7 @@ const GalleryItem = ({ accessibilityHint="" onPress={onImageEdit} style={styles.imageControl}> - + - + () const onPressFindAccounts = useCallback(() => { @@ -64,19 +62,18 @@ export function CustomFeedEmptyState() { language settings. - + + + ) } @@ -93,22 +90,4 @@ const styles = StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto', }, - emptyBtn: { - marginVertical: 20, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - paddingVertical: 18, - paddingHorizontal: 24, - borderRadius: 30, - }, - - feedsTip: { - position: 'absolute', - left: 22, - }, - feedsTipArrow: { - marginLeft: 32, - marginTop: 8, - }, }) diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx index ca42f71d34..01d3c1affc 100644 --- a/src/view/com/posts/FollowingEmptyState.tsx +++ b/src/view/com/posts/FollowingEmptyState.tsx @@ -1,23 +1,21 @@ import {useCallback} from 'react' import {StyleSheet, View} from 'react-native' -import { - FontAwesomeIcon, - type FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/react/macro' +import {Trans, useLingui} from '@lingui/react/macro' import {useNavigation} from '@react-navigation/native' import {usePalette} from '#/lib/hooks/usePalette' import {MagnifyingGlassIcon} from '#/lib/icons' import {type NavigationProp} from '#/lib/routes/types' import {s} from '#/lib/styles' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron' import {IS_WEB} from '#/env' -import {Button} from '../util/forms/Button' import {Text} from '../util/text/Text' export function FollowingEmptyState() { + const {t: l} = useLingui() const pal = usePalette('default') - const palInverted = usePalette('inverted') const navigation = useNavigation() const onPressFindAccounts = useCallback(() => { @@ -45,36 +43,34 @@ export function FollowingEmptyState() { happening. - + + + You can also discover new Custom Feeds to follow. - + + + ) @@ -98,13 +94,4 @@ const styles = StyleSheet.create({ marginLeft: 'auto', marginRight: 'auto', }, - emptyBtn: { - marginVertical: 20, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - paddingVertical: 18, - paddingHorizontal: 24, - borderRadius: 30, - }, }) diff --git a/src/view/com/posts/FollowingEndOfFeed.tsx b/src/view/com/posts/FollowingEndOfFeed.tsx index 1104142094..a2f06f283c 100644 --- a/src/view/com/posts/FollowingEndOfFeed.tsx +++ b/src/view/com/posts/FollowingEndOfFeed.tsx @@ -1,22 +1,20 @@ import {useCallback} from 'react' import {Dimensions, StyleSheet, View} from 'react-native' -import { - FontAwesomeIcon, - type FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/react/macro' +import {Trans, useLingui} from '@lingui/react/macro' import {useNavigation} from '@react-navigation/native' import {usePalette} from '#/lib/hooks/usePalette' import {type NavigationProp} from '#/lib/routes/types' import {s} from '#/lib/styles' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron' import {IS_WEB} from '#/env' -import {Button} from '../util/forms/Button' import {Text} from '../util/text/Text' export function FollowingEndOfFeed() { + const {t: l} = useLingui() const pal = usePalette('default') - const palInverted = usePalette('inverted') const navigation = useNavigation() const onPressFindAccounts = useCallback(() => { @@ -46,36 +44,34 @@ export function FollowingEndOfFeed() { follow. - + + + You can also discover new Custom Feeds to follow. - + + + ) @@ -93,13 +89,4 @@ const styles = StyleSheet.create({ width: '100%', maxWidth: 460, }, - emptyBtn: { - marginVertical: 20, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - paddingVertical: 18, - paddingHorizontal: 24, - borderRadius: 30, - }, }) diff --git a/src/view/com/util/LoadMoreRetryBtn.tsx b/src/view/com/util/LoadMoreRetryBtn.tsx index 240d5aa34f..f5440a2461 100644 --- a/src/view/com/util/LoadMoreRetryBtn.tsx +++ b/src/view/com/util/LoadMoreRetryBtn.tsx @@ -1,10 +1,7 @@ import {StyleSheet} from 'react-native' -import { - FontAwesomeIcon, - type FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' import {usePalette} from '#/lib/hooks/usePalette' +import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateIcon} from '#/components/icons/ArrowRotate' import {Button} from './forms/Button' import {Text} from './text/Text' @@ -18,11 +15,7 @@ export function LoadMoreRetryBtn({ const pal = usePalette('default') return ( ) diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 386f6b0995..420fd0270f 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -5,13 +5,13 @@ import { Pressable, type StyleProp, StyleSheet, + Text as RNText, View, type ViewStyle, } from 'react-native' import Svg, {Circle, Path, Rect} from 'react-native-svg' import {Image as ExpoImage} from 'expo-image' import {type ModerationUI} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/core/macro' import {useLingui} from '@lingui/react' import {Trans} from '@lingui/react/macro' @@ -270,13 +270,27 @@ let UserAvatar = ({ a.right_0, a.bottom_0, a.rounded_full, - {backgroundColor: t.palette.white}, + {width: 16, height: 16}, + a.align_center, + a.justify_center, + {backgroundColor: t.palette.pink}, + {transform: [{scale: size / 42}]}, ]}> - + + ! + ) }, [moderation?.alert, size, t]) diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx index f11cd77038..3463c70617 100644 --- a/src/view/com/util/error/ErrorMessage.tsx +++ b/src/view/com/util/error/ErrorMessage.tsx @@ -1,21 +1,12 @@ -import { - type StyleProp, - StyleSheet, - TouchableOpacity, - View, - type ViewStyle, -} from 'react-native' -import { - FontAwesomeIcon, - type FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/core/macro' -import {useLingui} from '@lingui/react' +import {type StyleProp, View, type ViewStyle} from 'react-native' +import {useLingui} from '@lingui/react/macro' -import {usePalette} from '#/lib/hooks/usePalette' -import {useTheme} from '#/lib/ThemeContext' +import {atoms as a, useGutters, useTheme, utils} from '#/alf' +import {Button} from '#/components/Button' +import {ArrowRotateClockwise_Stroke2_Corner0_Rounded as ArrowRotateIcon} from '#/components/icons/ArrowRotate' +import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' import * as Layout from '#/components/Layout' -import {Text} from '../text/Text' +import {Text} from '#/components/Typography' export function ErrorMessage({ message, @@ -28,72 +19,51 @@ export function ErrorMessage({ style?: StyleProp onPressTryAgain?: () => void }) { - const theme = useTheme() - const pal = usePalette('error') - const {_} = useLingui() + const {t: l} = useLingui() + const t = useTheme() + const gutter = useGutters(['base']) + return ( - - - - + + {message} {onPressTryAgain && ( - - - + label={l`Retry`} + accessibilityHint={l`Retries the last action, which errored out`} + size="small" + shape="round" + variant="ghost" + hoverStyle={{ + backgroundColor: utils.alpha(t.palette.white, 0.2), + }}> + + )} ) } - -const styles = StyleSheet.create({ - outer: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 8, - paddingHorizontal: 8, - }, - errorIcon: { - borderRadius: 12, - width: 24, - height: 24, - alignItems: 'center', - justifyContent: 'center', - marginRight: 8, - }, - message: { - flex: 1, - paddingRight: 10, - }, - btn: { - paddingHorizontal: 4, - paddingVertical: 4, - }, -}) diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index 24f6c34f79..e37d686f18 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -1,8 +1,4 @@ import {View} from 'react-native' -import { - FontAwesomeIcon, - type FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/core/macro' import {useLingui} from '@lingui/react' import {Trans} from '@lingui/react/macro' @@ -11,6 +7,7 @@ import {usePalette} from '#/lib/hooks/usePalette' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwiseIcon} from '#/components/icons/ArrowRotate' +import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' @@ -56,11 +53,7 @@ export function ErrorScreen({ a.justify_center, {backgroundColor: t.palette.contrast_950}, ]}> - + diff --git a/src/view/icons/index.tsx b/src/view/icons/index.tsx deleted file mode 100644 index 8b1655e6a8..0000000000 --- a/src/view/icons/index.tsx +++ /dev/null @@ -1,220 +0,0 @@ -import {library} from '@fortawesome/fontawesome-svg-core' -import {faAddressCard} from '@fortawesome/free-regular-svg-icons/faAddressCard' -import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell' -import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faBookmark' -import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar' -import {faCircle} from '@fortawesome/free-regular-svg-icons/faCircle' -import {faCircleCheck as farCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck' -import {faCirclePlay} from '@fortawesome/free-regular-svg-icons/faCirclePlay' -import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser' -import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone' -import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' -import {faCommentDots} from '@fortawesome/free-regular-svg-icons/faCommentDots' -import {faComments} from '@fortawesome/free-regular-svg-icons/faComments' -import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass' -import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash' -import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile' -import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk' -import {faHand as farHand} from '@fortawesome/free-regular-svg-icons/faHand' -import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' -import {faImage as farImage} from '@fortawesome/free-regular-svg-icons/faImage' -import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage' -import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste' -import {faSquare} from '@fortawesome/free-regular-svg-icons/faSquare' -import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck' -import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus' -import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan' -import {faUser} from '@fortawesome/free-regular-svg-icons/faUser' -import {faAngleDown} from '@fortawesome/free-solid-svg-icons/faAngleDown' -import {faAngleLeft} from '@fortawesome/free-solid-svg-icons/faAngleLeft' -import {faAngleRight} from '@fortawesome/free-solid-svg-icons/faAngleRight' -import {faAngleUp} from '@fortawesome/free-solid-svg-icons/faAngleUp' -import {faArrowDown} from '@fortawesome/free-solid-svg-icons/faArrowDown' -import {faArrowLeft} from '@fortawesome/free-solid-svg-icons/faArrowLeft' -import {faArrowRight} from '@fortawesome/free-solid-svg-icons/faArrowRight' -import {faArrowRightFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowRightFromBracket' -import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft' -import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate' -import {faArrowTrendUp} from '@fortawesome/free-solid-svg-icons/faArrowTrendUp' -import {faArrowUp} from '@fortawesome/free-solid-svg-icons/faArrowUp' -import {faArrowUpFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket' -import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare' -import {faAt} from '@fortawesome/free-solid-svg-icons/faAt' -import {faBan} from '@fortawesome/free-solid-svg-icons/faBan' -import {faBars} from '@fortawesome/free-solid-svg-icons/faBars' -import {faBell} from '@fortawesome/free-solid-svg-icons/faBell' -import {faBookmark} from '@fortawesome/free-solid-svg-icons/faBookmark' -import {faCamera} from '@fortawesome/free-solid-svg-icons/faCamera' -import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck' -import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown' -import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight' -import {faCircleCheck} from '@fortawesome/free-solid-svg-icons/faCircleCheck' -import {faCircleDot} from '@fortawesome/free-solid-svg-icons/faCircleDot' -import {faCircleExclamation} from '@fortawesome/free-solid-svg-icons/faCircleExclamation' -import {faClipboardCheck} from '@fortawesome/free-solid-svg-icons/faClipboardCheck' -import {faClone} from '@fortawesome/free-solid-svg-icons/faClone' -import {faCommentSlash} from '@fortawesome/free-solid-svg-icons/faCommentSlash' -import {faDownload} from '@fortawesome/free-solid-svg-icons/faDownload' -import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis' -import {faEnvelope} from '@fortawesome/free-solid-svg-icons/faEnvelope' -import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation' -import {faEye} from '@fortawesome/free-solid-svg-icons/faEye' -import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter' -import {faFire} from '@fortawesome/free-solid-svg-icons/faFire' -import {faFlask} from '@fortawesome/free-solid-svg-icons/faFlask' -import {faGear} from '@fortawesome/free-solid-svg-icons/faGear' -import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe' -import {faHand} from '@fortawesome/free-solid-svg-icons/faHand' -import {faHashtag} from '@fortawesome/free-solid-svg-icons/faHashtag' -import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart' -import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse' -import {faImage} from '@fortawesome/free-solid-svg-icons/faImage' -import {faInfo} from '@fortawesome/free-solid-svg-icons/faInfo' -import {faLanguage} from '@fortawesome/free-solid-svg-icons/faLanguage' -import {faLink} from '@fortawesome/free-solid-svg-icons/faLink' -import {faList} from '@fortawesome/free-solid-svg-icons/faList' -import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl' -import {faLock} from '@fortawesome/free-solid-svg-icons/faLock' -import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass' -import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky' -import {faPaintRoller} from '@fortawesome/free-solid-svg-icons/faPaintRoller' -import {faPause} from '@fortawesome/free-solid-svg-icons/faPause' -import {faPen} from '@fortawesome/free-solid-svg-icons/faPen' -import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib' -import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare' -import {faPhone} from '@fortawesome/free-solid-svg-icons/faPhone' -import {faPlay} from '@fortawesome/free-solid-svg-icons/faPlay' -import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus' -import {faQuoteLeft} from '@fortawesome/free-solid-svg-icons/faQuoteLeft' -import {faReply} from '@fortawesome/free-solid-svg-icons/faReply' -import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet' -import {faRss} from '@fortawesome/free-solid-svg-icons/faRss' -import {faSatelliteDish} from '@fortawesome/free-solid-svg-icons/faSatelliteDish' -import {faServer} from '@fortawesome/free-solid-svg-icons/faServer' -import {faShare} from '@fortawesome/free-solid-svg-icons/faShare' -import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare' -import {faShield} from '@fortawesome/free-solid-svg-icons/faShield' -import {faSignal} from '@fortawesome/free-solid-svg-icons/faSignal' -import {faSliders} from '@fortawesome/free-solid-svg-icons/faSliders' -import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack' -import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket' -import {faUniversalAccess} from '@fortawesome/free-solid-svg-icons/faUniversalAccess' -import {faUserCheck} from '@fortawesome/free-solid-svg-icons/faUserCheck' -import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus' -import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers' -import {faUserSlash} from '@fortawesome/free-solid-svg-icons/faUserSlash' -import {faUsersSlash} from '@fortawesome/free-solid-svg-icons/faUsersSlash' -import {faUserXmark} from '@fortawesome/free-solid-svg-icons/faUserXmark' -import {faX} from '@fortawesome/free-solid-svg-icons/faX' -import {faXmark} from '@fortawesome/free-solid-svg-icons/faXmark' - -library.add( - faAddressCard, - faAngleDown, - faAngleLeft, - faAngleRight, - faAngleUp, - faArrowLeft, - faArrowRight, - faArrowUp, - faArrowDown, - faArrowRightFromBracket, - faArrowUpFromBracket, - faArrowUpRightFromSquare, - faArrowRotateLeft, - faArrowTrendUp, - faArrowsRotate, - faAt, - faBan, - faBars, - faBell, - farBell, - faBookmark, - farBookmark, - farCalendar, - faCamera, - faCheck, - faChevronRight, - faCircle, - faCircleCheck, - farCircleCheck, - faCircleDot, - faCircleExclamation, - faCirclePlay, - faCircleUser, - faClipboardCheck, - faClone, - farClone, - faComment, - faCommentDots, - faCommentSlash, - faComments, - faCompass, - faDownload, - faEllipsis, - faEnvelope, - faEye, - faExclamation, - farEyeSlash, - faFaceSmile, - faFire, - faFlask, - faFloppyDisk, - faGear, - faGlobe, - faHand, - farHand, - faHashtag, - faHeart, - fasHeart, - faHouse, - faImage, - farImage, - faInfo, - faLanguage, - faLink, - faList, - faListUl, - faLock, - faMagnifyingGlass, - faMessage, - faNoteSticky, - faPaintRoller, - faPaste, - faPause, - faPen, - faPenNib, - faPenToSquare, - faPhone, - faPlay, - faPlus, - faQuoteLeft, - faReply, - faRetweet, - faRss, - faSatelliteDish, - faServer, - faShare, - faShareFromSquare, - faShield, - faSignal, - faSliders, - faSquare, - faSquareCheck, - faSquarePlus, - faUniversalAccess, - faUser, - faUsers, - faUserCheck, - faUserSlash, - faUserPlus, - faUserXmark, - faUsersSlash, - faThumbtack, - faTicket, - faTrashCan, - faX, - faXmark, - faChevronDown, - faFilter, -) diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx index c409dc7bc1..c3fe8fba8e 100644 --- a/src/view/screens/DebugMod.tsx +++ b/src/view/screens/DebugMod.tsx @@ -1,5 +1,6 @@ import {useMemo, useState} from 'react' import {View} from 'react-native' +import {useSharedValue} from 'react-native-reanimated' import { type AppBskyActorDefs, type AppBskyFeedDefs, @@ -54,6 +55,7 @@ import * as ProfileCard from '#/components/ProfileCard' import {H1, H3, P, Text} from '#/components/Typography' import {ScreenHider} from '../../components/moderation/ScreenHider' import {NotificationFeedItem} from '../com/notifications/NotificationFeedItem' +import {PagerHeaderProvider} from '../com/pager/PagerHeaderContext' import {PostFeedItem} from '../com/posts/PostFeedItem' const LABEL_VALUES: (keyof typeof LABELS)[] = Object.keys( @@ -272,325 +274,341 @@ export const DebugModScreen = ({}: NativeStackScreenProps< return moderatePost(post, modOpts) }, [post, modOpts]) + const sv = useSharedValue(0) + return ( - - - -

- Moderation states -

+ + + + +

+ Moderation states +

- - - - Label - - - Block - - - Mute - - + + + + Label + + + Block + + + Mute + + - {scenario[0] === 'label' && ( - <> - - - - {LABEL_VALUES.map(labelValue => { - let targetFixed = target[0] - if ( - targetFixed !== 'account' && - targetFixed !== 'profile' - ) { - targetFixed = 'content' - } - const disabled = - isSelfLabel && - LABELS[labelValue].flags.includes('no-self') - return ( - - - {labelValue} - - ) - })} - - - Custom label - - - - - {label[0] === 'custom' ? ( - - ) : ( - <> - - - - )} - - - - + {scenario[0] === 'label' && ( + <> + - - - - Target is me - - - - Following target - - - - Self label - - - - Adult disabled - - - - Signed out + type="radio" + values={label} + onChange={setLabel}> + + {LABEL_VALUES.map(labelValue => { + let targetFixed = target[0] + if ( + targetFixed !== 'account' && + targetFixed !== 'profile' + ) { + targetFixed = 'content' + } + const disabled = + isSelfLabel && + LABELS[labelValue].flags.includes('no-self') + return ( + + + {labelValue} + + ) + })} + + + Custom label - {LABELS[label[0] as keyof typeof LABELS]?.configurable !== - false && ( - - - Preference - - - + ) : ( + <> + + + + )} + + + + + + + + + Target is me + + + + + Following target + + + + + Self label + + + + Adult disabled + + + + Signed out + + + + + {LABELS[label[0] as keyof typeof LABELS]?.configurable !== + false && ( + + - + Preference + + + + + + Hide + + + + Warn + + + + Ignore + + + + + )} + + + + + + + Target + + + + + - Hide + Account - + - Warn + Profile - + - Ignore + Post + + + + Embed - )} - - - - - - - Target - - - - - - - Account - - - - Profile - - - - Post - - - - Embed - - - - - - )} - - - - - - - - Post - - - Notifications - - - Account - - - Data - - - - - {view[0] === 'post' && ( - <> - - - - - - - - )} - {view[0] === 'notifications' && ( - <> - - - - - - - )} + - {view[0] === 'account' && ( - <> - - + - - - - )} + + + Post + + + + Notifications + + + + Account + + + Data + + - {view[0] === 'data' && ( - <> - - - - - - - )} - + + {view[0] === 'post' && ( + <> + + - - - - + + + + + + + )} + + {view[0] === 'notifications' && ( + <> + + + + + + + )} + + {view[0] === 'account' && ( + <> + + + + + + + )} + + {view[0] === 'data' && ( + <> + + + + + + + )} + + + + + + + ) } @@ -760,7 +778,7 @@ function SmallToggler({ ) } -function DataView({label, data}: {label: string; data: any}) { +function DataView({label, data}: {label: string; data: unknown}) { return (