From 143e2c802d1d8d8498e6658c174ed1e657c4ec12 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Thu, 5 Dec 2024 18:59:26 -0600 Subject: [Layout] Base (#6907) * Add common gutter styles as hook * Add computed scrollbar gutter CSS vars * Add new layout components * Replace layout components in settings screens * Remove old back button * Invert web border logic for easier migration * Clean up Slot API * Port over FF handling of scrollbar offset * Trade boilerplate for ease of use * Limit to one line * Allow two lines, fix wrapping * Fix alignment * sticky headers * set max with on header and center * [Layout] Notifications Header (#6910) * Replace notifications screen header * fix cropped indicator --------- Co-authored-by: Samuel Newman * Replace Hashtag header (#6928) * [Layout] ChatList header (#6929) * Replace ChatList header * update chat settings as well --------- Co-authored-by: Samuel Newman * Add web borders to Chat settings * Remove unused var * Move ChatList header outside center * Replace empty chat layout * fix breakpoints * [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 * use correct scroll insets (#6950) * [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 * [Layout] Every other screen (#6953) * attempt to fix double borders on every other screen * delete ListHeaderDesktop * delete `SimpleViewHeader` and fix screens (#6956) * Make Layout.Center not full height * Refactor List to use Layout.Center, remove built-in borders * Fix Home screen * Refactor PagerWithHeader to use Layout components * Replace components in ProfileFeed and ProfileList * Borders on Profile * Search screen replacements * use new header for profile subpage header (#6958) * Search AutocompleteResults * use new header for starter pack wizard (#6957) * Fix post thread * Enable borders by default * Moderation muted and blocked accounts * Fix scrollbar offset on Labeler * Remove ScrollView from Moderation * Remove ScrollView from Deactivated * Remove ScrollView from onboarding * Remove ScrollView from SignupQueued * Mark deprecations * fix lint * Fix double borders on profile load * Remove unneeded CenteredView from noty Feed * Remove double Center layout on Notifications screen * Remove double Center layout on ChatList screen * Handle scrollbar offset in chat * Use new atom for other scrollbar offsets * Remove borders from old views * Better doc * Remove temp migration prop * Fix new atom usage on native * Clean up Hashtag screen * Layout docs * Clarify usage in Pager * Handle nested offset contexts * Clean up Layout * fix feeds page * asymmetric header on native (#6969) * Reusable header const * Fix up home header * Add back button to convo * Add hitslop to header buttons * Comment * Better handling on native for new atom * Format * Fix nested flatlist on mod screens * Use react-remove-scroll-bar directly * Fix notification count overflow on web * Clarify doc --------- Co-authored-by: Samuel Newman --- .../icons/floppyDisk_stroke2_corner0_rounded.svg | 1 + bskyweb/templates/base.html | 9 +- package.json | 1 + src/alf/atoms.ts | 22 +- src/alf/index.tsx | 1 + src/alf/util/useGutterStyles.ts | 21 ++ src/components/Dialog/index.web.tsx | 2 + src/components/Layout.tsx | 100 -------- src/components/Layout/Header/index.tsx | 199 +++++++++++++++ src/components/Layout/README.md | 172 +++++++++++++ src/components/Layout/const.ts | 16 ++ src/components/Layout/context.ts | 5 + src/components/Layout/index.tsx | 188 ++++++++++++++ src/components/LikedByList.tsx | 13 +- src/components/Lists.tsx | 34 +-- src/components/dms/MessagesListHeader.tsx | 36 ++- src/components/forms/DateField/index.android.tsx | 1 + src/components/icons/FloppyDisk.tsx | 5 + src/lib/hooks/useWebBodyScrollLock.ts | 31 --- src/screens/Deactivated.tsx | 21 +- src/screens/Hashtag.tsx | 71 +++--- src/screens/Messages/ChatList.tsx | 160 +++++------- src/screens/Messages/Conversation.tsx | 9 +- src/screens/Messages/Settings.tsx | 16 +- src/screens/Moderation/index.tsx | 47 +--- src/screens/Onboarding/Layout.tsx | 6 +- src/screens/Post/PostLikedBy.tsx | 10 +- src/screens/Post/PostQuotes.tsx | 2 - src/screens/Post/PostRepostedBy.tsx | 2 - src/screens/Profile/KnownFollowers.tsx | 29 ++- src/screens/Profile/Sections/Labels.tsx | 7 +- src/screens/Settings/AboutSettings.tsx | 10 +- src/screens/Settings/AccessibilitySettings.tsx | 10 +- src/screens/Settings/AccountSettings.tsx | 10 +- src/screens/Settings/AppIconSettings.tsx | 12 +- src/screens/Settings/AppPasswords.tsx | 10 +- src/screens/Settings/AppearanceSettings.tsx | 10 +- src/screens/Settings/ContentAndMediaSettings.tsx | 10 +- src/screens/Settings/ExternalMediaPreferences.tsx | 14 +- src/screens/Settings/FollowingFeedPreferences.tsx | 10 +- src/screens/Settings/LanguageSettings.tsx | 10 +- src/screens/Settings/NotificationSettings.tsx | 10 +- .../Settings/PrivacyAndSecuritySettings.tsx | 10 +- src/screens/Settings/Settings.tsx | 10 +- src/screens/Settings/ThreadPreferences.tsx | 10 +- src/screens/SignupQueued.tsx | 3 +- src/screens/StarterPack/Wizard/index.tsx | 81 +++---- src/view/com/feeds/FeedPage.tsx | 2 +- src/view/com/home/HomeHeaderLayout.web.tsx | 126 +++------- src/view/com/home/HomeHeaderLayoutMobile.tsx | 124 ++++------ src/view/com/lightbox/Lightbox.web.tsx | 16 +- src/view/com/lists/MyLists.tsx | 7 +- src/view/com/modals/Modal.web.tsx | 4 +- src/view/com/notifications/Feed.tsx | 23 +- src/view/com/pager/PagerWithHeader.web.tsx | 60 +---- 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/post-thread/PostThread.tsx | 5 +- src/view/com/profile/ProfileFollowers.tsx | 3 +- src/view/com/profile/ProfileFollows.tsx | 3 +- src/view/com/profile/ProfileSubpageHeader.tsx | 103 ++------ src/view/com/util/List.web.tsx | 115 ++++----- src/view/com/util/LoadingScreen.tsx | 9 +- src/view/com/util/SimpleViewHeader.tsx | 114 --------- src/view/com/util/ViewHeader.tsx | 270 +-------------------- src/view/com/util/Views.tsx | 7 + src/view/com/util/Views.web.tsx | 31 +-- src/view/com/util/error/ErrorScreen.tsx | 4 +- src/view/screens/Feeds.tsx | 128 ++++------ src/view/screens/Lists.tsx | 72 ++---- src/view/screens/ModerationBlockedAccounts.tsx | 26 +- src/view/screens/ModerationModlists.tsx | 64 ++--- src/view/screens/ModerationMutedAccounts.tsx | 28 +-- src/view/screens/Notifications.tsx | 178 +++++--------- src/view/screens/PostThread.tsx | 6 +- src/view/screens/Profile.tsx | 6 +- src/view/screens/ProfileFeed.tsx | 9 +- src/view/screens/ProfileFollowers.tsx | 2 - src/view/screens/ProfileFollows.tsx | 2 - src/view/screens/ProfileList.tsx | 10 +- src/view/screens/SavedFeeds.tsx | 238 +++++++++--------- src/view/screens/Search/Search.tsx | 236 ++++++++---------- src/view/shell/Composer.web.tsx | 11 +- src/view/shell/desktop/LeftNav.tsx | 131 ++++------ src/view/shell/desktop/RightNav.tsx | 11 +- src/view/shell/index.web.tsx | 54 +++-- web/index.html | 9 +- yarn.lock | 31 +-- 89 files changed, 1721 insertions(+), 2048 deletions(-) create mode 100644 assets/icons/floppyDisk_stroke2_corner0_rounded.svg create mode 100644 src/alf/util/useGutterStyles.ts delete mode 100644 src/components/Layout.tsx create mode 100644 src/components/Layout/Header/index.tsx create mode 100644 src/components/Layout/README.md create mode 100644 src/components/Layout/const.ts create mode 100644 src/components/Layout/context.ts create mode 100644 src/components/Layout/index.tsx create mode 100644 src/components/icons/FloppyDisk.tsx delete mode 100644 src/lib/hooks/useWebBodyScrollLock.ts delete mode 100644 src/view/com/util/SimpleViewHeader.tsx diff --git a/assets/icons/floppyDisk_stroke2_corner0_rounded.svg b/assets/icons/floppyDisk_stroke2_corner0_rounded.svg new file mode 100644 index 000000000..b9a42f759 --- /dev/null +++ b/assets/icons/floppyDisk_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 4c02805e3..8eb78fffd 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -40,7 +40,6 @@ } html { background-color: white; - scrollbar-gutter: stable both-edges; } @media (prefers-color-scheme: dark) { html { @@ -76,9 +75,15 @@ 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/package.json b/package.json index 6372dd5f5..6c35d169e 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-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/alf/atoms.ts b/src/alf/atoms.ts index 1f08eb7e1..0870c5767 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,7 +1,8 @@ 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 = { debug: { @@ -21,6 +22,9 @@ export const atoms = { relative: { position: 'relative', }, + sticky: web({ + position: 'sticky', + }), inset_0: { top: 0, left: 0, @@ -941,4 +945,20 @@ export const atoms = { transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)', transitionDuration: '100ms', }), + + /** + * {@link Layout.SCROLLBAR_OFFSET} + */ + scrollbar_offset: platform({ + web: { + transform: [ + { + translateX: Layout.SCROLLBAR_OFFSET, + }, + ], + }, + native: { + transform: [], + }, + }) as {transform: Exclude}, } as const diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 5d08722ff..a96803c56 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 000000000..64b246fdd --- /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]) +} diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx index 6b92eee3e..e45133dc5 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 {RemoveScrollBar} from 'react-remove-scroll-bar' import {logger} from '#/logger' import {useDialogStateControlContext} from '#/state/dialogs' @@ -103,6 +104,7 @@ export function Outer({ {isOpen && ( + & { - 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/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx new file mode 100644 index 000000000..a35a09537 --- /dev/null +++ b/src/components/Layout/Header/index.tsx @@ -0,0 +1,199 @@ +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' + +import {HITSLOP_30} from '#/lib/constants' +import {NavigationProp} from '#/lib/routes/types' +import {isIOS} from '#/platform/detection' +import {useSetDrawerOpen} from '#/state/shell' +import { + atoms as a, + platform, + TextStyleProp, + useBreakpoints, + useGutterStyles, + useTheme, +} from '#/alf' +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' + +export function Outer({ + children, + noBottomBorder, +}: { + children: React.ReactNode + noBottomBorder?: boolean +}) { + const t = useTheme() + const gutter = useGutterStyles() + const {gtMobile} = useBreakpoints() + const {isWithinOffsetView} = useContext(ScrollbarOffsetContext) + + return ( + + {children} + + ) +} + +const AlignmentContext = createContext<'platform' | 'left'>('platform') + +export function Content({ + children, + align = 'platform', +}: { + children?: React.ReactNode + align?: 'platform' | 'left' +}) { + return ( + + + {children} + + + ) +} + +export function Slot({children}: {children?: React.ReactNode}) { + return ( + + {children} + + ) +} + +export function BackButton({onPress, style, ...props}: Partial) { + const {_} = useLingui() + const navigation = useNavigation() + + const onPressBack = useCallback( + (evt: GestureResponderEvent) => { + onPress?.(evt) + if (evt.defaultPrevented) return + if (navigation.canGoBack()) { + navigation.goBack() + } else { + navigation.navigate('Home') + } + }, + [onPress, navigation], + ) + + return ( + + + + ) +} + +export function MenuButton() { + const {_} = useLingui() + const setDrawerOpen = useSetDrawerOpen() + const {gtMobile} = useBreakpoints() + + const onPress = useCallback(() => { + setDrawerOpen(true) + }, [setDrawerOpen]) + + return gtMobile ? null : ( + + + + ) +} + +export function TitleText({ + children, + style, +}: {children: React.ReactNode} & TextStyleProp) { + const {gtMobile} = useBreakpoints() + const align = useContext(AlignmentContext) + return ( + + {children} + + ) +} + +export function SubtitleText({children}: {children: React.ReactNode}) { + const t = useTheme() + const align = useContext(AlignmentContext) + return ( + + {children} + + ) +} diff --git a/src/components/Layout/README.md b/src/components/Layout/README.md new file mode 100644 index 000000000..1bcc3489e --- /dev/null +++ b/src/components/Layout/README.md @@ -0,0 +1,172 @@ +# 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. +> +> 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.*` + +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, 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 +dropdown or dialog. + +These styles are applied where needed and we should have very little need of +adjusting them often. diff --git a/src/components/Layout/const.ts b/src/components/Layout/const.ts new file mode 100644 index 000000000..11825d323 --- /dev/null +++ b/src/components/Layout/const.ts @@ -0,0 +1,16 @@ +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 diff --git a/src/components/Layout/context.ts b/src/components/Layout/context.ts new file mode 100644 index 000000000..8e0c5445e --- /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 new file mode 100644 index 000000000..d08505fbf --- /dev/null +++ b/src/components/Layout/index.tsx @@ -0,0 +1,188 @@ +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, + 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' +import {ScrollbarOffsetContext} from '#/components/Layout/context' + +export * from '#/components/Layout/const' +export * as Header from '#/components/Layout/Header' + +export type ScreenProps = React.ComponentProps & { + style?: StyleProp +} + +/** + * Outermost component of every screen + */ +export const Screen = React.memo(function Screen({ + style, + ...props +}: ScreenProps) { + const {top} = useSafeAreaInsets() + return ( + <> + {isWeb && } + + + ) +}) + +export type ContentProps = AnimatedScrollViewProps & { + style?: StyleProp + contentContainerStyle?: StyleProp +} + +/** + * Default scroll view for simple pages + */ +export const Content = React.memo(function Content({ + children, + style, + contentContainerStyle, + ...props +}: ContentProps) { + const {footerHeight} = useShellLayout() + const animatedProps = useAnimatedProps(() => { + return { + scrollIndicatorInsets: { + bottom: footerHeight.get(), + top: 0, + right: 1, + }, + } satisfies AnimatedScrollViewProps + }) + + return ( + + {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 +} + +/** + * 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 ( + + {isWeb ?
{children}
: children} + + ) +}) + +/** + * Utility component to center content within the screen + */ +export const Center = React.memo(function LayoutContent({ + children, + style, + ...props +}: ViewProps) { + const {isWithinOffsetView} = useContext(ScrollbarOffsetContext) + const {gtMobile} = useBreakpoints() + const ctx = useMemo(() => ({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 ? ( + + ) : null +}) diff --git a/src/components/LikedByList.tsx b/src/components/LikedByList.tsx index a83f98258..b369bd76e 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 16bd6a9ea..2d7b13b25 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/components/dms/MessagesListHeader.tsx b/src/components/dms/MessagesListHeader.tsx index 6c3bbf216..acffa0c2b 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 ? ( { - if (!isWeb || !isLockActive) { - return - } - incrementRefCount() - return () => decrementRefCount() - }) -} diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx index 36b96cacd..4fcb42854 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() { )} - + ) } diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index adf5f0080..a0fc3707c 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,15 @@ 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 {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 {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' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' @@ -110,46 +109,36 @@ export default function HashtagScreen({ return ( - - ( - - - - ) - : undefined - } - /> - + + + + {headerTitle} + {author && ( + + {_(msg`From @${sanitizedAuthor}`)} + + )} + + + + + ( - + section.title)} {...props} /> - + )} initialPage={0}> {sections.map((section, i) => ( diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 4f2bd251f..1a87a2ac5 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -16,8 +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' import {DialogControlProps, useDialogControl} from '#/components/Dialog' @@ -49,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 @@ -81,21 +78,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,28 +126,11 @@ export function MessagesScreen({navigation, route}: Props) { [navigation], ) - const onNavigateToSettings = useCallback(() => { - navigation.navigate('MessagesSettings') - }, [navigation]) - if (conversations.length < 1) { return ( - - {gtMobile ? ( - - ) : ( - - )} - +
+ {isLoading ? ( @@ -227,7 +192,7 @@ export function MessagesScreen({navigation, route}: Props) { )} )} - + {!isLoading && !isError && ( @@ -238,14 +203,7 @@ export function MessagesScreen({navigation, route}: Props) { return ( - {!gtMobile && ( - - )} +
- } ListFooterComponent={ ) } -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/Conversation.tsx b/src/screens/Messages/Conversation.tsx index a2157d2b9..b8b0bfe0d 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() { )} - + ) } diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx index 50b1c4cc9..f37e7a9ba 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) { )} - + ) } diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 5f340cd56..6b4dd06bc 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,8 +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' import * as Dialog from '#/components/Dialog' @@ -37,6 +34,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 +73,22 @@ 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 +154,7 @@ export function ModerationScreenInner({ } = useMyLabelersQuery() useFocusEffect( - React.useCallback(() => { + useCallback(() => { setMinimalShellMode(false) }, [setMinimalShellMode]), ) @@ -183,7 +168,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({ @@ -201,13 +186,7 @@ export function ModerationScreenInner({ const disabledOnIOS = isIOS && !adultContentEnabled return ( - + Moderation tools @@ -420,7 +399,7 @@ export function ModerationScreenInner({ {labelers.map((labeler, i) => { return ( - + {i !== 0 && } {state => ( @@ -457,12 +436,12 @@ export function ModerationScreenInner({ )} - + ) })} )} - - + + ) } diff --git a/src/screens/Onboarding/Layout.tsx b/src/screens/Onboarding/Layout.tsx index 54821532c..059cdfd5c 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(() => { diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx index 6fc485f34..d35d33243 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) => { @@ -28,11 +25,8 @@ export const PostLikedByScreen = ({route}: Props) => { return ( - - - - - + + ) } diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx index 71dd8ad8d..2cd6be879 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 c1e8b2987..304e70808 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 7e396c350..d6dd15c69 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) { @@ -93,6 +101,7 @@ 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} /> ) @@ -116,9 +127,6 @@ export const ProfileKnownFollowersScreen = ({route}: Props) => { onRefresh={onRefresh} onEndReached={onEndReached} onEndReachedThreshold={4} - ListHeaderComponent={ - - } ListFooterComponent={ { desktopFixedHeight initialNumToRender={initialNumToRender} windowSize={11} + sideBorders={false} /> ) diff --git a/src/screens/Profile/Sections/Labels.tsx b/src/screens/Profile/Sections/Labels.tsx index 67c827d90..6c76d7b15 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} /> )} - + ) }) diff --git a/src/screens/Settings/AboutSettings.tsx b/src/screens/Settings/AboutSettings.tsx index 8019a20f9..02976bb3c 100644 --- a/src/screens/Settings/AboutSettings.tsx +++ b/src/screens/Settings/AboutSettings.tsx @@ -21,7 +21,15 @@ export function AboutSettingsScreen({}: Props) { return ( - + + + + + About + + + + - + + + + + Accessibility + + + + diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx index 2495a0f2f..634c9d3f7 100644 --- a/src/screens/Settings/AccountSettings.tsx +++ b/src/screens/Settings/AccountSettings.tsx @@ -38,7 +38,15 @@ export function AccountSettingsScreen({}: Props) { return ( - + + + + + Account + + + + diff --git a/src/screens/Settings/AppIconSettings.tsx b/src/screens/Settings/AppIconSettings.tsx index 1dd87d45f..18fcd5e30 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,7 +20,15 @@ export function AppIconSettingsScreen({}: Props) { return ( - + + + + + App Icon + + + + Defaults diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx index 1ea0bd1b3..630d26ba7 100644 --- a/src/screens/Settings/AppPasswords.tsx +++ b/src/screens/Settings/AppPasswords.tsx @@ -44,7 +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 089491dd0..ea9455ab1 100644 --- a/src/screens/Settings/FollowingFeedPreferences.tsx +++ b/src/screens/Settings/FollowingFeedPreferences.tsx @@ -46,7 +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 a44e2fcec..096f92566 100644 --- a/src/screens/Settings/LanguageSettings.tsx +++ b/src/screens/Settings/LanguageSettings.tsx @@ -64,7 +64,15 @@ export function LanguageSettingsScreen({}: Props) { return ( - + + + + + Languages + + + + diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx index c5f7078c4..1c77b3148 100644 --- a/src/screens/Settings/NotificationSettings.tsx +++ b/src/screens/Settings/NotificationSettings.tsx @@ -33,7 +33,15 @@ export function NotificationSettingsScreen({}: Props) { return ( - + + + + + Notification Settings + + + + {isQueryError ? ( - + + + + + Privacy and Security + + + + diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx index 126a1bc88..7a4ad6f20 100644 --- a/src/screens/Settings/Settings.tsx +++ b/src/screens/Settings/Settings.tsx @@ -73,7 +73,15 @@ export function SettingsScreen({}: Props) { return ( - + + + + + Settings + + + + - + + + + + Thread Preferences + + + + diff --git a/src/screens/SignupQueued.tsx b/src/screens/SignupQueued.tsx index ed261f29e..f1c36a69c 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' diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index b0d71b929..b42b753e3 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{' '} diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index 44e90a551..fa5a620bf 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 ( - + } else { return @@ -40,98 +41,43 @@ 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]}> + + + + + + + - - - - - + )} {tabBarAnchor} - { - headerHeight.set(e.nativeEvent.layout.height) - }} - style={[ - t.atoms.bg, - t.atoms.border_contrast_low, - 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, - borderLeftWidth: 1, - borderRightWidth: 1, - }, - 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', - borderLeftWidth: 1, - borderRightWidth: 1, - zIndex: 1, - }, -}) diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index 832396092..e48c2cc89 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, - }, -}) diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index f9b147b29..f6b6223ce 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 {RemoveScrollBar} from 'react-remove-scroll-bar' -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,14 @@ export function Lightbox() { const initialIndex = activeLightbox.index const imgs = activeLightbox.images return ( - + <> + + + ) } diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx index 363dd100d..17327fd9a 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/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 8d93c21b4..0c49c8771 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 {RemoveScrollBar} from 'react-remove-scroll-bar' 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,7 +22,6 @@ import * as VerifyEmailModal from './VerifyEmail' export function ModalsContainer() { const {isModalActive, activeModals} = useModals() - useWebBodyScrollLock(isModalActive) if (!isModalActive) { return null @@ -30,6 +29,7 @@ export function ModalsContainer() { return ( <> + {activeModals.map((modal, i) => ( ))} diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index bd39ddd84..9871455a1 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' @@ -22,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__'} @@ -46,7 +44,6 @@ export function Feed({ const [isPTRing, setIsPTRing] = React.useState(false) const pal = usePalette('default') - const {isTabletOrMobile} = useWebMediaQueries() const {_} = useLingui() const moderationOpts = useModerationOpts() @@ -133,11 +130,7 @@ export function Feed({ ) } else if (item === LOADING_ITEM) { return ( - + ) @@ -146,11 +139,11 @@ export function Feed({ ) }, - [moderationOpts, isTabletOrMobile, _, onPressRetryLoadMore, pal.border], + [moderationOpts, _, onPressRetryLoadMore, pal.border], ) const FeedFooter = React.useCallback( @@ -168,12 +161,10 @@ export function Feed({ return ( {error && ( - - - + )} void tabBarAnchor?: JSX.Element | null | undefined }): React.ReactNode => { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() return ( <> - - {renderHeader?.()} - + {renderHeader?.()} {tabBarAnchor} - + ])}> - + ) } @@ -180,33 +169,6 @@ 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', - }, -}) - function toArray(v: T | T[]): T[] { if (Array.isArray(v)) { return v diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx index 4c0d973a9..b9051a9c6 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 10a51166c..a22000b96 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 dfaa69780..2143bd9c2 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/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index a10149395..0cdccff59 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/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index 60a7a5e31..3c0476929 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 572b0b9f4..1cd65c74c 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/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index 0e25fe5e6..cd11611a8 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -1,29 +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 {CenteredView} from '../util/Views' +import * as Layout from '#/components/Layout' export function ProfileSubpageHeader({ isLoading, @@ -48,7 +43,6 @@ export function ProfileSubpageHeader({ | undefined avatarType: UserAvatarType | 'starter-pack' }>) { - const setDrawerOpen = useSetDrawerOpen() const navigation = useNavigation() const {_} = useLingui() const {isMobile} = useWebMediaQueries() @@ -57,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({ @@ -106,42 +88,17 @@ export function ProfileSubpageHeader({ }, [_openLightbox, avatar, aviRef]) return ( - - {isMobile && ( - - - {canGoBack ? ( - - ) : ( - - )} - - - {children} - - )} + <> + + {canGoBack ? ( + + ) : ( + + )} + + {children} + + )} - {!isMobile && ( - - {children} - - )} - + ) } - -const styles = StyleSheet.create({ - backBtn: { - width: 20, - height: 30, - }, - backBtnWide: { - width: 20, - height: 30, - marginRight: 4, - }, - backIcon: { - marginTop: 6, - }, -}) diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index f112d2d0a..18f7d6fa7 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', diff --git a/src/view/com/util/LoadingScreen.tsx b/src/view/com/util/LoadingScreen.tsx index 5d2aeb38f..1086c9d17 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/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx deleted file mode 100644 index 78b66a929..000000000 --- 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/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 1d4cf8ff0..2d413f782 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -1,271 +1,27 @@ -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' +/** + * Legacy ViewHeader component. Use Layout.Header going forward. + * + * @deprecated + */ 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} - + + + + {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/com/util/Views.tsx b/src/view/com/util/Views.tsx index 0d3f63794..c9ba0728c 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 1f030b408..e64b0ce9a 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -31,10 +31,12 @@ interface AddedProps { desktopFixedHeight?: boolean | number } +/** + * @deprecated use `Layout` components + */ export const CenteredView = React.forwardRef(function CenteredView( { style, - sideBorders, topBorder, ...props }: React.PropsWithChildren< @@ -47,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, @@ -75,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( @@ -123,11 +117,7 @@ export const FlatList_INTERNAL = React.forwardRef(function FlatListImpl( return ( ( ) }) +/** + * @deprecated use `Layout` components + */ export const ScrollView = React.forwardRef(function ScrollViewImpl( {contentContainerStyle, ...props}: React.PropsWithChildren, ref: React.Ref, ) { - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() if (!isMobile) { contentContainerStyle = addStyle( @@ -150,11 +141,7 @@ export const ScrollView = React.forwardRef(function ScrollViewImpl( } return ( - {showHeader && isMobile && } + {showHeader && isMobile && ( + + )} @@ -102,7 +103,7 @@ type FlatlistSlice = export function FeedsScreen(_props: Props) { const pal = usePalette('default') const {openComposer} = useComposerControls() - const {isMobile, isTabletOrDesktop} = useWebMediaQueries() + const {isMobile} = useWebMediaQueries() const [query, setQuery] = React.useState('') const [isPTR, setIsPTR] = React.useState(false) const { @@ -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} + desktopFixedHeight + 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 && ( - + My Feeds @@ -754,7 +719,7 @@ function FeedsAboutHeader() { size="lg" /> - + Discover New Feeds @@ -769,9 +734,6 @@ function FeedsAboutHeader() { } const styles = StyleSheet.create({ - list: { - height: '100%', - }, contentContainer: { paddingBottom: 100, }, diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index f654f2bd9..99abf0603 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() @@ -62,43 +55,30 @@ export function ListsScreen({}: Props) { return ( - - - - User Lists - - + + + + + Lists + + Public, shareable lists which can drive feeds. - - - - - - - + + + + + - + Blocked accounts cannot reply in your threads, mention you, or @@ -120,7 +115,7 @@ export function ModerationBlockedAccounts({}: Props) { {isEmpty ? ( - + {isError ? ( )} - + ) } 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/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index c623c5376..0ef4d4389 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -1,33 +1,26 @@ import React from 'react' -import {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 ModerationModlistsScreen({}: Props) { const {_} = useLingui() - const pal = usePalette('default') const setMinimalShellMode = useSetMinimalShellMode() - const {isMobile} = useWebMediaQueries() const navigation = useNavigation() const {openModal} = useModalControls() const {needsEmailVerification} = useEmail() @@ -62,39 +55,32 @@ export function ModerationModlistsScreen({}: Props) { return ( - - - + + + + Moderation Lists - - + + Public, shareable lists of users to mute or block in bulk. - - - - - - - + + + + + - - + + Muted accounts have their posts removed from your feed and from your @@ -119,7 +114,7 @@ export function ModerationMutedAccounts({}: Props) { {isEmpty ? ( - + {isError ? ( )} - + ) } 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/Notifications.tsx b/src/view/screens/Notifications.tsx index 531d10a7f..35591f270 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,121 +106,77 @@ export function NotificationsScreen({route: {params}}: Props) { return listenSoftReset(onPressLoadLatest) }, [onPressLoadLatest, isScreenFocused]) - const renderButton = useCallback(() => { - return ( - - - - ) - }, [_, t]) - - const ListHeaderComponent = React.useCallback(() => { - if (isDesktop) { - return ( - + return ( + + + + - - {isLoadingLatest ? : <>} - {renderButton()} - - - ) - } - return <> - }, [isDesktop, t, hasNew, renderButton, _, isLoadingLatest]) - - const renderHeaderSpinner = React.useCallback(() => { - return ( - - {isLoadingLatest ? : <>} - {renderButton()} - - ) - }, [renderButton, isLoadingLatest]) + + + + + + + - return ( - - - + - - - - {(isScrolledDown || hasNew) && ( - - )} - openComposer({})} - icon={} - accessibilityRole="button" - accessibilityLabel={_(msg`New post`)} - accessibilityHint="" + + {(isScrolledDown || hasNew) && ( + - + )} + openComposer({})} + icon={} + accessibilityRole="button" + accessibilityLabel={_(msg`New post`)} + accessibilityHint="" + /> ) } diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index c183569b7..1bad9b6cd 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 @@ -24,9 +22,7 @@ export function PostThreadScreen({route}: Props) { return ( - - - + ) } diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 677fe09f4..6a9b6f7f2 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) { diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index b34f0f1b0..63469ef4f 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' @@ -98,7 +97,7 @@ export function ProfileFeedScreen(props: Props) { if (error) { return ( - + Could not load feed @@ -120,7 +119,7 @@ export function ProfileFeedScreen(props: Props) { - + ) } @@ -394,7 +393,7 @@ export function ProfileFeedScreenInner({ ]) return ( - + <> )} - + ) } diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx index 9fa98cb1a..90c0a57f9 100644 --- a/src/view/screens/ProfileFollowers.tsx +++ b/src/view/screens/ProfileFollowers.tsx @@ -10,7 +10,6 @@ import {ProfileFollowers as ProfileFollowersComponent} from '#/view/com/profile/ 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 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 483ee93ec..134f79993 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 ( - diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index cb333befa..a927526ad 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' @@ -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, diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 3c04ec36f..1b4c84a60 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, }, }) diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 0518bc506..0871458c9 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 {CenteredView, 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 +67,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 +206,7 @@ let SearchScreenPostResults = ({ if (item.type === 'post') { return } else { - return + return null } }} keyExtractor={item => item.key} @@ -550,19 +532,13 @@ let SearchScreenInner = ({ ( - section.title)} {...props} /> - + )} initialPage={0}> {sections.map((section, i) => ( @@ -572,7 +548,7 @@ let SearchScreenInner = ({ ) : hasSession ? ( ) : ( - + - + ) } SearchScreenInner = React.memo(SearchScreenInner) @@ -650,7 +626,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(() => { @@ -861,73 +837,79 @@ export function SearchScreen( return ( - - - {!gtMobile && ( - - )} - - - - {showAutocomplete && ( - - )} - - - {showFilters && ( - - - + ]}> + + + + {!gtMobile && ( + + )} + + + + {showAutocomplete && ( + + )} + + {showFilters && ( + + + + + + )} - )} - + + ) : ( - ))} - + )} ) @@ -1042,17 +1021,12 @@ function SearchHistory({ onRemoveItemClick: (item: string) => 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 +1126,7 @@ function SearchHistory({ )} - + ) } diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx index 9f407248a..47a86ed24 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 {RemoveScrollBar} from 'react-remove-scroll-bar' -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,12 @@ 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 0af80854c..7c2ccd958 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 @@ -220,35 +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 && ( @@ -366,9 +331,9 @@ export function DesktopLeftNav() { {hasSession ? ( @@ -381,8 +346,6 @@ export function DesktopLeftNav() { {hasSession && ( <> - - + {routeName === 'Search' ? ( @@ -122,8 +122,13 @@ 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, + }, + ...a.scrollbar_offset.transform, + ], maxHeight: '100%', overflowY: 'auto', }, diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index f55437356..8c30813ab 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 {RemoveScrollBar} from 'react-remove-scroll-bar' 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,34 @@ 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 28b3a3e3d..293f366ad 100644 --- a/web/index.html +++ b/web/index.html @@ -45,7 +45,6 @@ } html { background-color: white; - scrollbar-gutter: stable both-edges; } @media (prefers-color-scheme: dark) { html { @@ -81,9 +80,15 @@ 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/yarn.lock b/yarn.lock index 474ef2f8b..e62dcb97f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" -- cgit 1.4.1