fix(mobile): improve animation and UI tweaks

- Cancel ongoing animations in Tabbar and Player components
- Adjust unread indicator position in EntryNormalItem
- Enhance player cover art scale transition with spring preset

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/src/components/layouts/tabbar/Tabbar.tsx

@@ -6,6 +6,7 @@ import { memo, useContext, useEffect } from "react"
 import type { StyleProp, TextStyle } from "react-native"
 import { Platform, Pressable, StyleSheet, View } from "react-native"
 import Animated, {
+  cancelAnimation,
   interpolateColor,
   useAnimatedStyle,
   useSharedValue,
@@ -34,6 +35,7 @@ export const Tabbar: FC<BottomTabBarProps> = (props) => {
 
   const translateY = useSharedValue(0)
   useEffect(() => {
+    cancelAnimation(translateY)
     translateY.value = withSpring(
       tabBarVisible ? 0 : 100,
       !tabBarVisible ? quickSpringPreset : softSpringPreset,

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -69,7 +69,7 @@ export function EntryNormalItem({ entryId, extraData }: { entryId: string; extra
     <EntryItemContextMenu id={entryId}>
       <ItemPressable className="flex flex-row items-center p-4 pl-6" onPress={handlePress}>
         <ReAnimated.View
-          className="bg-red absolute left-2 top-[40] size-2 rounded-full"
+          className="bg-red absolute left-2 top-[43] size-2 rounded-full"
           style={unreadIndicatorStyle}
         />
 

apps/mobile/src/screens/player.tsx

@@ -4,9 +4,15 @@ import { LinearGradient } from "expo-linear-gradient"
 import { router } from "expo-router"
 import { useEffect, useMemo } from "react"
 import { StyleSheet, Text, View } from "react-native"
-import Reanimated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated"
+import Reanimated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated"
 import { SheetScreen } from "react-native-sheet-transitions"
 
+import { gentleSpringPreset } from "../constants/spring"
 import { useActiveTrack, useIsPlaying } from "../lib/player"
 import { PlayerScreenContext } from "../modules/player/context"
 import { ControlGroup, ProgressBar, VolumeBar } from "../modules/player/control"
@@ -18,12 +24,13 @@ function CoverArt({ cover }: { cover?: string }) {
   const { playing } = useIsPlaying()
 
   useEffect(() => {
-    scale.value = playing ? 1 : 0.7
-  }, [playing])
+    cancelAnimation(scale)
+    scale.value = withSpring(playing ? 1 : 0.7, gentleSpringPreset)
+  }, [playing, scale])
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
-      transform: [{ scale: withSpring(scale.value) }],
+      transform: [{ scale: scale.value }],
     }
   })