xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mobile): ai summary card styles

This commit is contained in:
DIYgod 2025-04-11 11:38:14 +08:00
parent e2b7183420
commit 87aa06243e
No known key found for this signature in database
3 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/mobile/package.json
View File

@ -38,6 +38,7 @@
"@react-native-firebase/app-check": "21.13.0",
"@react-native-firebase/crashlytics": "21.13.0",
"@react-native-firebase/messaging": "21.13.0",
"@react-native-masked-view/masked-view": "0.3.2",
"@react-native-menu/menu": "1.2.3",
"@react-native-picker/picker": "2.11.0",
"@shopify/flash-list": "1.7.3",

29
apps/mobile/src/modules/ai/summary.tsx
View File

@ -1,4 +1,6 @@
import { cn } from "@follow/utils"
import MaskedView from "@react-native-masked-view/masked-view"
import { LinearGradient } from "expo-linear-gradient"
import type { FC } from "react"
import * as React from "react"
import type { LayoutChangeEvent } from "react-native"
@ -22,8 +24,6 @@ export const AISummary: FC<{
error?: string
onRetry?: () => void
}> = ({ className, summary, pending = false, error, onRetry }) => {
const labelColor = useColor("label")
const opacity = useSharedValue(0.3)
const height = useSharedValue(0)
@ -56,18 +56,31 @@ export const AISummary: FC<{
})
}
const purpleColor = useColor("purple")
if (pending) return null
return (
<Animated.View
className={cn(
"bg-tertiary-system-background border-non-opaque-separator mx-4 my-2 rounded-xl p-4",
"border-opaque-separator/50 mx-4 my-2 rounded-xl p-4",
"bg-secondary-system-background/30",
className,
)}
style={styles.card}
>
<View className="mb-2 flex-row items-center gap-2">
<Magic2CuteReIcon height={18} width={18} color={labelColor} />
<Text className="text-label text-[16px] font-semibold">AI Summary</Text>
<Magic2CuteReIcon height={16} width={16} color={purpleColor} />
<MaskedView
maskElement={
<View className="bg-transparent">
<Text className="text-[15px] font-semibold">AI Summary</Text>
</View>
}
>
<LinearGradient colors={["#9333ea", "#2563eb"]} start={[0, 0]} end={[1, 0]}>
<Text className="text-[15px] font-semibold text-transparent">AI Summary</Text>
</LinearGradient>
</MaskedView>
</View>
<Animated.View style={animatedContentStyle}>
<View style={{ height: contentHeight }}>
@ -110,7 +123,7 @@ export const AISummary: FC<{
)}
</View>
) : (
<Text className="text-label mt-2 text-[15px] leading-[22px]">{summary.trim()}</Text>
<Text className="text-label mt-2 text-[14px] leading-[22px]">{summary.trim()}</Text>
)}
</View>
</View>
@ -121,10 +134,6 @@ export const AISummary: FC<{
const styles = StyleSheet.create({
card: {
borderWidth: 0.5,
shadowColor: "#000",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 2,
elevation: 2,
},
})

14
pnpm-lock.yaml
View File

@ -814,6 +814,9 @@ importers:
'@react-native-firebase/messaging':
specifier: 21.13.0
version: 21.13.0(2511037f97ab10cd056affaf5ecb511d)
'@react-native-masked-view/masked-view':
specifier: 0.3.2
version: 0.3.2(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)
'@react-native-menu/menu':
specifier: 1.2.3
version: 1.2.3(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)
@ -5444,6 +5447,12 @@ packages:
expo:
optional: true
'@react-native-masked-view/masked-view@0.3.2':
resolution: {integrity: sha512-XwuQoW7/GEgWRMovOQtX3A4PrXhyaZm0lVUiY8qJDvdngjLms9Cpdck6SmGAUNqQwcj2EadHC1HwL0bEyoa/SQ==}
peerDependencies:
react: 18.3.1
react-native: '>=0.57'
'@react-native-menu/menu@1.2.3':
resolution: {integrity: sha512-sEfiVIivsa0lSelFm9Wbm/RAi+XoEHc75GGhjwvSrj9KSCVvNNXwr9F8l42e1t/lzYvVYzmkYxLG6VKxrDYJiw==}
peerDependencies:
@ -20613,6 +20622,11 @@ snapshots:
optionalDependencies:
expo: 52.0.44(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@expo/metro-runtime@4.0.1(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5)))(bufferutil@4.0.9)(encoding@0.1.13)(graphql@16.8.1)(react-native-webview@13.13.5(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1))(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)(utf-8-validate@6.0.5)
'@react-native-masked-view/masked-view@0.3.2(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)':
dependencies:
react: 18.3.1
react-native: 0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5)
'@react-native-menu/menu@1.2.3(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)(utf-8-validate@6.0.5))(react@18.3.1)':
dependencies:
react: 18.3.1