Update threads to use design system

6 files changed, 63 insertions, 137 deletions

diff --git a/src/state/models/post-thread-view.ts b/src/state/models/post-thread-view.ts
index f0f0d5ef3..f8065bb20 100644
--- a/src/state/models/post-thread-view.ts
+++ b/src/state/models/post-thread-view.ts
@@ -16,18 +16,6 @@ function* reactKeyGenerator(): Generator<string> {
   }
 }
 
-interface ReplyingTo {
-  author: {
-    handle: string
-    displayName?: string
-    avatar?: string
-  }
-  text: string
-}
-interface OriginalRecord {
-  text: string
-}
-
 function isThreadViewPost(
   v: GetPostThread.ThreadViewPost | GetPostThread.NotFoundPost | UnknownPost,
 ): v is GetPostThread.ThreadViewPost {
@@ -51,9 +39,6 @@ export class PostThreadViewPostModel {
   parent?: PostThreadViewPostModel | GetPostThread.NotFoundPost
   replies?: (PostThreadViewPostModel | GetPostThread.NotFoundPost)[]
 
-  // added data
-  replyingTo?: ReplyingTo
-
   constructor(
     public rootStore: RootStoreModel,
     reactKey: string,
@@ -70,7 +55,6 @@ export class PostThreadViewPostModel {
     v: GetPostThread.ThreadViewPost,
     includeParent = true,
     includeChildren = true,
-    isFirstChild = true,
   ) {
     // parents
     if (includeParent && v.parent) {
@@ -89,25 +73,9 @@ export class PostThreadViewPostModel {
         this.parent = v.parent
       }
     }
-    if (
-      !includeParent &&
-      v.parent &&
-      isThreadViewPost(v.parent) &&
-      !isFirstChild
-    ) {
-      this.replyingTo = {
-        author: {
-          handle: v.parent.post.author.handle,
-          displayName: v.parent.post.author.displayName,
-          avatar: v.parent.post.author.avatar,
-        },
-        text: (v.parent.record as OriginalRecord).text,
-      }
-    }
     // replies
     if (includeChildren && v.replies) {
       const replies = []
-      let isChildFirstChild = true
       for (const item of v.replies) {
         if (isThreadViewPost(item)) {
           const itemModel = new PostThreadViewPostModel(
@@ -117,15 +85,8 @@ export class PostThreadViewPostModel {
           )
           itemModel._depth = this._depth + 1
           if (item.replies) {
-            itemModel.assignTreeModels(
-              keyGen,
-              item,
-              false,
-              true,
-              isChildFirstChild,
-            )
+            itemModel.assignTreeModels(keyGen, item, false, true)
           }
-          isChildFirstChild = false
           replies.push(itemModel)
         } else if (isNotFoundPost(item)) {
           replies.push(item)
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 53d882b82..de0f9570b 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -12,16 +12,16 @@ import {Text} from '../util/text/Text'
 import {PostDropdownBtn} from '../util/forms/DropdownButton'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s} from '../../lib/styles'
 import {ago, pluralize} from '../../../lib/strings'
 import {useStores} from '../../../state'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/PostEmbeds'
 import {PostCtrls} from '../util/PostCtrls'
 import {ComposePrompt} from '../composer/Prompt'
+import {usePalette} from '../../lib/hooks/usePalette'
 
 const PARENT_REPLY_LINE_LENGTH = 8
-const REPLYING_TO_LINE_LENGTH = 6
 
 export const PostThreadItem = observer(function PostThreadItem({
   item,
@@ -30,6 +30,7 @@ export const PostThreadItem = observer(function PostThreadItem({
   item: PostThreadViewPostModel
   onPostReply: () => void
 }) {
+  const pal = usePalette('default')
   const store = useStores()
   const [deleted, setDeleted] = useState(false)
   const record = item.post.record as unknown as AppBskyFeedPost.Record
@@ -97,9 +98,12 @@ export const PostThreadItem = observer(function PostThreadItem({
 
   if (deleted) {
     return (
-      <View style={[styles.outer, s.p20, s.flexRow]}>
-        <FontAwesomeIcon icon={['far', 'trash-can']} style={[s.gray4]} />
-        <Text style={[s.gray5, s.ml10]}>This post has been deleted.</Text>
+      <View style={[styles.outer, pal.view, s.p20, s.flexRow]}>
+        <FontAwesomeIcon
+          icon={['far', 'trash-can']}
+          style={{color: pal.colors.icon}}
+        />
+        <Text style={[pal.textLight, s.ml10]}>This post has been deleted.</Text>
       </View>
     )
   }
@@ -107,7 +111,8 @@ export const PostThreadItem = observer(function PostThreadItem({
   if (item._isHighlightedPost) {
     return (
       <>
-        <View style={styles.outer}>
+        <View
+          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}>
           <View style={styles.layout}>
             <View style={styles.layoutAvi}>
               <Link href={authorHref} title={authorTitle}>
@@ -125,11 +130,11 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.metaItem}
                   href={authorHref}
                   title={authorTitle}>
-                  <Text style={[s.f16, s.bold, s.black]} numberOfLines={1}>
+                  <Text type="h5" style={[pal.text]} numberOfLines={1}>
                     {item.post.author.displayName || item.post.author.handle}
                   </Text>
                 </Link>
-                <Text style={[styles.metaItem, s.f15, s.gray5]}>
+                <Text type="h6" style={[styles.metaItem, pal.textLight]}>
                   &middot; {ago(item.post.indexedAt)}
                 </Text>
                 <View style={s.flex1} />
@@ -152,7 +157,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.metaItem}
                   href={authorHref}
                   title={authorTitle}>
-                  <Text style={[s.f15, s.gray5]} numberOfLines={1}>
+                  <Text type="h6" style={[pal.textLight]} numberOfLines={1}>
                     @{item.post.author.handle}
                   </Text>
                 </Link>
@@ -167,22 +172,23 @@ export const PostThreadItem = observer(function PostThreadItem({
                   styles.postTextLargeContainer,
                 ]}>
                 <RichText
+                  type="h3"
                   text={record.text}
                   entities={record.entities}
-                  style={[styles.postText, styles.postTextLarge]}
                 />
               </View>
             ) : undefined}
             <PostEmbeds embed={item.post.embed} style={s.mb10} />
             {item._isHighlightedPost && hasEngagement ? (
-              <View style={styles.expandedInfo}>
+              <View
+                style={[styles.expandedInfo, {borderColor: pal.colors.border}]}>
                 {item.post.repostCount ? (
                   <Link
                     style={styles.expandedInfoItem}
                     href={repostsHref}
                     title={repostsTitle}>
-                    <Text style={[s.gray5, s.semiBold, s.f17]}>
-                      <Text style={[s.bold, s.black, s.f17]}>
+                    <Text type="h6" style={pal.textLight}>
+                      <Text type="h5" style={pal.text}>
                         {item.post.repostCount}
                       </Text>{' '}
                       {pluralize(item.post.repostCount, 'repost')}
@@ -196,8 +202,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.expandedInfoItem}
                     href={upvotesHref}
                     title={upvotesTitle}>
-                    <Text style={[s.gray5, s.semiBold, s.f17]}>
-                      <Text style={[s.bold, s.black, s.f17]}>
+                    <Text type="h6" style={pal.textLight}>
+                      <Text type="h5" style={pal.text}>
                         {item.post.upvoteCount}
                       </Text>{' '}
                       {pluralize(item.post.upvoteCount, 'upvote')}
@@ -233,27 +239,27 @@ export const PostThreadItem = observer(function PostThreadItem({
   } else {
     return (
       <>
-        <Link style={styles.outer} href={itemHref} title={itemTitle} noFeedback>
-          {!item.replyingTo && record.reply && (
-            <View style={styles.parentReplyLine} />
+        <Link
+          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
+          href={itemHref}
+          title={itemTitle}
+          noFeedback>
+          {record.reply && (
+            <View
+              style={[
+                styles.parentReplyLine,
+                {borderColor: pal.colors.replyLine},
+              ]}
+            />
+          )}
+          {item.replies?.length !== 0 && (
+            <View
+              style={[
+                styles.childReplyLine,
+                {borderColor: pal.colors.replyLine},
+              ]}
+            />
           )}
-          {item.replies?.length !== 0 && <View style={styles.childReplyLine} />}
-          {item.replyingTo ? (
-            <View style={styles.replyingTo}>
-              <View style={styles.replyingToLine} />
-              <View style={styles.replyingToAvatar}>
-                <UserAvatar
-                  handle={item.replyingTo.author.handle}
-                  displayName={item.replyingTo.author.displayName}
-                  avatar={item.replyingTo.author.avatar}
-                  size={30}
-                />
-              </View>
-              <Text style={styles.replyingToText} numberOfLines={2}>
-                {item.replyingTo.text}
-              </Text>
-            </View>
-          ) : undefined}
           <View style={styles.layout}>
             <View style={styles.layoutAvi}>
               <Link href={authorHref} title={authorTitle}>
@@ -282,7 +288,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   <RichText
                     text={record.text}
                     entities={record.entities}
-                    style={[styles.postText]}
+                    style={pal.text}
                   />
                 </View>
               ) : (
@@ -304,11 +310,15 @@ export const PostThreadItem = observer(function PostThreadItem({
         </Link>
         {item._hasMore ? (
           <Link
-            style={styles.loadMore}
+            style={[
+              styles.loadMore,
+              {borderTopColor: pal.colors.border},
+              pal.view,
+            ]}
             href={itemHref}
             title={itemTitle}
             noFeedback>
-            <Text style={styles.loadMoreText}>Load more</Text>
+            <Text style={pal.link}>Load more</Text>
           </Link>
         ) : undefined}
       </>
@@ -318,9 +328,7 @@ export const PostThreadItem = observer(function PostThreadItem({
 
 const styles = StyleSheet.create({
   outer: {
-    backgroundColor: colors.white,
     borderTopWidth: 1,
-    borderTopColor: colors.gray2,
   },
   parentReplyLine: {
     position: 'absolute',
@@ -328,7 +336,6 @@ const styles = StyleSheet.create({
     top: -1 * PARENT_REPLY_LINE_LENGTH + 6,
     height: PARENT_REPLY_LINE_LENGTH,
     borderLeftWidth: 2,
-    borderLeftColor: colors.gray2,
   },
   childReplyLine: {
     position: 'absolute',
@@ -336,31 +343,6 @@ const styles = StyleSheet.create({
     top: 65,
     bottom: 0,
     borderLeftWidth: 2,
-    borderLeftColor: colors.gray2,
-  },
-  replyingToLine: {
-    position: 'absolute',
-    left: 34,
-    bottom: -1 * REPLYING_TO_LINE_LENGTH,
-    height: REPLYING_TO_LINE_LENGTH,
-    borderLeftWidth: 2,
-    borderLeftColor: colors.gray2,
-  },
-  replyingTo: {
-    flexDirection: 'row',
-    backgroundColor: colors.white,
-    paddingLeft: 8,
-    paddingTop: 12,
-    paddingBottom: 0,
-    paddingRight: 24,
-  },
-  replyingToAvatar: {
-    marginLeft: 12,
-    marginRight: 20,
-  },
-  replyingToText: {
-    flex: 1,
-    color: colors.gray5,
   },
   layout: {
     flexDirection: 'row',
@@ -386,12 +368,6 @@ const styles = StyleSheet.create({
     paddingRight: 5,
     maxWidth: 240,
   },
-  postText: {
-    fontFamily: 'System',
-    fontSize: 16,
-    lineHeight: 20.8, // 1.3 of 16px
-    color: 'black',
-  },
   postTextContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -399,10 +375,6 @@ const styles = StyleSheet.create({
     paddingBottom: 8,
     minHeight: 36,
   },
-  postTextLarge: {
-    fontSize: 24,
-    lineHeight: 32,
-  },
   postTextLargeContainer: {
     paddingLeft: 4,
     paddingBottom: 20,
@@ -410,7 +382,6 @@ const styles = StyleSheet.create({
   expandedInfo: {
     flexDirection: 'row',
     padding: 10,
-    borderColor: colors.gray2,
     borderTopWidth: 1,
     borderBottomWidth: 1,
     marginTop: 5,
@@ -420,15 +391,8 @@ const styles = StyleSheet.create({
     marginRight: 10,
   },
   loadMore: {
+    borderTopWidth: 1,
     paddingLeft: 28,
     paddingVertical: 10,
-    backgroundColor: colors.white,
-    borderRadius: 6,
-    margin: 2,
-    marginBottom: 0,
-  },
-  loadMoreText: {
-    fontSize: 17,
-    color: colors.blue3,
   },
 })
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index ae53c8d16..4d444fea2 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -16,7 +16,7 @@ import {PostEmbeds} from '../util/PostEmbeds'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
-import {s, colors, lh} from '../../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {useStores} from '../../../state'
 import {useTheme} from '../../lib/ThemeContext'
 import {usePalette} from '../../lib/hooks/usePalette'
@@ -114,17 +114,14 @@ export const FeedItem = observer(function ({
       <Link style={outerStyles} href={itemHref} title={itemTitle} noFeedback>
         {item._isThreadChild && (
           <View
-            style={[
-              styles.topReplyLine,
-              {borderLeftColor: pal.colors.replyLine},
-            ]}
+            style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
           />
         )}
         {(showReplyLine || item._isThreadParent) && (
           <View
             style={[
               styles.bottomReplyLine,
-              {borderLeftColor: pal.colors.replyLine},
+              {borderColor: pal.colors.replyLine},
               isNoTop ? {top: 64} : undefined,
             ]}
           />
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 4dcd74353..4cf6cb00c 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -48,16 +48,16 @@ export function PostMeta(opts: PostMetaOpts) {
         style={styles.metaItem}
         href={opts.authorHref}
         title={opts.authorHandle}>
-        <Text style={[pal.text, theme.typography.h5]} numberOfLines={1}>
+        <Text type="h5" style={[pal.text]} numberOfLines={1}>
           {displayName}
           {handle ? (
-            <Text style={[pal.textLight, theme.typography.h6]}>
+            <Text type="h6" style={[pal.textLight]}>
               &nbsp;{handle}
             </Text>
           ) : undefined}
         </Text>
       </Link>
-      <Text style={[styles.metaItem, pal.textLight, theme.typography.h6]}>
+      <Text type="h6" style={[styles.metaItem, pal.textLight]}>
         &middot; {ago(opts.timestamp)}
       </Text>
       <View style={s.flex1} />
diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx
index 830294d3a..2a42d26ae 100644
--- a/src/view/com/util/text/RichText.tsx
+++ b/src/view/com/util/text/RichText.tsx
@@ -29,7 +29,7 @@ export function RichText({
 }) {
   const theme = useTheme()
   const pal = usePalette('default')
-  const lineHeightStyle = lh(theme, 'body1', 1.2)
+  const lineHeightStyle = lh(theme, type, 1.2)
   if (!entities?.length) {
     if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
       style = {
@@ -38,7 +38,11 @@ export function RichText({
       }
       return <Text style={[style, pal.text]}>{text}</Text>
     }
-    return <Text style={[style, pal.text, lineHeightStyle]}>{text}</Text>
+    return (
+      <Text type={type} style={[style, pal.text, lineHeightStyle]}>
+        {text}
+      </Text>
+    )
   }
   if (!style) style = []
   else if (!Array.isArray(style)) style = [style]
diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts
index 8933a8d8e..299c0196a 100644
--- a/src/view/lib/styles.ts
+++ b/src/view/lib/styles.ts
@@ -199,6 +199,6 @@ export function lh(
   height: number,
 ): TextStyle {
   return {
-    lineHeight: (theme.typography[type].lineHeight || 16) * height,
+    lineHeight: (theme.typography[type].fontSize || 16) * height,
   }
 }