Partial fix of #444

It is possible to implement what the web does but that adds additional resources which I believe is not justified. Filtering is meant to be precise. Even hiding the entire block that you still would like to take a look at the content, then why would you set up a certain filter then.

Though showing the matched filter is still useful.

src/components/Timeline/Default.tsx

@@ -58,12 +58,9 @@ const TimelineDefault: React.FC<Props> = ({
     complete: false
   })
 
-  if (
+  const filtered = queryKey && shouldFilter({ copiableContent, status: actualStatus, queryKey })
-    queryKey &&
+  if (queryKey && filtered && !highlighted) {
-    shouldFilter({ copiableContent, status: actualStatus, queryKey }) &&
+    return <TimelineFiltered phrase={filtered} />
-    !highlighted
-  ) {
-    return <TimelineFiltered />
   }
 
   const onPress = useCallback(() => {

src/components/Timeline/Notifications.tsx

@@ -36,24 +36,22 @@ const TimelineNotifications = React.memo(
       complete: false
     })
 
-    if (
+    const filtered =
       notification.status &&
-      shouldFilter({ copiableContent, status: notification.status, queryKey })
+      shouldFilter({
-    ) {
+        copiableContent,
-      return <TimelineFiltered />
+        status: notification.status,
+        queryKey
+      })
+    if (notification.status && filtered) {
+      return <TimelineFiltered phrase={filtered} />
     }
 
     const { colors } = useTheme()
-    const instanceAccount = useSelector(
+    const instanceAccount = useSelector(getInstanceAccount, (prev, next) => prev?.id === next?.id)
-      getInstanceAccount,
+    const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-      (prev, next) => prev?.id === next?.id
-    )
-    const navigation =
-      useNavigation<StackNavigationProp<TabLocalStackParamList>>()
 
-    const actualAccount = notification.status
+    const actualAccount = notification.status ? notification.status.account : notification.account
-      ? notification.status.account
-      : notification.account
 
     const onPress = useCallback(() => {
       analytics('timeline_notification_press')
@@ -74,9 +72,7 @@ const TimelineNotifications = React.memo(
           style={{
             padding: StyleConstants.Spacing.Global.PagePadding,
             backgroundColor: colors.backgroundDefault,
-            paddingBottom: notification.status
+            paddingBottom: notification.status ? 0 : StyleConstants.Spacing.Global.PagePadding
-              ? 0
-              : StyleConstants.Spacing.Global.PagePadding
           }}
           onPress={onPress}
           onLongPress={() => {}}
@@ -106,26 +102,18 @@ const TimelineNotifications = React.memo(
                 account={actualAccount}
                 highlighted={highlighted}
               />
-              <TimelineHeaderNotification
+              <TimelineHeaderNotification queryKey={queryKey} notification={notification} />
-                queryKey={queryKey}
-                notification={notification}
-              />
             </View>
 
             {notification.status ? (
               <View
                 style={{
                   paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
-                  paddingLeft: highlighted
+                  paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + StyleConstants.Spacing.S
-                    ? 0
-                    : StyleConstants.Avatar.M + StyleConstants.Spacing.S
                 }}
               >
                 {notification.status.content.length > 0 ? (
-                  <TimelineContent
+                  <TimelineContent status={notification.status} highlighted={highlighted} />
-                    status={notification.status}
-                    highlighted={highlighted}
-                  />
                 ) : null}
                 {notification.status.poll ? (
                   <TimelinePoll
@@ -133,21 +121,14 @@ const TimelineNotifications = React.memo(
                     statusId={notification.status.id}
                     poll={notification.status.poll}
                     reblog={false}
-                    sameAccount={
+                    sameAccount={notification.account.id === instanceAccount?.id}
-                      notification.account.id === instanceAccount?.id
-                    }
                   />
                 ) : null}
                 {notification.status.media_attachments.length > 0 ? (
                   <TimelineAttachment status={notification.status} />
                 ) : null}
-                {notification.status.card ? (
+                {notification.status.card ? <TimelineCard card={notification.status.card} /> : null}
-                  <TimelineCard card={notification.status.card} />
+                <TimelineFullConversation queryKey={queryKey} status={notification.status} />
-                ) : null}
-                <TimelineFullConversation
-                  queryKey={queryKey}
-                  status={notification.status}
-                />
               </View>
             ) : null}
           </View>
@@ -158,10 +139,7 @@ const TimelineNotifications = React.memo(
               status={notification.status}
               highlighted={highlighted}
               accts={uniqBy(
-                (
+                ([notification.status.account] as Mastodon.Account[] & Mastodon.Mention[])
-                  [notification.status.account] as Mastodon.Account[] &
-                    Mastodon.Mention[]
-                )
                   .concat(notification.status.mentions)
                   .filter(d => d?.id !== instanceAccount?.id),
                 d => d?.id

src/components/Timeline/Shared/Filtered.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 
 const TimelineFiltered = React.memo(
-  () => {
+  ({ phrase }: { phrase: string }) => {
     const { colors } = useTheme()
     const { t } = useTranslation('componentTimeline')
 
@@ -25,7 +25,7 @@ const TimelineFiltered = React.memo(
             paddingLeft: StyleConstants.Avatar.M + StyleConstants.Spacing.S
           }}
         >
-          {t('shared.filtered')}
+          {t('shared.filtered', { phrase })}
         </CustomText>
       </View>
     )
@@ -44,34 +44,29 @@ export const shouldFilter = ({
   }>
   status: Mastodon.Status
   queryKey: QueryKeyTimeline
-}) => {
+}): string | null => {
   const instance = getInstance(store.getState())
-  const ownAccount =
+  const ownAccount = getInstanceAccount(store.getState())?.id === status.account?.id
-    getInstanceAccount(store.getState())?.id === status.account?.id
 
-  let shouldFilter = false
+  let shouldFilter: string | null = null
   if (!ownAccount) {
     const parser = new htmlparser2.Parser({
       ontext: (text: string) => {
         if (!copiableContent.current.complete) {
-          copiableContent.current.content =
+          copiableContent.current.content = copiableContent.current.content + text
-            copiableContent.current.content + text
         }
 
         const checkFilter = (filter: Mastodon.Filter) => {
-          const escapedPhrase = filter.phrase.replace(
+          const escapedPhrase = filter.phrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
-            /[.*+?^${}()|[\]\\]/g,
-            '\\$&'
-          ) // $& means the whole matched string
           switch (filter.whole_word) {
             case true:
               if (new RegExp('\\b' + escapedPhrase + '\\b').test(text)) {
-                shouldFilter = true
+                shouldFilter = filter.phrase
               }
               break
             case false:
               if (new RegExp(escapedPhrase).test(text)) {
-                shouldFilter = true
+                shouldFilter = filter.phrase
               }
               break
           }

src/i18n/en/components/timeline.json

@@ -88,7 +88,7 @@
     "content": {
       "expandHint": "Hidden content"
     },
-    "filtered": "Filtered",
+    "filtered": "Filtered: {{phrase}}.",
     "fullConversation": "Read conversations",
     "translate": {
       "default": "Translate",