refactor(ExtensionRepo): Split item and input

app/src/main/java/dev/yokai/presentation/component/EmptyScreen.kt

@@ -1,5 +1,6 @@
 package dev.yokai.presentation.component
 
+import android.content.res.Configuration
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -67,7 +68,7 @@ fun EmptyScreen(
     actions = actions,
 )
 
-@Preview
+@Preview(name = "Light", uiMode = Configuration.UI_MODE_NIGHT_NO, showBackground = true)
 @Composable
 private fun EmptyScreen(
     modifier: Modifier = Modifier,

app/src/main/java/dev/yokai/presentation/extension/repo/ExtensionRepoScreen.kt

@@ -28,6 +28,7 @@ import dev.yokai.domain.ComposableAlertDialog
 import dev.yokai.presentation.AppBarType
 import dev.yokai.presentation.YokaiScaffold
 import dev.yokai.presentation.component.EmptyScreen
+import dev.yokai.presentation.extension.repo.component.ExtensionRepoInput
 import dev.yokai.presentation.extension.repo.component.ExtensionRepoItem
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.util.compose.LocalAlertDialog
@@ -71,7 +72,7 @@ fun ExtensionRepoScreen(
             state = listState,
         ) {
             item {
-                ExtensionRepoItem(
+                ExtensionRepoInput(
                     inputText = inputText,
                     inputHint = stringResource(R.string.label_add_repo),
                     onInputChange = { inputText = it },

app/src/main/java/dev/yokai/presentation/extension/repo/component/ExtensionRepoItem.kt

@@ -11,6 +11,7 @@ import androidx.compose.material.icons.automirrored.outlined.Label
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -35,29 +36,20 @@ import eu.kanade.tachiyomi.util.compose.textHint
 // - Show display name
 @Composable
 fun ExtensionRepoItem(
+    repoUrl: String,
     modifier: Modifier = Modifier,
-    repoUrl: String? = null,
-    inputText: String = "",
-    onInputChange: (String) -> Unit = {},
-    inputHint: String? = null,
-    onAddClick: (String) -> Unit = {},
     onDeleteClick: (String) -> Unit = {},
 ) {
-    require(repoUrl != null || inputHint != null)
-
-    val interactionSource = remember { MutableInteractionSource() }
-
     Row(
         modifier = modifier.padding(16.dp),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Icon(
             modifier = Modifier.padding(horizontal = 8.dp),
-            imageVector = if (repoUrl != null) Icons.AutoMirrored.Outlined.Label else Icons.Filled.Add,
+            imageVector = Icons.AutoMirrored.Outlined.Label,
             contentDescription = null,
             tint = MaterialTheme.colorScheme.onBackground,
         )
-        if (repoUrl != null) {
         Text(
             modifier = Modifier
                 .weight(1.0f)
@@ -73,7 +65,20 @@ fun ExtensionRepoItem(
                 tint = MaterialTheme.colorScheme.onBackground,
             )
         }
-        } else {
+    }
+}
+
+@Composable
+fun ExtensionRepoInput(
+    inputHint: String,
+    modifier: Modifier = Modifier,
+    inputText: String = "",
+    onInputChange: (String) -> Unit = {},
+    onAddClick: (String) -> Unit = {},
+    isLoading: Boolean = false,
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+
     val colors = TextFieldDefaults.colors().copy(
         cursorColor = MaterialTheme.colorScheme.secondary,
         focusedPlaceholderColor = MaterialTheme.colorScheme.textHint,
@@ -87,6 +92,16 @@ fun ExtensionRepoItem(
         errorIndicatorColor = Color.Transparent,
         disabledIndicatorColor = Color.Transparent,
     )
+    Row(
+        modifier = modifier.padding(16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(
+            modifier = Modifier.padding(horizontal = 8.dp),
+            imageVector = Icons.Filled.Add,
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.onBackground,
+        )
         TextField(
             modifier = Modifier
                 .indicatorLine(
@@ -98,8 +113,8 @@ fun ExtensionRepoItem(
                 .weight(1.0f),
             value = inputText,
             onValueChange = onInputChange,
-                enabled = true,
+            enabled = !isLoading,
-                placeholder = { Text(text = inputHint!!, fontSize = 16.sp) },
+            placeholder = { Text(text = inputHint, fontSize = 16.sp) },
             textStyle = TextStyle(fontSize = 16.sp),
             colors = colors,
         )
@@ -107,12 +122,16 @@ fun ExtensionRepoItem(
             onClick = { onAddClick(inputText) },
             enabled = inputText.isNotEmpty(),
         ) {
+            if (!isLoading)
                 Icon(
                     imageVector = Icons.Filled.Check,
                     contentDescription = null,
                     tint = MaterialTheme.colorScheme.secondary,
                 )
-            }
+            else
+                CircularProgressIndicator(
+                    color = MaterialTheme.colorScheme.primary,
+                )
         }
     }
 }
@@ -124,8 +143,9 @@ fun ExtensionRepoItemPreview() {
     Surface {
         Column {
             ExtensionRepoItem(repoUrl = input)
-            ExtensionRepoItem(inputHint = "Url")
+            ExtensionRepoInput(inputHint = "Input")
-            ExtensionRepoItem(inputHint = "Url", inputText = input)
+            ExtensionRepoInput(inputHint = "", inputText = input)
+            ExtensionRepoInput(inputHint = "", inputText = input, isLoading = true)
         }
     }
 }