feat: Adding EditNotificationInput

app/src/main/java/app/myzel394/alibi/ui/components/CustomRecordingNotificationsScreen/atoms/EditNotificationInput.kt

@@ -0,0 +1,181 @@
+package app.myzel394.alibi.ui.components.CustomRecordingNotificationsScreen.atoms
+
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Circle
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import app.myzel394.alibi.R
+import app.myzel394.alibi.ui.effects.rememberForceUpdate
+import com.maxkeppeler.sheets.input.models.InputText
+import java.time.Duration
+import java.time.LocalDateTime
+import java.time.Period
+
+@Composable
+fun EditNotificationInput(
+    modifier: Modifier = Modifier,
+    showOngoing: Boolean,
+    title: String,
+    description: String,
+    onShowOngoingChange: (Boolean) -> Unit,
+    onTitleChange: (String) -> Unit,
+    onDescriptionChange: (String) -> Unit,
+) {
+    var ongoingStartTime by remember { mutableStateOf(LocalDateTime.now()) }
+
+    val secondaryColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
+
+    Row(
+        modifier = Modifier
+            .clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6f))
+            .padding(16.dp)
+            .then(modifier),
+        verticalAlignment = Alignment.Top,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        val headlineSize = 22.dp
+
+        Box(
+            modifier = Modifier
+                .size(headlineSize)
+                .clip(CircleShape)
+                .background(MaterialTheme.colorScheme.secondary)
+                .padding(1.dp),
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.launcher_foreground),
+                contentDescription = null,
+                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onPrimary),
+            )
+        }
+        Column(
+            horizontalAlignment = Alignment.Start,
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+                modifier = Modifier.height(headlineSize),
+            ) {
+                Text(
+                    stringResource(R.string.app_name),
+                    style = MaterialTheme.typography.bodySmall,
+                    color = secondaryColor,
+                )
+                if (showOngoing) {
+                    Icon(
+                        Icons.Default.Circle,
+                        contentDescription = null,
+                        tint = secondaryColor,
+                        modifier = Modifier
+                            .size(8.dp)
+                    )
+
+                    val fakeAlpha = rememberForceUpdate()
+                    val formattedTime = {
+                        val difference =
+                            Duration.between(
+                                ongoingStartTime,
+                                LocalDateTime.now(),
+                            )
+                        val minutes = difference.toMinutes()
+                        val seconds = difference.minusMinutes(minutes).seconds
+
+                        "${if (minutes < 10) "0$minutes" else minutes}:${if (seconds < 10) "0$seconds" else seconds}"
+                    }
+                    Text(
+                        formattedTime(),
+                        modifier = Modifier.alpha(fakeAlpha),
+                        style = MaterialTheme.typography.bodySmall,
+                        color = secondaryColor,
+                    )
+                }
+            }
+            Column(
+                verticalArrangement = Arrangement.spacedBy(6.dp),
+            ) {
+                BasicTextField(
+                    value = title,
+                    onValueChange = onTitleChange,
+                    textStyle = MaterialTheme.typography.titleMedium.copy(
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    ),
+                    cursorBrush = SolidColor(MaterialTheme.colorScheme.onSurfaceVariant),
+                    singleLine = true,
+                    keyboardOptions = KeyboardOptions(
+                        keyboardType = KeyboardType.Text,
+                        imeAction = ImeAction.Next,
+                    ),
+                )
+                BasicTextField(
+                    value = description,
+                    onValueChange = onDescriptionChange,
+                    textStyle = MaterialTheme.typography.bodyMedium.copy(
+                        fontWeight = FontWeight.Bold,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    ),
+                    cursorBrush = SolidColor(MaterialTheme.colorScheme.onSurfaceVariant),
+                    singleLine = true,
+                    keyboardOptions = KeyboardOptions(
+                        keyboardType = KeyboardType.Text,
+                        imeAction = ImeAction.Done,
+                    ),
+                )
+            }
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+            ) {
+                Text(
+                    stringResource(R.string.ui_audioRecorder_action_delete_label),
+                    color = MaterialTheme.colorScheme.secondary,
+                    fontSize = MaterialTheme.typography.bodyMedium.fontSize,
+                    fontWeight = FontWeight.Bold,
+                )
+                Text(
+                    stringResource(R.string.ui_audioRecorder_action_pause_label),
+                    color = MaterialTheme.colorScheme.secondary,
+                    fontSize = MaterialTheme.typography.bodyMedium.fontSize,
+                    fontWeight = FontWeight.Bold,
+                )
+            }
+        }
+    }
+}

app/src/main/java/app/myzel394/alibi/ui/effects/force-update.kt

@@ -0,0 +1,23 @@
+package app.myzel394.alibi.ui.effects
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import kotlinx.coroutines.delay
+
+@Composable
+fun rememberForceUpdate(
+    time: Long = 100L,
+): Float {
+    var tickTack by rememberSaveable { mutableStateOf(1f) }
+
+    LaunchedEffect(tickTack) {
+        delay(time)
+        tickTack = if (tickTack == 1f) 0.99f else 1f
+    }
+
+    return tickTack
+}

app/src/main/java/app/myzel394/alibi/ui/screens/CustomRecordingNotificationsScreen.kt

@@ -38,6 +38,7 @@ import app.myzel394.alibi.R
 import app.myzel394.alibi.dataStore
 import app.myzel394.alibi.db.AppSettings
 import app.myzel394.alibi.ui.SUPPORTS_DARK_MODE_NATIVELY
+import app.myzel394.alibi.ui.components.CustomRecordingNotificationsScreen.atoms.EditNotificationInput
 import app.myzel394.alibi.ui.components.CustomRecordingNotificationsScreen.atoms.LandingElement
 import app.myzel394.alibi.ui.components.SettingsScreen.atoms.BitrateTile
 import app.myzel394.alibi.ui.components.SettingsScreen.atoms.CustomNotificationTile
@@ -91,10 +92,24 @@ fun CustomRecordingNotificationsScreen(
             .nestedScroll(scrollBehavior.nestedScrollConnection)
     ) { padding ->
         if (settings.notificationSettings == null) {
-            LandingElement(
+        }
+        Box(
             modifier = Modifier
-                    .padding(padding),
+                .padding(padding)
+                .padding(vertical = 64.dp)
+        ) {
+            EditNotificationInput(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp),
+                showOngoing = true,
+                title = "Alibi",
+                description = "test",
+                onShowOngoingChange = {},
+                onTitleChange = {},
+                onDescriptionChange = {},
             )
+
         }
     }
 }