about summary refs log tree commit diff
path: root/src/view/com/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/util')
-rw-r--r--src/view/com/util/AccountDropdownBtn.tsx2
-rw-r--r--src/view/com/util/LoadingPlaceholder.tsx9
-rw-r--r--src/view/com/util/UserAvatar.tsx8
-rw-r--r--src/view/com/util/UserBanner.tsx2
-rw-r--r--src/view/com/util/ViewHeader.tsx10
-rw-r--r--src/view/com/util/Views.d.ts1
-rw-r--r--src/view/com/util/Views.jsx9
-rw-r--r--src/view/com/util/Views.tsx1
-rw-r--r--src/view/com/util/Views.web.tsx60
-rw-r--r--src/view/com/util/load-latest/LoadLatestBtn.tsx4
-rw-r--r--src/view/com/util/moderation/PostHider.tsx2
-rw-r--r--src/view/com/util/moderation/ProfileHeaderAlerts.tsx2
-rw-r--r--src/view/com/util/post-embeds/CustomFeedEmbed.tsx15
-rw-r--r--src/view/com/util/post-embeds/index.tsx2
14 files changed, 77 insertions, 50 deletions
diff --git a/src/view/com/util/AccountDropdownBtn.tsx b/src/view/com/util/AccountDropdownBtn.tsx
index 761fec216..29571696b 100644
--- a/src/view/com/util/AccountDropdownBtn.tsx
+++ b/src/view/com/util/AccountDropdownBtn.tsx
@@ -25,7 +25,7 @@ export function AccountDropdownBtn({handle}: {handle: string}) {
           name: 'trash',
         },
         android: 'ic_delete',
-        web: 'trash',
+        web: ['far', 'trash-can'],
       },
     },
   ]
diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx
index d7ab1be54..461cbcbe5 100644
--- a/src/view/com/util/LoadingPlaceholder.tsx
+++ b/src/view/com/util/LoadingPlaceholder.tsx
@@ -83,19 +83,14 @@ export function PostLoadingPlaceholder({
 
 export function PostFeedLoadingPlaceholder() {
   return (
-    <>
-      <PostLoadingPlaceholder />
-      <PostLoadingPlaceholder />
-      <PostLoadingPlaceholder />
+    <View>
       <PostLoadingPlaceholder />
       <PostLoadingPlaceholder />
       <PostLoadingPlaceholder />
       <PostLoadingPlaceholder />
       <PostLoadingPlaceholder />
       <PostLoadingPlaceholder />
-      <PostLoadingPlaceholder />
-      <PostLoadingPlaceholder />
-    </>
+    </View>
   )
 }
 
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index fbc0b5e11..7b23547c6 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -17,10 +17,10 @@ import {Image as RNImage} from 'react-native-image-crop-picker'
 import {UserPreviewLink} from './UserPreviewLink'
 import {DropdownItem, NativeDropdown} from './forms/NativeDropdown'
 
-type Type = 'user' | 'algo' | 'list'
+export type UserAvatarType = 'user' | 'algo' | 'list'
 
 interface BaseUserAvatarProps {
-  type?: Type
+  type?: UserAvatarType
   size: number
   avatar?: string | null
 }
@@ -41,7 +41,7 @@ interface PreviewableUserAvatarProps extends BaseUserAvatarProps {
 
 const BLUR_AMOUNT = isWeb ? 5 : 100
 
-function DefaultAvatar({type, size}: {type: Type; size: number}) {
+function DefaultAvatar({type, size}: {type: UserAvatarType; size: number}) {
   if (type === 'algo') {
     // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
     return (
@@ -261,7 +261,7 @@ export function EditableUserAvatar({
               name: 'trash',
             },
             android: 'ic_delete',
-            web: 'trash',
+            web: ['far', 'trash-can'],
           },
           onPress: async () => {
             onSelectNewAvatar(null)
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 9a99dc5ad..4bdfad06c 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -91,7 +91,7 @@ export function UserBanner({
               name: 'trash',
             },
             android: 'ic_delete',
-            web: 'trash',
+            web: ['far', 'trash-can'],
           },
           onPress: () => {
             onSelectNewBanner?.(null)
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index ec459b4eb..4cc9efb78 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -124,7 +124,6 @@ function DesktopWebHeader({
     <CenteredView
       style={[
         styles.header,
-        styles.headerFixed,
         styles.desktopHeader,
         pal.border,
         {
@@ -158,7 +157,6 @@ const Container = observer(function ContainerImpl({
       <View
         style={[
           styles.header,
-          styles.headerFixed,
           pal.view,
           pal.border,
           showBorder && styles.border,
@@ -190,11 +188,6 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     width: '100%',
   },
-  headerFixed: {
-    maxWidth: 600,
-    marginLeft: 'auto',
-    marginRight: 'auto',
-  },
   headerFloating: {
     position: 'absolute',
     top: 0,
@@ -202,6 +195,9 @@ const styles = StyleSheet.create({
   },
   desktopHeader: {
     paddingVertical: 12,
+    maxWidth: 600,
+    marginLeft: 'auto',
+    marginRight: 'auto',
   },
   border: {
     borderBottomWidth: 1,
diff --git a/src/view/com/util/Views.d.ts b/src/view/com/util/Views.d.ts
new file mode 100644
index 000000000..292a985cd
--- /dev/null
+++ b/src/view/com/util/Views.d.ts
@@ -0,0 +1 @@
+export {FlatList, ScrollView, View as CenteredView} from 'react-native'
diff --git a/src/view/com/util/Views.jsx b/src/view/com/util/Views.jsx
new file mode 100644
index 000000000..8a93ce511
--- /dev/null
+++ b/src/view/com/util/Views.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import {View} from 'react-native'
+import Animated from 'react-native-reanimated'
+
+export const FlatList = Animated.FlatList
+export const ScrollView = Animated.ScrollView
+export function CenteredView(props) {
+  return <View {...props} />
+}
diff --git a/src/view/com/util/Views.tsx b/src/view/com/util/Views.tsx
deleted file mode 100644
index 07dcc4deb..000000000
--- a/src/view/com/util/Views.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export {View as CenteredView, FlatList, ScrollView} from 'react-native'
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index fda0a9b86..1c2edc0cc 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -14,9 +14,7 @@
 
 import React from 'react'
 import {
-  FlatList as RNFlatList,
   FlatListProps,
-  ScrollView as RNScrollView,
   ScrollViewProps,
   StyleSheet,
   View,
@@ -25,16 +23,29 @@ import {
 import {addStyle} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import Animated from 'react-native-reanimated'
 
 interface AddedProps {
-  desktopFixedHeight?: boolean
+  desktopFixedHeight?: boolean | number
 }
 
 export function CenteredView({
   style,
+  sideBorders,
   ...props
-}: React.PropsWithChildren<ViewProps>) {
-  style = addStyle(style, styles.container)
+}: React.PropsWithChildren<ViewProps & {sideBorders?: boolean}>) {
+  const pal = usePalette('default')
+  const {isMobile} = useWebMediaQueries()
+  if (!isMobile) {
+    style = addStyle(style, styles.container)
+  }
+  if (sideBorders) {
+    style = addStyle(style, {
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+    })
+    style = addStyle(style, pal.border)
+  }
   return <View style={style} {...props} />
 }
 
@@ -46,14 +57,16 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
     desktopFixedHeight,
     ...props
   }: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
-  ref: React.Ref<RNFlatList>,
+  ref: React.Ref<Animated.FlatList<ItemT>>,
 ) {
   const pal = usePalette('default')
   const {isMobile} = useWebMediaQueries()
-  contentContainerStyle = addStyle(
-    contentContainerStyle,
-    styles.containerScroll,
-  )
+  if (!isMobile) {
+    contentContainerStyle = addStyle(
+      contentContainerStyle,
+      styles.containerScroll,
+    )
+  }
   if (contentOffset && contentOffset?.y !== 0) {
     // NOTE
     // we use paddingTop & contentOffset to space around the floating header
@@ -68,7 +81,14 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
     })
   }
   if (desktopFixedHeight) {
-    style = addStyle(style, styles.fixedHeight)
+    if (typeof desktopFixedHeight === 'number') {
+      // @ts-ignore Web only -prf
+      style = addStyle(style, {
+        height: `calc(100vh - ${desktopFixedHeight}px)`,
+      })
+    } else {
+      style = addStyle(style, styles.fixedHeight)
+    }
     if (!isMobile) {
       // NOTE
       // react native web produces *three* wrapping divs
@@ -85,7 +105,7 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
     }
   }
   return (
-    <RNFlatList
+    <Animated.FlatList
       ref={ref}
       contentContainerStyle={[
         contentContainerStyle,
@@ -101,21 +121,25 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
 
 export const ScrollView = React.forwardRef(function ScrollViewImpl(
   {contentContainerStyle, ...props}: React.PropsWithChildren<ScrollViewProps>,
-  ref: React.Ref<RNScrollView>,
+  ref: React.Ref<Animated.ScrollView>,
 ) {
   const pal = usePalette('default')
 
-  contentContainerStyle = addStyle(
-    contentContainerStyle,
-    styles.containerScroll,
-  )
+  const {isMobile} = useWebMediaQueries()
+  if (!isMobile) {
+    contentContainerStyle = addStyle(
+      contentContainerStyle,
+      styles.containerScroll,
+    )
+  }
   return (
-    <RNScrollView
+    <Animated.ScrollView
       contentContainerStyle={[
         contentContainerStyle,
         pal.border,
         styles.contentContainer,
       ]}
+      // @ts-ignore something is wrong with the reanimated types -prf
       ref={ref}
       {...props}
     />
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
index b16a42396..f9a9387bb 100644
--- a/src/view/com/util/load-latest/LoadLatestBtn.tsx
+++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx
@@ -10,6 +10,7 @@ import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import Animated from 'react-native-reanimated'
 const AnimatedTouchableOpacity =
   Animated.createAnimatedComponent(TouchableOpacity)
+import {isWeb} from 'platform/detection'
 
 export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
   onPress,
@@ -47,7 +48,8 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
 
 const styles = StyleSheet.create({
   loadLatest: {
-    position: 'absolute',
+    // @ts-ignore 'fixed' is web only -prf
+    position: isWeb ? 'fixed' : 'absolute',
     left: 18,
     bottom: 44,
     borderWidth: 1,
diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx
index 443885dfa..d224286b0 100644
--- a/src/view/com/util/moderation/PostHider.tsx
+++ b/src/view/com/util/moderation/PostHider.tsx
@@ -74,7 +74,7 @@ export function PostHider({
           accessibilityHint="">
           <ShieldExclamation size={18} style={pal.text} />
         </Pressable>
-        <Text type="lg" style={pal.text}>
+        <Text type="lg" style={[{flex: 1}, pal.text]} numberOfLines={1}>
           {desc.name}
         </Text>
         {!moderation.noOverride && (
diff --git a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx b/src/view/com/util/moderation/ProfileHeaderAlerts.tsx
index b7781e06d..6b7f4e7ec 100644
--- a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx
+++ b/src/view/com/util/moderation/ProfileHeaderAlerts.tsx
@@ -45,7 +45,7 @@ export function ProfileHeaderAlerts({
             accessibilityHint=""
             style={[styles.container, pal.viewLight, style]}>
             <ShieldExclamation style={pal.text} size={24} />
-            <Text type="lg" style={pal.text}>
+            <Text type="lg" style={[{flex: 1}, pal.text]}>
               {desc.name}
             </Text>
             <Text type="lg" style={[pal.link, styles.learnMoreBtn]}>
diff --git a/src/view/com/util/post-embeds/CustomFeedEmbed.tsx b/src/view/com/util/post-embeds/CustomFeedEmbed.tsx
index 5abdf2f77..624157436 100644
--- a/src/view/com/util/post-embeds/CustomFeedEmbed.tsx
+++ b/src/view/com/util/post-embeds/CustomFeedEmbed.tsx
@@ -3,8 +3,8 @@ import {AppBskyFeedDefs} from '@atproto/api'
 import {usePalette} from 'lib/hooks/usePalette'
 import {StyleSheet} from 'react-native'
 import {useStores} from 'state/index'
-import {CustomFeedModel} from 'state/models/feeds/custom-feed'
-import {CustomFeed} from 'view/com/feeds/CustomFeed'
+import {FeedSourceModel} from 'state/models/content/feed-source'
+import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
 
 export function CustomFeedEmbed({
   record,
@@ -13,12 +13,13 @@ export function CustomFeedEmbed({
 }) {
   const pal = usePalette('default')
   const store = useStores()
-  const item = useMemo(
-    () => new CustomFeedModel(store, record),
-    [store, record],
-  )
+  const item = useMemo(() => {
+    const model = new FeedSourceModel(store, record.uri)
+    model.hydrateFeedGenerator(record)
+    return model
+  }, [store, record])
   return (
-    <CustomFeed
+    <FeedSourceCard
       item={item}
       style={[pal.view, pal.border, styles.customFeedOuter]}
       showLikes
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 2d79eed8f..6c13bc2bb 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -75,7 +75,7 @@ export function PostEmbeds({
       return <CustomFeedEmbed record={embed.record} />
     }
 
-    // list embed (e.g. mute lists; i.e. ListView)
+    // list embed
     if (AppBskyGraphDefs.isListView(embed.record)) {
       return <ListEmbed item={embed.record} />
     }
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 14:40:20 +0000