Show pinned posts in Account page

src/components/Timelines/Timeline.tsx

@@ -65,13 +65,14 @@ const Timeline: React.FC<Props> = ({
   })
   const flattenData = data ? data.flatMap(d => [...d?.toots]) : []
   const flattenPointer = data ? data.flatMap(d => [d?.pointer]) : []
+  const flattenPinnedLength = data ? data.flatMap(d => [d?.pinnedLength]) : []
 
   const flRef = useRef<FlatList>(null)
   useEffect(() => {
     if (toot && isSuccess) {
       setTimeout(() => {
         flRef.current?.scrollToIndex({
-          index: flattenPointer[0],
+          index: flattenPointer[0]!,
           viewOffset: 100
         })
       }, 500)
@@ -79,7 +80,7 @@ const Timeline: React.FC<Props> = ({
   }, [isSuccess])
 
   const flKeyExtrator = useCallback(({ id }) => id, [])
-  const flRenderItem = useCallback(({ item }) => {
+  const flRenderItem = useCallback(({ item, index }) => {
     switch (page) {
       case 'Conversations':
         return <TimelineConversation item={item} queryKey={queryKey} />
@@ -90,6 +91,11 @@ const Timeline: React.FC<Props> = ({
           <TimelineDefault
             item={item}
             queryKey={queryKey}
+            index={index}
+            {...(flattenPinnedLength &&
+              flattenPinnedLength[0] && {
+                pinnedLength: flattenPinnedLength[0]
+              })}
             {...(toot && toot.id === item.id && { highlighted: true })}
           />
         )

src/components/Timelines/Timeline/Default.tsx

@@ -16,6 +16,8 @@ import { StyleConstants } from '@utils/styles/constants'
 export interface Props {
   item: Mastodon.Status
   queryKey: App.QueryKey
+  index: number
+  pinnedLength?: number
   highlighted?: boolean
 }
 
@@ -23,6 +25,8 @@ export interface Props {
 const TimelineDefault: React.FC<Props> = ({
   item,
   queryKey,
+  index,
+  pinnedLength,
   highlighted = false
 }) => {
   const isRemotePublic = queryKey[0] === 'RemotePublic'
@@ -72,9 +76,11 @@ const TimelineDefault: React.FC<Props> = ({
 
   return (
     <View style={styles.statusView}>
-      {item.reblog && (
+      {item.reblog ? (
         <TimelineActioned action='reblog' account={item.account} />
-      )}
+      ) : pinnedLength && index < pinnedLength ? (
+        <TimelineActioned action='pinned' account={item.account} />
+      ) : null}
 
       <View style={styles.header}>
         <TimelineAvatar

src/components/Timelines/Timeline/Shared/Actioned.tsx

@@ -8,13 +8,12 @@ import { StyleConstants } from '@utils/styles/constants'
 
 export interface Props {
   account: Mastodon.Account
-  action: 'favourite' | 'follow' | 'mention' | 'poll' | 'reblog'
+  action: 'favourite' | 'follow' | 'mention' | 'poll' | 'reblog' | 'pinned'
   notification?: boolean
 }
 
 const TimelineActioned: React.FC<Props> = ({
   account,
-
   action,
   notification = false
 }) => {
@@ -25,6 +24,17 @@ const TimelineActioned: React.FC<Props> = ({
   let icon
   let content
   switch (action) {
+    case 'pinned':
+      icon = (
+        <Feather
+          name='anchor'
+          size={StyleConstants.Font.Size.S}
+          color={iconColor}
+          style={styles.icon}
+        />
+      )
+      content = `置顶`
+      break
     case 'favourite':
       icon = (
         <Feather