New Install Button

{ TODO try adding progress in button }

src/main/kotlin/com/looker/droidify/ui/compose/components/InstallButton.kt

@@ -0,0 +1,64 @@
+package com.looker.droidify.ui.compose.components
+
+import androidx.compose.animation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Close
+import androidx.compose.material.icons.rounded.Download
+import androidx.compose.material.icons.rounded.Launch
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.unit.dp
+import com.looker.droidify.ui.compose.utils.ButtonStates
+import com.looker.droidify.ui.compose.utils.ButtonWork
+import com.looker.droidify.ui.compose.utils.Cancelable
+
+@OptIn(ExperimentalAnimationApi::class)
+@Composable
+fun InstallButton(
+    modifier: Modifier = Modifier,
+    buttonState: ButtonStates,
+    onClick: (ButtonStates) -> Unit
+) {
+    ElevatedButton(
+        modifier = modifier,
+        onClick = { onClick(buttonState) }
+    ) {
+        AnimatedContent(
+            targetState = buttonState,
+            transitionSpec = {
+                when (targetState) {
+                    is Cancelable -> {
+                        slideInVertically { height -> height } + fadeIn() with
+                                slideOutVertically { height -> -height } + fadeOut()
+                    }
+                    is ButtonWork -> {
+                        slideInVertically { height -> -height } + fadeIn() with
+                                slideOutVertically { height -> height } + fadeOut()
+                    }
+                }.using(SizeTransform(clip = false))
+            }
+        ) {
+            Row(
+                Modifier
+                    .defaultMinSize(
+                        minWidth = ButtonDefaults.MinWidth,
+                        minHeight = ButtonDefaults.MinHeight
+                    )
+                    .padding(ButtonDefaults.ContentPadding),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(imageVector = it.icon, contentDescription = null)
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(text = it.text)
+            }
+        }
+    }
+}

src/main/kotlin/com/looker/droidify/ui/compose/pages/app_detail/components/Header.kt

@@ -7,15 +7,16 @@ import androidx.compose.material3.LinearProgressIndicator
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.looker.droidify.R
+import com.looker.droidify.ui.compose.components.InstallButton
 import com.looker.droidify.ui.compose.theme.LocalShapes
-import com.looker.droidify.ui.compose.utils.NetworkImage
+import com.looker.droidify.ui.compose.utils.*
 import com.looker.droidify.utility.extension.text.formatSize
 
 @Composable
@@ -48,6 +49,18 @@ fun Header(
                 appDev = appDev
             )
             DownloadProgress(totalSize = 69420)
+            var buttonState by remember { mutableStateOf<ButtonStates>(Connecting) }
+
+            InstallButton(buttonState = buttonState) {
+                buttonState = when (it) {
+                    Connecting -> Download
+                    Download -> Downloading
+                    Downloading -> Install
+                    Install -> Installing
+                    Installing -> Launch
+                    Launch -> Connecting
+                }
+            }
         }
     }
 }

src/main/kotlin/com/looker/droidify/ui/compose/utils/InstallButtonState.kt

@@ -0,0 +1,31 @@
+package com.looker.droidify.ui.compose.utils
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Close
+import androidx.compose.material.icons.rounded.Download
+import androidx.compose.material.icons.rounded.Launch
+import androidx.compose.ui.graphics.vector.ImageVector
+
+sealed interface ButtonStates {
+    val icon: ImageVector
+    val text: String
+}
+
+sealed class Cancelable(
+    override val text: String,
+    override val icon: ImageVector = Icons.Rounded.Close
+) : ButtonStates
+
+object Connecting : Cancelable("Connecting")
+object Downloading : Cancelable("Downloading")
+object Installing : Cancelable("Installing")
+
+
+sealed class ButtonWork(
+    override val text: String,
+    override val icon: ImageVector = Icons.Rounded.Download
+) : ButtonStates
+
+object Download : ButtonWork("Download")
+object Install : ButtonWork("Install")
+object Launch : ButtonWork("Launch", Icons.Rounded.Launch)