Add functionality to use vertical mouse scroll to travel through row of frames

Author: wenli-cai

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/ui/FrameSelectTab.kt

@@ -1,18 +1,25 @@
 package com.squareup.workflow1.traceviewer.ui
 
+import androidx.compose.foundation.MutatePriority
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.awaitEachGesture
+import androidx.compose.foundation.gestures.scrollBy
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.dp
 import com.squareup.workflow1.traceviewer.model.Node
+import kotlinx.coroutines.launch
 
 /**
  * A trace tab selector that allows devs to switch between different states within the provided trace.
@@ -24,17 +31,30 @@ internal fun FrameSelectTab(
   onIndexChange: (Int) -> Unit,
   modifier: Modifier = Modifier
 ) {
-  val state = rememberLazyListState()
+  val lazyListState = rememberLazyListState()
+  val coroutineScope = rememberCoroutineScope()
 
   Surface(
-    modifier = modifier
-      .padding(4.dp),
+    modifier = modifier,
     color = Color.White,
   ) {
     LazyRow(
+      state = lazyListState,
       modifier = Modifier
-        .padding(8.dp),
-      state = state
+        .padding(8.dp)
+        .pointerInput(Unit) {
+          awaitEachGesture {
+            val event = awaitPointerEvent()
+            if (event.type == PointerEventType.Scroll) {
+              val scrollDeltaY = event.changes.first().scrollDelta.y
+              coroutineScope.launch {
+                lazyListState.scroll(MutatePriority.Default) {
+                  scrollBy(scrollDeltaY * 10f)
+                }
+              }
+            }
+          }
+        },
     ) {
       items(frames.size) { index ->
         Text(