Suppress spoiler for easier reading

As spoiler is default expanded now in thread

src/components/Parse/Emojis.tsx

@@ -6,7 +6,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { adaptiveScale } from '@utils/styles/scaling'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { Platform, TextStyle } from 'react-native'
+import { ColorValue, Platform, TextStyle } from 'react-native'
 import FastImage from 'react-native-fast-image'
 
 const regexEmoji = new RegExp(/(:[A-Za-z0-9_]+:)/)
@@ -15,6 +15,7 @@ export interface Props {
   content?: string
   emojis?: Mastodon.Emoji[]
   size?: 'S' | 'M' | 'L'
+  color?: ColorValue
   adaptiveSize?: boolean
   fontBold?: boolean
   style?: TextStyle
@@ -24,6 +25,7 @@ const ParseEmojis: React.FC<Props> = ({
   content,
   emojis,
   size = 'M',
+  color,
   adaptiveSize = false,
   fontBold = false,
   style
@@ -42,13 +44,13 @@ const ParseEmojis: React.FC<Props> = ({
     adaptiveSize ? adaptiveFontsize : 0
   )
 
-  const { colors, theme } = useTheme()
+  const { colors } = useTheme()
 
   return (
     <CustomText
       style={[
         {
-          color: colors.primaryDefault,
+          color: color || colors.primaryDefault,
           fontSize: adaptedFontsize,
           lineHeight: adaptedLineheight
         },

src/components/Parse/HTML.tsx

@@ -16,11 +16,12 @@ import { ElementType, parseDocument } from 'htmlparser2'
 import i18next from 'i18next'
 import React, { useContext, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform, Pressable, Text, View } from 'react-native'
+import { ColorValue, Platform, Pressable, Text, View } from 'react-native'
 
 export interface Props {
   content: string
   size?: 'S' | 'M' | 'L'
+  color?: ColorValue
   adaptiveSize?: boolean
   showFullLink?: boolean
   numberOfLines?: number
@@ -34,6 +35,7 @@ export interface Props {
 const ParseHTML: React.FC<Props> = ({
   content,
   size = 'M',
+  color,
   adaptiveSize = false,
   showFullLink = false,
   numberOfLines = 10,
@@ -58,6 +60,7 @@ const ParseHTML: React.FC<Props> = ({
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
   const { params } = useRoute()
   const { colors } = useTheme()
+  const colorPrimary = color || colors.primaryDefault
   const { t } = useTranslation('componentParse')
   if (!expandHint) {
     expandHint = t('HTML.defaultHint')
@@ -111,6 +114,7 @@ const ParseHTML: React.FC<Props> = ({
             content={content}
             emojis={status?.emojis || emojis}
             size={size}
+            color={colorPrimary}
             adaptiveSize={adaptiveSize}
           />
         )
@@ -181,7 +185,7 @@ const ParseHTML: React.FC<Props> = ({
                 return (
                   <Text
                     key={index}
-                    style={{ color: matchedMention ? colors.blue : colors.primaryDefault }}
+                    style={{ color: matchedMention ? colors.blue : colorPrimary }}
                     onPress={() =>
                       matchedMention &&
                       !disableDetails &&

src/components/Timeline/Default.tsx

@@ -33,6 +33,7 @@ export interface Props {
   item: Mastodon.Status & { _pinned?: boolean } // For account page, internal property
   queryKey?: QueryKeyTimeline
   highlighted?: boolean
+  suppressSpoiler?: boolean // Same content as the main thread, can be dimmed
   disableDetails?: boolean
   disableOnPress?: boolean
   isConversation?: boolean
@@ -44,6 +45,7 @@ const TimelineDefault: React.FC<Props> = ({
   item,
   queryKey,
   highlighted = false,
+  suppressSpoiler = false,
   disableDetails = false,
   disableOnPress = false,
   isConversation = false,
@@ -170,6 +172,7 @@ const TimelineDefault: React.FC<Props> = ({
         detectedLanguage,
         excludeMentions,
         highlighted,
+        suppressSpoiler,
         inThread: queryKey?.[1].page === 'Toot',
         disableDetails,
         disableOnPress,

src/components/Timeline/Shared/Content.tsx

@@ -14,7 +14,7 @@ export interface Props {
 }
 
 const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoilerExpanded }) => {
-  const { status, highlighted, inThread } = useContext(StatusContext)
+  const { status, highlighted, suppressSpoiler, inThread } = useContext(StatusContext)
   if (!status || typeof status.content !== 'string' || !status.content.length) return null
 
   const { colors } = useTheme()
@@ -35,6 +35,7 @@ const TimelineContent: React.FC<Props> = ({ notificationOwnToot = false, setSpoi
             size={highlighted ? 'L' : 'M'}
             adaptiveSize
             numberOfLines={999}
+            color={suppressSpoiler ? colors.disabled : undefined}
           />
           {inThread ? (
             <CustomText

src/components/Timeline/Shared/Context.tsx

@@ -15,6 +15,7 @@ type StatusContextType = {
   excludeMentions?: React.MutableRefObject<Mastodon.Mention[]>
 
   highlighted?: boolean
+  suppressSpoiler?: boolean
   inThread?: boolean
   disableDetails?: boolean
   disableOnPress?: boolean

src/screens/Tabs/Shared/Toot.tsx

@@ -346,8 +346,13 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
             <TimelineDefault
               item={item}
               queryKey={item._remote ? queryKey.remote : queryKey.local}
-              highlighted={toot.id === item.id || item.id === 'cached'}
-              isConversation={toot.id !== item.id && item.id !== 'cached'}
+              highlighted={toot.id === item.id}
+              suppressSpoiler={
+                toot.id !== item.id &&
+                !!toot.spoiler_text?.length &&
+                toot.spoiler_text === item.spoiler_text
+              }
+              isConversation={toot.id !== item.id}
               noBackground
             />
             {/* <CustomText