From 8d0fc943039479e09d9efd6cb578afaae9bb56ab Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Thu, 16 Jun 2022 23:22:28 +0200
Subject: [PATCH 1/4] Allow Android to have moving image

---
 package.json                               |  2 +-
 src/components/GracefullyImage.tsx         | 27 ++++++++++++++++------
 src/screens/Tabs/Shared/Account/Header.tsx |  5 ++--
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 96fc1cb6..bc2835fd 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "native": "220603",
     "major": 4,
     "minor": 1,
-    "patch": 2,
+    "patch": 3,
     "expo": "45.0.0"
   },
   "description": "tooot app for Mastodon",
diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx
index 5fa68666..01db6c04 100644
--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@@ -5,12 +5,14 @@ import {
   AccessibilityProps,
   Image,
   ImageStyle,
+  Platform,
   Pressable,
   StyleProp,
   StyleSheet,
   View,
   ViewStyle
 } from 'react-native'
+import FastImage from 'react-native-fast-image'
 import { Blurhash } from 'react-native-blurhash'
 
 // blurhas -> if blurhash, show before any loading succeed
@@ -125,13 +127,24 @@ const GracefullyImage = ({
           ]}
         />
       ) : null}
-      <Image
-        fadeDuration={0}
-        source={source}
-        style={[{ flex: 1 }, imageStyle]}
-        onLoad={onLoad}
-        onError={onError}
-      />
+      {Platform.OS === 'ios' ? (
+        <Image
+          fadeDuration={0}
+          source={source}
+          style={[{ flex: 1 }, imageStyle]}
+          onLoad={onLoad}
+          onError={onError}
+        />
+      ) : (
+        <FastImage
+          fadeDuration={0}
+          source={source}
+          // @ts-ignore
+          style={[{ flex: 1 }, imageStyle]}
+          onLoad={onLoad}
+          onError={onError}
+        />
+      )}
       {blurhashView}
     </Pressable>
   )
