From 6df90b2c70589b1d34430745b912e687b4e8b2fa Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 17:10:03 -0600 Subject: [PATCH 01/75] Add common gutter styles as hook --- src/alf/index.tsx | 1 + src/alf/util/useGutterStyles.ts | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 src/alf/util/useGutterStyles.ts diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 5d08722ff4..a96803c561 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -20,6 +20,7 @@ export * from '#/alf/types' export * from '#/alf/util/flatten' export * from '#/alf/util/platform' export * from '#/alf/util/themeSelector' +export * from '#/alf/util/useGutterStyles' export type Alf = { themeName: ThemeName diff --git a/src/alf/util/useGutterStyles.ts b/src/alf/util/useGutterStyles.ts new file mode 100644 index 0000000000..64b246fdd2 --- /dev/null +++ b/src/alf/util/useGutterStyles.ts @@ -0,0 +1,21 @@ +import React from 'react' + +import {atoms as a, useBreakpoints, ViewStyleProp} from '#/alf' + +export function useGutterStyles({ + top, + bottom, +}: { + top?: boolean + bottom?: boolean +} = {}) { + const {gtMobile} = useBreakpoints() + return React.useMemo(() => { + return [ + a.px_lg, + top && a.pt_md, + bottom && a.pb_md, + gtMobile && [a.px_xl, top && a.pt_lg, bottom && a.pb_lg], + ] + }, [gtMobile, top, bottom]) +} From e406bad927d8828654ec6a0522641b191accc7a2 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 17:11:00 -0600 Subject: [PATCH 02/75] Add computed scrollbar gutter CSS vars --- bskyweb/templates/base.html | 16 ++++++++++++++++ web/index.html | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 4c02805e3b..e7a155e107 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -38,6 +38,10 @@ font-style: italic; font-display: swap; } + :root { + --scrollbar-offset: 0px; + --scrollbar-offset-negative: 0px; + } html { background-color: white; scrollbar-gutter: stable both-edges; @@ -82,6 +86,18 @@ } + + {% include "scripts.html" %} diff --git a/web/index.html b/web/index.html index 28b3a3e3d7..c3aed436a9 100644 --- a/web/index.html +++ b/web/index.html @@ -43,6 +43,10 @@ font-style: italic; font-display: swap; } + :root { + --scrollbar-offset: 0px; + --scrollbar-offset-negative: 0px; + } html { background-color: white; scrollbar-gutter: stable both-edges; @@ -86,6 +90,18 @@ width: 100%; } + + From 63844a810e3b59cd98d03c77f92b7452c236bf96 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 17:11:27 -0600 Subject: [PATCH 03/75] Add new layout components --- src/components/Layout/Header/index.tsx | 160 +++++++++++++++++++++ src/components/Layout/index.tsx | 183 +++++++++++++++++++++++++ 2 files changed, 343 insertions(+) create mode 100644 src/components/Layout/Header/index.tsx create mode 100644 src/components/Layout/index.tsx diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx new file mode 100644 index 0000000000..1cab3605d2 --- /dev/null +++ b/src/components/Layout/Header/index.tsx @@ -0,0 +1,160 @@ +import React from 'react' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' + +import {NavigationProp} from '#/lib/routes/types' +import {isIOS} from '#/platform/detection' +import {useSetDrawerOpen} from '#/state/shell' +import { + atoms as a, + useBreakpoints, + useGutterStyles, + useTheme, + ViewStyleProp, +} from '#/alf' +import {Button, ButtonIcon} from '#/components/Button' +import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' +import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import {Text} from '#/components/Typography' + +const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3 +const BUTTON_SIZE = 34 // small button + +export function Outer({children}: {children: React.ReactNode}) { + const t = useTheme() + const gutter = useGutterStyles() + + return ( + + {children} + + ) +} + +export function Content({children}: {children: React.ReactNode}) { + return ( + + {children} + + ) +} + +export function Slot({ + children, + style, +}: {children?: React.ReactNode} & ViewStyleProp) { + return ( + + {children} + + ) +} + +export function BackButton() { + const {_} = useLingui() + const navigation = useNavigation() + + const onPressBack = React.useCallback(() => { + if (navigation.canGoBack()) { + navigation.goBack() + } else { + navigation.navigate('Home') + } + }, [navigation]) + + return ( + + + + ) +} + +export function MenuButton() { + const {_} = useLingui() + const setDrawerOpen = useSetDrawerOpen() + const {gtMobile} = useBreakpoints() + + const onPress = React.useCallback(() => { + setDrawerOpen(true) + }, [setDrawerOpen]) + + return gtMobile ? null : ( + + + + ) +} + +export function TitleText({children}: {children: React.ReactNode}) { + const {gtMobile} = useBreakpoints() + return ( + + {children} + + ) +} + +export function SubtitleText({children}: {children: React.ReactNode}) { + const t = useTheme() + return ( + + {children} + + ) +} diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx new file mode 100644 index 0000000000..26308a54c0 --- /dev/null +++ b/src/components/Layout/index.tsx @@ -0,0 +1,183 @@ +import React, {useContext, useMemo} from 'react' +import {StyleSheet, View, ViewProps, ViewStyle} from 'react-native' +import {StyleProp} from 'react-native' +import { + KeyboardAwareScrollView, + KeyboardAwareScrollViewProps, +} from 'react-native-keyboard-controller' +import Animated, {AnimatedScrollViewProps} from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' + +import {isWeb} from '#/platform/detection' +import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' + +export * as Header from '#/components/Layout/Header' + +// Every screen should have a Layout component wrapping it. +// This component provides a default padding for the top of the screen. +// This allows certain screens to avoid the top padding if they want to. + +const LayoutContext = React.createContext({ + withinScreen: false, + topPaddingDisabled: false, + withinScrollView: false, +}) + +export type ScreenProps = React.ComponentProps & { + disableTopPadding?: boolean + style?: StyleProp +} + +/** + * Every screen should have a Layout.Screen component wrapping it. + * This component provides a default padding for the top of the screen + * and height/minHeight + */ +export const Screen = React.memo(function Screen({ + disableTopPadding = false, + style, + ...props +}: ScreenProps) { + const {top} = useSafeAreaInsets() + const context = useMemo( + () => ({ + withinScreen: true, + topPaddingDisabled: disableTopPadding, + withinScrollView: false, + }), + [disableTopPadding], + ) + return ( + + {isWeb && } + + + ) +}) + +export type ContentProps = AnimatedScrollViewProps & { + style?: StyleProp + contentContainerStyle?: StyleProp +} + +export const Content = React.memo(function Content({ + children, + style, + contentContainerStyle, + ...props +}: ContentProps) { + const context = useContext(LayoutContext) + const newContext = useMemo( + () => ({...context, withinScrollView: true}), + [context], + ) + return ( + + + {isWeb ? ( + // @ts-ignore web only -esb +
{children}
+ ) : ( + children + )} + + + ) +}) + +export type KeyboardAwareContentProps = KeyboardAwareScrollViewProps & { + children: React.ReactNode + contentContainerStyle?: StyleProp +} + +export const KeyboardAwareContent = React.forwardRef(function LayoutScrollView( + {children, style, contentContainerStyle, ...props}: KeyboardAwareContentProps, + _ref: React.Ref, +) { + return ( + + {isWeb ?
{children}
: children} + + ) +}) + +export const WebCenterBorders = React.forwardRef(function LayoutContent() { + const t = useTheme() + const {gtMobile} = useBreakpoints() + return gtMobile ? ( + + ) : null +}) + +export const Center = React.forwardRef(function LayoutContent( + {children, style, ...props}: ViewProps, + ref: React.Ref, +) { + const {gtMobile} = useBreakpoints() + return ( + + {children} + + ) +}) + +const styles = StyleSheet.create({ + scrollViewCommonStyles: { + width: '100%', + }, + scrollViewContentContainer: { + paddingBottom: 100, + }, +}) From e88b3e4b385015d34c8135b0a3ee5d74f474a03e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 17:12:01 -0600 Subject: [PATCH 04/75] Replace layout components in settings screens --- src/components/Layout.tsx | 100 ------------------ src/screens/Settings/AboutSettings.tsx | 9 +- .../Settings/AccessibilitySettings.tsx | 9 +- src/screens/Settings/AccountSettings.tsx | 10 +- src/screens/Settings/AppIconSettings.tsx | 11 +- src/screens/Settings/AppPasswords.tsx | 9 +- src/screens/Settings/AppearanceSettings.tsx | 9 +- .../Settings/ContentAndMediaSettings.tsx | 9 +- .../Settings/ExternalMediaPreferences.tsx | 13 ++- .../Settings/FollowingFeedPreferences.tsx | 9 +- src/screens/Settings/LanguageSettings.tsx | 9 +- src/screens/Settings/NotificationSettings.tsx | 9 +- .../Settings/PrivacyAndSecuritySettings.tsx | 9 +- src/screens/Settings/Settings.tsx | 10 +- src/screens/Settings/ThreadPreferences.tsx | 11 +- 15 files changed, 118 insertions(+), 118 deletions(-) delete mode 100644 src/components/Layout.tsx diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx deleted file mode 100644 index ea11e22174..0000000000 --- a/src/components/Layout.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import React, {useContext, useMemo} from 'react' -import {View, ViewStyle} from 'react-native' -import {StyleProp} from 'react-native' -import {useSafeAreaInsets} from 'react-native-safe-area-context' - -import {ViewHeader} from '#/view/com/util/ViewHeader' -import {ScrollView} from '#/view/com/util/Views' -import {CenteredView} from '#/view/com/util/Views' -import {atoms as a} from '#/alf' - -// Every screen should have a Layout component wrapping it. -// This component provides a default padding for the top of the screen. -// This allows certain screens to avoid the top padding if they want to. - -const LayoutContext = React.createContext({ - withinScreen: false, - topPaddingDisabled: false, - withinScrollView: false, -}) - -/** - * Every screen should have a Layout.Screen component wrapping it. - * This component provides a default padding for the top of the screen - * and height/minHeight - */ -let Screen = ({ - disableTopPadding = false, - style, - ...props -}: React.ComponentProps & { - disableTopPadding?: boolean - style?: StyleProp -}): React.ReactNode => { - const {top} = useSafeAreaInsets() - const context = useMemo( - () => ({ - withinScreen: true, - topPaddingDisabled: disableTopPadding, - withinScrollView: false, - }), - [disableTopPadding], - ) - return ( - - - - ) -} -Screen = React.memo(Screen) -export {Screen} - -let Header = ( - props: React.ComponentProps, -): React.ReactNode => { - const {withinScrollView} = useContext(LayoutContext) - if (!withinScrollView) { - return ( - - - - ) - } else { - return - } -} -Header = React.memo(Header) -export {Header} - -let Content = ({ - style, - contentContainerStyle, - ...props -}: React.ComponentProps & { - style?: StyleProp - contentContainerStyle?: StyleProp -}): React.ReactNode => { - const context = useContext(LayoutContext) - const newContext = useMemo( - () => ({...context, withinScrollView: true}), - [context], - ) - return ( - - - - ) -} -Content = React.memo(Content) -export {Content} diff --git a/src/screens/Settings/AboutSettings.tsx b/src/screens/Settings/AboutSettings.tsx index 8019a20f90..957dd334e0 100644 --- a/src/screens/Settings/AboutSettings.tsx +++ b/src/screens/Settings/AboutSettings.tsx @@ -21,8 +21,15 @@ export function AboutSettingsScreen({}: Props) { return ( - + + + + + About + + + - + + + + + Accessibility + + + diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index 2495a0f2f9..935e701e96 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/src/screens/Settings/AccountSettings.tsx @@ -38,8 +38,16 @@ export function AccountSettingsScreen({}: Props) { return ( - + + + + + Account + + + + diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx index 1dd87d45f4..392a67bfb2 100644 --- a/src/screens/Settings/AppIconSettings.tsx +++ b/src/screens/Settings/AppIconSettings.tsx @@ -1,7 +1,7 @@ import React from 'react' import {Alert, View} from 'react-native' import {Image} from 'expo-image' -import {msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import * as AppIcon from '@mozzius/expo-dynamic-app-icon' import {NativeStackScreenProps} from '@react-navigation/native-stack' @@ -20,9 +20,16 @@ export function AppIconSettingsScreen({}: Props) { return ( - + + + + + App Icon + + + Defaults {sets.defaults.map(icon => ( diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx index 1ea0bd1b3d..320017111f 100644 --- a/src/screens/Settings/AppPasswords.tsx +++ b/src/screens/Settings/AppPasswords.tsx @@ -44,8 +44,15 @@ export function AppPasswordsScreen({}: Props) { return ( - + + + + + App Passwords + + + {error ? ( - + + + + + Appearance + + + - + + + + + Content & Media + + + export function ExternalMediaPreferencesScreen({}: Props) { - const {_} = useLingui() return ( - + + + + + External Media Preferences + + + diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx index 089491dd0f..0e79f1fd3d 100644 --- a/src/screens/Settings/FollowingFeedPreferences.tsx +++ b/src/screens/Settings/FollowingFeedPreferences.tsx @@ -46,8 +46,15 @@ export function FollowingFeedPreferencesScreen({}: Props) { return ( - + + + + + Following Feed Preferences + + + diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx index a44e2fcec7..88bde14255 100644 --- a/src/screens/Settings/LanguageSettings.tsx +++ b/src/screens/Settings/LanguageSettings.tsx @@ -64,8 +64,15 @@ export function LanguageSettingsScreen({}: Props) { return ( - + + + + + Languages + + + diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx index c5f7078c48..9ca34853c0 100644 --- a/src/screens/Settings/NotificationSettings.tsx +++ b/src/screens/Settings/NotificationSettings.tsx @@ -33,8 +33,15 @@ export function NotificationSettingsScreen({}: Props) { return ( - + + + + + Notification Settings + + + {isQueryError ? ( - + + + + + Privacy and Security + + + - + + + + + Settings + + + + - + + + + + Thread Preferences + + + + + From 48f44fd2905948bff3e54f68c2d68c0e924add89 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 17:12:08 -0600 Subject: [PATCH 05/75] Remove old back button --- src/view/shell/desktop/LeftNav.tsx | 54 +++--------------------------- 1 file changed, 4 insertions(+), 50 deletions(-) diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 0af80854cf..b4ae5db96c 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -1,9 +1,6 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' +import {StyleSheet, View} from 'react-native' +import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import { @@ -14,9 +11,9 @@ import { import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {getCurrentRoute, isStateAtTabRoot, isTab} from '#/lib/routes/helpers' +import {getCurrentRoute, isTab} from '#/lib/routes/helpers' import {makeProfileLink} from '#/lib/routes/links' -import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' +import {CommonNavigatorParams} from '#/lib/routes/types' import {isInvalidHandle} from '#/lib/strings/handles' import {emitSoftReset} from '#/state/events' import {useFetchHandle} from '#/state/queries/handle' @@ -101,47 +98,6 @@ function ProfileCard() { ) } -const HIDDEN_BACK_BNT_ROUTES = ['StarterPackWizard', 'StarterPackEdit'] - -function BackBtn() { - const {isTablet} = useWebMediaQueries() - const pal = usePalette('default') - const navigation = useNavigation() - const {_} = useLingui() - const shouldShow = useNavigationState( - state => - !isStateAtTabRoot(state) && - !HIDDEN_BACK_BNT_ROUTES.includes(getCurrentRoute(state).name), - ) - - const onPressBack = React.useCallback(() => { - if (navigation.canGoBack()) { - navigation.goBack() - } else { - navigation.navigate('Home') - } - }, [navigation]) - - if (!shouldShow || isTablet) { - return <> - } - return ( - - - - ) -} - interface NavItemProps { count?: string href: string @@ -381,8 +337,6 @@ export function DesktopLeftNav() { {hasSession && ( <> - - Date: Mon, 2 Dec 2024 17:15:57 -0600 Subject: [PATCH 06/75] Invert web border logic for easier migration --- src/components/Layout/index.tsx | 4 +++- src/screens/Settings/AboutSettings.tsx | 2 +- src/screens/Settings/AccessibilitySettings.tsx | 2 +- src/screens/Settings/AccountSettings.tsx | 2 +- src/screens/Settings/AppIconSettings.tsx | 2 +- src/screens/Settings/AppPasswords.tsx | 2 +- src/screens/Settings/AppearanceSettings.tsx | 2 +- src/screens/Settings/ContentAndMediaSettings.tsx | 2 +- src/screens/Settings/ExternalMediaPreferences.tsx | 4 +++- src/screens/Settings/FollowingFeedPreferences.tsx | 4 +++- src/screens/Settings/LanguageSettings.tsx | 2 +- src/screens/Settings/NotificationSettings.tsx | 2 +- src/screens/Settings/PrivacyAndSecuritySettings.tsx | 2 +- src/screens/Settings/Settings.tsx | 2 +- src/screens/Settings/ThreadPreferences.tsx | 2 +- 15 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 26308a54c0..c28808473b 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -26,6 +26,7 @@ const LayoutContext = React.createContext({ export type ScreenProps = React.ComponentProps & { disableTopPadding?: boolean style?: StyleProp + temp__enableWebBorders?: boolean } /** @@ -36,6 +37,7 @@ export type ScreenProps = React.ComponentProps & { export const Screen = React.memo(function Screen({ disableTopPadding = false, style, + temp__enableWebBorders, ...props }: ScreenProps) { const {top} = useSafeAreaInsets() @@ -49,7 +51,7 @@ export const Screen = React.memo(function Screen({ ) return ( - {isWeb && } + {isWeb && temp__enableWebBorders && } + diff --git a/src/screens/Settings/AccessibilitySettings.tsx b/src/screens/Settings/AccessibilitySettings.tsx index 4db372dd8e..ab076a44b5 100644 --- a/src/screens/Settings/AccessibilitySettings.tsx +++ b/src/screens/Settings/AccessibilitySettings.tsx @@ -38,7 +38,7 @@ export function AccessibilitySettingsScreen({}: Props) { const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled() return ( - + diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index 935e701e96..0fffb10388 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/src/screens/Settings/AccountSettings.tsx @@ -37,7 +37,7 @@ export function AccountSettingsScreen({}: Props) { const deactivateAccountControl = useDialogControl() return ( - + diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx index 392a67bfb2..c108edc8fb 100644 --- a/src/screens/Settings/AppIconSettings.tsx +++ b/src/screens/Settings/AppIconSettings.tsx @@ -19,7 +19,7 @@ export function AppIconSettingsScreen({}: Props) { const sets = useAppIconSets() return ( - + diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx index 320017111f..2d8b192b39 100644 --- a/src/screens/Settings/AppPasswords.tsx +++ b/src/screens/Settings/AppPasswords.tsx @@ -43,7 +43,7 @@ export function AppPasswordsScreen({}: Props) { const createAppPasswordControl = useDialogControl() return ( - + diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index 0b0e14df08..4bbc46f5dc 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -78,7 +78,7 @@ export function AppearanceSettingsScreen({}: Props) { return ( - + diff --git a/src/screens/Settings/ContentAndMediaSettings.tsx b/src/screens/Settings/ContentAndMediaSettings.tsx index 1f23b38a22..69abe31650 100644 --- a/src/screens/Settings/ContentAndMediaSettings.tsx +++ b/src/screens/Settings/ContentAndMediaSettings.tsx @@ -31,7 +31,7 @@ export function ContentAndMediaSettingsScreen({}: Props) { const setUseInAppBrowser = useSetInAppBrowser() return ( - + diff --git a/src/screens/Settings/ExternalMediaPreferences.tsx b/src/screens/Settings/ExternalMediaPreferences.tsx index 6f87c6e126..882bfbb5cd 100644 --- a/src/screens/Settings/ExternalMediaPreferences.tsx +++ b/src/screens/Settings/ExternalMediaPreferences.tsx @@ -23,7 +23,9 @@ type Props = NativeStackScreenProps< > export function ExternalMediaPreferencesScreen({}: Props) { return ( - + diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx index 0e79f1fd3d..0681f2f4f0 100644 --- a/src/screens/Settings/FollowingFeedPreferences.tsx +++ b/src/screens/Settings/FollowingFeedPreferences.tsx @@ -45,7 +45,9 @@ export function FollowingFeedPreferencesScreen({}: Props) { ) return ( - + diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx index 88bde14255..d03ff8b7dd 100644 --- a/src/screens/Settings/LanguageSettings.tsx +++ b/src/screens/Settings/LanguageSettings.tsx @@ -63,7 +63,7 @@ export function LanguageSettingsScreen({}: Props) { }, [langPrefs.contentLanguages]) return ( - + diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx index 9ca34853c0..c0180b7fd9 100644 --- a/src/screens/Settings/NotificationSettings.tsx +++ b/src/screens/Settings/NotificationSettings.tsx @@ -32,7 +32,7 @@ export function NotificationSettingsScreen({}: Props) { : serverPriority return ( - + diff --git a/src/screens/Settings/PrivacyAndSecuritySettings.tsx b/src/screens/Settings/PrivacyAndSecuritySettings.tsx index a110f66e02..b0b54251d8 100644 --- a/src/screens/Settings/PrivacyAndSecuritySettings.tsx +++ b/src/screens/Settings/PrivacyAndSecuritySettings.tsx @@ -28,7 +28,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) { const {currentAccount} = useSession() return ( - + diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx index 0054da1a50..9c1cad8e89 100644 --- a/src/screens/Settings/Settings.tsx +++ b/src/screens/Settings/Settings.tsx @@ -72,7 +72,7 @@ export function SettingsScreen({}: Props) { const [showDevOptions, setShowDevOptions] = useState(false) return ( - + diff --git a/src/screens/Settings/ThreadPreferences.tsx b/src/screens/Settings/ThreadPreferences.tsx index 409f797d59..de0b270747 100644 --- a/src/screens/Settings/ThreadPreferences.tsx +++ b/src/screens/Settings/ThreadPreferences.tsx @@ -37,7 +37,7 @@ export function ThreadPreferencesScreen({}: Props) { ) return ( - + From b636224fc3fbee79922d1d0040375f789e8697e3 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 17:17:50 -0600 Subject: [PATCH 07/75] Clean up Slot API --- src/components/Layout/Header/index.tsx | 19 ++++++++----------- src/screens/Settings/ThreadPreferences.tsx | 1 - 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 1cab3605d2..7fd2bb1210 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -7,13 +7,7 @@ import {useNavigation} from '@react-navigation/native' import {NavigationProp} from '#/lib/routes/types' import {isIOS} from '#/platform/detection' import {useSetDrawerOpen} from '#/state/shell' -import { - atoms as a, - useBreakpoints, - useGutterStyles, - useTheme, - ViewStyleProp, -} from '#/alf' +import {atoms as a, useBreakpoints, useGutterStyles, useTheme} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' @@ -63,8 +57,11 @@ export function Content({children}: {children: React.ReactNode}) { export function Slot({ children, - style, -}: {children?: React.ReactNode} & ViewStyleProp) { + position = 'left', +}: { + children?: React.ReactNode + position?: 'left' | 'right' +}) { return ( {children} diff --git a/src/screens/Settings/ThreadPreferences.tsx b/src/screens/Settings/ThreadPreferences.tsx index de0b270747..cf720f9749 100644 --- a/src/screens/Settings/ThreadPreferences.tsx +++ b/src/screens/Settings/ThreadPreferences.tsx @@ -46,7 +46,6 @@ export function ThreadPreferencesScreen({}: Props) { Thread Preferences - From 2fd915144434ad1c83abb3421d0586a4b3f004be Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 18:19:42 -0600 Subject: [PATCH 08/75] Port over FF handling of scrollbar offset --- bskyweb/templates/base.html | 7 +++++-- web/index.html | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index e7a155e107..bee2dd1f09 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -93,8 +93,11 @@ var htmlWidth = html.getBoundingClientRect().width; var scrollbarWidth = (windowWidth - htmlWidth) / 2; var scrollbarOffset = scrollbarWidth / 2; - html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`); - html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`); + var isFF = /firefox/i.test(navigator.userAgent) + if (!isFF) { + html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`); + html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`); + } } catch (error) {} diff --git a/web/index.html b/web/index.html index c3aed436a9..d42981ff52 100644 --- a/web/index.html +++ b/web/index.html @@ -98,8 +98,11 @@ var htmlWidth = html.getBoundingClientRect().width; var scrollbarWidth = (windowWidth - htmlWidth) / 2; var scrollbarOffset = scrollbarWidth / 2; - html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`); - html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`); + var isFF = /firefox/i.test(navigator.userAgent) + if (!isFF) { + html.style.setProperty('--scrollbar-offset', `${scrollbarOffset}px`); + html.style.setProperty('--scrollbar-offset-negative', `-${scrollbarOffset}px`); + } } catch (error) {} From 2a60f35ca0643ed4403eba393d0f6219b3d03e82 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 2 Dec 2024 18:42:52 -0600 Subject: [PATCH 09/75] Trade boilerplate for ease of use --- src/components/Layout/Header/index.tsx | 26 +++---------------- src/screens/Settings/AboutSettings.tsx | 1 + .../Settings/AccessibilitySettings.tsx | 1 + src/screens/Settings/AccountSettings.tsx | 1 + src/screens/Settings/AppIconSettings.tsx | 1 + src/screens/Settings/AppPasswords.tsx | 1 + src/screens/Settings/AppearanceSettings.tsx | 1 + .../Settings/ContentAndMediaSettings.tsx | 1 + .../Settings/ExternalMediaPreferences.tsx | 1 + .../Settings/FollowingFeedPreferences.tsx | 1 + src/screens/Settings/LanguageSettings.tsx | 1 + src/screens/Settings/NotificationSettings.tsx | 1 + .../Settings/PrivacyAndSecuritySettings.tsx | 1 + src/screens/Settings/Settings.tsx | 1 + src/screens/Settings/ThreadPreferences.tsx | 1 + 15 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 7fd2bb1210..32705f520d 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -32,46 +32,26 @@ export function Outer({children}: {children: React.ReactNode}) { a.py_sm, t.atoms.border_contrast_low, ]}> - {children} + {children} ) } export function Content({children}: {children: React.ReactNode}) { return ( - + {children} ) } -export function Slot({ - children, - position = 'left', -}: { - children?: React.ReactNode - position?: 'left' | 'right' -}) { +export function Slot({children}: {children?: React.ReactNode}) { return ( {children} diff --git a/src/screens/Settings/AboutSettings.tsx b/src/screens/Settings/AboutSettings.tsx index d24f5756e6..c6a6a6ac9b 100644 --- a/src/screens/Settings/AboutSettings.tsx +++ b/src/screens/Settings/AboutSettings.tsx @@ -29,6 +29,7 @@ export function AboutSettingsScreen({}: Props) { About + Accessibility + diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index 0fffb10388..16a5d43239 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/src/screens/Settings/AccountSettings.tsx @@ -46,6 +46,7 @@ export function AccountSettingsScreen({}: Props) { Account + diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx index c108edc8fb..42fbd8655e 100644 --- a/src/screens/Settings/AppIconSettings.tsx +++ b/src/screens/Settings/AppIconSettings.tsx @@ -29,6 +29,7 @@ export function AppIconSettingsScreen({}: Props) { App Icon + Defaults diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx index 2d8b192b39..b92ece1ac3 100644 --- a/src/screens/Settings/AppPasswords.tsx +++ b/src/screens/Settings/AppPasswords.tsx @@ -52,6 +52,7 @@ export function AppPasswordsScreen({}: Props) { App Passwords + {error ? ( Appearance + Content & Media + External Media Preferences + diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx index 0681f2f4f0..239fc482f6 100644 --- a/src/screens/Settings/FollowingFeedPreferences.tsx +++ b/src/screens/Settings/FollowingFeedPreferences.tsx @@ -56,6 +56,7 @@ export function FollowingFeedPreferencesScreen({}: Props) { Following Feed Preferences + diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx index d03ff8b7dd..8791607760 100644 --- a/src/screens/Settings/LanguageSettings.tsx +++ b/src/screens/Settings/LanguageSettings.tsx @@ -72,6 +72,7 @@ export function LanguageSettingsScreen({}: Props) { Languages + diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx index c0180b7fd9..3f27107ec7 100644 --- a/src/screens/Settings/NotificationSettings.tsx +++ b/src/screens/Settings/NotificationSettings.tsx @@ -41,6 +41,7 @@ export function NotificationSettingsScreen({}: Props) { Notification Settings + {isQueryError ? ( Privacy and Security + diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx index 9c1cad8e89..9b2e8fe3ad 100644 --- a/src/screens/Settings/Settings.tsx +++ b/src/screens/Settings/Settings.tsx @@ -81,6 +81,7 @@ export function SettingsScreen({}: Props) { Settings + diff --git a/src/screens/Settings/ThreadPreferences.tsx b/src/screens/Settings/ThreadPreferences.tsx index cf720f9749..de0b270747 100644 --- a/src/screens/Settings/ThreadPreferences.tsx +++ b/src/screens/Settings/ThreadPreferences.tsx @@ -46,6 +46,7 @@ export function ThreadPreferencesScreen({}: Props) { Thread Preferences + From dd4d94410cf67eae3675ab3f76da7a063565ff4a Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 3 Dec 2024 12:09:13 -0600 Subject: [PATCH 10/75] Limit to one line --- src/components/Layout/Header/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 32705f520d..9d8edbc036 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -116,12 +116,8 @@ export function TitleText({children}: {children: React.ReactNode}) { const {gtMobile} = useBreakpoints() return ( + style={[a.text_lg, a.font_heavy, a.leading_snug, gtMobile && [a.text_xl]]} + numberOfLines={1}> {children} ) From 264a8663a65d3b76a429cd382b082d66ca83f06e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 3 Dec 2024 12:23:20 -0600 Subject: [PATCH 11/75] Allow two lines, fix wrapping --- src/components/Layout/Header/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 9d8edbc036..aa532fc4d5 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -116,8 +116,14 @@ export function TitleText({children}: {children: React.ReactNode}) { const {gtMobile} = useBreakpoints() return ( + style={[ + a.text_lg, + a.font_heavy, + a.leading_tight, + a.text_center, + gtMobile && [a.text_xl], + ]} + numberOfLines={2}> {children} ) From b7f356b53df195f65e43d17e72bd7f5ef9a07b77 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 3 Dec 2024 13:15:37 -0600 Subject: [PATCH 12/75] Fix alignment --- src/components/Layout/Header/index.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index aa532fc4d5..2b2db02d47 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -120,7 +120,7 @@ export function TitleText({children}: {children: React.ReactNode}) { a.text_lg, a.font_heavy, a.leading_tight, - a.text_center, + isIOS && a.text_center, gtMobile && [a.text_xl], ]} numberOfLines={2}> @@ -132,7 +132,14 @@ export function TitleText({children}: {children: React.ReactNode}) { export function SubtitleText({children}: {children: React.ReactNode}) { const t = useTheme() return ( - + {children} ) From 50cea196ed16a2fa2d53af76003351a82b280e58 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 16:30:21 +0000 Subject: [PATCH 13/75] sticky headers --- src/screens/Settings/AboutSettings.tsx | 18 +++++++++--------- .../Settings/AccessibilitySettings.tsx | 18 +++++++++--------- src/screens/Settings/AccountSettings.tsx | 19 +++++++++---------- src/screens/Settings/AppIconSettings.tsx | 18 +++++++++--------- src/screens/Settings/AppPasswords.tsx | 18 +++++++++--------- src/screens/Settings/AppearanceSettings.tsx | 18 +++++++++--------- .../Settings/ContentAndMediaSettings.tsx | 18 +++++++++--------- .../Settings/ExternalMediaPreferences.tsx | 18 +++++++++--------- .../Settings/FollowingFeedPreferences.tsx | 18 +++++++++--------- src/screens/Settings/LanguageSettings.tsx | 18 +++++++++--------- src/screens/Settings/NotificationSettings.tsx | 18 +++++++++--------- .../Settings/PrivacyAndSecuritySettings.tsx | 18 +++++++++--------- src/screens/Settings/Settings.tsx | 19 +++++++++---------- src/screens/Settings/ThreadPreferences.tsx | 19 +++++++++---------- 14 files changed, 126 insertions(+), 129 deletions(-) diff --git a/src/screens/Settings/AboutSettings.tsx b/src/screens/Settings/AboutSettings.tsx index c6a6a6ac9b..2679a148e6 100644 --- a/src/screens/Settings/AboutSettings.tsx +++ b/src/screens/Settings/AboutSettings.tsx @@ -21,16 +21,16 @@ export function AboutSettingsScreen({}: Props) { return ( + + + + + About + + + + - - - - - About - - - - + + + + + Accessibility + + + + - - - - - Accessibility - - - - diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index 16a5d43239..5d5a434239 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/src/screens/Settings/AccountSettings.tsx @@ -38,17 +38,16 @@ export function AccountSettingsScreen({}: Props) { return ( + + + + + Account + + + + - - - - - Account - - - - - diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx index 42fbd8655e..f405836780 100644 --- a/src/screens/Settings/AppIconSettings.tsx +++ b/src/screens/Settings/AppIconSettings.tsx @@ -20,17 +20,17 @@ export function AppIconSettingsScreen({}: Props) { return ( + + + + + App Icon + + + + - - - - - App Icon - - - - Defaults {sets.defaults.map(icon => ( diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx index b92ece1ac3..950dcd1066 100644 --- a/src/screens/Settings/AppPasswords.tsx +++ b/src/screens/Settings/AppPasswords.tsx @@ -44,16 +44,16 @@ export function AppPasswordsScreen({}: Props) { return ( + + + + + App Passwords + + + + - - - - - App Passwords - - - - {error ? ( + + + + + Appearance + + + + - - - - - Appearance - - - - + + + + + Content & Media + + + + - - - - - Content & Media - - - - + + + + + External Media Preferences + + + + - - - - - External Media Preferences - - - - diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx index 239fc482f6..0cd0b7abd2 100644 --- a/src/screens/Settings/FollowingFeedPreferences.tsx +++ b/src/screens/Settings/FollowingFeedPreferences.tsx @@ -48,16 +48,16 @@ export function FollowingFeedPreferencesScreen({}: Props) { + + + + + Following Feed Preferences + + + + - - - - - Following Feed Preferences - - - - diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx index 8791607760..451e19f896 100644 --- a/src/screens/Settings/LanguageSettings.tsx +++ b/src/screens/Settings/LanguageSettings.tsx @@ -64,16 +64,16 @@ export function LanguageSettingsScreen({}: Props) { return ( + + + + + Languages + + + + - - - - - Languages - - - - diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx index 3f27107ec7..4d2eb6d958 100644 --- a/src/screens/Settings/NotificationSettings.tsx +++ b/src/screens/Settings/NotificationSettings.tsx @@ -33,16 +33,16 @@ export function NotificationSettingsScreen({}: Props) { return ( + + + + + Notification Settings + + + + - - - - - Notification Settings - - - - {isQueryError ? ( + + + + + Privacy and Security + + + + - - - - - Privacy and Security - - - - + + + + + Settings + + + + - - - - - Settings - - - - - + + + + + Thread Preferences + + + + - - - - - Thread Preferences - - - - - From faf0c27e6d01dae68cc00f4f6a6d871d7d1f0c39 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 16:47:14 +0000 Subject: [PATCH 14/75] set max with on header and center --- src/components/Layout/Header/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 2b2db02d47..7a17117602 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -31,6 +31,8 @@ export function Outer({children}: {children: React.ReactNode}) { gutter, a.py_sm, t.atoms.border_contrast_low, + a.mx_auto, + {maxWidth: 600}, ]}> {children} From 6a6faf362513e8bd3d2483b71195d979bc5b96f3 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 11:39:37 -0600 Subject: [PATCH 15/75] [Layout] Notifications Header (#6910) * Replace notifications screen header * fix cropped indicator --------- Co-authored-by: Samuel Newman --- src/components/Layout/Header/index.tsx | 14 ++- src/view/com/notifications/Feed.tsx | 12 +- src/view/screens/Notifications.tsx | 158 +++++++++---------------- 3 files changed, 71 insertions(+), 113 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 7a17117602..af20f465a3 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -7,7 +7,13 @@ import {useNavigation} from '@react-navigation/native' import {NavigationProp} from '#/lib/routes/types' import {isIOS} from '#/platform/detection' import {useSetDrawerOpen} from '#/state/shell' -import {atoms as a, useBreakpoints, useGutterStyles, useTheme} from '#/alf' +import { + atoms as a, + TextStyleProp, + useBreakpoints, + useGutterStyles, + useTheme, +} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' @@ -114,7 +120,10 @@ export function MenuButton() { ) } -export function TitleText({children}: {children: React.ReactNode}) { +export function TitleText({ + children, + style, +}: {children: React.ReactNode} & TextStyleProp) { const {gtMobile} = useBreakpoints() return ( {children} diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index bd39ddd843..4876654541 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -10,7 +10,6 @@ import {useLingui} from '@lingui/react' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {cleanError} from '#/lib/strings/errors' import {s} from '#/lib/styles' import {logger} from '#/logger' @@ -46,7 +45,6 @@ export function Feed({ const [isPTRing, setIsPTRing] = React.useState(false) const pal = usePalette('default') - const {isTabletOrMobile} = useWebMediaQueries() const {_} = useLingui() const moderationOpts = useModerationOpts() @@ -133,11 +131,7 @@ export function Feed({ ) } else if (item === LOADING_ITEM) { return ( - + ) @@ -146,11 +140,11 @@ export function Feed({ ) }, - [moderationOpts, isTabletOrMobile, _, onPressRetryLoadMore, pal.border], + [moderationOpts, _, onPressRetryLoadMore, pal.border], ) const FeedFooter = React.useCallback( diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 531d10a7f8..45a6a8468c 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -1,4 +1,4 @@ -import React, {useCallback} from 'react' +import React from 'react' import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -6,7 +6,6 @@ import {useFocusEffect, useIsFocused} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {ComposeIcon2} from '#/lib/icons' import { NativeStackScreenProps, @@ -14,7 +13,7 @@ import { } from '#/lib/routes/types' import {s} from '#/lib/styles' import {logger} from '#/logger' -import {isNative} from '#/platform/detection' +import {isNative, isWeb} from '#/platform/detection' import {emitSoftReset, listenSoftReset} from '#/state/events' import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' import { @@ -29,28 +28,25 @@ import {FAB} from '#/view/com/util/fab/FAB' import {ListMethods} from '#/view/com/util/List' import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' import {MainScrollProvider} from '#/view/com/util/MainScrollProvider' -import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from '#/view/com/util/Views' -import {atoms as a, useTheme} from '#/alf' -import {Button} from '#/components/Button' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Button, ButtonIcon} from '#/components/Button' import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon} from '#/components/icons/SettingsGear2' import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' import {Loader} from '#/components/Loader' -import {Text} from '#/components/Typography' type Props = NativeStackScreenProps< NotificationsTabNavigatorParams, 'Notifications' > export function NotificationsScreen({route: {params}}: Props) { + const t = useTheme() + const {gtTablet} = useBreakpoints() const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() const [isScrolledDown, setIsScrolledDown] = React.useState(false) const [isLoadingLatest, setIsLoadingLatest] = React.useState(false) const scrollElRef = React.useRef(null) - const t = useTheme() - const {isDesktop} = useWebMediaQueries() const queryClient = useQueryClient() const unreadNotifs = useUnreadNotifications() const unreadApi = useUnreadNotificationsApi() @@ -110,102 +106,60 @@ export function NotificationsScreen({route: {params}}: Props) { return listenSoftReset(onPressLoadLatest) }, [onPressLoadLatest, isScreenFocused]) - const renderButton = useCallback(() => { - return ( - - - - ) - }, [_, t]) - - const ListHeaderComponent = React.useCallback(() => { - if (isDesktop) { - return ( - - - - {isLoadingLatest ? : <>} - {renderButton()} - - - ) - } - return <> - }, [isDesktop, t, hasNew, renderButton, _, isLoadingLatest]) - - const renderHeaderSpinner = React.useCallback(() => { - return ( - - {isLoadingLatest ? : <>} - {renderButton()} - - ) - }, [renderButton, isLoadingLatest]) - return ( - - - + + + + + + + + + + + + + + @@ -224,7 +178,7 @@ export function NotificationsScreen({route: {params}}: Props) { accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> - + ) } From ce7ab43b9e5cf197de97901ef48dd8a2b24b707c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 11:39:46 -0600 Subject: [PATCH 16/75] Replace Hashtag header (#6928) --- src/screens/Hashtag.tsx | 53 ++++++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index adf5f00801..bfafe6a3a5 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ListRenderItemInfo, Pressable, View} from 'react-native' +import {ListRenderItemInfo, View} from 'react-native' import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -13,16 +13,16 @@ import {shareUrl} from '#/lib/sharing' import {cleanError} from '#/lib/strings/errors' import {sanitizeHandle} from '#/lib/strings/handles' import {enforceLen} from '#/lib/strings/helpers' -import {isNative, isWeb} from '#/platform/detection' +import {isWeb} from '#/platform/detection' import {useSearchPostsQuery} from '#/state/queries/search-posts' import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' import {Post} from '#/view/com/post/Post' import {List} from '#/view/com/util/List' -import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' +import {Button, ButtonIcon} from '#/components/Button' +import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' import * as Layout from '#/components/Layout' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' @@ -111,27 +111,30 @@ export default function HashtagScreen({ return ( - ( - - - - ) - : undefined - } - /> + + + + {headerTitle} + {author && ( + + {_(msg`From @${sanitizedAuthor}`)} + + )} + + + + + Date: Wed, 4 Dec 2024 11:39:59 -0600 Subject: [PATCH 17/75] [Layout] ChatList header (#6929) * Replace ChatList header * update chat settings as well --------- Co-authored-by: Samuel Newman --- src/screens/Messages/ChatList.tsx | 205 ++++++++++++------------------ src/screens/Messages/Settings.tsx | 16 ++- 2 files changed, 91 insertions(+), 130 deletions(-) diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 4f2bd251f6..6b9014a42b 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -16,7 +16,6 @@ import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const' import {useMessagesEventBus} from '#/state/messages/events' import {useListConvosQuery} from '#/state/queries/messages/list-converations' import {List} from '#/view/com/util/List' -import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' @@ -81,21 +80,6 @@ export function MessagesScreen({navigation, route}: Props) { }, [messagesBus, isActive]), ) - const renderButton = useCallback(() => { - return ( - - - - ) - }, [_, t]) - const initialNumToRender = useInitialNumToRender({minItemHeight: 80}) const [isPTRing, setIsPTRing] = useState(false) @@ -144,27 +128,11 @@ export function MessagesScreen({navigation, route}: Props) { [navigation], ) - const onNavigateToSettings = useCallback(() => { - navigation.navigate('MessagesSettings') - }, [navigation]) - if (conversations.length < 1) { return ( - {gtMobile ? ( - - ) : ( - - )} +
{isLoading ? ( @@ -237,106 +205,93 @@ export function MessagesScreen({navigation, route}: Props) { } return ( - - {!gtMobile && ( - + +
+ + + } + onEndReachedThreshold={isNative ? 1.5 : 0} + initialNumToRender={initialNumToRender} + windowSize={11} + // @ts-ignore our .web version only -sfn + desktopFixedHeight + sideBorders={false} /> - )} - - - } - ListFooterComponent={ - - } - onEndReachedThreshold={isNative ? 1.5 : 0} - initialNumToRender={initialNumToRender} - windowSize={11} - // @ts-ignore our .web version only -sfn - desktopFixedHeight - /> + ) } -function DesktopHeader({ - newChatControl, - onNavigateToSettings, -}: { - newChatControl: DialogControlProps - onNavigateToSettings: () => void -}) { - const t = useTheme() +function Header({newChatControl}: {newChatControl: DialogControlProps}) { const {_} = useLingui() - const {gtMobile, gtTablet} = useBreakpoints() + const {gtMobile} = useBreakpoints() - if (!gtMobile) { - return null - } + const settingsLink = ( + + + + ) return ( - - - Messages - - - - {gtTablet && ( - - )} - - + + {gtMobile ? ( + <> + + + Messages + + + + + {settingsLink} + + + + ) : ( + <> + + + + Messages + + + {settingsLink} + + )} + ) } diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx index 50b1c4cc98..f37e7a9ba1 100644 --- a/src/screens/Messages/Settings.tsx +++ b/src/screens/Messages/Settings.tsx @@ -10,8 +10,6 @@ import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declarat import {useProfileQuery} from '#/state/queries/profile' import {useSession} from '#/state/session' import * as Toast from '#/view/com/util/Toast' -import {ViewHeader} from '#/view/com/util/ViewHeader' -import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' import {Admonition} from '#/components/Admonition' import {Divider} from '#/components/Divider' @@ -57,8 +55,16 @@ export function MessagesSettingsScreen({}: Props) { return ( - - + + + + + Chat Settings + + + + + Allow new messages from @@ -142,7 +148,7 @@ export function MessagesSettingsScreen({}: Props) { )} - + ) } From 1819e081f5e6d805d250b2e364b7917c6cc7a54b Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 11:47:32 -0600 Subject: [PATCH 18/75] Add web borders to Chat settings --- src/screens/Messages/Settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx index f37e7a9ba1..952ddd0ff9 100644 --- a/src/screens/Messages/Settings.tsx +++ b/src/screens/Messages/Settings.tsx @@ -54,7 +54,7 @@ export function MessagesSettingsScreen({}: Props) { ) return ( - + From 2ffbd11718d357abd9458acc1c335fd717dced77 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 11:53:31 -0600 Subject: [PATCH 19/75] Remove unused var --- src/components/Layout/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index c28808473b..ff35d8abf7 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -142,9 +142,6 @@ export const WebCenterBorders = React.forwardRef(function LayoutContent() { { translateX: '-50%', }, - { - translateX: `var(--scrollbar-offset-negative)`, - }, ], }), ]} From 3a518f9941a8dc30e3c359c2d64270ceabb546e9 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 12:05:50 -0600 Subject: [PATCH 20/75] Move ChatList header outside center --- src/screens/Messages/ChatList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 6b9014a42b..10231fc1ba 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -206,8 +206,8 @@ export function MessagesScreen({navigation, route}: Props) { return ( +
-
Date: Wed, 4 Dec 2024 12:10:00 -0600 Subject: [PATCH 21/75] Replace empty chat layout --- src/screens/Messages/ChatList.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 10231fc1ba..269f828023 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -16,7 +16,6 @@ import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const' import {useMessagesEventBus} from '#/state/messages/events' import {useListConvosQuery} from '#/state/queries/messages/list-converations' import {List} from '#/view/com/util/List' -import {CenteredView} from '#/view/com/util/Views' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {DialogControlProps, useDialogControl} from '#/components/Dialog' @@ -48,7 +47,6 @@ export function MessagesScreen({navigation, route}: Props) { const {_} = useLingui() const t = useTheme() const newChatControl = useDialogControl() - const {gtMobile} = useBreakpoints() const pushToConversation = route.params?.pushToConversation // Whenever we have `pushToConversation` set, it means we pressed a notification for a chat without being on @@ -130,10 +128,9 @@ export function MessagesScreen({navigation, route}: Props) { if (conversations.length < 1) { return ( - - -
- + +
+ {isLoading ? ( @@ -195,7 +192,7 @@ export function MessagesScreen({navigation, route}: Props) { )} )} - + {!isLoading && !isError && ( From ba2162f05226aac689d694ecb2139c026b15cc0f Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 18:17:56 +0000 Subject: [PATCH 22/75] fix breakpoints --- src/components/Layout/Header/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index af20f465a3..2fa3a86443 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -25,6 +25,7 @@ const BUTTON_SIZE = 34 // small button export function Outer({children}: {children: React.ReactNode}) { const t = useTheme() const gutter = useGutterStyles() + const {gtMobile} = useBreakpoints() return ( {children} From a0db0e1dc99fe0b684d66451987b5daeb69ec59c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 12:29:11 -0600 Subject: [PATCH 23/75] [Layout] Scrollbar gutters (#6908) * Fix sidebar alignment * Make sure scrollbars don't hide * Gift left nav more space * Use stable one-edge, update logic in RightNav * Ope * Increase width * Reset * Add transform to sidebars * Remove bg in sidebars * Handle shifts in layout components * Replace scroll-removal handling * Make react-remove-scroll an explicit dep * Remove unused script --- bskyweb/templates/base.html | 21 +--------- package.json | 1 + src/components/Dialog/index.web.tsx | 49 +++++++++++++----------- src/components/Layout/Header/index.tsx | 9 +++++ src/components/Layout/index.tsx | 12 ++++++ src/lib/hooks/useWebBodyScrollLock.ts | 31 --------------- src/view/com/lightbox/Lightbox.web.tsx | 15 ++++---- src/view/com/modals/Modal.web.tsx | 7 ++-- src/view/shell/Composer.web.tsx | 10 +++-- src/view/shell/desktop/LeftNav.tsx | 23 +++++++++-- src/view/shell/desktop/RightNav.tsx | 14 +++++-- src/view/shell/index.web.tsx | 53 +++++++++++++------------- web/index.html | 21 +--------- yarn.lock | 33 ++-------------- 14 files changed, 129 insertions(+), 170 deletions(-) delete mode 100644 src/lib/hooks/useWebBodyScrollLock.ts diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index bee2dd1f09..a77be6a800 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -38,13 +38,8 @@ font-style: italic; font-display: swap; } - :root { - --scrollbar-offset: 0px; - --scrollbar-offset-negative: 0px; - } html { background-color: white; - scrollbar-gutter: stable both-edges; } @media (prefers-color-scheme: dark) { html { @@ -83,24 +78,10 @@ /* We need this style to prevent web dropdowns from shifting the display when opening */ body { width: 100%; + overflow-y: scroll; } - - {% include "scripts.html" %} diff --git a/package.json b/package.json index 6372dd5f5b..1723008fe6 100644 --- a/package.json +++ b/package.json @@ -193,6 +193,7 @@ "react-native-web": "~0.19.11", "react-native-web-webview": "^1.0.2", "react-native-webview": "13.10.2", + "react-remove-scroll": "^2.6.0", "react-responsive": "^9.0.2", "react-textarea-autosize": "^8.5.3", "rn-fetch-blob": "^0.12.0", diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx index 6b92eee3e0..092a5c7967 100644 --- a/src/components/Dialog/index.web.tsx +++ b/src/components/Dialog/index.web.tsx @@ -12,6 +12,7 @@ import {useLingui} from '@lingui/react' import {DismissableLayer} from '@radix-ui/react-dismissable-layer' import {useFocusGuards} from '@radix-ui/react-focus-guards' import {FocusScope} from '@radix-ui/react-focus-scope' +import {RemoveScroll} from 'react-remove-scroll' import {logger} from '#/logger' import {useDialogStateControlContext} from '#/state/dialogs' @@ -103,34 +104,36 @@ export function Outer({ {isOpen && ( - - - + + - {children} + + + {children} + - - + + )} diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 2fa3a86443..8182ae1fd1 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -13,6 +13,7 @@ import { useBreakpoints, useGutterStyles, useTheme, + web, } from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' @@ -39,6 +40,14 @@ export function Outer({children}: {children: React.ReactNode}) { a.py_sm, t.atoms.border_contrast_low, gtMobile && [a.mx_auto, {maxWidth: 600}], + web({ + transform: [ + { + translateX: + 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', + }, + ], + }), ]}> {children} diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index ff35d8abf7..08e10ad072 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -142,6 +142,10 @@ export const WebCenterBorders = React.forwardRef(function LayoutContent() { { translateX: '-50%', }, + { + translateX: + 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', + }, ], }), ]} @@ -165,6 +169,14 @@ export const Center = React.forwardRef(function LayoutContent( maxWidth: 600, }, style, + web({ + transform: [ + { + translateX: + 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', + }, + ], + }), ]} {...props}> {children} diff --git a/src/lib/hooks/useWebBodyScrollLock.ts b/src/lib/hooks/useWebBodyScrollLock.ts deleted file mode 100644 index c63c23b29c..0000000000 --- a/src/lib/hooks/useWebBodyScrollLock.ts +++ /dev/null @@ -1,31 +0,0 @@ -import {useEffect} from 'react' - -import {isWeb} from '#/platform/detection' - -let refCount = 0 - -function incrementRefCount() { - if (refCount === 0) { - document.body.style.overflow = 'hidden' - document.documentElement.style.scrollbarGutter = 'auto' - } - refCount++ -} - -function decrementRefCount() { - refCount-- - if (refCount === 0) { - document.body.style.overflow = '' - document.documentElement.style.scrollbarGutter = '' - } -} - -export function useWebBodyScrollLock(isLockActive: boolean) { - useEffect(() => { - if (!isWeb || !isLockActive) { - return - } - incrementRefCount() - return () => decrementRefCount() - }) -} diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index f9b147b297..18d68c6c2f 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -15,8 +15,8 @@ import { } from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {RemoveScroll} from 'react-remove-scroll' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {colors, s} from '#/lib/styles' import {useLightbox, useLightboxControls} from '#/state/lightbox' @@ -28,7 +28,6 @@ export function Lightbox() { const {activeLightbox} = useLightbox() const {closeLightbox} = useLightboxControls() const isActive = !!activeLightbox - useWebBodyScrollLock(isActive) if (!isActive) { return null @@ -37,11 +36,13 @@ export function Lightbox() { const initialIndex = activeLightbox.index const imgs = activeLightbox.images return ( - + + + ) } diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 8d93c21b4d..51660fc2be 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -1,8 +1,8 @@ import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' +import {RemoveScroll} from 'react-remove-scroll' import {usePalette} from '#/lib/hooks/usePalette' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import type {Modal as ModalIface} from '#/state/modals' import {useModalControls, useModals} from '#/state/modals' @@ -22,18 +22,17 @@ import * as VerifyEmailModal from './VerifyEmail' export function ModalsContainer() { const {isModalActive, activeModals} = useModals() - useWebBodyScrollLock(isModalActive) if (!isModalActive) { return null } return ( - <> + {activeModals.map((modal, i) => ( ))} - + ) } diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx index 9f407248a3..039ac08858 100644 --- a/src/view/shell/Composer.web.tsx +++ b/src/view/shell/Composer.web.tsx @@ -3,8 +3,8 @@ import {StyleSheet, View} from 'react-native' import {DismissableLayer} from '@radix-ui/react-dismissable-layer' import {useFocusGuards} from '@radix-ui/react-focus-guards' import {FocusScope} from '@radix-ui/react-focus-scope' +import {RemoveScroll} from 'react-remove-scroll' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import {useModals} from '#/state/modals' import {ComposerOpts, useComposerState} from '#/state/shell/composer' import { @@ -20,8 +20,6 @@ export function Composer({}: {winHeight: number}) { const state = useComposerState() const isActive = !!state - useWebBodyScrollLock(isActive) - // rendering // = @@ -29,7 +27,11 @@ export function Composer({}: {winHeight: number}) { return } - return + return ( + + + + ) } function Inner({state}: {state: ComposerOpts}) { diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index b4ae5db96c..60a289fc91 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -180,12 +180,14 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) { accessibilityLabel={_(msg`${count} unread items`)} accessibilityHint="" accessible={true} + numberOfLines={1} style={[ a.absolute, a.text_xs, a.font_bold, a.rounded_full, a.text_center, + a.leading_tight, { top: '-10%', left: count.length === 1 ? '50%' : '40%', @@ -322,9 +324,9 @@ export function DesktopLeftNav() { {hasSession ? ( @@ -479,8 +481,20 @@ const styles = StyleSheet.create({ position: 'fixed', top: 10, // @ts-ignore web only - left: 'calc(50vw - 300px - 220px - 20px)', - width: 220, + left: '50%', + transform: [ + { + translateX: -300, + }, + { + translateX: '-100%', + }, + { + // @ts-ignore web only -esb + translateX: 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', + }, + ], + width: 240, // @ts-ignore web only maxHeight: 'calc(100vh - 10px)', overflowY: 'auto', @@ -492,7 +506,10 @@ const styles = StyleSheet.create({ borderRightWidth: 1, height: '100%', width: 76, + paddingLeft: 0, + paddingRight: 0, alignItems: 'center', + transform: [], }, profileCard: { diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index 4f413211f1..f1e9070022 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -28,7 +28,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) { } return ( - + {routeName === 'Search' ? ( @@ -122,8 +122,16 @@ const styles = StyleSheet.create({ // @ts-ignore web only position: 'fixed', // @ts-ignore web only - left: 'calc(50vw + 300px + 20px)', - width: 300, + left: '50%', + transform: [ + { + translateX: 300, + }, + { + // @ts-ignore web only -esb + translateX: 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', + }, + ], maxHeight: '100%', overflowY: 'auto', }, diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index f554373562..802219d653 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -3,10 +3,10 @@ import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' +import {RemoveScroll} from 'react-remove-scroll' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' import {useIntentHandler} from '#/lib/hooks/useIntentHandler' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {NavigationProp} from '#/lib/routes/types' import {colors} from '#/lib/styles' @@ -34,7 +34,6 @@ function ShellInner() { const {_} = useLingui() const showDrawer = !isDesktop && isDrawerOpen - useWebBodyScrollLock(showDrawer) useComposerKeyboardShortcut() useIntentHandler() @@ -58,31 +57,33 @@ function ShellInner() { {showDrawer && ( - { - // Only close if press happens outside of the drawer - if (ev.target === ev.currentTarget) { - setDrawerOpen(false) - } - }} - accessibilityLabel={_(msg`Close navigation footer`)} - accessibilityHint={_(msg`Closes bottom navigation bar`)}> - - - + + { + // Only close if press happens outside of the drawer + if (ev.target === ev.currentTarget) { + setDrawerOpen(false) + } + }} + accessibilityLabel={_(msg`Close navigation footer`)} + accessibilityHint={_(msg`Closes bottom navigation bar`)}> + + + + - - + + )} ) diff --git a/web/index.html b/web/index.html index d42981ff52..b5c373636b 100644 --- a/web/index.html +++ b/web/index.html @@ -43,13 +43,8 @@ font-style: italic; font-display: swap; } - :root { - --scrollbar-offset: 0px; - --scrollbar-offset-negative: 0px; - } html { background-color: white; - scrollbar-gutter: stable both-edges; } @media (prefers-color-scheme: dark) { html { @@ -88,23 +83,9 @@ /* We need this style to prevent web dropdowns from shifting the display when opening */ body { width: 100%; + overflow-y: scroll; } - - diff --git a/yarn.lock b/yarn.lock index 474ef2f8ba..e50e7fe940 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16369,7 +16369,7 @@ react-remove-scroll@2.5.5: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" -react-remove-scroll@2.6.0: +react-remove-scroll@2.6.0, react-remove-scroll@^2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07" integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ== @@ -17616,16 +17616,7 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -17725,7 +17716,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -17739,13 +17730,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -19068,7 +19052,7 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -19086,15 +19070,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From fae2c63915aee3b89fe4ec1e047ea098c3c8d5b7 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 19:50:54 +0000 Subject: [PATCH 24/75] use correct scroll insets (#6950) --- src/components/Layout/index.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 08e10ad072..01180c2d45 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -5,10 +5,14 @@ import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps, } from 'react-native-keyboard-controller' -import Animated, {AnimatedScrollViewProps} from 'react-native-reanimated' +import Animated, { + AnimatedScrollViewProps, + useAnimatedProps, +} from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {isWeb} from '#/platform/detection' +import {useShellLayout} from '#/state/shell/shell-layout' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' export * as Header from '#/components/Layout/Header' @@ -80,10 +84,24 @@ export const Content = React.memo(function Content({ () => ({...context, withinScrollView: true}), [context], ) + const {footerHeight} = useShellLayout() + const animatedProps = useAnimatedProps(() => { + return { + scrollIndicatorInsets: { + bottom: footerHeight.get(), + top: 0, + right: 1, + }, + } satisfies AnimatedScrollViewProps + }) + return ( Date: Wed, 4 Dec 2024 14:00:31 -0600 Subject: [PATCH 25/75] [Layout] Feeds headers (#6913) * Replace ViewHeader internals, duplicate old ViewHeader * Replace Feeds header * Replace SavedFeeds header * Visual alignment * Uglier but clear * Use old ViewHeader for SavedFeeds * use Layout.Center instead of Layout.Content * use left-aligned header for feed edit * delete unused old view header --------- Co-authored-by: Samuel Newman --- .../floppyDisk_stroke2_corner0_rounded.svg | 1 + src/components/Layout/Header/index.tsx | 29 +- src/components/icons/FloppyDisk.tsx | 5 + src/view/com/util/ViewHeader.tsx | 263 +----------------- src/view/screens/Feeds.tsx | 144 ++++------ src/view/screens/SavedFeeds.tsx | 240 ++++++++-------- 6 files changed, 208 insertions(+), 474 deletions(-) create mode 100644 assets/icons/floppyDisk_stroke2_corner0_rounded.svg create mode 100644 src/components/icons/FloppyDisk.tsx diff --git a/assets/icons/floppyDisk_stroke2_corner0_rounded.svg b/assets/icons/floppyDisk_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..b9a42f7594 --- /dev/null +++ b/assets/icons/floppyDisk_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 8182ae1fd1..edf7478542 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {useContext} from 'react' import {View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -54,10 +54,26 @@ export function Outer({children}: {children: React.ReactNode}) { ) } -export function Content({children}: {children: React.ReactNode}) { +const AlignmentContext = React.createContext<'platform' | 'left'>('platform') + +export function Content({ + children, + align = 'platform', +}: { + children: React.ReactNode + align?: 'platform' | 'left' +}) { return ( - - {children} + + + {children} + ) } @@ -134,14 +150,15 @@ export function TitleText({ style, }: {children: React.ReactNode} & TextStyleProp) { const {gtMobile} = useBreakpoints() + const align = useContext(AlignmentContext) return ( diff --git a/src/components/icons/FloppyDisk.tsx b/src/components/icons/FloppyDisk.tsx new file mode 100644 index 0000000000..7fb938089a --- /dev/null +++ b/src/components/icons/FloppyDisk.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const FloppyDisk_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M3 4a1 1 0 0 1 1-1h13a1 1 0 0 1 .707.293l3 3A1 1 0 0 1 21 7v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm6 15h6v-5H9v5Zm8 0v-6a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v6H5V5h2v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5.414l2 2V19h-2ZM15 5H9v2h6V5Z', +}) diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 1d4cf8ff07..309bf2ca04 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -1,271 +1,24 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' - -import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {NavigationProp} from '#/lib/routes/types' -import {useSetDrawerOpen} from '#/state/shell' -import {useTheme} from '#/alf' -import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' -import {Text} from './text/Text' -import {CenteredView} from './Views' - -const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} +import {Header} from '#/components/Layout' export function ViewHeader({ title, - subtitle, canGoBack, - showBackButton = true, - hideOnScroll, - showOnDesktop, - showBorder, renderButton, }: { title: string subtitle?: string canGoBack?: boolean - showBackButton?: boolean - hideOnScroll?: boolean showOnDesktop?: boolean showBorder?: boolean renderButton?: () => JSX.Element }) { - const pal = usePalette('default') - const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() - const navigation = useNavigation() - const {isDesktop, isTablet} = useWebMediaQueries() - const t = useTheme() - - const onPressBack = React.useCallback(() => { - if (navigation.canGoBack()) { - navigation.goBack() - } else { - navigation.navigate('Home') - } - }, [navigation]) - - const onPressMenu = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) - - if (isDesktop) { - if (showOnDesktop) { - return ( - - ) - } - return null - } else { - if (typeof canGoBack === 'undefined') { - canGoBack = navigation.canGoBack() - } - - return ( - - - - {showBackButton ? ( - - {canGoBack ? ( - - ) : !isTablet ? ( - - ) : null} - - ) : null} - - - {title} - - - {renderButton ? ( - renderButton() - ) : showBackButton ? ( - - ) : null} - - {subtitle ? ( - - - {subtitle} - - - ) : undefined} - - - ) - } -} - -function DesktopWebHeader({ - title, - subtitle, - renderButton, - showBorder = true, -}: { - title: string - subtitle?: string - renderButton?: () => JSX.Element - showBorder?: boolean -}) { - const pal = usePalette('default') - const t = useTheme() - return ( - - - - - {title} - - - {renderButton?.()} - - {subtitle ? ( - - - - {subtitle} - - - - ) : null} - - ) -} - -function Container({ - children, - hideOnScroll, - showBorder, -}: { - children: React.ReactNode - hideOnScroll: boolean - showBorder?: boolean -}) { - const pal = usePalette('default') - const headerMinimalShellTransform = useMinimalShellHeaderTransform() - - if (!hideOnScroll) { - return ( - - {children} - - ) - } return ( - - {children} - + + {canGoBack ? : } + + {title} + + {renderButton?.() ?? null} + ) } - -const styles = StyleSheet.create({ - header: { - flexDirection: 'row', - paddingHorizontal: 12, - paddingVertical: 6, - width: '100%', - }, - headerFloating: { - position: 'absolute', - top: 0, - width: '100%', - }, - desktopHeader: { - paddingVertical: 12, - maxWidth: 600, - marginLeft: 'auto', - marginRight: 'auto', - }, - border: { - borderBottomWidth: StyleSheet.hairlineWidth, - }, - titleContainer: { - marginLeft: 'auto', - marginRight: 'auto', - alignItems: 'center', - }, - title: { - fontWeight: '600', - }, - subtitle: { - fontSize: 13, - }, - subtitleDesktop: { - fontSize: 15, - }, - backBtn: { - width: 30, - height: 30, - }, - backBtnWide: { - width: 30, - height: 30, - paddingLeft: 4, - marginRight: 4, - }, - backIcon: { - marginTop: 6, - }, -}) diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 406f117920..ac20cdc3fd 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -24,14 +24,13 @@ import {useSetMinimalShellMode} from '#/state/shell' import {useComposerControls} from '#/state/shell/composer' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {FAB} from '#/view/com/util/fab/FAB' -import {TextLink} from '#/view/com/util/Link' import {List, ListMethods} from '#/view/com/util/List' import {FeedFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {Text} from '#/view/com/util/text/Text' -import {ViewHeader} from '#/view/com/util/ViewHeader' import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed' import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType' import {atoms as a, useTheme} from '#/alf' +import {ButtonIcon} from '#/components/Button' import {Divider} from '#/components/Divider' import * as FeedCard from '#/components/FeedCard' import {SearchInput} from '#/components/forms/SearchInput' @@ -40,7 +39,9 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' +import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2' import * as Layout from '#/components/Layout' +import {Link} from '#/components/Link' import * as ListCard from '#/components/ListCard' type Props = NativeStackScreenProps @@ -374,22 +375,6 @@ export function FeedsScreen(_props: Props) { isUserSearching, ]) - const renderHeaderBtn = React.useCallback(() => { - return ( - - - - ) - }, [pal, _]) - const searchBarIndex = items.findIndex( item => item.type === 'popularFeedsHeader', ) @@ -430,36 +415,7 @@ export function FeedsScreen(_props: Props) { ) } else if (item.type === 'savedFeedsHeader') { - return ( - <> - {!isMobile && ( - - - Feeds - - - - - - )} - - - ) + return } else if (item.type === 'savedFeedNoResults') { return ( - {isMobile && ( - + + + + + + Feeds + + + + + + + + + + item.key} + contentContainerStyle={styles.contentContainer} + renderItem={renderItem} + refreshing={isPTR} + onRefresh={isUserSearching ? undefined : onPullToRefresh} + initialNumToRender={10} + onEndReached={onEndReached} + // @ts-ignore our .web version only -prf + desktopFixedHeight + scrollIndicatorInsets={{right: 1}} + keyboardShouldPersistTaps="handled" + keyboardDismissMode="on-drag" + sideBorders={false} /> - )} - - item.key} - contentContainerStyle={styles.contentContainer} - renderItem={renderItem} - refreshing={isPTR} - onRefresh={isUserSearching ? undefined : onPullToRefresh} - initialNumToRender={10} - onEndReached={onEndReached} - // @ts-ignore our .web version only -prf - desktopFixedHeight - scrollIndicatorInsets={{right: 1}} - keyboardShouldPersistTaps="handled" - keyboardDismissMode="on-drag" - /> - {hasSession && ( - } - accessibilityRole="button" - accessibilityLabel={_(msg`New post`)} - accessibilityHint="" - /> - )} + {hasSession && ( + } + accessibilityRole="button" + accessibilityLabel={_(msg`New post`)} + accessibilityHint="" + /> + )} + ) } diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 3c04ec36fe..297b7cda8d 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -25,13 +25,12 @@ import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard' import {TextLink} from '#/view/com/util/Link' import {Text} from '#/view/com/util/text/Text' import * as Toast from '#/view/com/util/Toast' -import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView, ScrollView} from '#/view/com/util/Views' import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed' import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' +import {FloppyDisk_Stroke2_Corner0_Rounded as SaveIcon} from '#/components/icons/FloppyDisk' import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' @@ -51,7 +50,7 @@ function SavedFeedsInner({ }) { const pal = usePalette('default') const {_} = useLingui() - const {isMobile, isTabletOrDesktop, isDesktop} = useWebMediaQueries() + const {isMobile, isDesktop} = useWebMediaQueries() const setMinimalShellMode = useSetMinimalShellMode() const {mutateAsync: overwriteSavedFeeds, isPending: isOverwritePending} = useOverwriteSavedFeedsMutation() @@ -88,136 +87,128 @@ function SavedFeedsInner({ } }, [_, overwriteSavedFeeds, currentFeeds, navigation]) - const renderHeaderBtn = React.useCallback(() => { - return ( - - ) - }, [_, isDesktop, onSaveChanges, hasUnsavedChanges, isOverwritePending]) - return ( - - - - - {noSavedFeedsOfAnyType && ( - - - - )} + + + + + + Feeds + + + + - - - Pinned Feeds - + + {noSavedFeedsOfAnyType && ( + + + )} - {preferences ? ( - !pinnedFeeds.length ? ( - - - You don't have any pinned feeds. - - - ) : ( - pinnedFeeds.map(f => ( - - )) - ) - ) : ( - - )} + + + Pinned Feeds + + - {noFollowingFeed && ( - - + {preferences ? ( + !pinnedFeeds.length ? ( + + + You don't have any pinned feeds. + - )} + ) : ( + pinnedFeeds.map(f => ( + + )) + ) + ) : ( + + )} - - - Saved Feeds - + {noFollowingFeed && ( + + - {preferences ? ( - !unpinnedFeeds.length ? ( - - - You don't have any saved feeds. - - - ) : ( - unpinnedFeeds.map(f => ( - - )) - ) + )} + + + + Saved Feeds + + + {preferences ? ( + !unpinnedFeeds.length ? ( + + + You don't have any saved feeds. + + ) : ( - - )} + unpinnedFeeds.map(f => ( + + )) + ) + ) : ( + + )} - - - - Feeds are custom algorithms that users build with a little - coding expertise.{' '} - {' '} - for more information. - - - - - - + + + + Feeds are custom algorithms that users build with a little coding + expertise.{' '} + {' '} + for more information. + + + + ) } @@ -456,7 +447,6 @@ const styles = StyleSheet.create({ }, footerText: { paddingHorizontal: 26, - paddingTop: 22, - paddingBottom: 100, + paddingVertical: 22, }, }) From 098149178cc7a5fdc3713f75595e19d146e06b1f Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 20:12:10 +0000 Subject: [PATCH 26/75] [Layout] Every other screen (#6953) * attempt to fix double borders on every other screen * delete ListHeaderDesktop --- src/components/LikedByList.tsx | 13 +++++-- src/components/Lists.tsx | 34 +----------------- src/screens/Moderation/index.tsx | 35 ++++++------------- src/screens/Post/PostLikedBy.tsx | 12 ++----- src/screens/Post/PostQuotes.tsx | 2 -- src/screens/Post/PostRepostedBy.tsx | 2 -- src/screens/Profile/KnownFollowers.tsx | 33 ++++++++++------- src/screens/Profile/ProfileLabelerLikedBy.tsx | 2 +- src/view/com/post-thread/PostLikedBy.tsx | 5 ++- src/view/com/post-thread/PostQuotes.tsx | 3 +- src/view/com/post-thread/PostRepostedBy.tsx | 16 +++++++-- src/view/com/profile/ProfileFollowers.tsx | 3 +- src/view/com/profile/ProfileFollows.tsx | 3 +- src/view/com/util/ViewHeader.tsx | 9 +++-- src/view/com/util/error/ErrorScreen.tsx | 4 ++- src/view/screens/ProfileFollowers.tsx | 2 -- src/view/screens/ProfileFollows.tsx | 2 -- 17 files changed, 76 insertions(+), 104 deletions(-) diff --git a/src/components/LikedByList.tsx b/src/components/LikedByList.tsx index a83f982589..b369bd76e6 100644 --- a/src/components/LikedByList.tsx +++ b/src/components/LikedByList.tsx @@ -12,8 +12,14 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {List} from '#/view/com/util/List' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' -function renderItem({item}: {item: GetLikes.Like}) { - return +function renderItem({item, index}: {item: GetLikes.Like; index: number}) { + return ( + + ) } function keyExtractor(item: GetLikes.Like) { @@ -81,6 +87,8 @@ export function LikedByList({uri}: {uri: string}) { )} errorMessage={cleanError(resolveError || error)} onRetry={isError ? refetch : undefined} + topBorder={false} + sideBorders={false} /> ) } @@ -103,6 +111,7 @@ export function LikedByList({uri}: {uri: string}) { onEndReachedThreshold={3} initialNumToRender={initialNumToRender} windowSize={11} + sideBorders={false} /> ) } diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx index 16bd6a9eab..2d7b13b25c 100644 --- a/src/components/Lists.tsx +++ b/src/components/Lists.tsx @@ -109,38 +109,6 @@ function ListFooterMaybeError({ ) } -export function ListHeaderDesktop({ - title, - subtitle, -}: { - title: string - subtitle?: string -}) { - const {gtTablet} = useBreakpoints() - const t = useTheme() - - if (!gtTablet) return null - - return ( - - {title} - {subtitle ? ( - - {subtitle} - - ) : undefined} - - ) -} - let ListMaybePlaceholder = ({ isLoading, noEmpty, @@ -154,7 +122,7 @@ let ListMaybePlaceholder = ({ onGoBack, hideBackButton, sideBorders, - topBorder = true, + topBorder = false, }: { isLoading: boolean noEmpty?: boolean diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 5f340cd560..7fddcfe79e 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -1,6 +1,5 @@ -import React from 'react' +import {Fragment, useCallback} from 'react' import {Linking, View} from 'react-native' -import {useSafeAreaFrame} from 'react-native-safe-area-context' import {LABELS} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -19,7 +18,6 @@ import { import {isNonConfigurableModerationAuthority} from '#/state/session/additional-moderation-authorities' import {useSetMinimalShellMode} from '#/state/shell' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from '#/view/com/util/Views' import {ScrollView} from '#/view/com/util/Views' import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf' import {Button, ButtonText} from '#/components/Button' @@ -37,6 +35,7 @@ import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Perso import * as LabelingService from '#/components/LabelingServiceCard' import * as Layout from '#/components/Layout' import {InlineLinkText, Link} from '#/components/Link' +import {ListMaybePlaceholder} from '#/components/Lists' import {Loader} from '#/components/Loader' import {GlobalLabelPreference} from '#/components/moderation/LabelPreference' import {Text} from '#/components/Typography' @@ -75,35 +74,23 @@ function ErrorState({error}: {error: string}) { export function ModerationScreen( _props: NativeStackScreenProps, ) { - const t = useTheme() const {_} = useLingui() const { isLoading: isPreferencesLoading, error: preferencesError, data: preferences, } = usePreferencesQuery() - const {gtMobile} = useBreakpoints() - const {height} = useSafeAreaFrame() const isLoading = isPreferencesLoading const error = preferencesError return ( - - + + {isLoading ? ( - - - + ) : error || !preferences ? ( )} - + ) } @@ -169,7 +156,7 @@ export function ModerationScreenInner({ } = useMyLabelersQuery() useFocusEffect( - React.useCallback(() => { + useCallback(() => { setMinimalShellMode(false) }, [setMinimalShellMode]), ) @@ -183,7 +170,7 @@ export function ModerationScreenInner({ const ageNotSet = !preferences.userAge const isUnderage = (preferences.userAge || 0) < 18 - const onToggleAdultContentEnabled = React.useCallback( + const onToggleAdultContentEnabled = useCallback( async (selected: boolean) => { try { await setAdultContentPref({ @@ -420,7 +407,7 @@ export function ModerationScreenInner({ {labelers.map((labeler, i) => { return ( - + {i !== 0 && } {state => ( @@ -457,12 +444,12 @@ export function ModerationScreenInner({ )} - + ) })} )} - + ) } diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx index 6fc485f34b..7ced8eaccd 100644 --- a/src/screens/Post/PostLikedBy.tsx +++ b/src/screens/Post/PostLikedBy.tsx @@ -5,13 +5,10 @@ import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' -import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from '#/view/com/util/Views' import * as Layout from '#/components/Layout' -import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps export const PostLikedByScreen = ({route}: Props) => { @@ -27,12 +24,9 @@ export const PostLikedByScreen = ({route}: Props) => { ) return ( - - - - - - + + + ) } diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx index 71dd8ad8d7..2cd6be8793 100644 --- a/src/screens/Post/PostQuotes.tsx +++ b/src/screens/Post/PostQuotes.tsx @@ -11,7 +11,6 @@ import {PostQuotes as PostQuotesComponent} from '#/view/com/post-thread/PostQuot import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import * as Layout from '#/components/Layout' -import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps export const PostQuotesScreen = ({route}: Props) => { @@ -29,7 +28,6 @@ export const PostQuotesScreen = ({route}: Props) => { return ( - diff --git a/src/screens/Post/PostRepostedBy.tsx b/src/screens/Post/PostRepostedBy.tsx index c1e8b29878..304e708081 100644 --- a/src/screens/Post/PostRepostedBy.tsx +++ b/src/screens/Post/PostRepostedBy.tsx @@ -11,7 +11,6 @@ import {PostRepostedBy as PostRepostedByComponent} from '#/view/com/post-thread/ import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import * as Layout from '#/components/Layout' -import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps export const PostRepostedByScreen = ({route}: Props) => { @@ -29,7 +28,6 @@ export const PostRepostedByScreen = ({route}: Props) => { return ( - diff --git a/src/screens/Profile/KnownFollowers.tsx b/src/screens/Profile/KnownFollowers.tsx index 7e396c350f..c1dce05741 100644 --- a/src/screens/Profile/KnownFollowers.tsx +++ b/src/screens/Profile/KnownFollowers.tsx @@ -15,14 +15,22 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {List} from '#/view/com/util/List' import {ViewHeader} from '#/view/com/util/ViewHeader' import * as Layout from '#/components/Layout' -import { - ListFooter, - ListHeaderDesktop, - ListMaybePlaceholder, -} from '#/components/Lists' +import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' -function renderItem({item}: {item: AppBskyActorDefs.ProfileViewBasic}) { - return +function renderItem({ + item, + index, +}: { + item: AppBskyActorDefs.ProfileViewBasic + index: number +}) { + return ( + + ) } function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) { @@ -92,7 +100,8 @@ export const ProfileKnownFollowersScreen = ({route}: Props) => { if (followers.length < 1) { return ( - + + { emptyMessage={_(msg`You don't follow any users who follow @${name}.`)} errorMessage={cleanError(resolveError || error)} onRetry={isError ? refetch : undefined} + topBorder={false} + sideBorders={false} /> ) } return ( - + { onRefresh={onRefresh} onEndReached={onEndReached} onEndReachedThreshold={4} - ListHeaderComponent={ - - } ListFooterComponent={ { desktopFixedHeight initialNumToRender={initialNumToRender} windowSize={11} + sideBorders={false} /> ) diff --git a/src/screens/Profile/ProfileLabelerLikedBy.tsx b/src/screens/Profile/ProfileLabelerLikedBy.tsx index ccc2700847..aa3e1d4b0e 100644 --- a/src/screens/Profile/ProfileLabelerLikedBy.tsx +++ b/src/screens/Profile/ProfileLabelerLikedBy.tsx @@ -25,7 +25,7 @@ export function ProfileLabelerLikedByScreen({ ) return ( - + diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx index 4c0d973a91..b9051a9c6d 100644 --- a/src/view/com/post-thread/PostLikedBy.tsx +++ b/src/view/com/post-thread/PostLikedBy.tsx @@ -6,7 +6,6 @@ import {useLingui} from '@lingui/react' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' import {useLikedByQuery} from '#/state/queries/post-liked-by' import {useResolveUriQuery} from '#/state/queries/resolve-uri' import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' @@ -18,7 +17,7 @@ function renderItem({item, index}: {item: GetLikes.Like; index: number}) { ) } @@ -88,6 +87,7 @@ export function PostLikedBy({uri}: {uri: string}) { )} errorMessage={cleanError(resolveError || error)} sideBorders={false} + topBorder={false} /> ) } @@ -108,7 +108,6 @@ export function PostLikedBy({uri}: {uri: string}) { onRetry={fetchNextPage} /> } - // @ts-ignore our .web version only -prf desktopFixedHeight initialNumToRender={initialNumToRender} windowSize={11} diff --git a/src/view/com/post-thread/PostQuotes.tsx b/src/view/com/post-thread/PostQuotes.tsx index 10a51166c7..a22000b969 100644 --- a/src/view/com/post-thread/PostQuotes.tsx +++ b/src/view/com/post-thread/PostQuotes.tsx @@ -11,7 +11,6 @@ import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {usePostQuotesQuery} from '#/state/queries/post-quotes' import {useResolveUriQuery} from '#/state/queries/resolve-uri' @@ -30,7 +29,7 @@ function renderItem({ } index: number }) { - return + return } function keyExtractor(item: { diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index dfaa697804..2143bd9c27 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -12,8 +12,20 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {List} from '#/view/com/util/List' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' -function renderItem({item}: {item: ActorDefs.ProfileViewBasic}) { - return +function renderItem({ + item, + index, +}: { + item: ActorDefs.ProfileViewBasic + index: number +}) { + return ( + + ) } function keyExtractor(item: ActorDefs.ProfileViewBasic) { diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index 60a7a5e316..3c04769292 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -6,7 +6,6 @@ import {useLingui} from '@lingui/react' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' import {useProfileFollowersQuery} from '#/state/queries/profile-followers' import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {useSession} from '#/state/session' @@ -25,7 +24,7 @@ function renderItem({ ) } diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 572b0b9f41..1cd65c74c0 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -6,7 +6,6 @@ import {useLingui} from '@lingui/react' import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' import {useProfileFollowsQuery} from '#/state/queries/profile-follows' import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {useSession} from '#/state/session' @@ -25,7 +24,7 @@ function renderItem({ ) } diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 309bf2ca04..2d413f7825 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -1,20 +1,23 @@ import {Header} from '#/components/Layout' +/** + * Legacy ViewHeader component. Use Layout.Header going forward. + * + * @deprecated + */ export function ViewHeader({ title, - canGoBack, renderButton, }: { title: string subtitle?: string - canGoBack?: boolean showOnDesktop?: boolean showBorder?: boolean renderButton?: () => JSX.Element }) { return ( - {canGoBack ? : } + {title} diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index b66f437896..846f4d2951 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -36,7 +36,9 @@ export function ErrorScreen({ return ( <> - {showHeader && isMobile && } + {showHeader && isMobile && ( + + )} export const ProfileFollowersScreen = ({route}: Props) => { @@ -27,7 +26,6 @@ export const ProfileFollowersScreen = ({route}: Props) => { return ( - diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx index 483ee93ecc..134f799937 100644 --- a/src/view/screens/ProfileFollows.tsx +++ b/src/view/screens/ProfileFollows.tsx @@ -10,7 +10,6 @@ import {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/Prof import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import * as Layout from '#/components/Layout' -import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps export const ProfileFollowsScreen = ({route}: Props) => { @@ -27,7 +26,6 @@ export const ProfileFollowsScreen = ({route}: Props) => { return ( - From abbc570d0c9615c8c9912c7f1830ef6d9ef99f40 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 20:36:33 +0000 Subject: [PATCH 27/75] delete `SimpleViewHeader` and fix screens (#6956) --- src/components/Layout/Header/index.tsx | 3 +- src/view/com/lists/MyLists.tsx | 7 +- src/view/com/util/SimpleViewHeader.tsx | 114 ------------------------ src/view/screens/Lists.tsx | 74 ++++++--------- src/view/screens/ModerationModlists.tsx | 66 ++++++-------- 5 files changed, 57 insertions(+), 207 deletions(-) delete mode 100644 src/view/com/util/SimpleViewHeader.tsx diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index edf7478542..b7c3d641e0 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -169,12 +169,13 @@ export function TitleText({ export function SubtitleText({children}: {children: React.ReactNode}) { const t = useTheme() + const align = useContext(AlignmentContext) return ( diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx index 363dd100dd..17327fd9ae 100644 --- a/src/view/com/lists/MyLists.tsx +++ b/src/view/com/lists/MyLists.tsx @@ -15,7 +15,6 @@ import {usePalette} from '#/lib/hooks/usePalette' import {cleanError} from '#/lib/strings/errors' import {s} from '#/lib/styles' import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' import {EmptyState} from '#/view/com/util/EmptyState' @@ -110,7 +109,7 @@ export function MyLists({ ) : ( )} @@ -160,8 +157,8 @@ export function MyLists({ onRefresh={onRefresh} contentContainerStyle={[s.contentContainer]} removeClippedSubviews={true} - // @ts-ignore our .web version only -prf desktopFixedHeight + sideBorders={false} /> )} diff --git a/src/view/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx deleted file mode 100644 index 78b66a9296..0000000000 --- a/src/view/com/util/SimpleViewHeader.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react' -import { - StyleProp, - StyleSheet, - TouchableOpacity, - View, - ViewStyle, -} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useNavigation} from '@react-navigation/native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {NavigationProp} from '#/lib/routes/types' -import {isWeb} from '#/platform/detection' -import {useSetDrawerOpen} from '#/state/shell' -import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' -import {CenteredView} from './Views' - -const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} - -export function SimpleViewHeader({ - showBackButton = true, - style, - children, -}: React.PropsWithChildren<{ - showBackButton?: boolean - style?: StyleProp -}>) { - const pal = usePalette('default') - const setDrawerOpen = useSetDrawerOpen() - const navigation = useNavigation() - const {isMobile} = useWebMediaQueries() - const canGoBack = navigation.canGoBack() - - const onPressBack = React.useCallback(() => { - if (navigation.canGoBack()) { - navigation.goBack() - } else { - navigation.navigate('Home') - } - }, [navigation]) - - const onPressMenu = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) - - const Container = isMobile ? View : CenteredView - return ( - - {showBackButton ? ( - - {canGoBack ? ( - - ) : ( - - )} - - ) : null} - {children} - - ) -} - -const styles = StyleSheet.create({ - header: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 18, - paddingVertical: 12, - width: '100%', - }, - headerMobile: { - paddingHorizontal: 12, - paddingVertical: 10, - }, - headerWeb: { - // @ts-ignore web-only - position: 'sticky', - top: 0, - zIndex: 1, - }, - backBtn: { - width: 30, - height: 30, - }, - backBtnWide: { - width: 30, - height: 30, - paddingLeft: 4, - marginRight: 4, - }, - backIcon: { - marginTop: 6, - }, -}) diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index f654f2bd93..d1c03bafe9 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -1,33 +1,26 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' import {AtUri} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect, useNavigation} from '@react-navigation/native' import {useEmail} from '#/lib/hooks/useEmail' -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {NavigationProp} from '#/lib/routes/types' -import {s} from '#/lib/styles' import {useModalControls} from '#/state/modals' import {useSetMinimalShellMode} from '#/state/shell' import {MyLists} from '#/view/com/lists/MyLists' -import {Button} from '#/view/com/util/forms/Button' -import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' -import {Text} from '#/view/com/util/text/Text' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog' +import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus' import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function ListsScreen({}: Props) { const {_} = useLingui() - const pal = usePalette('default') const setMinimalShellMode = useSetMinimalShellMode() - const {isMobile} = useWebMediaQueries() const navigation = useNavigation() const {openModal} = useModalControls() const {needsEmailVerification} = useEmail() @@ -61,44 +54,31 @@ export function ListsScreen({}: Props) { }, [needsEmailVerification, control, openModal, navigation]) return ( - - - - - User Lists - - + + + + + + Lists + + Public, shareable lists which can drive feeds. - - - - - - - + + + + + export function ModerationModlistsScreen({}: Props) { const {_} = useLingui() - const pal = usePalette('default') const setMinimalShellMode = useSetMinimalShellMode() - const {isMobile} = useWebMediaQueries() const navigation = useNavigation() const {openModal} = useModalControls() const {needsEmailVerification} = useEmail() @@ -61,40 +54,33 @@ export function ModerationModlistsScreen({}: Props) { }, [needsEmailVerification, control, openModal, navigation]) return ( - - - - + + + + + Moderation Lists - - + + Public, shareable lists of users to mute or block in bulk. - - - - - - - + + + + + Date: Wed, 4 Dec 2024 14:22:29 -0600 Subject: [PATCH 28/75] Make Layout.Center not full height --- src/components/Layout/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 01180c2d45..cef60b5da5 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -180,7 +180,6 @@ export const Center = React.forwardRef(function LayoutContent( Date: Wed, 4 Dec 2024 14:27:31 -0600 Subject: [PATCH 29/75] Refactor List to use Layout.Center, remove built-in borders --- src/view/com/util/List.web.tsx | 115 ++++++++++++++------------------- 1 file changed, 49 insertions(+), 66 deletions(-) diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index f112d2d0a4..18f7d6fa7e 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -4,10 +4,9 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook import {batchedUpdates} from '#/lib/batchedUpdates' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useScrollHandlers} from '#/lib/ScrollContext' import {addStyle} from '#/lib/styles' +import * as Layout from '#/components/Layout' export type ListMethods = any // TODO: Better types. export type ListProps = Omit< @@ -24,6 +23,9 @@ export type ListProps = Omit< desktopFixedHeight?: number | boolean // Web only prop to contain the scroll to the container rather than the window disableFullWindowScroll?: boolean + /** + * @deprecated Should be using Layout components + */ sideBorders?: boolean } export type ListRef = React.MutableRefObject // TODO: Better types. @@ -56,20 +58,11 @@ function ListImpl( renderItem, extraData, style, - sideBorders = true, ...props }: ListProps, ref: React.Ref, ) { const contextScrollHandlers = useScrollHandlers() - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() - if (!isMobile) { - contentContainerStyle = addStyle( - contentContainerStyle, - styles.containerScroll, - ) - } const isEmpty = !data || data.length === 0 @@ -326,53 +319,53 @@ function ListImpl( styles.parentTreeVisibilityDetector } /> - - - {onStartReached && !isEmpty && ( - - )} - {headerComponent} - {isEmpty - ? emptyComponent - : (data as Array)?.map((item, index) => { - const key = keyExtractor!(item, index) - return ( - - key={key} - item={item} - index={index} - renderItem={renderItem} - extraData={extraData} - onItemSeen={onItemSeen} - /> - ) - })} - {onEndReached && !isEmpty && ( - + + - )} - {footerComponent} - + {onStartReached && !isEmpty && ( + + )} + {headerComponent} + {isEmpty + ? emptyComponent + : (data as Array)?.map((item, index) => { + const key = keyExtractor!(item, index) + return ( + + key={key} + item={item} + index={index} + renderItem={renderItem} + extraData={extraData} + onItemSeen={onItemSeen} + /> + ) + })} + {onEndReached && !isEmpty && ( + + )} + {footerComponent} + + ) } @@ -558,16 +551,6 @@ export const List = memo(React.forwardRef(ListImpl)) as ( // https://stackoverflow.com/questions/7944460/detect-safari-browser const styles = StyleSheet.create({ - sideBorders: { - borderLeftWidth: 1, - borderRightWidth: 1, - }, - containerScroll: { - width: '100%', - maxWidth: 600, - marginLeft: 'auto', - marginRight: 'auto', - }, minHeightViewport: { // @ts-ignore web only minHeight: '100vh', From df01417e680b36a835e996ffaef964760267ccad Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 14:30:38 -0600 Subject: [PATCH 30/75] Fix Home screen --- src/view/com/home/HomeHeaderLayout.web.tsx | 89 +++++++++++----------- src/view/screens/Home.tsx | 2 +- 2 files changed, 44 insertions(+), 47 deletions(-) diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index bdfc2c7ff3..e2b9d5b7f4 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -12,6 +12,7 @@ import {useShellLayout} from '#/state/shell/shell-layout' import {Logo} from '#/view/icons/Logo' import {atoms as a, useTheme} from '#/alf' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' @@ -44,51 +45,52 @@ function HomeHeaderLayoutDesktopAndTablet({ return ( <> {hasSession && ( - + - - + + + - - - - + + + + + )} {tabBarAnchor} - {children} + {children} ) @@ -113,8 +114,6 @@ const styles = StyleSheet.create({ // @ts-ignore Web only left: 'calc(50% - 300px)', width: 600, - borderLeftWidth: 1, - borderRightWidth: 1, }, topBar: { flexDirection: 'row', @@ -130,8 +129,6 @@ const styles = StyleSheet.create({ top: 0, flexDirection: 'column', alignItems: 'center', - borderLeftWidth: 1, - borderRightWidth: 1, zIndex: 1, }, }) diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 1218a5ba00..8942415680 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -71,7 +71,7 @@ export function HomeScreen(props: Props) { if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) { return ( - + Date: Wed, 4 Dec 2024 14:54:28 -0600 Subject: [PATCH 31/75] Refactor PagerWithHeader to use Layout components --- src/view/com/pager/PagerWithHeader.web.tsx | 53 ++++++---------------- 1 file changed, 13 insertions(+), 40 deletions(-) diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx index 13c723f471..d8eedbff01 100644 --- a/src/view/com/pager/PagerWithHeader.web.tsx +++ b/src/view/com/pager/PagerWithHeader.web.tsx @@ -2,9 +2,8 @@ import * as React from 'react' import {ScrollView, StyleSheet, View} from 'react-native' import {useAnimatedRef} from 'react-native-reanimated' -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager' +import * as Layout from '#/components/Layout' import {ListMethods} from '../util/List' import {TabBar} from './TabBar' @@ -121,39 +120,28 @@ let PagerTabBar = ({ onSelect?: (index: number) => void tabBarAnchor?: JSX.Element | null | undefined }): React.ReactNode => { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() return ( <> - - {renderHeader?.()} - + {renderHeader?.()} {tabBarAnchor} - + + + ) @@ -181,27 +169,12 @@ function PagerItem({ } const styles = StyleSheet.create({ - headerContainerDesktop: { - marginHorizontal: 'auto', - width: 600, - borderLeftWidth: 1, - borderRightWidth: 1, - }, tabBarContainer: { // @ts-ignore web-only position: 'sticky', top: 0, zIndex: 1, }, - tabBarContainerDesktop: { - marginHorizontal: 'auto', - width: 600, - borderLeftWidth: 1, - borderRightWidth: 1, - }, - tabBarContainerMobile: { - paddingHorizontal: 0, - }, loadingHeader: { borderColor: 'transparent', }, From 5a3c0e08cdd400e0b4905b0d8bc13127e410dd83 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 15:01:07 -0600 Subject: [PATCH 32/75] Replace components in ProfileFeed and ProfileList --- src/view/com/profile/ProfileSubpageHeader.tsx | 5 ++--- src/view/com/util/LoadingScreen.tsx | 9 ++++++--- src/view/screens/ProfileFeed.tsx | 15 +++++++-------- src/view/screens/ProfileList.tsx | 12 +++++------- 4 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 0e25fe5e61..2cc2db16e0 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -23,7 +23,6 @@ import {TextLink} from '../util/Link' import {LoadingPlaceholder} from '../util/LoadingPlaceholder' import {Text} from '../util/text/Text' import {UserAvatar, UserAvatarType} from '../util/UserAvatar' -import {CenteredView} from '../util/Views' export function ProfileSubpageHeader({ isLoading, @@ -106,7 +105,7 @@ export function ProfileSubpageHeader({ }, [_openLightbox, avatar, aviRef]) return ( - + <> {isMobile && ( )} - + ) } diff --git a/src/view/com/util/LoadingScreen.tsx b/src/view/com/util/LoadingScreen.tsx index 5d2aeb38ff..1086c9d17d 100644 --- a/src/view/com/util/LoadingScreen.tsx +++ b/src/view/com/util/LoadingScreen.tsx @@ -1,14 +1,17 @@ import {ActivityIndicator, View} from 'react-native' import {s} from '#/lib/styles' -import {CenteredView} from './Views' +import * as Layout from '#/components/Layout' +/** + * @deprecated use Layout compoenents directly + */ export function LoadingScreen() { return ( - + - + ) } diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index b34f0f1b01..eee50ead30 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -49,7 +49,6 @@ import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' import {LoadingScreen} from '#/view/com/util/LoadingScreen' import {Text} from '#/view/com/util/text/Text' import * as Toast from '#/view/com/util/Toast' -import {CenteredView} from '#/view/com/util/Views' import {atoms as a, useTheme} from '#/alf' import {Button as NewButton, ButtonText} from '#/components/Button' import {useRichText} from '#/components/hooks/useRichText' @@ -97,8 +96,8 @@ export function ProfileFeedScreen(props: Props) { if (error) { return ( - - + + Could not load feed @@ -120,17 +119,17 @@ export function ProfileFeedScreen(props: Props) { - + ) } return resolvedUri ? ( - + ) : ( - + ) @@ -394,7 +393,7 @@ export function ProfileFeedScreenInner({ ]) return ( - + <> )} - + ) } diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index cb333befa4..4a36aa6e2e 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -69,7 +69,6 @@ import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn' import {LoadingScreen} from '#/view/com/util/LoadingScreen' import {Text} from '#/view/com/util/text/Text' import * as Toast from '#/view/com/util/Toast' -import {CenteredView} from '#/view/com/util/Views' import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen' import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' @@ -89,7 +88,7 @@ interface SectionRef { type Props = NativeStackScreenProps export function ProfileListScreen(props: Props) { return ( - + ) @@ -107,20 +106,20 @@ function ProfileListScreenInner(props: Props) { if (resolveError) { return ( - + - + ) } if (listError) { return ( - + - + ) } @@ -1010,7 +1009,6 @@ function ErrorScreen({error}: {error: string}) { pal.view, pal.border, { - marginTop: 10, paddingHorizontal: 18, paddingVertical: 14, borderTopWidth: StyleSheet.hairlineWidth, From 934782f01670da4ac262e247c74d14a9d9ab0398 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 15:06:43 -0600 Subject: [PATCH 33/75] Borders on Profile --- src/view/screens/Profile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 677fe09f47..aa2e987122 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -58,7 +58,7 @@ interface SectionRef { type Props = NativeStackScreenProps export function ProfileScreen(props: Props) { return ( - + ) From 5b4c0bd10f9e23c0eb245734ff4027c13be7393d Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 15:32:06 -0600 Subject: [PATCH 34/75] Search screen replacements --- src/view/screens/Search/Search.tsx | 228 +++++++++++++---------------- 1 file changed, 104 insertions(+), 124 deletions(-) diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 0518bc5064..f69fdc3c58 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -55,7 +55,7 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {Link} from '#/view/com/util/Link' import {List} from '#/view/com/util/List' import {Text} from '#/view/com/util/text/Text' -import {CenteredView, ScrollView} from '#/view/com/util/Views' +import {ScrollView} from '#/view/com/util/Views' import {Explore} from '#/view/screens/Search/Explore' import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils' @@ -68,63 +68,46 @@ import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' import * as Layout from '#/components/Layout' function Loader() { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() return ( - - - + + + + + ) } function EmptyState({message, error}: {message: string; error?: string}) { const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() return ( - - - {message} + + + + {message} - {error && ( - <> - + {error && ( + <> + - - Error: {error} - - - )} + + Error: {error} + + + )} + - + ) } @@ -224,7 +207,7 @@ let SearchScreenPostResults = ({ if (item.type === 'post') { return } else { - return + return null } }} keyExtractor={item => item.key} @@ -550,10 +533,8 @@ let SearchScreenInner = ({ ( - section.title)} {...props} /> - + )} initialPage={0}> {sections.map((section, i) => ( @@ -572,7 +553,7 @@ let SearchScreenInner = ({ ) : hasSession ? ( ) : ( - + - + ) } SearchScreenInner = React.memo(SearchScreenInner) @@ -650,7 +631,7 @@ export function SearchScreen( * Arbitrary sizing, so guess and check, used for sticky header alignment and * sizing. */ - const headerHeight = 64 + (showFilters ? 40 : 0) + const headerHeight = 60 + (showFilters ? 40 : 0) useFocusEffect( useNonReactiveCallback(() => { @@ -860,74 +841,80 @@ export function SearchScreen( }, [setShowAutocomplete]) return ( - - + - - {!gtMobile && ( - - )} - - - - {showAutocomplete && ( - - )} - - - {showFilters && ( - - - + ]}> + + + + {!gtMobile && ( + + )} + + + + {showAutocomplete && ( + + )} + + {showFilters && ( + + + + + + )} - )} - + + void onRemoveProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void }) { - const {isTabletOrDesktop, isMobile} = useWebMediaQueries() + const {isMobile} = useWebMediaQueries() const pal = usePalette('default') const {_} = useLingui() return ( - + {(searchHistory.length > 0 || selectedProfiles.length > 0) && ( @@ -1152,7 +1132,7 @@ function SearchHistory({ )} - + ) } From 5323d230ec92f403c60fbe2fb6bcfc903aa1bb9c Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 21:33:58 +0000 Subject: [PATCH 35/75] use new header for profile subpage header (#6958) --- src/components/Layout/Header/index.tsx | 2 +- src/view/com/profile/ProfileSubpageHeader.tsx | 84 ++++--------------- 2 files changed, 15 insertions(+), 71 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index b7c3d641e0..e7635c5ed8 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -60,7 +60,7 @@ export function Content({ children, align = 'platform', }: { - children: React.ReactNode + children?: React.ReactNode align?: 'platform' | 'left' }) { return ( diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 2cc2db16e0..3725e68e20 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -1,28 +1,24 @@ import React from 'react' -import {Pressable, StyleSheet, View} from 'react-native' +import {Pressable, View} from 'react-native' import {MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import {BACK_HITSLOP} from '#/lib/constants' import {measureHandle, useHandleRef} from '#/lib/hooks/useHandleRef' import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {makeProfileLink} from '#/lib/routes/links' import {NavigationProp} from '#/lib/routes/types' import {sanitizeHandle} from '#/lib/strings/handles' -import {isNative} from '#/platform/detection' import {emitSoftReset} from '#/state/events' import {useLightboxControls} from '#/state/lightbox' -import {useSetDrawerOpen} from '#/state/shell' -import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import {TextLink} from '#/view/com/util/Link' +import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {Text} from '#/view/com/util/text/Text' +import {UserAvatar, UserAvatarType} from '#/view/com/util/UserAvatar' import {StarterPack} from '#/components/icons/StarterPack' -import {TextLink} from '../util/Link' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' -import {Text} from '../util/text/Text' -import {UserAvatar, UserAvatarType} from '../util/UserAvatar' +import * as Layout from '#/components/Layout' export function ProfileSubpageHeader({ isLoading, @@ -47,7 +43,6 @@ export function ProfileSubpageHeader({ | undefined avatarType: UserAvatarType | 'starter-pack' }>) { - const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation() const {_} = useLingui() const {isMobile} = useWebMediaQueries() @@ -56,18 +51,6 @@ export function ProfileSubpageHeader({ const canGoBack = navigation.canGoBack() const aviRef = useHandleRef() - const onPressBack = React.useCallback(() => { - if (navigation.canGoBack()) { - navigation.goBack() - } else { - navigation.navigate('Home') - } - }, [navigation]) - - const onPressMenu = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) - const _openLightbox = React.useCallback( (uri: string, thumbRect: MeasuredDimensions | null) => { openLightbox({ @@ -107,39 +90,15 @@ export function ProfileSubpageHeader({ return ( <> {isMobile && ( - - - {canGoBack ? ( - - ) : ( - - )} - - + + {canGoBack ? ( + + ) : ( + + )} + {children} - + )} ) } - -const styles = StyleSheet.create({ - backBtn: { - width: 20, - height: 30, - }, - backBtnWide: { - width: 20, - height: 30, - marginRight: 4, - }, - backIcon: { - marginTop: 6, - }, -}) From a5ef82fb4555d43daf0aac3f2d89dffc40621d5e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 15:38:00 -0600 Subject: [PATCH 36/75] Search AutocompleteResults --- src/view/screens/Search/Search.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index f69fdc3c58..70af0ceedd 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -55,7 +55,6 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {Link} from '#/view/com/util/Link' import {List} from '#/view/com/util/List' import {Text} from '#/view/com/util/text/Text' -import {ScrollView} from '#/view/com/util/Views' import {Explore} from '#/view/screens/Search/Explore' import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils' @@ -979,8 +978,7 @@ let AutocompleteResults = ({ !moderationOpts ? ( ) : ( - ))} - + )} ) From a8b98dc92e4d858c761e89d41ea457eb35e81585 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 21:44:35 +0000 Subject: [PATCH 37/75] use new header for starter pack wizard (#6957) --- src/components/Layout/Header/index.tsx | 34 ++++++---- src/screens/StarterPack/Wizard/index.tsx | 81 +++++++++--------------- 2 files changed, 49 insertions(+), 66 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index e7635c5ed8..369c454253 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -1,5 +1,5 @@ -import React, {useContext} from 'react' -import {View} from 'react-native' +import {createContext, useCallback, useContext} from 'react' +import {GestureResponderEvent, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' @@ -15,7 +15,7 @@ import { useTheme, web, } from '#/alf' -import {Button, ButtonIcon} from '#/components/Button' +import {Button, ButtonIcon, ButtonProps} from '#/components/Button' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' import {Text} from '#/components/Typography' @@ -54,7 +54,7 @@ export function Outer({children}: {children: React.ReactNode}) { ) } -const AlignmentContext = React.createContext<'platform' | 'left'>('platform') +const AlignmentContext = createContext<'platform' | 'left'>('platform') export function Content({ children, @@ -92,17 +92,22 @@ export function Slot({children}: {children?: React.ReactNode}) { ) } -export function BackButton() { +export function BackButton({onPress, style, ...props}: Partial) { const {_} = useLingui() const navigation = useNavigation() - const onPressBack = React.useCallback(() => { - if (navigation.canGoBack()) { - navigation.goBack() - } else { - navigation.navigate('Home') - } - }, [navigation]) + const onPressBack = useCallback( + (evt: GestureResponderEvent) => { + onPress?.(evt) + if (evt.defaultPrevented) return + if (navigation.canGoBack()) { + navigation.goBack() + } else { + navigation.navigate('Home') + } + }, + [onPress, navigation], + ) return ( @@ -113,7 +118,8 @@ export function BackButton() { color="secondary" shape="round" onPress={onPressBack} - style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}> + style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, style]} + {...props}> @@ -125,7 +131,7 @@ export function MenuButton() { const setDrawerOpen = useSetDrawerOpen() const {gtMobile} = useBreakpoints() - const onPress = React.useCallback(() => { + const onPress = useCallback(() => { setDrawerOpen(true) }, [setDrawerOpen]) diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index b0d71b9294..b42b753e36 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Keyboard, TouchableOpacity, View} from 'react-native' +import {Keyboard, View} from 'react-native' import {KeyboardAwareScrollView} from 'react-native-keyboard-controller' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {Image} from 'expo-image' @@ -10,13 +10,12 @@ import { ModerationOpts, } from '@atproto/api' import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect, useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {HITSLOP_10, STARTER_PACK_MAX_SIZE} from '#/lib/constants' +import {STARTER_PACK_MAX_SIZE} from '#/lib/constants' import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController' import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name' import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' @@ -29,7 +28,7 @@ import { parseStarterPackUri, } from '#/lib/strings/starter-pack' import {logger} from '#/logger' -import {isAndroid, isNative, isWeb} from '#/platform/detection' +import {isNative} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useAllListMembersQuery} from '#/state/queries/list-members' import {useProfileQuery} from '#/state/queries/profile' @@ -147,7 +146,6 @@ function WizardInner({ }) { const navigation = useNavigation() const {_} = useLingui() - const t = useTheme() const setMinimalShellMode = useSetMinimalShellMode() const [state, dispatch] = useWizardState() const {currentAccount} = useSession() @@ -283,45 +281,24 @@ function WizardInner({ return ( - - - { - if (state.currentStep === 'Details') { - navigation.pop() - } else { - dispatch({type: 'Back'}) - } - }}> - - - - - {currUiStrings.header} - - - + + { + if (state.currentStep !== 'Details') { + evt.preventDefault() + dispatch({type: 'Back'}) + } + }} + /> + + + {currUiStrings.header} + + + + {state.currentStep === 'Details' ? ( @@ -463,17 +440,17 @@ function Footer({ You and - + {getName(items[1] /* [0] is self, skip it */)}{' '} are included in your starter pack ) : items.length > 2 ? ( - + {getName(items[1] /* [0] is self, skip it */)},{' '} - + {getName(items[2])},{' '} and{' '} @@ -504,29 +481,29 @@ function Footer({ { items.length === 1 ? ( - + {getName(items[0])} {' '} is included in your starter pack ) : items.length === 2 ? ( - + {getName(items[0])} {' '} and - + {getName(items[1])}{' '} are included in your starter pack ) : items.length > 2 ? ( - + {getName(items[0])},{' '} - + {getName(items[1])},{' '} and{' '} From 1611d44b24bd0cdf7ff925243269a8d2c33e8068 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 15:51:01 -0600 Subject: [PATCH 38/75] Fix post thread --- src/view/com/post-thread/PostThread.tsx | 5 ++--- src/view/screens/PostThread.tsx | 8 ++------ 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index a101493959..0cdccff590 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -32,7 +32,6 @@ import {usePreferencesQuery} from '#/state/queries/preferences' import {useSession} from '#/state/session' import {useComposerControls} from '#/state/shell' import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies' -import {CenteredView} from '#/view/com/util/Views' import {atoms as a, useTheme} from '#/alf' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' import {Text} from '#/components/Typography' @@ -484,7 +483,7 @@ export function PostThread({uri}: {uri: string | undefined}) { } return ( - + <> {showHeader && ( )} - + ) } diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index c183569b74..9af03d8f6b 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -1,12 +1,10 @@ import React from 'react' -import {View} from 'react-native' import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' import {PostThread as PostThreadComponent} from '#/view/com/post-thread/PostThread' -import {atoms as a} from '#/alf' import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps @@ -23,10 +21,8 @@ export function PostThreadScreen({route}: Props) { ) return ( - - - - + + ) } From ed7bd1285611ae2e7ca5ae1a6edc711578022f38 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 15:57:29 -0600 Subject: [PATCH 39/75] Enable borders by default --- src/components/Layout/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index cef60b5da5..2fcb979cd6 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -41,7 +41,6 @@ export type ScreenProps = React.ComponentProps & { export const Screen = React.memo(function Screen({ disableTopPadding = false, style, - temp__enableWebBorders, ...props }: ScreenProps) { const {top} = useSafeAreaInsets() @@ -55,7 +54,7 @@ export const Screen = React.memo(function Screen({ ) return ( - {isWeb && temp__enableWebBorders && } + {isWeb && } Date: Wed, 4 Dec 2024 15:58:07 -0600 Subject: [PATCH 40/75] Moderation muted and blocked accounts --- .../screens/ModerationBlockedAccounts.tsx | 24 ++++--------------- src/view/screens/ModerationMutedAccounts.tsx | 24 ++++--------------- 2 files changed, 10 insertions(+), 38 deletions(-) diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx index 53e31d1d2e..bf24a84a9a 100644 --- a/src/view/screens/ModerationBlockedAccounts.tsx +++ b/src/view/screens/ModerationBlockedAccounts.tsx @@ -23,7 +23,6 @@ import {ProfileCard} from '#/view/com/profile/ProfileCard' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' import {Text} from '#/view/com/util/text/Text' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from '#/view/com/util/Views' import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< @@ -97,14 +96,7 @@ export function ModerationBlockedAccounts({}: Props) { ) return ( - + Blocked accounts cannot reply in your threads, mention you, or @@ -166,21 +161,12 @@ export function ModerationBlockedAccounts({}: Props) { desktopFixedHeight /> )} - + ) } const styles = StyleSheet.create({ - container: { - flex: 1, - paddingBottom: 100, - }, - containerDesktop: { - borderLeftWidth: 1, - borderRightWidth: 1, - paddingBottom: 0, - }, title: { textAlign: 'center', marginTop: 12, diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx index 6d34c8a5f4..697ba5dece 100644 --- a/src/view/screens/ModerationMutedAccounts.tsx +++ b/src/view/screens/ModerationMutedAccounts.tsx @@ -23,7 +23,6 @@ import {ProfileCard} from '#/view/com/profile/ProfileCard' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' import {Text} from '#/view/com/util/text/Text' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from '#/view/com/util/Views' import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< @@ -97,14 +96,7 @@ export function ModerationMutedAccounts({}: Props) { ) return ( - + Muted accounts have their posts removed from your feed and from your @@ -165,21 +160,12 @@ export function ModerationMutedAccounts({}: Props) { desktopFixedHeight /> )} - + ) } const styles = StyleSheet.create({ - container: { - flex: 1, - paddingBottom: 100, - }, - containerDesktop: { - borderLeftWidth: 1, - borderRightWidth: 1, - paddingBottom: 0, - }, title: { textAlign: 'center', marginTop: 12, From e740bdd4bde7731a0cea7227aafa8e09f63d9a44 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:03:56 -0600 Subject: [PATCH 41/75] Fix scrollbar offset on Labeler --- src/screens/Profile/Sections/Labels.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/screens/Profile/Sections/Labels.tsx b/src/screens/Profile/Sections/Labels.tsx index 67c827d901..6c76d7b153 100644 --- a/src/screens/Profile/Sections/Labels.tsx +++ b/src/screens/Profile/Sections/Labels.tsx @@ -15,10 +15,11 @@ import {isLabelerSubscribed, lookupLabelValueDefinition} from '#/lib/moderation' import {useScrollHandlers} from '#/lib/ScrollContext' import {isNative} from '#/platform/detection' import {ListRef} from '#/view/com/util/List' -import {CenteredView, ScrollView} from '#/view/com/util/Views' +import {ScrollView} from '#/view/com/util/Views' import {atoms as a, useTheme} from '#/alf' import {Divider} from '#/components/Divider' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' import {LabelerLabelPreference} from '#/components/moderation/LabelPreference' import {Text} from '#/components/Typography' @@ -75,7 +76,7 @@ export const ProfileLabelsSection = React.forwardRef< }, [isFocused, scrollElRef, setScrollViewTag]) return ( - + {isLabelerLoading ? ( @@ -95,7 +96,7 @@ export const ProfileLabelsSection = React.forwardRef< headerHeight={headerHeight} /> )} - + ) }) From 7df55eb36665c7d7c11187938bdb6a42b9568918 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:10:57 -0600 Subject: [PATCH 42/75] Remove ScrollView from Moderation --- src/screens/Moderation/index.tsx | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 7fddcfe79e..e6912d822e 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -18,7 +18,6 @@ import { import {isNonConfigurableModerationAuthority} from '#/state/session/additional-moderation-authorities' import {useSetMinimalShellMode} from '#/state/shell' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {ScrollView} from '#/view/com/util/Views' import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' @@ -86,9 +85,8 @@ export function ModerationScreen( return ( - - - + + {isLoading ? ( ) : error || !preferences ? ( @@ -101,7 +99,7 @@ export function ModerationScreen( ) : ( )} - + ) } @@ -188,13 +186,7 @@ export function ModerationScreenInner({ const disabledOnIOS = isIOS && !adultContentEnabled return ( - + Moderation tools @@ -450,6 +442,6 @@ export function ModerationScreenInner({ )} - + ) } From 03b871ea9e1fa7daf7105c0232f8c1ee94571566 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:17:13 -0600 Subject: [PATCH 43/75] Remove ScrollView from Deactivated --- src/screens/Deactivated.tsx | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx index 36b96cacd7..4fcb42854a 100644 --- a/src/screens/Deactivated.tsx +++ b/src/screens/Deactivated.tsx @@ -17,13 +17,13 @@ import { } from '#/state/session' import {useSetMinimalShellMode} from '#/state/shell' import {useLoggedOutViewControls} from '#/state/shell/logged-out' -import {ScrollView} from '#/view/com/util/Views' import {Logo} from '#/view/icons/Logo' import {atoms as a, useTheme} from '#/alf' import {AccountList} from '#/components/AccountList' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Divider} from '#/components/Divider' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -104,24 +104,17 @@ export function Deactivated() { }, [_, agent, setPending, setError, queryClient]) return ( - - + - + @@ -218,7 +211,7 @@ export function Deactivated() { )} - + ) } From 6a3854b659d70b8b17b3edc52b7876e74c96523f Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:21:57 -0600 Subject: [PATCH 44/75] Remove ScrollView from onboarding --- src/screens/Onboarding/Layout.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/screens/Onboarding/Layout.tsx b/src/screens/Onboarding/Layout.tsx index 54821532c3..f3a6bc3919 100644 --- a/src/screens/Onboarding/Layout.tsx +++ b/src/screens/Onboarding/Layout.tsx @@ -1,13 +1,11 @@ import React from 'react' -import {View} from 'react-native' -import Animated from 'react-native-reanimated' +import {ScrollView,View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {isWeb} from '#/platform/detection' import {useOnboardingDispatch} from '#/state/shell' -import {ScrollView} from '#/view/com/util/Views' import {Context} from '#/screens/Onboarding/state' import { atoms as a, @@ -36,7 +34,7 @@ export function Layout({children}: React.PropsWithChildren<{}>) { const {gtMobile} = useBreakpoints() const onboardDispatch = useOnboardingDispatch() const {state, dispatch} = React.useContext(Context) - const scrollview = React.useRef(null) + const scrollview = React.useRef(null) const prevActiveStep = React.useRef(state.activeStep) React.useEffect(() => { From 0c24e5edf69b6595eea148ca58171cf67e8dff18 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:29:56 -0600 Subject: [PATCH 45/75] Remove ScrollView from SignupQueued --- src/screens/SignupQueued.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/screens/SignupQueued.tsx b/src/screens/SignupQueued.tsx index ed261f29ea..18826249a3 100644 --- a/src/screens/SignupQueued.tsx +++ b/src/screens/SignupQueued.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Modal, View} from 'react-native' +import {Modal, ScrollView,View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {StatusBar} from 'expo-status-bar' import {msg, plural, Trans} from '@lingui/macro' @@ -9,7 +9,6 @@ import {logger} from '#/logger' import {isIOS, isWeb} from '#/platform/detection' import {isSignupQueued, useAgent, useSessionApi} from '#/state/session' import {useOnboardingDispatch} from '#/state/shell' -import {ScrollView} from '#/view/com/util/Views' import {Logo} from '#/view/icons/Logo' import {atoms as a, native, useBreakpoints, useTheme, web} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' From bb993239640fb161d40d6642bc6d16ed85ad6013 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:31:37 -0600 Subject: [PATCH 46/75] Mark deprecations --- src/view/com/util/Views.tsx | 7 +++++++ src/view/com/util/Views.web.tsx | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/src/view/com/util/Views.tsx b/src/view/com/util/Views.tsx index 0d3f637947..c9ba0728cc 100644 --- a/src/view/com/util/Views.tsx +++ b/src/view/com/util/Views.tsx @@ -15,9 +15,16 @@ export type FlatList_INTERNAL = Omit< FlatListComponent>, 'CellRendererComponent' > + +/** + * @deprecated use `Layout` components + */ export const ScrollView = Animated.ScrollView export type ScrollView = typeof Animated.ScrollView +/** + * @deprecated use `Layout` components + */ export const CenteredView = forwardRef< View, React.PropsWithChildren< diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index 1f030b408c..4a4c08bcd8 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -31,6 +31,9 @@ interface AddedProps { desktopFixedHeight?: boolean | number } +/** + * @deprecated use `Layout` components + */ export const CenteredView = React.forwardRef(function CenteredView( { style, @@ -135,6 +138,9 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl( ) }) +/** + * @deprecated use `Layout` components + */ export const ScrollView = React.forwardRef(function ScrollViewImpl( {contentContainerStyle, ...props}: React.PropsWithChildren, ref: React.Ref, From a3778d10ae4045837449965ec3a745240d99b0d0 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 4 Dec 2024 22:46:18 +0000 Subject: [PATCH 47/75] fix lint --- src/screens/SignupQueued.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/SignupQueued.tsx b/src/screens/SignupQueued.tsx index 18826249a3..f1c36a69c3 100644 --- a/src/screens/SignupQueued.tsx +++ b/src/screens/SignupQueued.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Modal, ScrollView,View} from 'react-native' +import {Modal, ScrollView, View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {StatusBar} from 'expo-status-bar' import {msg, plural, Trans} from '@lingui/macro' From 2ac21c1609908f2f79a749aa81148171a9724d9a Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:32:51 -0600 Subject: [PATCH 48/75] Fix double borders on profile load --- src/view/screens/Profile.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index aa2e987122..6d46557d83 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -40,11 +40,9 @@ import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' import {FAB} from '#/view/com/util/fab/FAB' import {ListRef} from '#/view/com/util/List' -import {CenteredView} from '#/view/com/util/Views' import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels' -import {web} from '#/alf' import * as Layout from '#/components/Layout' import {ScreenHider} from '#/components/moderation/ScreenHider' import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks' @@ -116,9 +114,9 @@ function ProfileScreenInner({route}: Props) { // Most pushes will happen here, since we will have only placeholder data if (isLoadingDid || isLoadingProfile || starterPacksQuery.isLoading) { return ( - + - + ) } if (resolveError || profileError) { From 0a9eb0e1457548290c45fca7b8e1a7c0bb6e875e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:36:41 -0600 Subject: [PATCH 49/75] Remove unneeded CenteredView from noty Feed --- src/view/com/notifications/Feed.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index 4876654541..9871455a17 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -21,7 +21,6 @@ import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {List, ListRef} from '#/view/com/util/List' import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn' -import {CenteredView} from '#/view/com/util/Views' import {FeedItem} from './FeedItem' const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} @@ -162,12 +161,10 @@ export function Feed({ return ( {error && ( - - - + )} Date: Wed, 4 Dec 2024 16:37:00 -0600 Subject: [PATCH 50/75] Remove double Center layout on Notifications screen --- src/view/screens/Notifications.tsx | 136 ++++++++++++++--------------- 1 file changed, 67 insertions(+), 69 deletions(-) diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 45a6a8468c..db155e0a2f 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -108,77 +108,75 @@ export function NotificationsScreen({route: {params}}: Props) { return ( - - - - - - - - - - - - + + + + + + + + + + + - - - - {(isScrolledDown || hasNew) && ( - - )} - openComposer({})} - icon={} - accessibilityRole="button" - accessibilityLabel={_(msg`New post`)} - accessibilityHint="" + + - + + {(isScrolledDown || hasNew) && ( + + )} + openComposer({})} + icon={} + accessibilityRole="button" + accessibilityLabel={_(msg`New post`)} + accessibilityHint="" + /> ) } From 7cd3e2d514b92949f05480341afd9c85557e3124 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 16:38:53 -0600 Subject: [PATCH 51/75] Remove double Center layout on ChatList screen --- src/screens/Messages/ChatList.tsx | 54 +++++++++++++++---------------- 1 file changed, 26 insertions(+), 28 deletions(-) diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 269f828023..f5aaba4fba 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -204,34 +204,32 @@ export function MessagesScreen({navigation, route}: Props) { return (
- - - - } - onEndReachedThreshold={isNative ? 1.5 : 0} - initialNumToRender={initialNumToRender} - windowSize={11} - // @ts-ignore our .web version only -sfn - desktopFixedHeight - sideBorders={false} - /> - + + + } + onEndReachedThreshold={isNative ? 1.5 : 0} + initialNumToRender={initialNumToRender} + windowSize={11} + // @ts-ignore our .web version only -sfn + desktopFixedHeight + sideBorders={false} + /> ) } From 9645e0dc6f4f00dee5ac5e4da732c8d668203af6 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 17:32:22 -0600 Subject: [PATCH 52/75] Handle scrollbar offset in chat --- src/alf/atoms.ts | 19 +++++++++++++++++++ src/components/Layout/const.ts | 4 ++++ src/components/dms/MessageItem.tsx | 4 ++-- src/screens/Messages/Conversation.tsx | 9 ++++----- 4 files changed, 29 insertions(+), 7 deletions(-) create mode 100644 src/components/Layout/const.ts diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 1f08eb7e1b..0706bfdb16 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -2,6 +2,7 @@ import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native' import * as tokens from '#/alf/tokens' import {ios, native, web} from '#/alf/util/platform' +import * as Layout from '#/components/Layout' export const atoms = { debug: { @@ -941,4 +942,22 @@ export const atoms = { transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', transitionDuration: '100ms', }), + + /** + * Debug + */ + scrollbar_offset: { + transform: [ + web({ + translateX: Layout.SCROLLBAR_OFFSET, + }), + ], + } as {transform: Exclude}, + scrollbar_offset_positive: { + transform: [ + web({ + translateX: Layout.SCROLLBAR_OFFSET_POSITIVE, + }), + ], + } as {transform: Exclude}, } as const diff --git a/src/components/Layout/const.ts b/src/components/Layout/const.ts new file mode 100644 index 0000000000..8f9ef2cdd1 --- /dev/null +++ b/src/components/Layout/const.ts @@ -0,0 +1,4 @@ +export const SCROLLBAR_OFFSET = + 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)' as any +export const SCROLLBAR_OFFSET_POSITIVE = + 'calc(var(--removed-body-scroll-bar-size, 0px) / 2)' as any diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 79f0997fd6..4cd65aedad 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -101,7 +101,7 @@ let MessageItem = ({ }, [message.text, message.facets]) return ( - <> + {isNewDay && } )} - + ) } MessageItem = React.memo(MessageItem) diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx index a2157d2b9c..b8b0bfe0d3 100644 --- a/src/screens/Messages/Conversation.tsx +++ b/src/screens/Messages/Conversation.tsx @@ -17,7 +17,6 @@ import {useCurrentConvoId} from '#/state/messages/current-convo-id' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useProfileQuery} from '#/state/queries/profile' import {useSetMinimalShellMode} from '#/state/shell' -import {CenteredView} from '#/view/com/util/Views' import {MessagesList} from '#/screens/Messages/components/MessagesList' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {useDialogControl} from '#/components/Dialog' @@ -97,7 +96,7 @@ function Inner() { if (convoState.status === ConvoStatus.Error) { return ( - + convoState.error.retry()} sideBorders={false} /> - + ) } return ( - + {!readyToShow && } {moderationOpts && recipient ? ( @@ -140,7 +139,7 @@ function Inner() { )} - + ) } From 7693712f4dc5d339cc364584040ca76a0d0bbd70 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 17:33:42 -0600 Subject: [PATCH 53/75] Use new atom for other scrollbar offsets --- src/components/Layout/Header/index.tsx | 10 +--------- src/components/Layout/index.tsx | 15 +++------------ src/view/shell/desktop/LeftNav.tsx | 5 +---- src/view/shell/desktop/RightNav.tsx | 5 +---- 4 files changed, 6 insertions(+), 29 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 369c454253..ec0e3ce98b 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -13,7 +13,6 @@ import { useBreakpoints, useGutterStyles, useTheme, - web, } from '#/alf' import {Button, ButtonIcon, ButtonProps} from '#/components/Button' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' @@ -40,14 +39,7 @@ export function Outer({children}: {children: React.ReactNode}) { a.py_sm, t.atoms.border_contrast_low, gtMobile && [a.mx_auto, {maxWidth: 600}], - web({ - transform: [ - { - translateX: - 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', - }, - ], - }), + a.scrollbar_offset, ]}> {children} diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 2fcb979cd6..459581d696 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -15,6 +15,7 @@ import {isWeb} from '#/platform/detection' import {useShellLayout} from '#/state/shell/shell-layout' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' +export * from '#/components/Layout/const' export * as Header from '#/components/Layout/Header' // Every screen should have a Layout component wrapping it. @@ -159,10 +160,7 @@ export const WebCenterBorders = React.forwardRef(function LayoutContent() { { translateX: '-50%', }, - { - translateX: - 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', - }, + ...a.scrollbar_offset.transform, ], }), ]} @@ -185,14 +183,7 @@ export const Center = React.forwardRef(function LayoutContent( maxWidth: 600, }, style, - web({ - transform: [ - { - translateX: - 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', - }, - ], - }), + a.scrollbar_offset, ]} {...props}> {children} diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 60a289fc91..354ad47337 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -489,10 +489,7 @@ const styles = StyleSheet.create({ { translateX: '-100%', }, - { - // @ts-ignore web only -esb - translateX: 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', - }, + ...a.scrollbar_offset.transform, ], width: 240, // @ts-ignore web only diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index f1e9070022..7814f35488 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -127,10 +127,7 @@ const styles = StyleSheet.create({ { translateX: 300, }, - { - // @ts-ignore web only -esb - translateX: 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)', - }, + ...a.scrollbar_offset.transform, ], maxHeight: '100%', overflowY: 'auto', From d8dc0d2351c8f452e5bf2e0b2dc493fe453ef616 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 17:36:10 -0600 Subject: [PATCH 54/75] Remove borders from old views --- src/view/com/util/Views.web.tsx | 25 ++----------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index 4a4c08bcd8..e64b0ce9a2 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -37,7 +37,6 @@ interface AddedProps { export const CenteredView = React.forwardRef(function CenteredView( { style, - sideBorders, topBorder, ...props }: React.PropsWithChildren< @@ -50,13 +49,6 @@ export const CenteredView = React.forwardRef(function CenteredView( if (!isMobile) { style = addStyle(style, styles.container) } - if (sideBorders && !isMobile) { - style = addStyle(style, { - borderLeftWidth: StyleSheet.hairlineWidth, - borderRightWidth: StyleSheet.hairlineWidth, - }) - style = addStyle(style, pal.border) - } if (topBorder) { style = addStyle(style, { borderTopWidth: 1, @@ -78,7 +70,6 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl( >, ref: React.Ref>, ) { - const pal = usePalette('default') const {isMobile} = useWebMediaQueries() if (!isMobile) { contentContainerStyle = addStyle( @@ -126,11 +117,7 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl( return ( , ref: React.Ref, ) { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() if (!isMobile) { contentContainerStyle = addStyle( @@ -156,11 +141,7 @@ export const ScrollView = React.forwardRef(function ScrollViewImpl( } return ( Date: Wed, 4 Dec 2024 17:40:20 -0600 Subject: [PATCH 55/75] Better doc --- src/alf/atoms.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 0706bfdb16..4d6219951b 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -944,7 +944,7 @@ export const atoms = { }), /** - * Debug + * {@link Layout.SCROLLBAR_OFFSET} */ scrollbar_offset: { transform: [ @@ -953,6 +953,9 @@ export const atoms = { }), ], } as {transform: Exclude}, + /** + * {@link Layout.SCROLLBAR_OFFSET_POSITIVE} + */ scrollbar_offset_positive: { transform: [ web({ From bba65678a51437c9c1b38539bb778da74e2c059b Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 17:47:02 -0600 Subject: [PATCH 56/75] Remove temp migration prop --- src/components/Layout/index.tsx | 1 - src/components/forms/DateField/index.android.tsx | 1 + src/screens/Messages/ChatList.tsx | 4 ++-- src/screens/Messages/Settings.tsx | 2 +- src/screens/Moderation/index.tsx | 2 +- src/screens/Onboarding/Layout.tsx | 2 +- src/screens/Post/PostLikedBy.tsx | 2 +- src/screens/Profile/KnownFollowers.tsx | 4 ++-- src/screens/Profile/ProfileLabelerLikedBy.tsx | 2 +- src/screens/Settings/AboutSettings.tsx | 2 +- src/screens/Settings/AccessibilitySettings.tsx | 2 +- src/screens/Settings/AccountSettings.tsx | 2 +- src/screens/Settings/AppIconSettings.tsx | 2 +- src/screens/Settings/AppPasswords.tsx | 2 +- src/screens/Settings/AppearanceSettings.tsx | 2 +- src/screens/Settings/ContentAndMediaSettings.tsx | 2 +- src/screens/Settings/ExternalMediaPreferences.tsx | 4 +--- src/screens/Settings/FollowingFeedPreferences.tsx | 4 +--- src/screens/Settings/LanguageSettings.tsx | 2 +- src/screens/Settings/NotificationSettings.tsx | 2 +- src/screens/Settings/PrivacyAndSecuritySettings.tsx | 2 +- src/screens/Settings/Settings.tsx | 2 +- src/screens/Settings/ThreadPreferences.tsx | 2 +- src/view/screens/Feeds.tsx | 2 +- src/view/screens/Home.tsx | 2 +- src/view/screens/Lists.tsx | 2 +- src/view/screens/ModerationModlists.tsx | 2 +- src/view/screens/Notifications.tsx | 2 +- src/view/screens/PostThread.tsx | 2 +- src/view/screens/Profile.tsx | 2 +- src/view/screens/ProfileFeed.tsx | 6 +++--- src/view/screens/ProfileList.tsx | 2 +- src/view/screens/SavedFeeds.tsx | 2 +- src/view/screens/Search/Search.tsx | 2 +- 34 files changed, 37 insertions(+), 41 deletions(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 459581d696..7289cb3713 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -31,7 +31,6 @@ const LayoutContext = React.createContext({ export type ScreenProps = React.ComponentProps & { disableTopPadding?: boolean style?: StyleProp - temp__enableWebBorders?: boolean } /** diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index b64c0e9fab..58f4d4f89a 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/src/components/forms/DateField/index.android.tsx @@ -57,6 +57,7 @@ export function DateField({ open timeZoneOffsetInMinutes={0} theme={t.scheme} + // @ts-ignore TODO buttonColor={t.name === 'light' ? '#000000' : '#ffffff'} date={new Date(value)} onConfirm={onChangeInternal} diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index f5aaba4fba..1a87a2ac59 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -128,7 +128,7 @@ export function MessagesScreen({navigation, route}: Props) { if (conversations.length < 1) { return ( - +
{isLoading ? ( @@ -202,7 +202,7 @@ export function MessagesScreen({navigation, route}: Props) { } return ( - +
+ diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index e6912d822e..6b4dd06bcc 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -84,7 +84,7 @@ export function ModerationScreen( const error = preferencesError return ( - + {isLoading ? ( diff --git a/src/screens/Onboarding/Layout.tsx b/src/screens/Onboarding/Layout.tsx index f3a6bc3919..059cdfd5cd 100644 --- a/src/screens/Onboarding/Layout.tsx +++ b/src/screens/Onboarding/Layout.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ScrollView,View} from 'react-native' +import {ScrollView, View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx index 7ced8eaccd..d35d332432 100644 --- a/src/screens/Post/PostLikedBy.tsx +++ b/src/screens/Post/PostLikedBy.tsx @@ -24,7 +24,7 @@ export const PostLikedByScreen = ({route}: Props) => { ) return ( - + diff --git a/src/screens/Profile/KnownFollowers.tsx b/src/screens/Profile/KnownFollowers.tsx index c1dce05741..d6dd15c698 100644 --- a/src/screens/Profile/KnownFollowers.tsx +++ b/src/screens/Profile/KnownFollowers.tsx @@ -100,7 +100,7 @@ export const ProfileKnownFollowersScreen = ({route}: Props) => { if (followers.length < 1) { return ( - + { } return ( - + + diff --git a/src/screens/Settings/AboutSettings.tsx b/src/screens/Settings/AboutSettings.tsx index 2679a148e6..02976bb3ca 100644 --- a/src/screens/Settings/AboutSettings.tsx +++ b/src/screens/Settings/AboutSettings.tsx @@ -20,7 +20,7 @@ export function AboutSettingsScreen({}: Props) { const {_} = useLingui() return ( - + diff --git a/src/screens/Settings/AccessibilitySettings.tsx b/src/screens/Settings/AccessibilitySettings.tsx index 790b6bd83c..ee26697d2d 100644 --- a/src/screens/Settings/AccessibilitySettings.tsx +++ b/src/screens/Settings/AccessibilitySettings.tsx @@ -38,7 +38,7 @@ export function AccessibilitySettingsScreen({}: Props) { const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled() return ( - + diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index 5d5a434239..634c9d3f78 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/src/screens/Settings/AccountSettings.tsx @@ -37,7 +37,7 @@ export function AccountSettingsScreen({}: Props) { const deactivateAccountControl = useDialogControl() return ( - + diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx index f405836780..18fcd5e305 100644 --- a/src/screens/Settings/AppIconSettings.tsx +++ b/src/screens/Settings/AppIconSettings.tsx @@ -19,7 +19,7 @@ export function AppIconSettingsScreen({}: Props) { const sets = useAppIconSets() return ( - + diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx index 950dcd1066..630d26ba78 100644 --- a/src/screens/Settings/AppPasswords.tsx +++ b/src/screens/Settings/AppPasswords.tsx @@ -43,7 +43,7 @@ export function AppPasswordsScreen({}: Props) { const createAppPasswordControl = useDialogControl() return ( - + diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index acfcd89eb8..48c4a2d85d 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -78,7 +78,7 @@ export function AppearanceSettingsScreen({}: Props) { return ( - + diff --git a/src/screens/Settings/ContentAndMediaSettings.tsx b/src/screens/Settings/ContentAndMediaSettings.tsx index 7b84bc0381..17f8fa5067 100644 --- a/src/screens/Settings/ContentAndMediaSettings.tsx +++ b/src/screens/Settings/ContentAndMediaSettings.tsx @@ -31,7 +31,7 @@ export function ContentAndMediaSettingsScreen({}: Props) { const setUseInAppBrowser = useSetInAppBrowser() return ( - + diff --git a/src/screens/Settings/ExternalMediaPreferences.tsx b/src/screens/Settings/ExternalMediaPreferences.tsx index 138d3b7ae4..ae859295f8 100644 --- a/src/screens/Settings/ExternalMediaPreferences.tsx +++ b/src/screens/Settings/ExternalMediaPreferences.tsx @@ -23,9 +23,7 @@ type Props = NativeStackScreenProps< > export function ExternalMediaPreferencesScreen({}: Props) { return ( - + diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx index 0cd0b7abd2..ea9455ab1a 100644 --- a/src/screens/Settings/FollowingFeedPreferences.tsx +++ b/src/screens/Settings/FollowingFeedPreferences.tsx @@ -45,9 +45,7 @@ export function FollowingFeedPreferencesScreen({}: Props) { ) return ( - + diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx index 451e19f896..096f925669 100644 --- a/src/screens/Settings/LanguageSettings.tsx +++ b/src/screens/Settings/LanguageSettings.tsx @@ -63,7 +63,7 @@ export function LanguageSettingsScreen({}: Props) { }, [langPrefs.contentLanguages]) return ( - + diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx index 4d2eb6d958..1c77b31489 100644 --- a/src/screens/Settings/NotificationSettings.tsx +++ b/src/screens/Settings/NotificationSettings.tsx @@ -32,7 +32,7 @@ export function NotificationSettingsScreen({}: Props) { : serverPriority return ( - + diff --git a/src/screens/Settings/PrivacyAndSecuritySettings.tsx b/src/screens/Settings/PrivacyAndSecuritySettings.tsx index 177084eaa3..870ece4bff 100644 --- a/src/screens/Settings/PrivacyAndSecuritySettings.tsx +++ b/src/screens/Settings/PrivacyAndSecuritySettings.tsx @@ -28,7 +28,7 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) { const {currentAccount} = useSession() return ( - + diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx index 21e443bebc..7a4ad6f204 100644 --- a/src/screens/Settings/Settings.tsx +++ b/src/screens/Settings/Settings.tsx @@ -72,7 +72,7 @@ export function SettingsScreen({}: Props) { const [showDevOptions, setShowDevOptions] = useState(false) return ( - + diff --git a/src/screens/Settings/ThreadPreferences.tsx b/src/screens/Settings/ThreadPreferences.tsx index a8f85d5db4..b1547e495e 100644 --- a/src/screens/Settings/ThreadPreferences.tsx +++ b/src/screens/Settings/ThreadPreferences.tsx @@ -37,7 +37,7 @@ export function ThreadPreferencesScreen({}: Props) { ) return ( - + diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index ac20cdc3fd..74328bcd81 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -497,7 +497,7 @@ export function FeedsScreen(_props: Props) { ) return ( - + diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 8942415680..1218a5ba00 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -71,7 +71,7 @@ export function HomeScreen(props: Props) { if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) { return ( - + + diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index b3d5bec702..0ef4d43896 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -54,7 +54,7 @@ export function ModerationModlistsScreen({}: Props) { }, [needsEmailVerification, control, openModal, navigation]) return ( - + diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index db155e0a2f..35591f2700 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -107,7 +107,7 @@ export function NotificationsScreen({route: {params}}: Props) { }, [onPressLoadLatest, isScreenFocused]) return ( - + diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 9af03d8f6b..1bad9b6cdf 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -21,7 +21,7 @@ export function PostThreadScreen({route}: Props) { ) return ( - + ) diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 6d46557d83..6a9b6f7f26 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -56,7 +56,7 @@ interface SectionRef { type Props = NativeStackScreenProps export function ProfileScreen(props: Props) { return ( - + ) diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index eee50ead30..63469ef4fb 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -96,7 +96,7 @@ export function ProfileFeedScreen(props: Props) { if (error) { return ( - + @@ -125,11 +125,11 @@ export function ProfileFeedScreen(props: Props) { } return resolvedUri ? ( - + ) : ( - + ) diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 4a36aa6e2e..a927526ad3 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -88,7 +88,7 @@ interface SectionRef { type Props = NativeStackScreenProps export function ProfileListScreen(props: Props) { return ( - + ) diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 297b7cda8d..1b4c84a604 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -88,7 +88,7 @@ function SavedFeedsInner({ }, [_, overwriteSavedFeeds, currentFeeds, navigation]) return ( - + diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 70af0ceedd..974831206b 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -840,7 +840,7 @@ export function SearchScreen( }, [setShowAutocomplete]) return ( - + Date: Wed, 4 Dec 2024 19:19:13 -0600 Subject: [PATCH 57/75] Fix new atom usage on native --- src/alf/atoms.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 4d6219951b..475da07b79 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -946,21 +946,21 @@ export const atoms = { /** * {@link Layout.SCROLLBAR_OFFSET} */ - scrollbar_offset: { + scrollbar_offset: web({ transform: [ - web({ + { translateX: Layout.SCROLLBAR_OFFSET, - }), + }, ], - } as {transform: Exclude}, + }) as {transform: Exclude}, /** * {@link Layout.SCROLLBAR_OFFSET_POSITIVE} */ - scrollbar_offset_positive: { + scrollbar_offset_positive: web({ transform: [ - web({ + { translateX: Layout.SCROLLBAR_OFFSET_POSITIVE, - }), + }, ], - } as {transform: Exclude}, + }) as {transform: Exclude}, } as const From 7681046b521389ce72018bda5c92c997bb2db10b Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 19:46:10 -0600 Subject: [PATCH 58/75] Clean up Hashtag screen --- src/screens/Hashtag.tsx | 56 +++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index bfafe6a3a5..6d73ed0370 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -20,7 +20,6 @@ import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' import {Post} from '#/view/com/post/Post' import {List} from '#/view/com/util/List' -import {CenteredView} from '#/view/com/util/Views' import {Button, ButtonIcon} from '#/components/Button' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' import * as Layout from '#/components/Layout' @@ -110,37 +109,34 @@ export default function HashtagScreen({ return ( - - - - - {headerTitle} - {author && ( - - {_(msg`From @${sanitizedAuthor}`)} - - )} - - - - - - + + + + {headerTitle} + {author && ( + + {_(msg`From @${sanitizedAuthor}`)} + + )} + + + + + ( - section.title)} {...props} /> - + )} initialPage={0}> {sections.map((section, i) => ( From ccae2f5a5405b650f6af4f61d8910b1b2ab5af2e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 19:46:40 -0600 Subject: [PATCH 59/75] Layout docs --- src/components/Layout/README.md | 166 ++++++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 src/components/Layout/README.md diff --git a/src/components/Layout/README.md b/src/components/Layout/README.md new file mode 100644 index 0000000000..8bbe608068 --- /dev/null +++ b/src/components/Layout/README.md @@ -0,0 +1,166 @@ +# Layout + +This directory contains our core layout components. Use these when creating new +screens, or when supplementing other components with functionality like +centering. + +## Usage + +If we aren't talking about the `shell` components, layouts on individual screens +look like more or less like this: + +```tsx + +
...
+ ... + +``` + +I'll map these words to real components. + +### `Layout.Screen` + +Provides the "Outer" functionality for a screen, like taking up the full height +of the screen. **All screens should be wrapped with this component,** probably +as the outermost component. + +> [!NOTE] +> On web, `Layout.Screen` also provides the side borders on our central content +> column. These borders are fixed position, 1px outside our center column width +> of 600px. + +### `Layout.Header.*` + +The `Layout.Header` component actually contains multiple sub-components. Use +this to compose different versions of the header. The most basic version looks +like this: + +```tsx + + {/* or */} + + + Account + + {/* Optional subtitle */} + Settings for @esb.lol + + + + +``` + +Note the additional `Slot` component. This is here to keep the header balanced +and provide correct spacing on all platforms. The `Slot` is 34px wide, which +matches the `BackButton` and `MenuButton`. + +> If anyone has better ideas, I'm all ears, but this was simple and the small +> amount of boilerplate is only incurred when creating a new screen, which is +> infrequent. + +It can also function as a "slot" for a button positioned on the right side. See +the `Hashtag` screen for an example, abbreviated below: + +```tsx + + + +``` + +If you need additional customization, simply use the components that are helpful +and create new ones as needed. A good example is the `SavedFeeds` screen, which +looks roughly like this: + +```tsx + + + + {/* Override to align content to the left, making room for the button */} + + Edit My Feeds + + + {/* Custom button, wider than 34px */} + + +``` + +> [!TIP] +> The `Header` should be _outside_ the `Content` component in order to be +> fixed on scroll on native. Placing it inside will make it scroll with the rest +> of the page. + +### `Layout.Content` + +This provides the "Content" functionality for a screen. This component is +actually an `Animated.ScrollView`, and accepts props for that component. It +provides a little default styling as well. On web, it also _centers the content +inside our center content column of 600px_. + +> [!NOTE] +> What about flatlists or pagers? Those components are not colocated here (yet). +> But those components serve the same purpose of "Content". + +## Examples + +The most basic layout available to us looks like this: + +```tsx + + + {/* or */} + + + Account + + {/* Optional subtitle */} + Settings for @esb.lol + + + + + + + ... + + +``` + +**For `List` views,** you'd sub in `List` for `Layout.Content` and it will +function the same. See `Feeds` screen for an example. + +**For `Pager` views,** including `PagerWithHeader`, do the same. See `Hashtag` +screen for an example. + +## Utilities + +### `Layout.Center` + +This component behaves like our old `CenteredView` component. + +### `Layout.SCROLLBAR_OFFSET` and `Layout.SCROLLBAR_OFFSET_POSITIVE` + +Provide a pre-configured CSS vars for use when aligning fixed position elements. +More on this below. + +## Scrollbar gutter handling + +Operating systems allow users to configure if their browser _always_ shows +scrollbars not. Some OSs also don't allow configuration. + +The presence of scrollbars affects layout, particularly fixed position elements. +Browsers support `scrollbar-gutter`, but each behaves differently. Our approach +is to use the default `scrollbar-gutter: auto`. Basically, we start from a clean +slate. + +This handling becomes particularly thorny when we need to lock scroll, like when +opening a dialog or dropdown. Radix uses the library `react-remove-scroll` +internally, and we've adopted this for our own use in the app. This library adds +some utility classes and CSS vars to the page when scroll is locked. + +**It is this CSS variable that we use in `SCROLLBAR_OFFSET` values.** This +ensures that elements do not shift relative to the screen when opening a +dropdown or dialog. + +These styles are applied where needed and we should have very little need of +adjusting them often. From e5953be396dad4618ae9ec182c295857eea24777 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 20:01:55 -0600 Subject: [PATCH 60/75] Clarify usage in Pager --- src/alf/atoms.ts | 3 ++ src/screens/Hashtag.tsx | 14 +------ src/view/com/pager/PagerWithHeader.web.tsx | 47 +++++++++------------- src/view/screens/Search/Search.tsx | 6 +-- 4 files changed, 24 insertions(+), 46 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 475da07b79..cba1a29ea4 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -22,6 +22,9 @@ export const atoms = { relative: { position: 'relative', }, + sticky: web({ + position: 'sticky', + }), inset_0: { top: 0, left: 0, diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index 6d73ed0370..a0fc3707cb 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -13,13 +13,13 @@ import {shareUrl} from '#/lib/sharing' import {cleanError} from '#/lib/strings/errors' import {sanitizeHandle} from '#/lib/strings/handles' import {enforceLen} from '#/lib/strings/helpers' -import {isWeb} from '#/platform/detection' import {useSearchPostsQuery} from '#/state/queries/search-posts' import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' import {Post} from '#/view/com/post/Post' import {List} from '#/view/com/util/List' +import {atoms as a, web} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' import * as Layout from '#/components/Layout' @@ -136,17 +136,7 @@ export default function HashtagScreen({ ( - + section.title)} {...props} /> )} diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx index d8eedbff01..3335532b3d 100644 --- a/src/view/com/pager/PagerWithHeader.web.tsx +++ b/src/view/com/pager/PagerWithHeader.web.tsx @@ -1,8 +1,9 @@ import * as React from 'react' -import {ScrollView, StyleSheet, View} from 'react-native' +import {ScrollView, View} from 'react-native' import {useAnimatedRef} from 'react-native-reanimated' import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager' +import {atoms as a, web} from '#/alf' import * as Layout from '#/components/Layout' import {ListMethods} from '../util/List' import {TabBar} from './TabBar' @@ -124,25 +125,25 @@ let PagerTabBar = ({ <> {renderHeader?.()} {tabBarAnchor} - - - - - + ])}> + + ) } @@ -168,18 +169,6 @@ function PagerItem({ }) } -const styles = StyleSheet.create({ - tabBarContainer: { - // @ts-ignore web-only - position: 'sticky', - top: 0, - zIndex: 1, - }, - loadingHeader: { - borderColor: 'transparent', - }, -}) - function toArray(v: T | T[]): T[] { if (Array.isArray(v)) { return v diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 974831206b..0871458c9a 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -534,11 +534,7 @@ let SearchScreenInner = ({ renderTabBar={props => ( section.title)} {...props} /> From a96b93acd56e299cd5468284841e28809325a4f6 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 20:20:32 -0600 Subject: [PATCH 61/75] Handle nested offset contexts --- src/alf/atoms.ts | 10 ------- src/components/Layout/Header/index.tsx | 4 ++- src/components/Layout/context.ts | 5 ++++ src/components/Layout/index.tsx | 13 ++++---- src/components/dms/MessageItem.tsx | 4 +-- src/view/com/profile/ProfileSubpageHeader.tsx | 30 +++++++------------ 6 files changed, 27 insertions(+), 39 deletions(-) create mode 100644 src/components/Layout/context.ts diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index cba1a29ea4..1cb019a5c4 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -956,14 +956,4 @@ export const atoms = { }, ], }) as {transform: Exclude}, - /** - * {@link Layout.SCROLLBAR_OFFSET_POSITIVE} - */ - scrollbar_offset_positive: web({ - transform: [ - { - translateX: Layout.SCROLLBAR_OFFSET_POSITIVE, - }, - ], - }) as {transform: Exclude}, } as const diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index ec0e3ce98b..30e4beb251 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -17,6 +17,7 @@ import { import {Button, ButtonIcon, ButtonProps} from '#/components/Button' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import {ScrollbarOffsetContext} from '#/components/Layout/context' import {Text} from '#/components/Typography' const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3 @@ -26,6 +27,7 @@ export function Outer({children}: {children: React.ReactNode}) { const t = useTheme() const gutter = useGutterStyles() const {gtMobile} = useBreakpoints() + const {isWithinOffsetView} = useContext(ScrollbarOffsetContext) return ( {children} diff --git a/src/components/Layout/context.ts b/src/components/Layout/context.ts new file mode 100644 index 0000000000..8e0c5445e8 --- /dev/null +++ b/src/components/Layout/context.ts @@ -0,0 +1,5 @@ +import React from 'react' + +export const ScrollbarOffsetContext = React.createContext({ + isWithinOffsetView: false, +}) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 7289cb3713..96b7a0ac03 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -14,14 +14,11 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import {isWeb} from '#/platform/detection' import {useShellLayout} from '#/state/shell/shell-layout' import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' +import {ScrollbarOffsetContext} from '#/components/Layout/context' export * from '#/components/Layout/const' export * as Header from '#/components/Layout/Header' -// Every screen should have a Layout component wrapping it. -// This component provides a default padding for the top of the screen. -// This allows certain screens to avoid the top padding if they want to. - const LayoutContext = React.createContext({ withinScreen: false, topPaddingDisabled: false, @@ -171,7 +168,9 @@ export const Center = React.forwardRef(function LayoutContent( {children, style, ...props}: ViewProps, ref: React.Ref, ) { + const {isWithinOffsetView} = useContext(ScrollbarOffsetContext) const {gtMobile} = useBreakpoints() + const ctx = useMemo(() => ({isWithinOffsetView: true}), []) return ( - {children} + + {children} + ) }) diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 4cd65aedad..79f0997fd6 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -101,7 +101,7 @@ let MessageItem = ({ }, [message.text, message.facets]) return ( - + <> {isNewDay && } )} - + ) } MessageItem = React.memo(MessageItem) diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 3725e68e20..cd11611a86 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -89,17 +89,16 @@ export function ProfileSubpageHeader({ return ( <> - {isMobile && ( - - {canGoBack ? ( - - ) : ( - - )} - - {children} - - )} + + {canGoBack ? ( + + ) : ( + + )} + + {children} + + )} - {!isMobile && ( - - {children} - - )} ) From d3bd2a4d30de875e13771bda3d2b79e1e5dbfca3 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 4 Dec 2024 20:30:08 -0600 Subject: [PATCH 62/75] Clean up Layout --- src/components/Layout/index.tsx | 175 +++++++++++++++----------------- 1 file changed, 81 insertions(+), 94 deletions(-) diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 96b7a0ac03..d08505fbfd 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -19,48 +19,26 @@ import {ScrollbarOffsetContext} from '#/components/Layout/context' export * from '#/components/Layout/const' export * as Header from '#/components/Layout/Header' -const LayoutContext = React.createContext({ - withinScreen: false, - topPaddingDisabled: false, - withinScrollView: false, -}) - export type ScreenProps = React.ComponentProps & { - disableTopPadding?: boolean style?: StyleProp } /** - * Every screen should have a Layout.Screen component wrapping it. - * This component provides a default padding for the top of the screen - * and height/minHeight + * Outermost component of every screen */ export const Screen = React.memo(function Screen({ - disableTopPadding = false, style, ...props }: ScreenProps) { const {top} = useSafeAreaInsets() - const context = useMemo( - () => ({ - withinScreen: true, - topPaddingDisabled: disableTopPadding, - withinScrollView: false, - }), - [disableTopPadding], - ) return ( - + <> {isWeb && } - + ) }) @@ -69,17 +47,15 @@ export type ContentProps = AnimatedScrollViewProps & { contentContainerStyle?: StyleProp } +/** + * Default scroll view for simple pages + */ export const Content = React.memo(function Content({ children, style, contentContainerStyle, ...props }: ContentProps) { - const context = useContext(LayoutContext) - const newContext = useMemo( - () => ({...context, withinScrollView: true}), - [context], - ) const {footerHeight} = useShellLayout() const animatedProps = useAnimatedProps(() => { return { @@ -92,43 +68,57 @@ export const Content = React.memo(function Content({ }) return ( - - - {isWeb ? ( - // @ts-ignore web only -esb -
{children}
- ) : ( - children - )} - - + + {isWeb ? ( + // @ts-ignore web only -esb +
{children}
+ ) : ( + children + )} + ) }) +const scrollViewStyles = StyleSheet.create({ + common: { + width: '100%', + }, + contentContainer: { + paddingBottom: 100, + }, +}) + export type KeyboardAwareContentProps = KeyboardAwareScrollViewProps & { children: React.ReactNode contentContainerStyle?: StyleProp } -export const KeyboardAwareContent = React.forwardRef(function LayoutScrollView( - {children, style, contentContainerStyle, ...props}: KeyboardAwareContentProps, - _ref: React.Ref, -) { +/** + * Default scroll view for simple pages. + * + * BE SURE TO TEST THIS WHEN USING, it's untested as of writing this comment. + */ +export const KeyboardAwareContent = React.memo(function LayoutScrollView({ + children, + style, + contentContainerStyle, + ...props +}: KeyboardAwareContentProps) { return ( ({isWithinOffsetView: true}), []) + return ( + + + {children} + + + ) +}) + +/** + * Only used within `Layout.Screen`, not for reuse + */ +const WebCenterBorders = React.memo(function LayoutContent() { const t = useTheme() const {gtMobile} = useBreakpoints() return gtMobile ? ( @@ -163,39 +186,3 @@ export const WebCenterBorders = React.forwardRef(function LayoutContent() { /> ) : null }) - -export const Center = React.forwardRef(function LayoutContent( - {children, style, ...props}: ViewProps, - ref: React.Ref, -) { - const {isWithinOffsetView} = useContext(ScrollbarOffsetContext) - const {gtMobile} = useBreakpoints() - const ctx = useMemo(() => ({isWithinOffsetView: true}), []) - return ( - - - {children} - - - ) -}) - -const styles = StyleSheet.create({ - scrollViewCommonStyles: { - width: '100%', - }, - scrollViewContentContainer: { - paddingBottom: 100, - }, -}) From df9c05a7bb33c487ac118410737f3b5706268ee6 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 5 Dec 2024 15:56:48 +0000 Subject: [PATCH 63/75] fix feeds page --- src/view/com/feeds/FeedPage.tsx | 2 +- src/view/screens/Feeds.tsx | 34 ++++++++++++++------------------- 2 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index 44e90a5519..fa5a620bf6 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -108,7 +108,7 @@ export function FeedPage({ }, [scrollToTop, feed, queryClient, setHasNew]) return ( - + item.key} contentContainerStyle={styles.contentContainer} @@ -532,25 +531,23 @@ export function FeedsScreen(_props: Props) { onRefresh={isUserSearching ? undefined : onPullToRefresh} initialNumToRender={10} onEndReached={onEndReached} - // @ts-ignore our .web version only -prf desktopFixedHeight - scrollIndicatorInsets={{right: 1}} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag" sideBorders={false} /> - - {hasSession && ( - } - accessibilityRole="button" - accessibilityLabel={_(msg`New post`)} - accessibilityHint="" - /> - )} + + {hasSession && ( + } + accessibilityRole="button" + accessibilityLabel={_(msg`New post`)} + accessibilityHint="" + /> + )} ) } @@ -696,7 +693,7 @@ function FeedsSavedHeader() { }> - + My Feeds @@ -722,7 +719,7 @@ function FeedsAboutHeader() { size="lg" /> - + Discover New Feeds @@ -737,9 +734,6 @@ function FeedsAboutHeader() { } const styles = StyleSheet.create({ - list: { - height: '100%', - }, contentContainer: { paddingBottom: 100, }, From 3d489259ba75d90e748832cc96dfdf0187ebe1bd Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 5 Dec 2024 15:57:59 +0000 Subject: [PATCH 64/75] asymmetric header on native (#6969) --- src/components/Layout/Header/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 30e4beb251..cdcfe02630 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -9,6 +9,7 @@ import {isIOS} from '#/platform/detection' import {useSetDrawerOpen} from '#/state/shell' import { atoms as a, + platform, TextStyleProp, useBreakpoints, useGutterStyles, @@ -38,7 +39,10 @@ export function Outer({children}: {children: React.ReactNode}) { a.align_center, a.gap_sm, gutter, - a.py_sm, + platform({ + native: [a.pb_sm, a.pt_xs], + web: [a.py_sm], + }), t.atoms.border_contrast_low, gtMobile && [a.mx_auto, {maxWidth: 600}], !isWithinOffsetView && a.scrollbar_offset, From c8c03ed68df9f3553b0ad4f7ee5f393fab8535e0 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 10:44:07 -0600 Subject: [PATCH 65/75] Reusable header const --- src/components/Layout/Header/index.tsx | 25 ++++++++++++++++--------- src/components/Layout/const.ts | 12 ++++++++++++ 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index cdcfe02630..af7202bb00 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -18,13 +18,20 @@ import { import {Button, ButtonIcon, ButtonProps} from '#/components/Button' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import { + BUTTON_VISUAL_ALIGNMENT_OFFSET, + HEADER_SLOT_SIZE, +} from '#/components/Layout/const' import {ScrollbarOffsetContext} from '#/components/Layout/context' import {Text} from '#/components/Typography' -const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3 -const BUTTON_SIZE = 34 // small button - -export function Outer({children}: {children: React.ReactNode}) { +export function Outer({ + children, + noBottomBorder, +}: { + children: React.ReactNode + noBottomBorder?: boolean +}) { const t = useTheme() const gutter = useGutterStyles() const {gtMobile} = useBreakpoints() @@ -34,7 +41,7 @@ export function Outer({children}: {children: React.ReactNode}) { {children} @@ -82,7 +89,7 @@ export function Slot({children}: {children?: React.ReactNode}) { style={[ a.z_50, { - width: BUTTON_SIZE, + width: HEADER_SLOT_SIZE, }, ]}> {children} @@ -114,7 +121,7 @@ export function BackButton({onPress, style, ...props}: Partial) { size="small" variant="ghost" color="secondary" - shape="round" + shape="square" onPress={onPressBack} style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, style]} {...props}> @@ -140,7 +147,7 @@ export function MenuButton() { size="small" variant="ghost" color="secondary" - shape="round" + shape="square" onPress={onPress} style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}> diff --git a/src/components/Layout/const.ts b/src/components/Layout/const.ts index 8f9ef2cdd1..11825d323c 100644 --- a/src/components/Layout/const.ts +++ b/src/components/Layout/const.ts @@ -2,3 +2,15 @@ export const SCROLLBAR_OFFSET = 'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)' as any export const SCROLLBAR_OFFSET_POSITIVE = 'calc(var(--removed-body-scroll-bar-size, 0px) / 2)' as any + +/** + * Useful for visually aligning icons within header buttons with the elements + * below them on the screen. Apply positively or negatively depending on side + * of the screen you're on. + */ +export const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3 + +/** + * Corresponds to the width of a small square or round button + */ +export const HEADER_SLOT_SIZE = 34 From b82551c07b933dfdf38ef906cee2925a297d1cbf Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 10:44:17 -0600 Subject: [PATCH 66/75] Fix up home header --- src/view/com/home/HomeHeaderLayout.web.tsx | 95 ++++---------- src/view/com/home/HomeHeaderLayoutMobile.tsx | 124 +++++++------------ 2 files changed, 66 insertions(+), 153 deletions(-) diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index e2b9d5b7f4..8f0d5bc6f9 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -1,27 +1,27 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' +import {View} from 'react-native' import Animated from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {useKawaiiMode} from '#/state/preferences/kawaii' import {useSession} from '#/state/session' import {useShellLayout} from '#/state/shell/shell-layout' +import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile' import {Logo} from '#/view/icons/Logo' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useBreakpoints,useGutterStyles, useTheme} from '#/alf' +import {ButtonIcon} from '#/components/Button' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' -import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' export function HomeHeaderLayout(props: { children: React.ReactNode tabBarAnchor: JSX.Element | null | undefined }) { - const {isMobile} = useWebMediaQueries() - if (isMobile) { + const {gtMobile} = useBreakpoints() + if (!gtMobile) { return } else { return @@ -41,38 +41,18 @@ function HomeHeaderLayoutDesktopAndTablet({ const {hasSession} = useSession() const {_} = useLingui() const kawaii = useKawaiiMode() + const gutter = useGutterStyles() return ( <> {hasSession && ( - + style={[a.flex_row, a.align_center, a.pt_md, gutter, t.atoms.bg]}> + + - - + style={[a.justify_center]}> + )} {tabBarAnchor} - { - headerHeight.set(e.nativeEvent.layout.height) - }} - style={[ - t.atoms.bg, - styles.bar, - styles.tabBar, - headerMinimalShellTransform, - ]}> - {children} - + + { + headerHeight.set(e.nativeEvent.layout.height) + }} + style={[headerMinimalShellTransform]}> + {children} + + ) } - -const styles = StyleSheet.create({ - bar: { - // @ts-ignore Web only - left: 'calc(50% - 300px)', - width: 600, - }, - topBar: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingHorizontal: 18, - paddingTop: 16, - paddingBottom: 8, - }, - tabBar: { - // @ts-ignore Web only - position: 'sticky', - top: 0, - flexDirection: 'column', - alignItems: 'center', - zIndex: 1, - }, -}) diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 8323960924..e48c2cc893 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,25 +1,22 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {View} from 'react-native' import Animated from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {HITSLOP_10} from '#/lib/constants' +import {PressableScale} from '#/lib/custom-animations/PressableScale' +import {useHaptics} from '#/lib/haptics' import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform' -import {usePalette} from '#/lib/hooks/usePalette' -import {isWeb} from '#/platform/detection' +import {emitSoftReset} from '#/state/events' import {useSession} from '#/state/session' -import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useShellLayout} from '#/state/shell/shell-layout' import {Logo} from '#/view/icons/Logo' -import {atoms} from '#/alf' -import {useTheme} from '#/alf' -import {atoms as a} from '#/alf' -import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' +import {atoms as a, useTheme} from '#/alf' +import {ButtonIcon} from '#/components/Button' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' -import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' -import {IS_DEV} from '#/env' export function HomeHeaderLayoutMobile({ children, @@ -28,58 +25,50 @@ export function HomeHeaderLayoutMobile({ tabBarAnchor: JSX.Element | null | undefined }) { const t = useTheme() - const pal = usePalette('default') const {_} = useLingui() - const setDrawerOpen = useSetDrawerOpen() const {headerHeight} = useShellLayout() const headerMinimalShellTransform = useMinimalShellHeaderTransform() const {hasSession} = useSession() - - const onPressAvi = React.useCallback(() => { - setDrawerOpen(true) - }, [setDrawerOpen]) + const playHaptic = useHaptics() return ( { headerHeight.set(e.nativeEvent.layout.height) }}> - - - - - - - - + + + + + + + { + emitSoftReset() + }} + onPressIn={() => { + playHaptic('Heavy') + }} + onPressOut={() => { + playHaptic('Light') + }}> + + - - {IS_DEV && ( - <> - - - - - )} + + {hasSession && ( - + )} - - + + {children} ) } - -const styles = StyleSheet.create({ - tabBar: { - // @ts-ignore web-only - position: isWeb ? 'fixed' : 'absolute', - zIndex: 1, - left: 0, - right: 0, - top: 0, - flexDirection: 'column', - }, - topBar: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingHorizontal: 16, - paddingVertical: 5, - width: '100%', - minHeight: 46, - }, - title: { - fontSize: 21, - }, -}) From 44d739ae3a3c4047ecf3708743e1639099c3164f Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 10:47:18 -0600 Subject: [PATCH 67/75] Add back button to convo --- src/components/dms/MessagesListHeader.tsx | 36 +++++++++++------------ 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/src/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx index 6c3bbf2161..acffa0c2ba 100644 --- a/src/components/dms/MessagesListHeader.tsx +++ b/src/components/dms/MessagesListHeader.tsx @@ -65,25 +65,23 @@ export let MessagesListHeader = ({ a.pr_lg, a.py_sm, ]}> - {!gtTablet && ( - - - - )} + + + {profile && moderation && blockInfo ? ( Date: Thu, 5 Dec 2024 10:49:24 -0600 Subject: [PATCH 68/75] Add hitslop to header buttons --- src/components/Layout/Header/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index af7202bb00..a35a095371 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -4,6 +4,7 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' +import {HITSLOP_30} from '#/lib/constants' import {NavigationProp} from '#/lib/routes/types' import {isIOS} from '#/platform/detection' import {useSetDrawerOpen} from '#/state/shell' @@ -123,6 +124,7 @@ export function BackButton({onPress, style, ...props}: Partial) { color="secondary" shape="square" onPress={onPressBack} + hitSlop={HITSLOP_30} style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, style]} {...props}> @@ -149,6 +151,7 @@ export function MenuButton() { color="secondary" shape="square" onPress={onPress} + hitSlop={HITSLOP_30} style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}> From 08dc17b1985cf30b1ba73c63e409313625fcb5b5 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 10:55:28 -0600 Subject: [PATCH 69/75] Comment --- bskyweb/templates/base.html | 7 ++++++- web/index.html | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index a77be6a800..8eb78fffd4 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -75,7 +75,12 @@ top: 50%; transform: translateX(-50%) translateY(-50%) translateY(-50px); } - /* We need this style to prevent web dropdowns from shifting the display when opening */ + /** + * We need these styles to prevent shifting due to scrollbar show/hide on + * OSs that have them enabled by default. This also handles cases where the + * screen wouldn't otherwise scroll, and therefore hide the scrollbar and + * shift the content, by forcing the page to show a scrollbar. + */ body { width: 100%; overflow-y: scroll; diff --git a/web/index.html b/web/index.html index b5c373636b..293f366adc 100644 --- a/web/index.html +++ b/web/index.html @@ -80,7 +80,12 @@ top: 50%; transform: translateX(-50%) translateY(-50%) translateY(-50px); } - /* We need this style to prevent web dropdowns from shifting the display when opening */ + /** + * We need these styles to prevent shifting due to scrollbar show/hide on + * OSs that have them enabled by default. This also handles cases where the + * screen wouldn't otherwise scroll, and therefore hide the scrollbar and + * shift the content, by forcing the page to show a scrollbar. + */ body { width: 100%; overflow-y: scroll; From 3e261aa2f5a69bcdf5e572f972425949723ed157 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 10:58:29 -0600 Subject: [PATCH 70/75] Better handling on native for new atom --- src/alf/atoms.ts | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 1cb019a5c4..3fa982c3a4 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,7 +1,7 @@ import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native' import * as tokens from '#/alf/tokens' -import {ios, native, web} from '#/alf/util/platform' +import {ios, native, platform,web} from '#/alf/util/platform' import * as Layout from '#/components/Layout' export const atoms = { @@ -949,11 +949,16 @@ export const atoms = { /** * {@link Layout.SCROLLBAR_OFFSET} */ - scrollbar_offset: web({ - transform: [ - { - translateX: Layout.SCROLLBAR_OFFSET, - }, - ], + scrollbar_offset: platform({ + web: { + transform: [ + { + translateX: Layout.SCROLLBAR_OFFSET, + }, + ], + }, + native: { + transform: [], + }, }) as {transform: Exclude}, } as const From 11f2efee0e3aa30bb1f1d15966a96452d8f6a217 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 11:17:11 -0600 Subject: [PATCH 71/75] Format --- src/alf/atoms.ts | 2 +- src/view/com/home/HomeHeaderLayout.web.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 3fa982c3a4..0870c57679 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,7 +1,7 @@ import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native' import * as tokens from '#/alf/tokens' -import {ios, native, platform,web} from '#/alf/util/platform' +import {ios, native, platform, web} from '#/alf/util/platform' import * as Layout from '#/components/Layout' export const atoms = { diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 8f0d5bc6f9..1dc67b6c34 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -10,7 +10,7 @@ import {useSession} from '#/state/session' import {useShellLayout} from '#/state/shell/shell-layout' import {HomeHeaderLayoutMobile} from '#/view/com/home/HomeHeaderLayoutMobile' import {Logo} from '#/view/icons/Logo' -import {atoms as a, useBreakpoints,useGutterStyles, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useGutterStyles, useTheme} from '#/alf' import {ButtonIcon} from '#/components/Button' import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' import * as Layout from '#/components/Layout' From b6ce210bdda2b67ab61511e6cd3967ea38469e43 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 14:43:30 -0600 Subject: [PATCH 72/75] Fix nested flatlist on mod screens --- src/view/screens/ModerationBlockedAccounts.tsx | 6 +++--- src/view/screens/ModerationMutedAccounts.tsx | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx index bf24a84a9a..9b0f54984a 100644 --- a/src/view/screens/ModerationBlockedAccounts.tsx +++ b/src/view/screens/ModerationBlockedAccounts.tsx @@ -96,7 +96,7 @@ export function ModerationBlockedAccounts({}: Props) { ) return ( - + {isEmpty ? ( - + {isError ? ( )} - + ) } diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx index 697ba5dece..6a8c6c3e61 100644 --- a/src/view/screens/ModerationMutedAccounts.tsx +++ b/src/view/screens/ModerationMutedAccounts.tsx @@ -96,8 +96,8 @@ export function ModerationMutedAccounts({}: Props) { ) return ( - - + + {isEmpty ? ( - + {isError ? ( )} - + ) } From 42702f1a3a8077886a772d31c09ae436baf7391c Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 18:29:06 -0600 Subject: [PATCH 73/75] Use react-remove-scroll-bar directly --- package.json | 2 +- src/components/Dialog/index.web.tsx | 51 +++++++++++++------------- src/components/Layout/README.md | 6 ++- src/view/com/lightbox/Lightbox.web.tsx | 7 ++-- src/view/com/modals/Modal.web.tsx | 7 ++-- src/view/shell/Composer.web.tsx | 7 ++-- src/view/shell/index.web.tsx | 7 ++-- yarn.lock | 2 +- 8 files changed, 47 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index 1723008fe6..6c35d169ed 100644 --- a/package.json +++ b/package.json @@ -193,7 +193,7 @@ "react-native-web": "~0.19.11", "react-native-web-webview": "^1.0.2", "react-native-webview": "13.10.2", - "react-remove-scroll": "^2.6.0", + "react-remove-scroll-bar": "^2.3.6", "react-responsive": "^9.0.2", "react-textarea-autosize": "^8.5.3", "rn-fetch-blob": "^0.12.0", diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx index 092a5c7967..e45133dc5a 100644 --- a/src/components/Dialog/index.web.tsx +++ b/src/components/Dialog/index.web.tsx @@ -12,7 +12,7 @@ import {useLingui} from '@lingui/react' import {DismissableLayer} from '@radix-ui/react-dismissable-layer' import {useFocusGuards} from '@radix-ui/react-focus-guards' import {FocusScope} from '@radix-ui/react-focus-scope' -import {RemoveScroll} from 'react-remove-scroll' +import {RemoveScrollBar} from 'react-remove-scroll-bar' import {logger} from '#/logger' import {useDialogStateControlContext} from '#/state/dialogs' @@ -104,36 +104,35 @@ export function Outer({ {isOpen && ( - - + + + + - - - {children} - + {children} - - + + )} diff --git a/src/components/Layout/README.md b/src/components/Layout/README.md index 8bbe608068..0f166d69be 100644 --- a/src/components/Layout/README.md +++ b/src/components/Layout/README.md @@ -155,8 +155,10 @@ slate. This handling becomes particularly thorny when we need to lock scroll, like when opening a dialog or dropdown. Radix uses the library `react-remove-scroll` -internally, and we've adopted this for our own use in the app. This library adds -some utility classes and CSS vars to the page when scroll is locked. +internally, which in turn depends on +[`react-remove-scroll-bar`](https://github.com/theKashey/react-remove-scroll-bar). +We've opted to rely on this transient dependency. This library adds some utility +classes and CSS vars to the page when scroll is locked. **It is this CSS variable that we use in `SCROLLBAR_OFFSET` values.** This ensures that elements do not shift relative to the screen when opening a diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index 18d68c6c2f..f6b6223ce2 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -15,7 +15,7 @@ import { } from '@fortawesome/react-native-fontawesome' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {RemoveScroll} from 'react-remove-scroll' +import {RemoveScrollBar} from 'react-remove-scroll-bar' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {colors, s} from '#/lib/styles' @@ -36,13 +36,14 @@ export function Lightbox() { const initialIndex = activeLightbox.index const imgs = activeLightbox.images return ( - + <> + - + ) } diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 51660fc2be..0c49c87716 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -1,6 +1,6 @@ import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' -import {RemoveScroll} from 'react-remove-scroll' +import {RemoveScrollBar} from 'react-remove-scroll-bar' import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' @@ -28,11 +28,12 @@ export function ModalsContainer() { } return ( - + <> + {activeModals.map((modal, i) => ( ))} - + ) } diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx index 039ac08858..47a86ed248 100644 --- a/src/view/shell/Composer.web.tsx +++ b/src/view/shell/Composer.web.tsx @@ -3,7 +3,7 @@ import {StyleSheet, View} from 'react-native' import {DismissableLayer} from '@radix-ui/react-dismissable-layer' import {useFocusGuards} from '@radix-ui/react-focus-guards' import {FocusScope} from '@radix-ui/react-focus-scope' -import {RemoveScroll} from 'react-remove-scroll' +import {RemoveScrollBar} from 'react-remove-scroll-bar' import {useModals} from '#/state/modals' import {ComposerOpts, useComposerState} from '#/state/shell/composer' @@ -28,9 +28,10 @@ export function Composer({}: {winHeight: number}) { } return ( - + <> + - + ) } diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 802219d653..8c30813ab5 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -3,7 +3,7 @@ import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import {RemoveScroll} from 'react-remove-scroll' +import {RemoveScrollBar} from 'react-remove-scroll-bar' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' import {useIntentHandler} from '#/lib/hooks/useIntentHandler' @@ -57,7 +57,8 @@ function ShellInner() { {showDrawer && ( - + <> + { // Only close if press happens outside of the drawer @@ -83,7 +84,7 @@ function ShellInner() { - + )} ) diff --git a/yarn.lock b/yarn.lock index e50e7fe940..e62dcb97ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16369,7 +16369,7 @@ react-remove-scroll@2.5.5: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" -react-remove-scroll@2.6.0, react-remove-scroll@^2.6.0: +react-remove-scroll@2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07" integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ== From c5314b96cf39484a9b20d6b9746254f926a72217 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 18:36:06 -0600 Subject: [PATCH 74/75] Fix notification count overflow on web --- src/view/shell/desktop/LeftNav.tsx | 61 +++++++++++++++++------------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 354ad47337..7c2ccd958a 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -176,37 +176,44 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) { ]}> {isCurrent ? iconFilled : icon} {typeof count === 'string' && count ? ( - + - {count} - + isTablet && [ + { + top: '10%', + left: count.length === 1 ? 20 : 16, + }, + ], + ]}> + {count} + + ) : null} {gtTablet && ( From 8914f1e60d01839577d9fe30a2b87304733761f5 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 18:46:31 -0600 Subject: [PATCH 75/75] Clarify doc --- src/components/Layout/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Layout/README.md b/src/components/Layout/README.md index 0f166d69be..1bcc3489ec 100644 --- a/src/components/Layout/README.md +++ b/src/components/Layout/README.md @@ -28,6 +28,10 @@ as the outermost component. > On web, `Layout.Screen` also provides the side borders on our central content > column. These borders are fixed position, 1px outside our center column width > of 600px. +> +> What this effectively means is that _nothing inside the center content column +> needs (or should) define left/right borders._ That is now handled in one +> place: within `Layout.Screen`. ### `Layout.Header.*`