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 <[email protected]>",
  "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)',