From c5641ac2b7bdcfdc4627175c7125131faf7c9744 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Fri, 16 Feb 2024 18:07:47 +0000
Subject: Fix jumps when navigating into long threads (#2878)

* Reveal parents in chunks to fix scroll jumps

Co-authored-by: Hailey <me@haileyok.com>

* Prevent layout jump when navigating to QT due to missing metrics

---------

Co-authored-by: Hailey <me@haileyok.com>
---
 src/view/com/post-thread/PostThreadItem.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

(limited to 'src/view/com/post-thread/PostThreadItem.tsx')

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 826d0d161..ced6d0d60 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -44,6 +44,7 @@ import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow'
 import {ThreadPost} from '#/state/queries/post-thread'
 import {useSession} from 'state/session'
 import {WhoCanReply} from '../threadgate/WhoCanReply'
+import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
 
 export function PostThreadItem({
   post,
@@ -164,8 +165,6 @@ let PostThreadItemLoaded = ({
     () => countLines(richText?.text) >= MAX_POST_LINES,
   )
   const {currentAccount} = useSession()
-  const hasEngagement = post.likeCount || post.repostCount
-
   const rootUri = record.reply?.root?.uri || post.uri
   const postHref = React.useMemo(() => {
     const urip = new AtUri(post.uri)
@@ -357,9 +356,16 @@ let PostThreadItemLoaded = ({
               translatorUrl={translatorUrl}
               needsTranslation={needsTranslation}
             />
-            {hasEngagement ? (
+            {post.repostCount !== 0 || post.likeCount !== 0 ? (
+              // Show this section unless we're *sure* it has no engagement.
               <View style={[styles.expandedInfo, pal.border]}>
-                {post.repostCount ? (
+                {post.repostCount == null && post.likeCount == null && (
+                  // If we're still loading and not sure, assume this post has engagement.
+                  // This lets us avoid a layout shift for the common case (embedded post with likes/reposts).
+                  // TODO: embeds should include metrics to avoid us having to guess.
+                  <LoadingPlaceholder width={50} height={20} />
+                )}
+                {post.repostCount != null && post.repostCount !== 0 ? (
                   <Link
                     style={styles.expandedInfoItem}
                     href={repostsHref}
@@ -374,10 +380,8 @@ let PostThreadItemLoaded = ({
                       {pluralize(post.repostCount, 'repost')}
                     </Text>
                   </Link>
-                ) : (
-                  <></>
-                )}
-                {post.likeCount ? (
+                ) : null}
+                {post.likeCount != null && post.likeCount !== 0 ? (
                   <Link
                     style={styles.expandedInfoItem}
                     href={likesHref}
@@ -392,13 +396,9 @@ let PostThreadItemLoaded = ({
                       {pluralize(post.likeCount, 'like')}
                     </Text>
                   </Link>
-                ) : (
-                  <></>
-                )}
+                ) : null}
               </View>
-            ) : (
-              <></>
-            )}
+            ) : null}
             <View style={[s.pl10, s.pr10, s.pb5]}>
               <PostCtrls
                 big
-- 
cgit 1.4.1


From a2f462e26195a8a29e8bacfdadda7c5bbef2305f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 16 Feb 2024 13:25:48 -0800
Subject: remove sandbox labels (#2883)

* rm sandbox

* remove comment
---
 src/state/session/index.tsx                 |  6 -----
 src/view/com/feeds/FeedPage.tsx             | 15 +++----------
 src/view/com/pager/FeedsTabBar.web.tsx      | 19 +---------------
 src/view/com/post-thread/PostThreadItem.tsx |  4 ----
 src/view/com/posts/FeedItem.tsx             |  3 ---
 src/view/com/util/PostSandboxWarning.tsx    | 35 -----------------------------
 src/view/shell/desktop/RightNav.tsx         | 12 ++--------
 7 files changed, 6 insertions(+), 88 deletions(-)
 delete mode 100644 src/view/com/util/PostSandboxWarning.tsx

(limited to 'src/view/com/post-thread/PostThreadItem.tsx')

diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx
index b555a997b..bd3b157bc 100644
--- a/src/state/session/index.tsx
+++ b/src/state/session/index.tsx
@@ -7,7 +7,6 @@ import {networkRetry} from '#/lib/async/retry'
 import {logger} from '#/logger'
 import * as persisted from '#/state/persisted'
 import {PUBLIC_BSKY_AGENT} from '#/state/queries'
-import {IS_PROD} from '#/lib/constants'
 import {emitSessionDropped} from '../events'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
@@ -36,7 +35,6 @@ export type SessionState = {
 }
 export type StateContext = SessionState & {
   hasSession: boolean
-  isSandbox: boolean
 }
 export type ApiContext = {
   createAccount: (props: {
@@ -84,7 +82,6 @@ const StateContext = React.createContext<StateContext>({
   accounts: [],
   currentAccount: undefined,
   hasSession: false,
-  isSandbox: false,
 })
 
 const ApiContext = React.createContext<ApiContext>({
@@ -610,9 +607,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     () => ({
       ...state,
       hasSession: !!state.currentAccount,
-      isSandbox: state.currentAccount
-        ? !IS_PROD(state.currentAccount?.service)
-        : false,
     }),
     [state],
   )
diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx
index 9595e77e5..d8da569b1 100644
--- a/src/view/com/feeds/FeedPage.tsx
+++ b/src/view/com/feeds/FeedPage.tsx
@@ -46,7 +46,7 @@ export function FeedPage({
   renderEmptyState: () => JSX.Element
   renderEndOfFeed?: () => JSX.Element
 }) {
-  const {isSandbox, hasSession} = useSession()
+  const {hasSession} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
   const navigation = useNavigation()
@@ -119,7 +119,7 @@ export function FeedPage({
             style={[pal.text, {fontWeight: 'bold'}]}
             text={
               <>
-                {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
+                Bluesky{' '}
                 {hasNew && (
                   <View
                     style={{
@@ -154,16 +154,7 @@ export function FeedPage({
       )
     }
     return <></>
-  }, [
-    isDesktop,
-    pal.view,
-    pal.text,
-    pal.textLight,
-    hasNew,
-    _,
-    isSandbox,
-    hasSession,
-  ])
+  }, [isDesktop, pal.view, pal.text, pal.textLight, hasNew, _, hasSession])
 
   return (
     <View testID={testID} style={s.h100pct}>
diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx
index 9fe03b7e9..fb52b913a 100644
--- a/src/view/com/pager/FeedsTabBar.web.tsx
+++ b/src/view/com/pager/FeedsTabBar.web.tsx
@@ -37,7 +37,6 @@ export function FeedsTabBar(
 
 function FeedsTabBarPublic() {
   const pal = usePalette('default')
-  const {isSandbox} = useSession()
 
   return (
     <CenteredView sideBorders>
@@ -56,23 +55,7 @@ function FeedsTabBarPublic() {
           type="title-lg"
           href="/"
           style={[pal.text, {fontWeight: 'bold'}]}
-          text={
-            <>
-              {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
-              {/*hasNew && (
-                <View
-                  style={{
-                    top: -8,
-                    backgroundColor: colors.blue3,
-                    width: 8,
-                    height: 8,
-                    borderRadius: 4,
-                  }}
-                />
-              )*/}
-            </>
-          }
-          // onPress={emitSoftReset}
+          text="Bluesky "
         />
       </View>
     </CenteredView>
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index ced6d0d60..f9bdaebed 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -27,7 +27,6 @@ import {PostCtrls} from '../util/post-ctrls/PostCtrls'
 import {PostHider} from '../util/moderation/PostHider'
 import {ContentHider} from '../util/moderation/ContentHider'
 import {PostAlerts} from '../util/moderation/PostAlerts'
-import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 import {formatCount} from '../util/numeric/format'
@@ -247,7 +246,6 @@ let PostThreadItemLoaded = ({
           testID={`postThreadItem-by-${post.author.handle}`}
           style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
           accessible={false}>
-          <PostSandboxWarning />
           <View style={[styles.layout]}>
             <View style={[styles.layoutAvi, {paddingBottom: 8}]}>
               <PreviewableUserAvatar
@@ -438,8 +436,6 @@ let PostThreadItemLoaded = ({
                 ? {marginRight: 4}
                 : {marginLeft: 2, marginRight: 2}
             }>
-            <PostSandboxWarning />
-
             <View
               style={{
                 flexDirection: 'row',
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 920409ec6..8d0f2bef2 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -21,7 +21,6 @@ import {PostEmbeds} from '../util/post-embeds'
 import {ContentHider} from '../util/moderation/ContentHider'
 import {PostAlerts} from '../util/moderation/PostAlerts'
 import {RichText} from '../util/text/RichText'
-import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import {PreviewableUserAvatar} from '../util/UserAvatar'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -160,8 +159,6 @@ let FeedItemInner = ({
       href={href}
       noFeedback
       accessible={false}>
-      <PostSandboxWarning />
-
       <View style={{flexDirection: 'row', gap: 10, paddingLeft: 8}}>
         <View style={{width: 52}}>
           {isThreadChild && (
diff --git a/src/view/com/util/PostSandboxWarning.tsx b/src/view/com/util/PostSandboxWarning.tsx
deleted file mode 100644
index b2375c703..000000000
--- a/src/view/com/util/PostSandboxWarning.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {Text} from './text/Text'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useSession} from '#/state/session'
-
-export function PostSandboxWarning() {
-  const {isSandbox} = useSession()
-  const pal = usePalette('default')
-  if (isSandbox) {
-    return (
-      <View style={styles.container}>
-        <Text
-          type="title-2xl"
-          style={[pal.text, styles.text]}
-          accessible={false}>
-          SANDBOX
-        </Text>
-      </View>
-    )
-  }
-  return null
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    top: 6,
-    right: 10,
-  },
-  text: {
-    fontWeight: 'bold',
-    opacity: 0.07,
-  },
-})
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 264fef194..c1f498724 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -9,14 +9,13 @@ import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {s} from 'lib/styles'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useSession} from '#/state/session'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
   const pal = usePalette('default')
-  const palError = usePalette('error')
   const {_} = useLingui()
-  const {isSandbox, hasSession, currentAccount} = useSession()
+  const {hasSession, currentAccount} = useSession()
 
   const {isTablet} = useWebMediaQueries()
   if (isTablet) {
@@ -49,13 +48,6 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               paddingTop: hasSession ? 0 : 18,
             },
           ]}>
-          {isSandbox ? (
-            <View style={[palError.view, styles.messageLine, s.p10]}>
-              <Text type="md" style={[palError.text, s.bold]}>
-                <Trans>SANDBOX. Posts and accounts are not permanent.</Trans>
-              </Text>
-            </View>
-          ) : undefined}
           <View style={[{flexWrap: 'wrap'}, s.flexRow]}>
             {hasSession && (
               <>
-- 
cgit 1.4.1

