feat(connector): add layout for action screen

connector/composeApp/src/commonMain/composeResources/drawable/save-24px.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M840,280L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L680,120L840,280ZM760,314L646,200L200,200Q200,200 200,200Q200,200 200,200L200,760Q200,760 200,760Q200,760 200,760L760,760Q760,760 760,760Q760,760 760,760L760,314ZM480,720Q530,720 565,685Q600,650 600,600Q600,550 565,515Q530,480 480,480Q430,480 395,515Q360,550 360,600Q360,650 395,685Q430,720 480,720ZM240,400L600,400L600,240L240,240L240,400ZM200,314L200,760Q200,760 200,760Q200,760 200,760L200,760Q200,760 200,760Q200,760 200,760L200,200Q200,200 200,200Q200,200 200,200L200,200L200,314Z"/>
+</vector>

connector/composeApp/src/desktopMain/kotlin/tab/procedure/Actions.kt

@@ -1,28 +1,42 @@
 package tab.procedure
 
 import InterfaceState
+import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.outlined.ArrowBack
 import androidx.compose.material.icons.outlined.Add
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateListOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.navigator.LocalNavigator
+import cafe.adriel.voyager.navigator.Navigator
 import cafe.adriel.voyager.navigator.currentOrThrow
+import connector.composeapp.generated.resources.Res
+import connector.composeapp.generated.resources.save_24px
+import org.jetbrains.compose.resources.ExperimentalResourceApi
+import org.jetbrains.compose.resources.painterResource
 import org.koin.compose.koinInject
 
 class Actions : Screen {
+    private val columnPadding = 24.dp
+    private val itemPadding = 24.dp
+
+    private var inputs = mutableStateListOf(1)
+
     @Composable
     override fun Content() {
         val navigator = LocalNavigator.currentOrThrow
         val viewModel = koinInject<InterfaceState>()
-        val columnPadding = 24.dp
+        val state = rememberLazyListState(0)
 
         // Checks if a project has been selected before viewing contents
         if (viewModel.procedureId == null) {
@@ -45,37 +59,106 @@ class Actions : Screen {
                 modifier = Modifier
                     .fillMaxHeight()
                     .fillMaxWidth()
-                    .verticalScroll(rememberScrollState())
                     .padding(top = columnPadding, bottom = columnPadding),
                 horizontalAlignment = Alignment.CenterHorizontally,
-            ) {
-                Column(
-                    Modifier.fillMaxWidth(0.7F),
-                    verticalArrangement = Arrangement.spacedBy(24.dp)
-                ) {
-                    Text(
-                        text = "Edit Actions",
-                        style = MaterialTheme.typography.headlineSmall
-                    )
 
-                    Button(
-                        contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
-                        onClick = {
-                            // TODO make checks
-                            navigator.pop()
-                            viewModel.procedureId = null
-                        }
+            ) {
+                Box(
+                    modifier = Modifier.fillMaxWidth(0.7F),
+                ) {
+                    LazyColumn(
+                        state = state,
+                        verticalArrangement = Arrangement.spacedBy(itemPadding)
                     ) {
-                        Icon(Icons.Outlined.Add, "Create Procedure", modifier = Modifier.size(18.dp))
-                        Spacer(Modifier.size(ButtonDefaults.IconSpacing))
-                        Text(
-                            "Create",
-                            style = MaterialTheme.typography.labelLarge,
-                            color = MaterialTheme.colorScheme.onPrimary
-                        )
+
+                        item {
+                            Header()
+                        }
+
+                        items(
+                            items = inputs,
+                            key = { input -> input }
+                        ) { item ->
+                            ActionItem(item)
+                        }
+
+                        item {
+                            Footer(navigator, viewModel)
+                        }
                     }
+
+                    VerticalScrollbar(
+                        modifier = Modifier
+                            .align(Alignment.CenterEnd)
+                            .fillMaxHeight(),
+                        adapter = rememberScrollbarAdapter(
+                            scrollState = state,
+                        ),
+                    )
                 }
             }
         }
     }
+
+    @Composable
+    private fun Header() {
+        Text(
+            text = "Edit Actions",
+            style = MaterialTheme.typography.headlineSmall
+        )
+    }
+
+    @Composable
+    private fun ActionItem(item: Int) {
+        Column (
+            verticalArrangement = Arrangement.spacedBy(itemPadding)
+        ) {
+            Text(text = "Action $item")
+
+            HorizontalDivider()
+        }
+    }
+
+    @OptIn(ExperimentalResourceApi::class)
+    @Composable
+    private fun Footer(navigator: Navigator, viewModel: InterfaceState) {
+        Row (
+            Modifier.fillMaxWidth(),
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            // Add Step
+            FilledTonalButton(
+                contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
+                onClick = {
+                    // TODO make this a proper data array for each item in checklist
+                    inputs += inputs.last() + 1
+                }
+            ) {
+                Icon(Icons.Outlined.Add, "Add", modifier = Modifier.size(18.dp))
+                Spacer(Modifier.size(ButtonDefaults.IconSpacing))
+                Text(
+                    "Add Step",
+                    style = MaterialTheme.typography.labelLarge,
+                )
+            }
+
+            // Save
+            Button(
+                contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
+                onClick = {
+                    // TODO make checks
+                    // TODO save to database
+                    navigator.pop()
+                    viewModel.procedureId = null
+                }
+            ) {
+                Icon(painterResource(Res.drawable.save_24px), "Save", modifier = Modifier.size(18.dp))
+                Spacer(Modifier.size(ButtonDefaults.IconSpacing))
+                Text(
+                    "Save",
+                    style = MaterialTheme.typography.labelLarge,
+                )
+            }
+        }
+    }
 }