fix: improve gestures

components/music/MiniPlayerBar.tsx

@@ -111,28 +111,28 @@ export const MiniPlayerBar: React.FC = () => {
 
       // Swipe up - open modal (check position OR velocity)
       if (currentPosition < -16 || velocity < -VELOCITY_THRESHOLD) {
+        // Slow return animation - won't jank with navigation
+        translateY.value = withTiming(0, {
+          duration: 600,
+          easing: Easing.out(Easing.cubic),
+        });
         runOnJS(handlePress)();
+        return;
       }
       // Swipe down - stop playback and dismiss (check position OR velocity)
-      else if (currentPosition > 16 || velocity > VELOCITY_THRESHOLD) {
+      if (currentPosition > 16 || velocity > VELOCITY_THRESHOLD) {
+        // No need to reset - component will unmount
         runOnJS(handleDismiss)();
+        return;
       }
 
-      // Smooth return to original position (no bounce)
+      // Only animate back if no action was triggered
       translateY.value = withTiming(0, {
         duration: 200,
         easing: Easing.out(Easing.cubic),
       });
     });
 
-  // Tap gesture for opening modal (preserves existing behavior)
-  const tapGesture = Gesture.Tap().onEnd(() => {
-    runOnJS(handlePress)();
-  });
-
-  // Combine gestures - pan takes priority over tap
-  const composedGesture = Gesture.Race(panGesture, tapGesture);
-
   // Animated styles for the container
   const animatedContainerStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value }],
@@ -158,6 +158,12 @@ export const MiniPlayerBar: React.FC = () => {
 
   const content = (
     <>
+      {/* Tappable area: Album art + Track info */}
+      <TouchableOpacity
+        onPress={handlePress}
+        activeOpacity={0.7}
+        style={styles.tappableArea}
+      >
         {/* Album art */}
         <View style={styles.albumArt}>
           {imageUrl ? (
@@ -183,6 +189,7 @@ export const MiniPlayerBar: React.FC = () => {
             {currentTrack.Artists?.join(", ") || currentTrack.AlbumArtist}
           </Text>
         </View>
+      </TouchableOpacity>
 
       {/* Controls */}
       <View style={styles.controls}>
@@ -222,7 +229,7 @@ export const MiniPlayerBar: React.FC = () => {
   );
 
   return (
-    <GestureDetector gesture={composedGesture}>
+    <GestureDetector gesture={panGesture}>
       <Animated.View
         style={[
           styles.container,
@@ -288,6 +295,11 @@ const styles = StyleSheet.create({
     borderWidth: 0.5,
     borderColor: "rgba(255, 255, 255, 0.1)",
   },
+  tappableArea: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
   albumArt: {
     width: 32,
     height: 32,