continue generating flow, add backend connection on main tabs

src/components/Slider.js

@@ -12,7 +12,7 @@ import { FONT_FAMILY } from "../styles/Fonts";
 
 const INITIAL_BOX_SIZE = 6;
 
-export default ({ value, maxValue, progress, onSeek, seekEnabled = false }) => {
+export default ({ value, maxValue, progress, onSeek, onSeekStart, onSeekEnd, seekEnabled = false }) => {
   const offset = useSharedValue(0);
   const boxWidth = useSharedValue(INITIAL_BOX_SIZE);
   const [layout, setLayout] = useState(null);
@@ -22,6 +22,12 @@ export default ({ value, maxValue, progress, onSeek, seekEnabled = false }) => {
 
   const pan = Gesture.Pan()
     .enabled(seekEnabled)
+    .onBegin(() => {
+      if (seekEnabled && typeof onSeekStart === 'function') {
+        // Notify JS thread that user started seeking (e.g., pause audio)
+        runOnJS(onSeekStart)();
+      }
+    })
     .onChange((event) => {
       offset.value =
         Math.abs(offset.value) <= MAX_VALUE
@@ -40,6 +46,11 @@ export default ({ value, maxValue, progress, onSeek, seekEnabled = false }) => {
       const ratio = MAX_VALUE > 0 ? Math.min(1, Math.max(0, offset.value / MAX_VALUE)) : 0;
       // Reanimated -> JS thread bridge
       runOnJS(onSeek)(ratio);
+    })
+    .onFinalize(() => {
+      if (seekEnabled && typeof onSeekEnd === 'function') {
+        runOnJS(onSeekEnd)();
+      }
     });
 
   // Reflect external progress into the slider UI