Collection of small UI fixes & improvements (#1104)

* Fix black bar appearing in link card images

* Include QPs in posts cache

* Fix like color for feed likes in notifications

* Fix post embed spacing

src/state/models/cache/posts.ts

@@ -1,6 +1,11 @@
 import {LRUMap} from 'lru_map'
 import {RootStoreModel} from '../root-store'
-import {AppBskyFeedDefs} from '@atproto/api'
+import {
+  AppBskyFeedDefs,
+  AppBskyEmbedRecord,
+  AppBskyEmbedRecordWithMedia,
+  AppBskyFeedPost,
+} from '@atproto/api'
 
 type PostView = AppBskyFeedDefs.PostView
 
@@ -27,5 +32,39 @@ export class PostsCache {
     ) {
       this.set(feedItem.reply.parent.uri, feedItem.reply.parent)
     }
+    const embed = feedItem.post.embed
+    if (
+      AppBskyEmbedRecord.isView(embed) &&
+      AppBskyEmbedRecord.isViewRecord(embed.record) &&
+      AppBskyFeedPost.isRecord(embed.record.value) &&
+      AppBskyFeedPost.validateRecord(embed.record.value).success
+    ) {
+      this.set(embed.record.uri, embedViewToPostView(embed.record))
+    }
+    if (
+      AppBskyEmbedRecordWithMedia.isView(embed) &&
+      AppBskyEmbedRecord.isViewRecord(embed.record?.record) &&
+      AppBskyFeedPost.isRecord(embed.record.record.value) &&
+      AppBskyFeedPost.validateRecord(embed.record.record.value).success
+    ) {
+      this.set(
+        embed.record.record.uri,
+        embedViewToPostView(embed.record.record),
+      )
+    }
+  }
+}
+
+function embedViewToPostView(
+  embedView: AppBskyEmbedRecord.ViewRecord,
+): PostView {
+  return {
+    $type: 'app.bsky.feed.post#view',
+    uri: embedView.uri,
+    cid: embedView.cid,
+    author: embedView.author,
+    record: embedView.value,
+    indexedAt: embedView.indexedAt,
+    labels: embedView.labels,
   }
 }

src/view/com/notifications/FeedItem.tsx

@@ -171,7 +171,7 @@ export const FeedItem = observer(function ({
     action = `liked your custom feed '${new AtUri(item.subjectUri).rkey}'`
     icon = 'HeartIconSolid'
     iconStyle = [
-      s.red3 as FontAwesomeIconStyle,
+      s.likeColor as FontAwesomeIconStyle,
       {position: 'relative', top: -4},
     ]
   } else {

src/view/com/post-thread/PostThreadItem.tsx

@@ -252,7 +252,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             ) : undefined}
             {item.post.embed && (
               <ContentHider moderation={item.moderation.embed} style={s.mb10}>
-                <PostEmbeds embed={item.post.embed} style={s.mb10} />
+                <PostEmbeds embed={item.post.embed} />
               </ContentHider>
             )}
           </ContentHider>
@@ -386,7 +386,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               ) : undefined}
               {item.post.embed && (
                 <ContentHider style={s.mb10} moderation={item.moderation.embed}>
-                  <PostEmbeds embed={item.post.embed} style={s.mb10} />
+                  <PostEmbeds embed={item.post.embed} />
                 </ContentHider>
               )}
               {needsTranslation && (

src/view/com/post/Post.tsx

@@ -265,9 +265,11 @@ const PostLoaded = observer(
                   />
                 </View>
               ) : undefined}
-              <ContentHider moderation={item.moderation.embed} style={s.mb10}>
+              {item.post.embed ? (
-                <PostEmbeds embed={item.post.embed} style={s.mb10} />
+                <ContentHider moderation={item.moderation.embed} style={s.mb10}>
-              </ContentHider>
+                  <PostEmbeds embed={item.post.embed} />
+                </ContentHider>
+              ) : null}
               {needsTranslation && (
                 <View style={[pal.borderDark, styles.translateLink]}>
                   <Link href={translatorUrl} title="Translate">

src/view/com/posts/FeedItem.tsx

@@ -289,11 +289,13 @@ export const FeedItem = observer(function ({
                 />
               </View>
             ) : undefined}
-            <ContentHider
+            {item.post.embed ? (
-              moderation={item.moderation.embed}
+              <ContentHider
-              style={styles.embed}>
+                moderation={item.moderation.embed}
-              <PostEmbeds embed={item.post.embed} style={styles.embed} />
+                style={styles.embed}>
-            </ContentHider>
+                <PostEmbeds embed={item.post.embed} />
+              </ContentHider>
+            ) : null}
             {needsTranslation && (
               <View style={[pal.borderDark, styles.translateLink]}>
                 <Link href={translatorUrl} title="Translate">

src/view/com/util/post-embeds/ExternalLinkEmbed.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
+import {Image} from 'expo-image'
 import {Text} from '../text/Text'
-import {AutoSizedImage} from '../images/AutoSizedImage'
 import {StyleSheet, View} from 'react-native'
 import {usePalette} from 'lib/hooks/usePalette'
 import {AppBskyEmbedExternal} from '@atproto/api'
@@ -16,9 +16,14 @@ export const ExternalLinkEmbed = ({
   return (
     <>
       {link.thumb ? (
-        <AutoSizedImage uri={link.thumb} style={styles.extImage}>
+        <View style={styles.extImageContainer}>
+          <Image
+            style={styles.extImage}
+            source={{uri: link.thumb}}
+            accessibilityIgnoresInvertColors
+          />
           {imageChild}
-        </AutoSizedImage>
+        </View>
       ) : undefined}
       <View style={styles.extInner}>
         <Text type="md-bold" numberOfLines={2} style={[pal.text]}>
@@ -47,11 +52,16 @@ const styles = StyleSheet.create({
   extInner: {
     padding: 10,
   },
-  extImage: {
+  extImageContainer: {
     borderTopLeftRadius: 6,
     borderTopRightRadius: 6,
     width: '100%',
-    maxHeight: 200,
+    height: 200,
+    overflow: 'hidden',
+  },
+  extImage: {
+    width: '100%',
+    height: 200,
   },
   extUri: {
     marginTop: 2,