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/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}>
-                <PostEmbeds embed={item.post.embed} style={s.mb10} />
-              </ContentHider>
+              {item.post.embed ? (
+                <ContentHider moderation={item.moderation.embed} style={s.mb10}>
+                  <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
-              moderation={item.moderation.embed}
-              style={styles.embed}>
-              <PostEmbeds embed={item.post.embed} style={styles.embed} />
-            </ContentHider>
+            {item.post.embed ? (
+              <ContentHider
+                moderation={item.moderation.embed}
+                style={styles.embed}>
+                <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,