app/src/main/java/me/zobrist/tichucounter/ui/history/HistoryView.kt

@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
@@ -25,18 +26,17 @@ import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Badge
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
-import androidx.compose.material3.DismissDirection
-import androidx.compose.material3.DismissValue
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SnackbarDuration
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.SnackbarResult
-import androidx.compose.material3.SwipeToDismiss
+import androidx.compose.material3.SwipeToDismissBox
+import androidx.compose.material3.SwipeToDismissBoxValue
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.rememberDismissState
+import androidx.compose.material3.rememberSwipeToDismissBoxState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -48,6 +48,7 @@ import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Alignment.Companion.TopEnd
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
@@ -213,89 +214,110 @@ fun DismissibleHistoryListItem(
 
     val density = LocalDensity.current
     val dismissState =
-        rememberDismissState(positionalThreshold = { with(density) { 100.dp.toPx() } },
+        rememberSwipeToDismissBoxState(positionalThreshold = { with(density) { 100.dp.toPx() } },
+
             confirmValueChange = {
-                if (it == DismissValue.DismissedToStart) {
+                if (it == SwipeToDismissBoxValue.EndToStart) {
                     onDeleteClicked(game.game.uid)
                 }
-                if (it == DismissValue.DismissedToEnd) {
+                if (it == SwipeToDismissBoxValue.StartToEnd) {
                     onOpenClicked(game.game.uid)
                 }
                 true
             })
 
-    val directions = if (game.game.active) {
-        setOf()
-
-    } else {
-        setOf(DismissDirection.EndToStart, DismissDirection.StartToEnd)
-    }
-
-    SwipeToDismiss(
+    SwipeToDismissBox(
         modifier = modifier,
         state = dismissState,
-        directions = directions,
-        background = {
-            val direction = dismissState.dismissDirection ?: return@SwipeToDismiss
-            val color by animateColorAsState(
-                when (dismissState.targetValue) {
-                    DismissValue.DismissedToStart -> MaterialTheme.colorScheme.error
-                    DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.primary
+        enableDismissFromEndToStart = true,
+        enableDismissFromStartToEnd = true,
+        backgroundContent = {
+            ItemBackground(dismissState.targetValue)
+        }, content = {
+            HistoryListItem(game = game, modifier = Modifier.padding(2.dp))
+        })
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ItemBackground(
+    dismissBoxValue: SwipeToDismissBoxValue
+)
+{
+    val backgroundColor by animateColorAsState(
+        when (dismissBoxValue) {
+            SwipeToDismissBoxValue.EndToStart -> MaterialTheme.colorScheme.error
+            SwipeToDismissBoxValue.StartToEnd-> MaterialTheme.colorScheme.primary
             else -> MaterialTheme.colorScheme.background
 
         }, label = ""
     )
     val textColor by animateColorAsState(
-                when (dismissState.targetValue) {
-                    DismissValue.DismissedToStart -> MaterialTheme.colorScheme.onError
-                    DismissValue.DismissedToEnd -> MaterialTheme.colorScheme.onPrimary
+        when (dismissBoxValue) {
+            SwipeToDismissBoxValue.EndToStart -> MaterialTheme.colorScheme.onError
+            SwipeToDismissBoxValue.StartToEnd -> MaterialTheme.colorScheme.onPrimary
             else -> MaterialTheme.colorScheme.onBackground
 
         }, label = ""
     )
-            val alignment = when (direction) {
-                DismissDirection.StartToEnd -> Alignment.CenterStart
-                DismissDirection.EndToStart -> Alignment.CenterEnd
-            }
-            val icon = when (direction) {
-                DismissDirection.StartToEnd -> Icons.Outlined.RestartAlt
-                DismissDirection.EndToStart -> Icons.Outlined.Delete
-            }
-            val text = when (direction) {
-                DismissDirection.StartToEnd -> stringResource(id = R.string.continue_play)
-                DismissDirection.EndToStart -> stringResource(id = R.string.delete)
-            }
     val scale by animateFloatAsState(
-                if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f, label = ""
+        if (dismissBoxValue == SwipeToDismissBoxValue.Settled) 0.75f else 1f, label = ""
     )
 
     Box(
         Modifier
             .fillMaxSize()
             .padding(top = 2.dp, bottom = 2.dp)
-                    .background(color)
+            .background(backgroundColor)
             .padding(horizontal = 10.dp),
-                contentAlignment = alignment
     ) {
         Column(
             verticalArrangement = Arrangement.Center,
-                    horizontalAlignment = Alignment.CenterHorizontally
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.align(Alignment.CenterStart)
         ) {
-                    Icon(
-                        icon,
+            Icon(Icons.Outlined.RestartAlt,
                 contentDescription = null,
-                        modifier = Modifier.scale(scale),
-                        tint = textColor
-                    )
-                    Text(text = text, color = textColor)
+                tint = textColor,
+                modifier = Modifier.scale(scale),)
+            Text(text = stringResource(id = R.string.continue_play), color = textColor)
+        }
+        Column(
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.align(Alignment.CenterEnd)
+
+        ) {
+            Icon(Icons.Outlined.Delete,
+                contentDescription = null,
+                tint = textColor,
+                modifier = Modifier.scale(scale),)
+            Text(text = stringResource(id = R.string.delete), color = textColor)
         }
     }
-        }, dismissContent = {
-            HistoryListItem(game = game, modifier = Modifier.padding(2.dp))
-        })
 }
 
 @OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+private fun BackgroundPreview() {
+    Column {
+        Box(modifier = Modifier.height(60.dp))
+        {
+            ItemBackground(SwipeToDismissBoxValue.Settled)
+        }
+        Box(modifier = Modifier.height(60.dp))
+        {
+            ItemBackground(SwipeToDismissBoxValue.EndToStart)
+        }
+        Box(modifier = Modifier.height(60.dp))
+        {
+            ItemBackground(SwipeToDismissBoxValue.StartToEnd)
+        }
+    }
+}
+
+
 @Composable
 fun HistoryListItem(
     game: GameWithScores, modifier: Modifier = Modifier