diff --git a/src/screens/Tabs/Shared/Account/Header.tsx b/src/screens/Tabs/Shared/Account/Header.tsx
index 419f84a8..6b33bf73 100644
--- a/src/screens/Tabs/Shared/Account/Header.tsx
+++ b/src/screens/Tabs/Shared/Account/Header.tsx
@@ -2,7 +2,8 @@ import Button from '@components/Button'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
-import { Dimensions, Image, View } from 'react-native'
+import { Dimensions, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export interface Props {
@@ -18,7 +19,7 @@ const AccountHeader = React.memo(
 
     return (
       <View>
-        <Image
+        <FastImage
           source={{
             uri: reduceMotionEnabled ? account?.header_static : account?.header
           }}

From d5104bf6f8b813da8db8efd093743568e81b543d Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Thu, 16 Jun 2022 23:34:06 +0200
Subject: [PATCH 2/4] Allowing toot to be copied when highlighted

---
 src/components/Timeline/Default.tsx            | 1 +
 src/components/Timeline/Notifications.tsx      | 6 +++++-
 src/components/Timeline/Shared/ContextMenu.tsx | 6 +++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Timeline/Default.tsx b/src/components/Timeline/Default.tsx
index 6c84aec3..d72e427c 100644
--- a/src/components/Timeline/Default.tsx
+++ b/src/components/Timeline/Default.tsx
@@ -78,6 +78,7 @@ const TimelineDefault: React.FC<Props> = ({
       status={actualStatus}
       queryKey={queryKey}
       rootQueryKey={rootQueryKey}
+      disabled={highlighted}
     >
       <Pressable
         accessible={highlighted ? false : true}
diff --git a/src/components/Timeline/Notifications.tsx b/src/components/Timeline/Notifications.tsx
index 80be1816..d805f95a 100644
--- a/src/components/Timeline/Notifications.tsx
+++ b/src/components/Timeline/Notifications.tsx
@@ -59,7 +59,11 @@ const TimelineNotifications = React.memo(
     }, [])
 
     return (
-      <TimelineContextMenu status={notification.status} queryKey={queryKey}>
+      <TimelineContextMenu
+        status={notification.status}
+        queryKey={queryKey}
+        disabled={highlighted}
+      >
         <Pressable
           style={{
             padding: StyleConstants.Spacing.Global.PagePadding,
diff --git a/src/components/Timeline/Shared/ContextMenu.tsx b/src/components/Timeline/Shared/ContextMenu.tsx
index 856e1835..16afe74e 100644
--- a/src/components/Timeline/Shared/ContextMenu.tsx
+++ b/src/components/Timeline/Shared/ContextMenu.tsx
@@ -14,6 +14,7 @@ export interface Props {
   status?: Mastodon.Status
   queryKey?: QueryKeyTimeline
   rootQueryKey?: QueryKeyTimeline
+  disabled?: boolean // Allowing toot to be copied when highlighted
 }
 
 export const ContextMenuContext = createContext<ContextMenuAction[]>([])
@@ -23,6 +24,7 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
   status,
   queryKey,
   rootQueryKey,
+  disabled,
   ...props
 }) => {
   if (!status || !queryKey) {
@@ -59,7 +61,9 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
     rootQueryKey
   })
 
-  return (
+  return disabled ? (
+    <>{children}</>
+  ) : (
     <ContextMenuContext.Provider value={actions}>
       <ContextMenu
         actions={actions}

From 16eaba14aac61a5c95ef19f4ec50072ccded709a Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Fri, 17 Jun 2022 00:10:15 +0200
Subject: [PATCH 3/4] Allow Android drop menu instead of long press

---
 src/components/Timeline/Notifications.tsx     |   5 +-
 .../Timeline/Shared/ContextMenu.tsx           |   7 +-
 .../Timeline/Shared/HeaderDefault.android.tsx | 120 +++++++++++++
 ...eaderDefault.tsx => HeaderDefault.ios.tsx} |   4 +-
 .../Shared/HeaderNotification.android.tsx     | 163 ++++++++++++++++++
 ...ication.tsx => HeaderNotification.ios.tsx} |   3 +-
 6 files changed, 294 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Timeline/Shared/HeaderDefault.android.tsx
 rename src/components/Timeline/Shared/{HeaderDefault.tsx => HeaderDefault.ios.tsx} (95%)
 create mode 100644 src/components/Timeline/Shared/HeaderNotification.android.tsx
 rename src/components/Timeline/Shared/{HeaderNotification.tsx => HeaderNotification.ios.tsx} (97%)

diff --git a/src/components/Timeline/Notifications.tsx b/src/components/Timeline/Notifications.tsx
index d805f95a..a6418adf 100644
--- a/src/components/Timeline/Notifications.tsx
+++ b/src/components/Timeline/Notifications.tsx
@@ -100,7 +100,10 @@ const TimelineNotifications = React.memo(
                 account={actualAccount}
                 highlighted={highlighted}
               />
-              <TimelineHeaderNotification notification={notification} />
+              <TimelineHeaderNotification
+                queryKey={queryKey}
+                notification={notification}
+              />
             </View>
 
             {notification.status ? (
diff --git a/src/components/Timeline/Shared/ContextMenu.tsx b/src/components/Timeline/Shared/ContextMenu.tsx
index 16afe74e..c38272f1 100644
--- a/src/components/Timeline/Shared/ContextMenu.tsx
+++ b/src/components/Timeline/Shared/ContextMenu.tsx
@@ -5,6 +5,7 @@ import contextMenuStatus from '@components/ContextMenu/status'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import React from 'react'
 import { createContext } from 'react'
+import { Platform } from 'react-native'
 import ContextMenu, {
   ContextMenuAction,
   ContextMenuProps
@@ -27,7 +28,7 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
   disabled,
   ...props
 }) => {
-  if (!status || !queryKey) {
+  if (!status || !queryKey || disabled || Platform.OS === 'android') {
     return <>{children}</>
   }
 
@@ -61,9 +62,7 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
     rootQueryKey
   })
 
-  return disabled ? (
-    <>{children}</>
-  ) : (
+  return (
     <ContextMenuContext.Provider value={actions}>
       <ContextMenu
         actions={actions}
diff --git a/src/components/Timeline/Shared/HeaderDefault.android.tsx b/src/components/Timeline/Shared/HeaderDefault.android.tsx
new file mode 100644
index 00000000..968bed11
--- /dev/null
+++ b/src/components/Timeline/Shared/HeaderDefault.android.tsx
@@ -0,0 +1,120 @@
+import contextMenuAccount from '@components/ContextMenu/account'
+import contextMenuInstance from '@components/ContextMenu/instance'
+import contextMenuShare from '@components/ContextMenu/share'
+import contextMenuStatus from '@components/ContextMenu/status'
+import Icon from '@components/Icon'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Platform, Pressable, View } from 'react-native'
+import ContextMenu, { ContextMenuAction } from 'react-native-context-menu-view'
+import { ContextMenuContext } from './ContextMenu'
+import HeaderSharedAccount from './HeaderShared/Account'
+import HeaderSharedApplication from './HeaderShared/Application'
+import HeaderSharedCreated from './HeaderShared/Created'
+import HeaderSharedMuted from './HeaderShared/Muted'
+import HeaderSharedVisibility from './HeaderShared/Visibility'
+
+export interface Props {
+  queryKey?: QueryKeyTimeline
+  status: Mastodon.Status
+  highlighted: boolean
+}
+
+const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
+  if (!queryKey) return
+
+  const { t } = useTranslation('componentContextMenu')
+  const { colors } = useTheme()
+
+  const actions: ContextMenuAction[] = []
+
+  const shareOnPress =
+    status.visibility !== 'direct'
+      ? contextMenuShare({
+          actions,
+          type: 'status',
+          url: status.url || status.uri
+        })
+      : null
+  const statusOnPress = contextMenuStatus({
+    actions,
+    status,
+    queryKey
+  })
+  const accountOnPress = contextMenuAccount({
+    actions,
+    type: 'status',
+    queryKey,
+    id: status.account.id
+  })
+  const instanceOnPress = contextMenuInstance({
+    actions,
+    status,
+    queryKey
+  })
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View style={{ flex: 7 }}>
+        <HeaderSharedAccount account={status.account} />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          <HeaderSharedCreated
+            created_at={status.created_at}
+            edited_at={status.edited_at}
+            highlighted={highlighted}
+          />
+          <HeaderSharedVisibility visibility={status.visibility} />
+          <HeaderSharedMuted muted={status.muted} />
+          <HeaderSharedApplication application={status.application} />
+        </View>
+      </View>
+
+      {queryKey ? (
+        <Pressable
+          accessibilityHint={t('accessibilityHint')}
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            marginBottom: StyleConstants.Spacing.L
+          }}
+        >
+          <ContextMenu
+            dropdownMenuMode
+            actions={actions}
+            onPress={({ nativeEvent: { index } }) => {
+              console.log('index', index)
+              for (const on of [
+                shareOnPress,
+                statusOnPress,
+                accountOnPress,
+                instanceOnPress
+              ]) {
+                on && on(index)
+              }
+            }}
+            children={
+              <Icon
+                name='MoreHorizontal'
+                color={colors.secondary}
+                size={StyleConstants.Font.Size.L}
+              />
+            }
+          />
+        </Pressable>
+      ) : null}
+    </View>
+  )
+}
+
+export default TimelineHeaderDefault
diff --git a/src/components/Timeline/Shared/HeaderDefault.tsx b/src/components/Timeline/Shared/HeaderDefault.ios.tsx
similarity index 95%
rename from src/components/Timeline/Shared/HeaderDefault.tsx
rename to src/components/Timeline/Shared/HeaderDefault.ios.tsx
index 80a1c1bb..b66a7c4c 100644
--- a/src/components/Timeline/Shared/HeaderDefault.tsx
+++ b/src/components/Timeline/Shared/HeaderDefault.ios.tsx
@@ -4,7 +4,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, View } from 'react-native'
+import { Platform, Pressable, View } from 'react-native'
 import ContextMenu from 'react-native-context-menu-view'
 import { ContextMenuContext } from './ContextMenu'
 import HeaderSharedAccount from './HeaderShared/Account'
@@ -59,7 +59,7 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
           }}
         >
           <ContextMenu
-            dropdownMenuMode
+            dropdownMenuMode={Platform.OS === 'android'}
             actions={contextMenuContext}
             onPress={() => {}}
             children={
diff --git a/src/components/Timeline/Shared/HeaderNotification.android.tsx b/src/components/Timeline/Shared/HeaderNotification.android.tsx
new file mode 100644
index 00000000..2922f516
--- /dev/null
+++ b/src/components/Timeline/Shared/HeaderNotification.android.tsx
@@ -0,0 +1,163 @@
+import contextMenuAccount from '@components/ContextMenu/account'
+import contextMenuInstance from '@components/ContextMenu/instance'
+import contextMenuShare from '@components/ContextMenu/share'
+import contextMenuStatus from '@components/ContextMenu/status'
+import Icon from '@components/Icon'
+import {
+  RelationshipIncoming,
+  RelationshipOutgoing
+} from '@components/Relationship'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useMemo } from 'react'
+import { Pressable, View } from 'react-native'
+import ContextMenu, { ContextMenuAction } from 'react-native-context-menu-view'
+import HeaderSharedAccount from './HeaderShared/Account'
+import HeaderSharedApplication from './HeaderShared/Application'
+import HeaderSharedCreated from './HeaderShared/Created'
+import HeaderSharedMuted from './HeaderShared/Muted'
+import HeaderSharedVisibility from './HeaderShared/Visibility'
+
+export interface Props {
+  queryKey?: QueryKeyTimeline
+  notification: Mastodon.Notification
+}
+
+const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
+  const { colors } = useTheme()
+
+  const contextMenuActions: ContextMenuAction[] = []
+  const status = notification.status
+  const shareOnPress =
+    status && status?.visibility !== 'direct'
+      ? contextMenuShare({
+          actions: contextMenuActions,
+          type: 'status',
+          url: status.url || status.uri
+        })
+      : null
+  const statusOnPress = contextMenuStatus({
+    actions: contextMenuActions,
+    status,
+    queryKey
+  })
+  const accountOnPress = contextMenuAccount({
+    actions: contextMenuActions,
+    type: 'status',
+    queryKey,
+    id: status?.account.id
+  })
+  const instanceOnPress = contextMenuInstance({
+    actions: contextMenuActions,
+    status,
+    queryKey
+  })
+
+  const actions = useMemo(() => {
+    switch (notification.type) {
+      case 'follow':
+        return <RelationshipOutgoing id={notification.account.id} />
+      case 'follow_request':
+        return <RelationshipIncoming id={notification.account.id} />
+      default:
+        if (notification.status) {
+          return (
+            <Pressable
+              style={{
+                flex: 1,
+                flexDirection: 'row',
+                justifyContent: 'center',
+                paddingBottom: StyleConstants.Spacing.S
+              }}
+              children={
+                <ContextMenu
+                  dropdownMenuMode
+                  actions={contextMenuActions}
+                  onPress={({ nativeEvent: { index } }) => {
+                    for (const on of [
+                      shareOnPress,
+                      statusOnPress,
+                      accountOnPress,
+                      instanceOnPress
+                    ]) {
+                      on && on(index)
+                    }
+                  }}
+                  children={
+                    <Icon
+                      name='MoreHorizontal'
+                      color={colors.secondary}
+                      size={StyleConstants.Font.Size.L}
+                    />
+                  }
+                />
+              }
+            />
+          )
+        }
+    }
+  }, [notification.type])
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View
+        style={{
+          flex:
+            notification.type === 'follow' ||
+            notification.type === 'follow_request'
+              ? 1
+              : 4
+        }}
+      >
+        <HeaderSharedAccount
+          account={
+            notification.status
+              ? notification.status.account
+              : notification.account
+          }
+          {...((notification.type === 'follow' ||
+            notification.type === 'follow_request') && { withoutName: true })}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          <HeaderSharedCreated
+            created_at={
+              notification.status?.created_at || notification.created_at
+            }
+            edited_at={notification.status?.edited_at}
+          />
+          {notification.status?.visibility ? (
+            <HeaderSharedVisibility
+              visibility={notification.status.visibility}
+            />
+          ) : null}
+          <HeaderSharedMuted muted={notification.status?.muted} />
+          <HeaderSharedApplication
+            application={notification.status?.application}
+          />
+        </View>
+      </View>
+
+      <View
+        style={[
+          { marginLeft: StyleConstants.Spacing.M },
+          notification.type === 'follow' ||
+          notification.type === 'follow_request'
+            ? { flexShrink: 1 }
+            : { flex: 1 }
+        ]}
+      >
+        {actions}
+      </View>
+    </View>
+  )
+}
+
+export default TimelineHeaderNotification
diff --git a/src/components/Timeline/Shared/HeaderNotification.tsx b/src/components/Timeline/Shared/HeaderNotification.ios.tsx
similarity index 97%
rename from src/components/Timeline/Shared/HeaderNotification.tsx
rename to src/components/Timeline/Shared/HeaderNotification.ios.tsx
index a9b30f2e..e2033907 100644
--- a/src/components/Timeline/Shared/HeaderNotification.tsx
+++ b/src/components/Timeline/Shared/HeaderNotification.ios.tsx
@@ -3,6 +3,7 @@ import {
   RelationshipIncoming,
   RelationshipOutgoing
 } from '@components/Relationship'
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useMemo } from 'react'
@@ -16,6 +17,7 @@ import HeaderSharedMuted from './HeaderShared/Muted'
 import HeaderSharedVisibility from './HeaderShared/Visibility'
 
 export interface Props {
+  queryKey: QueryKeyTimeline
   notification: Mastodon.Notification
 }
 
