Merge branch 'main' into release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tooot",
-  "version": "4.10.1",
+  "version": "4.10.2",
   "description": "tooot for Mastodon",
   "author": "xmflsct <me@xmflsct.com>",
   "license": "GPL-3.0-or-later",

src/components/Separator.tsx

@@ -22,7 +22,7 @@ const ComponentSeparator: React.FC<Props> = ({
         style,
         {
           backgroundColor: colors.backgroundDefault,
-          borderTopColor: colors.border,
+          borderTopColor: colors.separator,
           borderTopWidth: 1,
           marginLeft: StyleConstants.Spacing.Global.PagePadding + extraMarginLeft,
           marginRight: StyleConstants.Spacing.Global.PagePadding + extraMarginRight

src/components/Timeline/Shared/Card/Neodb.tsx

@@ -1,22 +1,20 @@
 import GracefullyImage from '@components/GracefullyImage'
-import openLink from '@components/openLink'
 import CustomText from '@components/Text'
+import openLink from '@components/openLink'
 import { useNeodbQuery } from '@utils/queryHooks/neodb'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 import * as Linking from 'expo-linking'
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { Pressable, View } from 'react-native'
+import StatusContext from '../Context'
 import { Rating } from './Rating'
 
-export type Props = {
-  card: Mastodon.Card
-}
-
-export const CardNeodb: React.FC<Props> = ({ card }) => {
+export const CardNeodb: React.FC = () => {
+  const { status } = useContext(StatusContext)
   const { colors } = useTheme()
 
-  const path = Linking.parse(card.url).path
+  const path = Linking.parse(status?.card?.url || '').path
   if (!path) return null
 
   const segments = path?.split('/')
@@ -26,7 +24,7 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
   )
     return null
 
-  const [headingLines, setHeadingLines] = useState(3)
+  const [headingLines, setHeadingLines] = useState<number>()
 
   const { data } = useNeodbQuery({ path })
 
@@ -41,7 +39,7 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
         padding: StyleConstants.Spacing.S,
         flexDirection: 'row'
       }}
-      onPress={() => openLink(card.url)}
+      onPress={() => status?.card?.url && openLink(status.card.url)}
     >
       {data.cover_image_url ? (
         <GracefullyImage
@@ -68,7 +66,9 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
             fontWeight='Bold'
             style={{ color: colors.primaryDefault }}
             numberOfLines={3}
-            onTextLayout={({ nativeEvent }) => setHeadingLines(nativeEvent.lines.length)}
+            onTextLayout={({ nativeEvent }) =>
+              !headingLines && setHeadingLines(nativeEvent.lines.length)
+            }
             children={heading.filter(d => d).join(' ')}
           />
           <Rating rating={data.rating / 2} />
@@ -77,7 +77,7 @@ export const CardNeodb: React.FC<Props> = ({ card }) => {
         <CustomText
           fontStyle='S'
           style={{ color: colors.secondary }}
-          numberOfLines={4 - headingLines}
+          numberOfLines={4 - (headingLines || 3)}
           children={details.filter(d => d).join(' / ')}
         />
       </View>

src/components/Timeline/Shared/Card/index.tsx

@@ -1,16 +1,16 @@
 import ComponentAccount from '@components/Account'
 import GracefullyImage from '@components/GracefullyImage'
-import openLink from '@components/openLink'
 import CustomText from '@components/Text'
+import openLink from '@components/openLink'
 import { useNavigation } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
 import { isDevelopment } from '@utils/helpers/checkEnvironment'
 import { urlMatcher } from '@utils/helpers/urlMatcher'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { useAccountQuery } from '@utils/queryHooks/account'
 import { useStatusQuery } from '@utils/queryHooks/status'
-import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { StyleConstants } from '@utils/styles/constants'
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
@@ -32,7 +32,7 @@ const TimelineCard: React.FC = () => {
       i18n.language.toLowerCase().startsWith('zh-hans')) ||
     isDevelopment
   ) {
-    return <CardNeodb card={status.card} />
+    return <CardNeodb />
   }
 
   const { colors } = useTheme()

src/utils/styles/themes.ts

@@ -1,4 +1,5 @@
 import { DarkTheme, DefaultTheme } from '@react-navigation/native'
+import { Platform, PlatformColor } from 'react-native'
 
 export type Theme = 'light' | 'dark_lighter' | 'dark_darker'
 
@@ -16,6 +17,7 @@ export type ColorDefinitions =
   | 'backgroundOverlayDefault'
   | 'backgroundOverlayInvert'
   | 'border'
+  | 'separator'
   | 'shimmerDefault'
   | 'shimmerHighlight'
 
@@ -94,6 +96,33 @@ const themeColors: {
     dark_darker: 'rgb(90, 90, 90)'
   },
 
+  separator: {
+    light: PlatformColor(
+      Platform.select({
+        ios: 'separator',
+        android: '?android:attr/dividerVertical',
+        default: 'rgb(180, 180, 180)'
+      }),
+      'rgb(180, 180, 180)'
+    ) as unknown as string,
+    dark_lighter: PlatformColor(
+      Platform.select({
+        ios: 'separator',
+        android: '?android:attr/dividerVertical',
+        default: 'rgb(90, 90, 90)'
+      }),
+      'rgb(90, 90, 90)'
+    ) as unknown as string,
+    dark_darker: PlatformColor(
+      Platform.select({
+        ios: 'separator',
+        android: '?android:attr/dividerVertical',
+        default: 'rgb(90, 90, 90)'
+      }),
+      'rgb(90, 90, 90)'
+    ) as unknown as string
+  },
+
   shimmerDefault: {
     light: 'rgba(25, 25, 25, 0.05)',
     dark_lighter: 'rgba(250, 250, 250, 0.05)',