[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 <mozzius@protonmail.com>

* Replace Hashtag header (#6928)

* [Layout] ChatList header (#6929)

* Replace ChatList header

* update chat settings as well

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

* 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 <mozzius@protonmail.com>

* [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 <mozzius@protonmail.com>

1 files changed, 105 insertions, 131 deletions

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 (
-    <CenteredView
-      style={[
-        // @ts-ignore web only -prf
-        {
-          padding: 18,
-          height: isWeb ? '100vh' : undefined,
-        },
-        pal.border,
-      ]}
-      sideBorders={!isMobile}>
-      <ActivityIndicator />
-    </CenteredView>
+    <Layout.Content>
+      <View style={[a.py_xl]}>
+        <ActivityIndicator />
+      </View>
+    </Layout.Content>
   )
 }
 
 function EmptyState({message, error}: {message: string; error?: string}) {
   const pal = usePalette('default')
-  const {isMobile} = useWebMediaQueries()
 
   return (
-    <CenteredView
-      sideBorders={!isMobile}
-      style={[
-        pal.border,
-        // @ts-ignore web only -prf
-        {
-          padding: 18,
-          height: isWeb ? '100vh' : undefined,
-        },
-      ]}>
-      <View style={[pal.viewLight, {padding: 18, borderRadius: 8}]}>
-        <Text style={[pal.text]}>{message}</Text>
+    <Layout.Content>
+      <View style={[a.p_xl]}>
+        <View style={[pal.viewLight, {padding: 18, borderRadius: 8}]}>
+          <Text style={[pal.text]}>{message}</Text>
 
-        {error && (
-          <>
-            <View
-              style={[
-                {
-                  marginVertical: 12,
-                  height: 1,
-                  width: '100%',
-                  backgroundColor: pal.text.color,
-                  opacity: 0.2,
-                },
-              ]}
-            />
+          {error && (
+            <>
+              <View
+                style={[
+                  {
+                    marginVertical: 12,
+                    height: 1,
+                    width: '100%',
+                    backgroundColor: pal.text.color,
+                    opacity: 0.2,
+                  },
+                ]}
+              />
 
-            <Text style={[pal.textLight]}>
-              <Trans>Error:</Trans> {error}
-            </Text>
-          </>
-        )}
+              <Text style={[pal.textLight]}>
+                <Trans>Error:</Trans> {error}
+              </Text>
+            </>
+          )}
+        </View>
       </View>
-    </CenteredView>
+    </Layout.Content>
   )
 }
 
@@ -224,7 +206,7 @@ let SearchScreenPostResults = ({
                 if (item.type === 'post') {
                   return <Post post={item.post} />
                 } else {
-                  return <Loader />
+                  return null
                 }
               }}
               keyExtractor={item => item.key}
@@ -550,19 +532,13 @@ let SearchScreenInner = ({
     <Pager
       onPageSelected={onPageSelected}
       renderTabBar={props => (
-        <CenteredView
-          sideBorders
+        <Layout.Center
           style={[
-            pal.border,
-            pal.view,
-            web({
-              position: isWeb ? 'sticky' : '',
-              zIndex: 1,
-            }),
+            web([a.sticky, a.z_10]),
             {top: isWeb ? headerHeight : undefined},
           ]}>
           <TabBar items={sections.map(section => section.title)} {...props} />
-        </CenteredView>
+        </Layout.Center>
       )}
       initialPage={0}>
       {sections.map((section, i) => (
@@ -572,7 +548,7 @@ let SearchScreenInner = ({
   ) : hasSession ? (
     <Explore />
   ) : (
-    <CenteredView sideBorders style={pal.border}>
+    <Layout.Center>
       <View
         // @ts-ignore web only -esb
         style={{
@@ -614,7 +590,7 @@ let SearchScreenInner = ({
           </Text>
         </View>
       </View>
-    </CenteredView>
+    </Layout.Center>
   )
 }
 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 (
     <Layout.Screen testID="searchScreen">
-      <CenteredView
+      <View
         style={[
-          a.p_md,
-          a.pb_sm,
-          a.gap_sm,
-          t.atoms.bg,
           web({
             height: headerHeight,
             position: 'sticky',
             top: 0,
             zIndex: 1,
           }),
-        ]}
-        sideBorders={gtMobile}>
-        <View style={[a.flex_row, a.gap_sm]}>
-          {!gtMobile && (
-            <Button
-              testID="viewHeaderBackOrMenuBtn"
-              onPress={onPressMenu}
-              hitSlop={HITSLOP_10}
-              label={_(msg`Menu`)}
-              accessibilityHint={_(msg`Access navigation links and settings`)}
-              size="large"
-              variant="solid"
-              color="secondary"
-              shape="square">
-              <ButtonIcon icon={Menu} size="lg" />
-            </Button>
-          )}
-          <View style={[a.flex_1]}>
-            <SearchInput
-              ref={textInput}
-              value={searchText}
-              onFocus={onSearchInputFocus}
-              onChangeText={onChangeText}
-              onClearText={onPressClearQuery}
-              onSubmitEditing={onSubmit}
-            />
-          </View>
-          {showAutocomplete && (
-            <Button
-              label={_(msg`Cancel search`)}
-              size="large"
-              variant="ghost"
-              color="secondary"
-              style={[a.px_sm]}
-              onPress={onPressCancelSearch}
-              hitSlop={HITSLOP_10}>
-              <ButtonText>
-                <Trans>Cancel</Trans>
-              </ButtonText>
-            </Button>
-          )}
-        </View>
-
-        {showFilters && (
-          <View
-            style={[a.flex_row, a.align_center, a.justify_between, a.gap_sm]}>
-            <View style={[{width: 140}]}>
-              <SearchLanguageDropdown
-                value={params.lang}
-                onChange={params.setLang}
-              />
+        ]}>
+        <Layout.Center>
+          <View style={[a.p_md, a.pb_sm, a.gap_sm, t.atoms.bg]}>
+            <View style={[a.flex_row, a.gap_sm]}>
+              {!gtMobile && (
+                <Button
+                  testID="viewHeaderBackOrMenuBtn"
+                  onPress={onPressMenu}
+                  hitSlop={HITSLOP_10}
+                  label={_(msg`Menu`)}
+                  accessibilityHint={_(
+                    msg`Access navigation links and settings`,
+                  )}
+                  size="large"
+                  variant="solid"
+                  color="secondary"
+                  shape="square">
+                  <ButtonIcon icon={Menu} size="lg" />
+                </Button>
+              )}
+              <View style={[a.flex_1]}>
+                <SearchInput
+                  ref={textInput}
+                  value={searchText}
+                  onFocus={onSearchInputFocus}
+                  onChangeText={onChangeText}
+                  onClearText={onPressClearQuery}
+                  onSubmitEditing={onSubmit}
+                />
+              </View>
+              {showAutocomplete && (
+                <Button
+                  label={_(msg`Cancel search`)}
+                  size="large"
+                  variant="ghost"
+                  color="secondary"
+                  style={[a.px_sm]}
+                  onPress={onPressCancelSearch}
+                  hitSlop={HITSLOP_10}>
+                  <ButtonText>
+                    <Trans>Cancel</Trans>
+                  </ButtonText>
+                </Button>
+              )}
             </View>
+
+            {showFilters && (
+              <View
+                style={[
+                  a.flex_row,
+                  a.align_center,
+                  a.justify_between,
+                  a.gap_sm,
+                ]}>
+                <View style={[{width: 140}]}>
+                  <SearchLanguageDropdown
+                    value={params.lang}
+                    onChange={params.setLang}
+                  />
+                </View>
+              </View>
+            )}
           </View>
-        )}
-      </CenteredView>
+        </Layout.Center>
+      </View>
 
       <View
         style={{
@@ -992,10 +974,7 @@ let AutocompleteResults = ({
       !moderationOpts ? (
         <Loader />
       ) : (
-        <ScrollView
-          style={{height: '100%'}}
-          // @ts-ignore web only -prf
-          dataSet={{stableGutters: '1'}}
+        <Layout.Content
           keyboardShouldPersistTaps="handled"
           keyboardDismissMode="on-drag">
           <SearchLinkCard
@@ -1020,7 +999,7 @@ let AutocompleteResults = ({
             />
           ))}
           <View style={{height: 200}} />
-        </ScrollView>
+        </Layout.Content>
       )}
     </>
   )
@@ -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 (
-    <CenteredView
-      sideBorders={isTabletOrDesktop}
-      // @ts-ignore web only -prf
-      style={{
-        height: isWeb ? '100vh' : undefined,
-      }}>
+    <Layout.Content>
       <View style={styles.searchHistoryContainer}>
         {(searchHistory.length > 0 || selectedProfiles.length > 0) && (
           <Text style={[pal.text, styles.searchHistoryTitle]}>
@@ -1152,7 +1126,7 @@ function SearchHistory({
           </View>
         )}
       </View>
-    </CenteredView>
+    </Layout.Content>
   )
 }