@@ -42,7 +44,6 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
               }}
               children={
                 <ContextMenu
-                  dropdownMenuMode
                   actions={contextMenuContext}
                   onPress={() => {}}
                   children={

From 544910f0edad9de6934baf053097a22a184ef0ac Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Fri, 17 Jun 2022 00:14:32 +0200
Subject: [PATCH 4/4] Fix iOS dots

---
 src/components/Timeline/Shared/HeaderDefault.ios.tsx      | 4 ++--
 src/components/Timeline/Shared/HeaderNotification.ios.tsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Timeline/Shared/HeaderDefault.ios.tsx b/src/components/Timeline/Shared/HeaderDefault.ios.tsx
index b66a7c4c..d18668d2 100644
--- a/src/components/Timeline/Shared/HeaderDefault.ios.tsx
+++ b/src/components/Timeline/Shared/HeaderDefault.ios.tsx
@@ -48,7 +48,7 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
         </View>
       </View>
 
-      {queryKey ? (
+      {queryKey && !highlighted ? (
         <Pressable
           accessibilityHint={t('accessibilityHint')}
           style={{
@@ -59,7 +59,7 @@ const TimelineHeaderDefault = ({ queryKey, status, highlighted }: Props) => {
           }}
         >
           <ContextMenu
-            dropdownMenuMode={Platform.OS === 'android'}
+            dropdownMenuMode
             actions={contextMenuContext}
             onPress={() => {}}
             children={
diff --git a/src/components/Timeline/Shared/HeaderNotification.ios.tsx b/src/components/Timeline/Shared/HeaderNotification.ios.tsx
index e2033907..16267945 100644
--- a/src/components/Timeline/Shared/HeaderNotification.ios.tsx
+++ b/src/components/Timeline/Shared/HeaderNotification.ios.tsx
@@ -44,6 +44,7 @@ const TimelineHeaderNotification = ({ notification }: Props) => {
               }}
               children={
                 <ContextMenu
+                  dropdownMenuMode
                   actions={contextMenuContext}
                   onPress={() => {}}
                   children={