[Layout] Base #6907

estrattonbailey · 2024-12-02T23:19:13Z

See docs here: https://github.com/bluesky-social/social-app/blob/d3bd2a4d30de875e13771bda3d2b79e1e5dbfca3/src/components/Layout/README.md

New components:

Layout.Header.* see docs for more info
Layout.Center see docs, replaces CenteredView
Layout.Content see docs, replaces ScrollView from Views.tsx
useGutterStyles from ALF, start using this for gutters

Testing

All screens
Fixed headers on native, mobile web, animations
Dropdowns, old modals, new modals, composer
- Test with scrollbars enabled or disabled at the OS level

Todo

github-actions · 2024-12-02T23:25:40Z

Old size	New size	Diff
8.14 MB	8.13 MB	-11.89 KB (-0.14%)

mozzius

lgtm!

estrattonbailey · 2024-12-05T16:59:04Z

package.json

@@ -193,6 +193,7 @@
    "react-native-web": "~0.19.11",
    "react-native-web-webview": "^1.0.2",
    "react-native-webview": "13.10.2",
+    "react-remove-scroll": "^2.6.0",


This is already present via Radix, but we explicitly depend on it now

estrattonbailey · 2024-12-05T17:01:24Z

src/lib/hooks/useWebBodyScrollLock.ts

This is replaced by react-remove-scroll

estrattonbailey · 2024-12-05T17:01:56Z

src/screens/Deactivated.tsx

Tested on web/native

estrattonbailey · 2024-12-05T17:06:13Z

src/view/com/lightbox/Lightbox.web.tsx

+    <RemoveScroll>
+      <LightboxInner
+        imgs={imgs}
+        initialIndex={initialIndex}
+        onClose={closeLightbox}
+      />
+    </RemoveScroll>


This is a good example of how to use this library

gaearon · 2024-12-05T23:33:36Z

src/view/com/pager/PagerWithHeader.web.tsx

