about summary refs log tree commit diff
path: root/src/view
diff options
context:
space:
mode:
Diffstat (limited to 'src/view')
-rw-r--r--src/view/com/composer/Composer.tsx74
-rw-r--r--src/view/com/composer/ComposerReplyTo.tsx4
-rw-r--r--src/view/com/feeds/ProfileFeedgens.tsx4
-rw-r--r--src/view/com/lightbox/ImageViewing/index.tsx18
-rw-r--r--src/view/com/lists/ProfileLists.tsx4
-rw-r--r--src/view/com/pager/DraggableScrollView.tsx23
-rw-r--r--src/view/com/pager/TabBar.tsx29
-rw-r--r--src/view/com/pager/TabBar.web.tsx8
-rw-r--r--src/view/com/posts/ViewFullThread.tsx7
-rw-r--r--src/view/com/util/Toast.tsx2
-rw-r--r--src/view/com/util/Toast.web.tsx7
-rw-r--r--src/view/com/util/forms/NativeDropdown.web.tsx3
-rw-r--r--src/view/com/util/load-latest/LoadLatestBtn.tsx5
-rw-r--r--src/view/shell/bottom-bar/BottomBarStyles.tsx5
-rw-r--r--src/view/shell/desktop/LeftNav.tsx6
-rw-r--r--src/view/shell/index.web.tsx6
16 files changed, 118 insertions, 87 deletions
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index aa27adb3d..b6d269d28 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -118,7 +118,7 @@ import {LazyQuoteEmbed, QuoteX} from '#/view/com/util/post-embeds/QuoteEmbed'
 import {Text} from '#/view/com/util/text/Text'
 import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, native, useTheme} from '#/alf'
+import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
@@ -1266,39 +1266,41 @@ function ComposerFooter({
         a.justify_between,
       ]}>
       <View style={[a.flex_row, a.align_center]}>
-        {video && video.status !== 'done' ? (
-          <VideoUploadToolbar state={video} />
-        ) : (
-          <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
-            <SelectPhotoBtn
-              size={images.length}
-              disabled={media?.type === 'images' ? isMaxImages : !!media}
-              onAdd={onImageAdd}
-            />
-            <SelectVideoBtn
-              onSelectVideo={asset => onSelectVideo(post.id, asset)}
-              disabled={!!media}
-              setError={onError}
-            />
-            <OpenCameraBtn
-              disabled={media?.type === 'images' ? isMaxImages : !!media}
-              onAdd={onImageAdd}
-            />
-            <SelectGifBtn onSelectGif={onSelectGif} disabled={!!media} />
-            {!isMobile ? (
-              <Button
-                onPress={onEmojiButtonPress}
-                style={a.p_sm}
-                label={_(msg`Open emoji picker`)}
-                accessibilityHint={_(msg`Opens emoji picker`)}
-                variant="ghost"
-                shape="round"
-                color="primary">
-                <EmojiSmile size="lg" />
-              </Button>
-            ) : null}
-          </ToolbarWrapper>
-        )}
+        <LayoutAnimationConfig skipEntering skipExiting>
+          {video && video.status !== 'done' ? (
+            <VideoUploadToolbar state={video} />
+          ) : (
+            <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
+              <SelectPhotoBtn
+                size={images.length}
+                disabled={media?.type === 'images' ? isMaxImages : !!media}
+                onAdd={onImageAdd}
+              />
+              <SelectVideoBtn
+                onSelectVideo={asset => onSelectVideo(post.id, asset)}
+                disabled={!!media}
+                setError={onError}
+              />
+              <OpenCameraBtn
+                disabled={media?.type === 'images' ? isMaxImages : !!media}
+                onAdd={onImageAdd}
+              />
+              <SelectGifBtn onSelectGif={onSelectGif} disabled={!!media} />
+              {!isMobile ? (
+                <Button
+                  onPress={onEmojiButtonPress}
+                  style={a.p_sm}
+                  label={_(msg`Open emoji picker`)}
+                  accessibilityHint={_(msg`Opens emoji picker`)}
+                  variant="ghost"
+                  shape="round"
+                  color="primary">
+                  <EmojiSmile size="lg" />
+                </Button>
+              ) : null}
+            </ToolbarWrapper>
+          )}
+        </LayoutAnimationConfig>
       </View>
       <View style={[a.flex_row, a.align_center, a.justify_between]}>
         {showAddButton && (
@@ -1515,10 +1517,10 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     marginLeft: 12,
   },
-  stickyFooterWeb: {
+  stickyFooterWeb: web({
     position: 'sticky',
     bottom: 0,
-  },
+  }),
   errorLine: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx
index 6f1cc4f84..bafac18f5 100644
--- a/src/view/com/composer/ComposerReplyTo.tsx
+++ b/src/view/com/composer/ComposerReplyTo.tsx
@@ -15,7 +15,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
 import {type ComposerOptsPostRef} from '#/state/shell/composer'
 import {MaybeQuoteEmbed} from '#/view/com/util/post-embeds/QuoteEmbed'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -76,7 +76,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
         a.mx_lg,
         a.border_b,
         t.atoms.border_contrast_medium,
-        a.user_select_text,
+        web(a.user_select_text),
       ]}
       onPress={onPress}
       accessibilityRole="button"
diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx
index 2bf95de48..76b57d0ee 100644
--- a/src/view/com/feeds/ProfileFeedgens.tsx
+++ b/src/view/com/feeds/ProfileFeedgens.tsx
@@ -12,7 +12,7 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-import {isNative, isWeb} from '#/platform/detection'
+import {isIOS, isNative, isWeb} from '#/platform/detection'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
 import {EmptyState} from '#/view/com/util/EmptyState'
@@ -175,7 +175,7 @@ export const ProfileFeedgens = React.forwardRef<
   )
 
   React.useEffect(() => {
-    if (enabled && scrollElRef.current) {
+    if (isIOS && enabled && scrollElRef.current) {
       const nativeTag = findNodeHandle(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index 41a54eba6..bb3c39f59 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -510,20 +510,22 @@ function LightboxImage({
           // This is a bug in Reanimated, but for now we'll work around it like this.
           dismissSwipeTranslateY.set(1)
         }
-        dismissSwipeTranslateY.set(() =>
-          withDecay({
+        dismissSwipeTranslateY.set(() => {
+          'worklet'
+          return withDecay({
             velocity: e.velocityY,
             velocityFactor: Math.max(3500 / Math.abs(e.velocityY), 1), // Speed up if it's too slow.
             deceleration: 1, // Danger! This relies on the reaction below stopping it.
-          }),
-        )
+          })
+        })
       } else {
-        dismissSwipeTranslateY.set(() =>
-          withSpring(0, {
+        dismissSwipeTranslateY.set(() => {
+          'worklet'
+          return withSpring(0, {
             stiffness: 700,
             damping: 50,
-          }),
-        )
+          })
+        })
       }
     })
 
diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx
index 437648c62..e264bd6c6 100644
--- a/src/view/com/lists/ProfileLists.tsx
+++ b/src/view/com/lists/ProfileLists.tsx
@@ -12,7 +12,7 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-import {isNative, isWeb} from '#/platform/detection'
+import {isIOS, isNative, isWeb} from '#/platform/detection'
 import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
@@ -171,7 +171,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
     )
 
     React.useEffect(() => {
-      if (enabled && scrollElRef.current) {
+      if (isIOS && enabled && scrollElRef.current) {
         const nativeTag = findNodeHandle(scrollElRef.current)
         setScrollViewTag(nativeTag)
       }
diff --git a/src/view/com/pager/DraggableScrollView.tsx b/src/view/com/pager/DraggableScrollView.tsx
index fc06b72e8..c98e34054 100644
--- a/src/view/com/pager/DraggableScrollView.tsx
+++ b/src/view/com/pager/DraggableScrollView.tsx
@@ -1,16 +1,25 @@
-import React, {ComponentProps} from 'react'
+import {type ComponentPropsWithRef} from 'react'
 import {ScrollView} from 'react-native'
 
 import {useDraggableScroll} from '#/lib/hooks/useDraggableScrollView'
+import {atoms as a, web} from '#/alf'
 
-export const DraggableScrollView = React.forwardRef<
-  ScrollView,
-  ComponentProps<typeof ScrollView>
->(function DraggableScrollView(props, ref) {
+export function DraggableScrollView({
+  ref,
+  style,
+  ...props
+}: ComponentPropsWithRef<typeof ScrollView>) {
   const {refs} = useDraggableScroll<ScrollView>({
     outerRef: ref,
     cursor: 'grab', // optional, default
   })
 
-  return <ScrollView ref={refs} horizontal {...props} />
-})
+  return (
+    <ScrollView
+      ref={refs}
+      style={[style, web(a.user_select_none)]}
+      horizontal
+      {...props}
+    />
+  )
+}
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
index 49f8ead80..04803fa9b 100644
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@@ -1,11 +1,16 @@
 import {useCallback} from 'react'
-import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native'
+import {
+  type LayoutChangeEvent,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native'
 import Animated, {
   interpolate,
   runOnJS,
   runOnUI,
   scrollTo,
-  SharedValue,
+  type SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
@@ -267,15 +272,27 @@ export function TabBar({
         {
           translateX: interpolate(
             dragProgress.get(),
-            layoutsValue.map((l, i) => i),
-            layoutsValue.map(l => l.x + l.width / 2 - contentSize.get() / 2),
+            layoutsValue.map((l, i) => {
+              'worklet'
+              return i
+            }),
+            layoutsValue.map(l => {
+              'worklet'
+              return l.x + l.width / 2 - contentSize.get() / 2
+            }),
           ),
         },
         {
           scaleX: interpolate(
             dragProgress.get(),
-            textLayoutsValue.map((l, i) => i),
-            textLayoutsValue.map((l, i) => getScaleX(i)),
+            textLayoutsValue.map((l, i) => {
+              'worklet'
+              return i
+            }),
+            textLayoutsValue.map((l, i) => {
+              'worklet'
+              return getScaleX(i)
+            }),
           ),
         },
       ],
diff --git a/src/view/com/pager/TabBar.web.tsx b/src/view/com/pager/TabBar.web.tsx
index d44b7b60c..8afea0019 100644
--- a/src/view/com/pager/TabBar.web.tsx
+++ b/src/view/com/pager/TabBar.web.tsx
@@ -1,7 +1,7 @@
 import {useCallback, useEffect, useRef} from 'react'
-import {ScrollView, StyleSheet, View} from 'react-native'
+import {type ScrollView, StyleSheet, View} from 'react-native'
 
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Text} from '#/components/Typography'
 import {PressableWithHover} from '../util/PressableWithHover'
 import {DraggableScrollView} from './DraggableScrollView'
@@ -161,7 +161,7 @@ const desktopStyles = StyleSheet.create({
   },
   itemInner: {
     alignItems: 'center',
-    overflowX: 'hidden',
+    ...web({overflowX: 'hidden'}),
   },
   itemText: {
     textAlign: 'center',
@@ -204,7 +204,7 @@ const mobileStyles = StyleSheet.create({
   itemInner: {
     flexGrow: 1,
     alignItems: 'center',
-    overflowX: 'hidden',
+    ...web({overflowX: 'hidden'}),
   },
   itemText: {
     textAlign: 'center',
diff --git a/src/view/com/posts/ViewFullThread.tsx b/src/view/com/posts/ViewFullThread.tsx
index 0b347f22c..0f083c330 100644
--- a/src/view/com/posts/ViewFullThread.tsx
+++ b/src/view/com/posts/ViewFullThread.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import Svg, {Circle, Line} from 'react-native-svg'
 import {AtUri} from '@atproto/api'
-import {Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {makeProfileLink} from '#/lib/routes/links'
@@ -22,6 +23,7 @@ export function ViewFullThread({uri}: {uri: string}) {
     const urip = new AtUri(uri)
     return makeProfileLink({did: urip.hostname, handle: ''}, 'post', urip.rkey)
   }, [uri])
+  const {_} = useLingui()
 
   return (
     <Link
@@ -53,7 +55,8 @@ export function ViewFullThread({uri}: {uri: string}) {
       </View>
 
       <Text type="md" style={[pal.link, {paddingTop: 18, paddingBottom: 4}]}>
-        <Trans>View full thread</Trans>
+        {/* HACKFIX: Trans isn't working after SDK 53 upgrade -sfn */}
+        {_(msg`View full thread`)}
       </Text>
     </Link>
   )
diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx
index b18ea4b4f..56c6780ad 100644
--- a/src/view/com/util/Toast.tsx
+++ b/src/view/com/util/Toast.tsx
@@ -19,7 +19,7 @@ import RootSiblings from 'react-native-root-siblings'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
   FontAwesomeIcon,
-  Props as FontAwesomeProps,
+  type Props as FontAwesomeProps,
 } from '@fortawesome/react-native-fontawesome'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx
index 96798e61c..7e22fcefc 100644
--- a/src/view/com/util/Toast.web.tsx
+++ b/src/view/com/util/Toast.web.tsx
@@ -2,13 +2,14 @@
  * Note: the dataSet properties are used to leverage custom CSS in public/index.html
  */
 
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {Pressable, StyleSheet, Text, View} from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
-  Props as FontAwesomeProps,
+  type FontAwesomeIconStyle,
+  type Props as FontAwesomeProps,
 } from '@fortawesome/react-native-fontawesome'
+import type React from 'react'
 
 const DURATION = 3500
 
diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx
index 9b4a84e05..cab7bac51 100644
--- a/src/view/com/util/forms/NativeDropdown.web.tsx
+++ b/src/view/com/util/forms/NativeDropdown.web.tsx
@@ -239,7 +239,6 @@ const getKey = (label: string, index: number, id?: string) => {
   return `${label}_${index}`
 }
 
-// @ts-expect-error - web only styles. the only style that should be broken here is `outline`
 const styles = StyleSheet.create({
   separator: {
     height: 1,
@@ -264,7 +263,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     columnGap: 20,
-    // @ts-ignore -web
     cursor: 'pointer',
     paddingTop: 8,
     paddingBottom: 8,
@@ -273,6 +271,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     fontFamily:
       '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
+    // @ts-expect-error web only
     outline: 0,
     border: 0,
   },
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
index 89e5784b7..f991991b0 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx
@@ -12,9 +12,8 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
 import {useGate} from '#/lib/statsig/statsig'
 import {colors} from '#/lib/styles'
-import {isWeb} from '#/platform/detection'
 import {useSession} from '#/state/session'
-import {useLayoutBreakpoints} from '#/alf'
+import {atoms as a, useLayoutBreakpoints} from '#/alf'
 
 export function LoadLatestBtn({
   onPress,
@@ -80,7 +79,7 @@ export function LoadLatestBtn({
 const styles = StyleSheet.create({
   loadLatest: {
     zIndex: 20,
-    position: isWeb ? 'fixed' : 'absolute',
+    ...a.fixed,
     left: 18,
     borderWidth: StyleSheet.hairlineWidth,
     width: 52,
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index 62c677ced..c5f31c94e 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -1,6 +1,7 @@
 import {StyleSheet} from 'react-native'
 
 import {colors} from '#/lib/styles'
+import {atoms as a} from '#/alf'
 
 export const styles = StyleSheet.create({
   bottomBar: {
@@ -13,9 +14,7 @@ export const styles = StyleSheet.create({
     paddingLeft: 5,
     paddingRight: 10,
   },
-  bottomBarWeb: {
-    position: 'fixed',
-  },
+  bottomBarWeb: a.fixed,
   ctrl: {
     flex: 1,
     paddingTop: 13,
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 7d7c0ac8d..0688fb5dc 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -32,7 +32,7 @@ import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {atoms as a, tokens, useLayoutBreakpoints, useTheme} from '#/alf'
+import {atoms as a, tokens, useLayoutBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {type DialogControlProps} from '#/components/Dialog'
 import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
@@ -718,7 +718,7 @@ export function DesktopLeftNav() {
 
 const styles = StyleSheet.create({
   leftNav: {
-    position: 'fixed',
+    ...a.fixed,
     top: 0,
     paddingTop: 10,
     paddingBottom: 10,
@@ -736,7 +736,7 @@ const styles = StyleSheet.create({
     height: '100%',
     width: 86,
     alignItems: 'center',
-    overflowX: 'hidden',
+    ...web({overflowX: 'hidden'}),
   },
   backBtn: {
     position: 'absolute',
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index e194a49de..898ff8fa8 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -8,7 +8,7 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {colors} from '#/lib/styles'
 import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
@@ -130,7 +130,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.black, // TODO
   },
   drawerMask: {
-    position: 'fixed',
+    ...a.fixed,
     width: '100%',
     height: '100%',
     top: 0,
@@ -138,7 +138,7 @@ const styles = StyleSheet.create({
   },
   drawerContainer: {
     display: 'flex',
-    position: 'fixed',
+    ...a.fixed,
     top: 0,
     left: 0,
     height: '100%',
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-14 01:32:53 +0000