Merge branch 'mozzius-expand-author-pressable' into main

src/view/com/notifications/FeedItem.tsx

@@ -22,7 +22,7 @@ import {
 import {NotificationsFeedItemModel} from 'state/models/feeds/notifications'
 import {PostThreadModel} from 'state/models/content/post-thread'
 import {s, colors} from 'lib/styles'
-import {ago} from 'lib/strings/time'
+import {niceDate} from 'lib/strings/time'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {pluralize} from 'lib/strings/helpers'
@@ -38,6 +38,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {formatCount} from '../util/numeric/format'
 import {makeProfileLink} from 'lib/routes/links'
+import {TimeElapsed} from '../util/TimeElapsed'
 
 const MAX_AUTHORS = 5
 
@@ -88,7 +89,7 @@ export const FeedItem = observer(function FeedItemImpl({
   }, [item])
 
   const onToggleAuthorsExpanded = () => {
-    setAuthorsExpanded(!isAuthorsExpanded)
+    setAuthorsExpanded(currentlyExpanded => !currentlyExpanded)
   }
 
   const authors: Author[] = useMemo(() => {
@@ -179,7 +180,6 @@ export const FeedItem = observer(function FeedItemImpl({
   }
 
   return (
-    // eslint-disable-next-line react-native-a11y/no-nested-touchables
     <Link
       testID={`feedItem-by-${item.author.handle}`}
       style={[
@@ -211,9 +211,9 @@ export const FeedItem = observer(function FeedItemImpl({
         )}
       </View>
       <View style={styles.layoutContent}>
-        <Pressable
+        <ExpandListPressable
-          onPress={authors.length > 1 ? onToggleAuthorsExpanded : undefined}
+          hasMultipleAuthors={authors.length > 1}
-          accessible={false}>
+          onToggleAuthorsExpanded={onToggleAuthorsExpanded}>
           <CondensedAuthorsList
             visible={!isAuthorsExpanded}
             authors={authors}
@@ -239,9 +239,17 @@ export const FeedItem = observer(function FeedItemImpl({
               </>
             ) : undefined}
             <Text style={[pal.text]}> {action}</Text>
-            <Text style={[pal.textLight]}> {ago(item.indexedAt)}</Text>
+            <TimeElapsed timestamp={item.indexedAt}>
+              {({timeElapsed}) => (
+                <Text
+                  style={[pal.textLight, styles.pointer]}
+                  title={niceDate(item.indexedAt)}>
+                  {' ' + timeElapsed}
+                </Text>
+              )}
+            </TimeElapsed>
           </Text>
-        </Pressable>
+        </ExpandListPressable>
         {item.isLike || item.isRepost || item.isQuote ? (
           <AdditionalPostText additionalPost={item.additionalPost} />
         ) : null}
@@ -250,6 +258,29 @@ export const FeedItem = observer(function FeedItemImpl({
   )
 })
 
+function ExpandListPressable({
+  hasMultipleAuthors,
+  children,
+  onToggleAuthorsExpanded,
+}: {
+  hasMultipleAuthors: boolean
+  children: React.ReactNode
+  onToggleAuthorsExpanded: () => void
+}) {
+  if (hasMultipleAuthors) {
+    return (
+      <Pressable
+        onPress={onToggleAuthorsExpanded}
+        style={[styles.expandedAuthorsTrigger]}
+        accessible={false}>
+        {children}
+      </Pressable>
+    )
+  } else {
+    return <>{children}</>
+  }
+}
+
 function CondensedAuthorsList({
   visible,
   authors,
@@ -419,6 +450,10 @@ const styles = StyleSheet.create({
   overflowHidden: {
     overflow: 'hidden',
   },
+  pointer: {
+    // @ts-ignore web only
+    cursor: 'pointer',
+  },
 
   outer: {
     padding: 10,
@@ -466,7 +501,9 @@ const styles = StyleSheet.create({
     paddingTop: 4,
     paddingLeft: 36,
   },
-
+  expandedAuthorsTrigger: {
+    zIndex: 1,
+  },
   expandedAuthorsCloseBtn: {
     flexDirection: 'row',
     alignItems: 'center',