-        style={[
-          !isMobile && styles.headerContainerDesktop,
-          pal.border,
-          !isHeaderReady && styles.loadingHeader,


I recall this had some purpose in the past, is that no longer true? Maybe it's only needed on native? It would be good to understand this.

Chatted in slack 👍

Added to doc here 8914f1e

* origin/main: Revert "[Video] Revert safari hackfix (#5367)" (#7001) Fix squashed content on mod screens (#7004) [ELI5] Change feed page copy (#6932) Immediately parse pre-filled links in composer state (#6974) Add useFormatCurrency hook (#6978) Update view shot (#6995) Remove icon (#6994) clean rn 0.76 upgrade (#6887) Trim back prefs exposure in NUXs, make naming more friendly (#6980) [Layout] Base (#6907) Add some icons (#6976)

…con-screen * origin/main: Access content of extended block properly (block.Super instead of super()) (#7026) Add `isSelfHosted` to `SessionAccount` (#7028) Add back button to desktop threads (#7010) Revert "[Video] Revert safari hackfix (#5367)" (#7001) Fix squashed content on mod screens (#7004) [ELI5] Change feed page copy (#6932) Immediately parse pre-filled links in composer state (#6974) Add useFormatCurrency hook (#6978) Update view shot (#6995) Remove icon (#6994) clean rn 0.76 upgrade (#6887) Trim back prefs exposure in NUXs, make naming more friendly (#6980) [Layout] Base (#6907) Add some icons (#6976)

* 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 (bluesky-social#6910) * Replace notifications screen header * fix cropped indicator --------- Co-authored-by: Samuel Newman <[email protected]> * Replace Hashtag header (bluesky-social#6928) * [Layout] ChatList header (bluesky-social#6929) * Replace ChatList header * update chat settings as well --------- Co-authored-by: Samuel Newman <[email protected]> * Add web borders to Chat settings * Remove unused var * Move ChatList header outside center * Replace empty chat layout * fix breakpoints * [Layout] Scrollbar gutters (bluesky-social#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 (bluesky-social#6950) * [Layout] Feeds headers (bluesky-social#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 <[email protected]> * [Layout] Every other screen (bluesky-social#6953) * attempt to fix double borders on every other screen * delete ListHeaderDesktop * delete `SimpleViewHeader` and fix screens (bluesky-social#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 (bluesky-social#6958) * Search AutocompleteResults * use new header for starter pack wizard (bluesky-social#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 (bluesky-social#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 <[email protected]>

arcalinea deployed to layout/base - social-app PR #6907 December 2, 2024 23:19 — with Render View deployment

estrattonbailey mentioned this pull request Dec 3, 2024

[Layout] Scrollbar gutters #6908

Merged

arcalinea deployed to layout/base - social-app PR #6907 December 3, 2024 00:21 — with Render View deployment

arcalinea deployed to layout/base - social-app PR #6907 December 3, 2024 00:43 — with Render View deployment

arcalinea deployed to layout/base - social-app PR #6907 December 3, 2024 18:09 — with Render View deployment

arcalinea deployed to layout/base - social-app PR #6907 December 3, 2024 19:15 — with Render View deployment

estrattonbailey marked this pull request as ready for review December 3, 2024 22:56

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 16:47 — with Render Destroyed

arcalinea deployed to layout/base - social-app PR #6907 December 4, 2024 16:47 — with Render View deployment

mozzius approved these changes Dec 4, 2024

View reviewed changes

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 17:39 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 17:40 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 17:47 — with Render Destroyed

arcalinea deployed to layout/base - social-app PR #6907 December 4, 2024 17:53 — with Render View deployment

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 18:10 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 18:18 — with Render Destroyed

arcalinea deployed to layout/base - social-app PR #6907 December 4, 2024 18:29 — with Render View deployment

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 19:50 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 20:00 — with Render Destroyed

arcalinea deployed to layout/base - social-app PR #6907 December 4, 2024 20:12 — with Render View deployment

arcalinea deployed to layout/base - social-app PR #6907 December 4, 2024 20:36 — with Render View deployment

arcalinea deployed to layout/base - social-app PR #6907 December 4, 2024 21:06 — with Render View deployment

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 21:32 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 21:34 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 21:38 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 4, 2024 21:44 — with Render Destroyed

estrattonbailey added 2 commits December 4, 2024 21:49

Add common gutter styles as hook

6df90b2

Add computed scrollbar gutter CSS vars

e406bad

estrattonbailey added 3 commits December 5, 2024 10:44

Fix up home header

b82551c

Add back button to convo

44d739a

Add hitslop to header buttons

002e328

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 5, 2024 16:49 — with Render Destroyed

Comment

08dc17b

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 5, 2024 16:55 — with Render Destroyed

Better handling on native for new atom

3e261aa

arcalinea deployed to layout/base - social-app PR #6907 December 5, 2024 16:58 — with Render View deployment

estrattonbailey commented Dec 5, 2024

View reviewed changes

src/lib/hooks/useWebBodyScrollLock.ts Outdated

Copy link

Member Author

estrattonbailey Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is replaced by react-remove-scroll

estrattonbailey commented Dec 5, 2024

View reviewed changes

src/screens/Deactivated.tsx Outdated

Copy link

Member Author

estrattonbailey Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on web/native

estrattonbailey commented Dec 5, 2024

View reviewed changes

Format

11f2efe

arcalinea deployed to layout/base - social-app PR #6907 December 5, 2024 17:17 — with Render View deployment

estrattonbailey mentioned this pull request Dec 5, 2024

Refactor sidebar #6971

Merged

Fix nested flatlist on mod screens

b6ce210

arcalinea deployed to layout/base - social-app PR #6907 December 5, 2024 20:43 — with Render View deployment

gaearon reviewed Dec 5, 2024

View reviewed changes

estrattonbailey added 2 commits December 5, 2024 18:29

Use react-remove-scroll-bar directly

42702f1

Fix notification count overflow on web

c5314b9

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 6, 2024 00:42 — with Render Destroyed

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 6, 2024 00:46 — with Render Destroyed

Clarify doc

8914f1e

estrattonbailey force-pushed the layout/base branch from 850ed92 to 8914f1e Compare December 6, 2024 00:49

arcalinea temporarily deployed to layout/base - social-app PR #6907 December 6, 2024 00:49 — with Render Destroyed

estrattonbailey merged commit 143e2c8 into main Dec 6, 2024
6 checks passed

auroursa mentioned this pull request Dec 18, 2024

Web sticky headers for most screens #7153

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Layout] Base #6907

[Layout] Base #6907

estrattonbailey commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading

mozzius left a comment

estrattonbailey Dec 5, 2024

estrattonbailey Dec 5, 2024

estrattonbailey Dec 5, 2024

estrattonbailey Dec 5, 2024

gaearon Dec 5, 2024

estrattonbailey Dec 6, 2024

estrattonbailey Dec 6, 2024

[Layout] Base #6907

[Layout] Base #6907

Conversation

estrattonbailey commented Dec 2, 2024 • edited Loading

Todo

github-actions bot commented Dec 2, 2024 • edited Loading

mozzius left a comment

Choose a reason for hiding this comment

estrattonbailey Dec 5, 2024

Choose a reason for hiding this comment

estrattonbailey Dec 5, 2024

Choose a reason for hiding this comment

estrattonbailey Dec 5, 2024

Choose a reason for hiding this comment

estrattonbailey Dec 5, 2024

Choose a reason for hiding this comment

gaearon Dec 5, 2024

Choose a reason for hiding this comment

estrattonbailey Dec 6, 2024

Choose a reason for hiding this comment

estrattonbailey Dec 6, 2024

Choose a reason for hiding this comment

estrattonbailey commented Dec 2, 2024 •

edited

Loading

github-actions bot commented Dec 2, 2024 •

edited

Loading