Work on new language screen components

java/res/drawable/mic.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,1a3,3 0,0 0,-3 3v8a3,3 0,0 0,6 0V4a3,3 0,0 0,-3 -3z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M19,10v2a7,7 0,0 1,-14 0v-2"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M12,19L12,23"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M8,23L16,23"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+</vector>

java/res/drawable/plus_circle.xml

@@ -0,0 +1,27 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M12,8L12,16"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M8,12L16,12"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+</vector>

java/res/drawable/trash.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M3,6l2,0l16,0"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M19,6v14a2,2 0,0 1,-2 2H7a2,2 0,0 1,-2 -2V6m3,0V4a2,2 0,0 1,2 -2h4a2,2 0,0 1,2 2v2"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M10,11L10,17"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M14,11L14,17"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+</vector>

java/src/org/futo/inputmethod/latin/uix/ImportResourceActivity.kt

@@ -198,7 +198,7 @@ fun FileKind.kindTitle(): String {
 
 fun FileKind.icon(): Int {
     return when(this) {
-        FileKind.VoiceInput -> R.drawable.mic_fill
+        FileKind.VoiceInput -> R.drawable.mic
         FileKind.Transformer -> R.drawable.cpu
         FileKind.Dictionary -> R.drawable.book
         FileKind.Invalid -> R.drawable.close

java/src/org/futo/inputmethod/latin/uix/settings/SettingsNavigator.kt

@@ -15,6 +15,7 @@ import org.futo.inputmethod.latin.uix.settings.pages.AddLanguageScreen
 import org.futo.inputmethod.latin.uix.settings.pages.AdvancedParametersScreen
 import org.futo.inputmethod.latin.uix.settings.pages.BlacklistScreen
 import org.futo.inputmethod.latin.uix.settings.pages.CreditsScreen
+import org.futo.inputmethod.latin.uix.settings.pages.DevEditTextVariationsScreen
 import org.futo.inputmethod.latin.uix.settings.pages.DeveloperScreen
 import org.futo.inputmethod.latin.uix.settings.pages.HelpScreen
 import org.futo.inputmethod.latin.uix.settings.pages.HomeScreen
@@ -58,6 +59,7 @@ fun SettingsNavigator(
         composable("themes") { ThemeScreen(navController) }
         composable("help") { HelpScreen(navController) }
         composable("developer") { DeveloperScreen(navController) }
+        composable("devtextedit") { DevEditTextVariationsScreen(navController) }
         composable("blacklist") { BlacklistScreen(navController) }
         composable("payment") { PaymentScreen(navController) { navController.navigateUp() } }
         composable("paid") { PaymentThankYouScreen { navController.navigateUp() } }

java/src/org/futo/inputmethod/latin/uix/settings/pages/DevEditTextVariations.kt

@@ -0,0 +1,244 @@
+package org.futo.inputmethod.latin.uix.settings.pages
+
+import android.view.inputmethod.EditorInfo
+import android.widget.EditText
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.toArgb
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalInspectionMode
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.rememberNavController
+import org.futo.inputmethod.latin.uix.settings.ScreenTitle
+import org.futo.inputmethod.latin.uix.settings.ScrollableList
+
+
+@Composable
+private fun TextEdit(name: String, type: Int, imeOptions: Int? = null, imeActionLabel: String? = null, imeActionId: Int? = null) {
+    val context = LocalContext.current
+    val bgColor = MaterialTheme.colorScheme.background
+    val fgColor = MaterialTheme.colorScheme.onBackground
+
+    if(!LocalInspectionMode.current) {
+        val editText = remember {
+            EditText(context).apply {
+                this.inputType = type
+
+                if(imeOptions != null) {
+                    this.imeOptions = imeOptions
+                }
+
+                if(imeActionId != null && imeActionLabel != null) {
+                    setImeActionLabel(
+                        imeActionLabel,
+                        imeActionId
+                    )
+                }
+
+                setHint(name)
+                setBackgroundColor(bgColor.toArgb())
+                setTextColor(fgColor.toArgb())
+                setHintTextColor(fgColor.copy(alpha = 0.7f).toArgb())
+            }
+        }
+
+        LaunchedEffect(bgColor, fgColor) {
+            editText.setBackgroundColor(bgColor.toArgb())
+            editText.setTextColor(fgColor.toArgb())
+            editText.setHintTextColor(fgColor.copy(alpha = 0.7f).toArgb())
+        }
+
+        AndroidView({ editText }, modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp))
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DevEditTextVariationsScreen(navController: NavHostController = rememberNavController()) {
+
+    ScrollableList {
+        ScreenTitle("Text Edit Variations", showBack = true, navController)
+
+        TextEdit("multi lines none",
+            EditorInfo.TYPE_TEXT_FLAG_MULTI_LINE or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT,
+            EditorInfo.IME_ACTION_UNSPECIFIED
+        )
+
+        TextEdit("multi lines send",
+            EditorInfo.TYPE_TEXT_FLAG_MULTI_LINE or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT,
+            EditorInfo.IME_ACTION_SEND
+        )
+
+
+        TextEdit("short message send multi lines",
+            EditorInfo.TYPE_TEXT_VARIATION_SHORT_MESSAGE or EditorInfo.TYPE_TEXT_FLAG_MULTI_LINE or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT or EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES,
+            EditorInfo.IME_ACTION_SEND
+        )
+
+        TextEdit("multi lines search",
+            EditorInfo.TYPE_TEXT_FLAG_MULTI_LINE or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT or EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES,
+            EditorInfo.IME_ACTION_SEARCH
+        )
+
+        TextEdit("short message send",
+            EditorInfo.TYPE_TEXT_VARIATION_SHORT_MESSAGE or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT or EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES,
+            EditorInfo.IME_ACTION_SEND
+        )
+
+        TextEdit("autocap none",
+            EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT or EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES,
+            EditorInfo.IME_ACTION_NONE
+        )
+
+        TextEdit("autocap send",
+            EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT or EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES,
+            EditorInfo.IME_ACTION_SEND
+        )
+
+        TextEdit("uri go",
+            EditorInfo.TYPE_TEXT_VARIATION_URI,
+            EditorInfo.IME_ACTION_GO
+        )
+
+        TextEdit("email address done",
+            EditorInfo.TYPE_TEXT_VARIATION_EMAIL_ADDRESS,
+            EditorInfo.IME_ACTION_DONE
+        )
+
+        TextEdit("auto correct search",
+            EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT,
+            EditorInfo.IME_ACTION_SEARCH
+        )
+
+        TextEdit("auto correct search",
+            EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT,
+            EditorInfo.IME_ACTION_SEARCH
+        )
+
+        TextEdit("auto correct previous",
+            EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT
+        )
+
+        TextEdit("auto correct custom",
+            EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT,
+            imeActionLabel = "custom action label",
+            imeActionId = 100
+        )
+
+        TextEdit("phone",
+            EditorInfo.TYPE_CLASS_PHONE
+        )
+
+        TextEdit("phone no action",
+            EditorInfo.TYPE_CLASS_PHONE,
+            EditorInfo.IME_ACTION_NONE
+        )
+
+        TextEdit("number send",
+            EditorInfo.TYPE_CLASS_NUMBER,
+            EditorInfo.IME_ACTION_SEND
+        )
+
+        TextEdit("number no action",
+            EditorInfo.TYPE_CLASS_NUMBER,
+            EditorInfo.IME_ACTION_NONE
+        )
+
+        TextEdit("password next",
+            EditorInfo.TYPE_TEXT_VARIATION_PASSWORD,
+            EditorInfo.IME_ACTION_NEXT
+        )
+
+        TextEdit("visible password done",
+            EditorInfo.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD,
+            EditorInfo.IME_ACTION_DONE
+        )
+
+        TextEdit("number password send",
+            EditorInfo.TYPE_NUMBER_VARIATION_PASSWORD,
+            EditorInfo.IME_ACTION_SEND
+        )
+
+        TextEdit("text no suggestion",
+            EditorInfo.TYPE_TEXT_FLAG_NO_SUGGESTIONS,
+            EditorInfo.IME_ACTION_GO
+        )
+
+        TextEdit("text no autocorrection",
+            EditorInfo.TYPE_TEXT_VARIATION_SHORT_MESSAGE,
+            EditorInfo.IME_ACTION_DONE
+        )
+
+
+        TextEdit("cap characters with autocorrect",
+            EditorInfo.TYPE_TEXT_FLAG_CAP_CHARACTERS or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT
+        )
+
+        TextEdit("cap words with autocorrect",
+            EditorInfo.TYPE_TEXT_FLAG_CAP_WORDS or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT
+        )
+
+        TextEdit("cap sentences with autocorrect",
+            EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES or EditorInfo.TYPE_TEXT_FLAG_AUTO_CORRECT
+        )
+
+        TextEdit("cap characters",
+            EditorInfo.TYPE_TEXT_FLAG_CAP_CHARACTERS
+        )
+
+        TextEdit("cap words",
+            EditorInfo.TYPE_TEXT_FLAG_CAP_WORDS
+        )
+
+        TextEdit("cap sentences",
+            EditorInfo.TYPE_TEXT_FLAG_CAP_SENTENCES
+        )
+
+        TextEdit("email subject",
+            EditorInfo.TYPE_TEXT_VARIATION_EMAIL_SUBJECT
+        )
+
+        TextEdit("person name",
+            EditorInfo.TYPE_TEXT_VARIATION_PERSON_NAME
+        )
+
+        TextEdit("postal address",
+            EditorInfo.TYPE_TEXT_VARIATION_POSTAL_ADDRESS
+        )
+
+        TextEdit("signed number",
+            EditorInfo.TYPE_NUMBER_FLAG_SIGNED
+        )
+
+        TextEdit("decimal number",
+            EditorInfo.TYPE_NUMBER_FLAG_DECIMAL
+        )
+
+        TextEdit("signed decimal number",
+            EditorInfo.TYPE_NUMBER_FLAG_DECIMAL or EditorInfo.TYPE_NUMBER_FLAG_SIGNED
+        )
+
+        TextEdit("datetime",
+            EditorInfo.TYPE_DATETIME_VARIATION_NORMAL
+        )
+
+        TextEdit("date",
+            EditorInfo.TYPE_DATETIME_VARIATION_DATE
+        )
+
+        TextEdit("time",
+            EditorInfo.TYPE_DATETIME_VARIATION_TIME
+        )
+
+    }
+}

java/src/org/futo/inputmethod/latin/uix/settings/pages/DevSettings.kt

@@ -69,6 +69,12 @@ fun DeveloperScreen(navController: NavHostController = rememberNavController())
             icon = painterResource(id = R.drawable.close)
         )
 
+        NavigationItem(
+            title = "Text edit variations",
+            style = NavigationItemStyle.Misc,
+            navigate = { navController.navigate("devtextedit") }
+        )
+
 
         ScreenTitle(title = "Payment stuff")
 

java/src/org/futo/inputmethod/latin/uix/settings/pages/Languages.kt

@@ -1,34 +1,50 @@
 package org.futo.inputmethod.latin.uix.settings.pages
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowForward
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.ButtonColors
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import kotlinx.coroutines.runBlocking
@@ -50,12 +66,199 @@ import org.futo.inputmethod.latin.uix.settings.SettingItem
 import org.futo.inputmethod.latin.uix.settings.pages.modelmanager.openModelImporter
 import org.futo.inputmethod.latin.uix.settings.useDataStoreValueBlocking
 import org.futo.inputmethod.latin.uix.theme.Typography
+import org.futo.inputmethod.latin.uix.theme.UixThemeWrapper
+import org.futo.inputmethod.latin.uix.theme.presets.DynamicDarkTheme
 import org.futo.inputmethod.latin.uix.youAreImporting
 import org.futo.inputmethod.latin.utils.Dictionaries
 import org.futo.inputmethod.latin.xlm.ModelPaths
 import org.futo.inputmethod.updates.openURI
 import java.util.Locale
 
+data class LanguageItem (
+    val languageName: String,
+    val options: LanguageOptions,
+    val layouts: List<String>
+)
+
+val TextHeadingMediumMlStyle = Typography.titleLarge.copy(
+    fontSize = 20.sp,
+    lineHeight = 30.sp,
+    fontWeight = FontWeight(500)
+)
+
+val TextSmallStyle = Typography.titleSmall.copy(fontWeight = FontWeight.W400)
+val TextBodyRegularMlStyle = Typography.titleMedium.copy(fontWeight = FontWeight.W400)
+
+@Composable
+fun LanguageConfigurable(
+    kind: FileKind,
+    selection: String
+) {
+    Row(modifier = Modifier
+        .padding(start = 16.dp, top = 8.dp, end = 6.dp, bottom = 8.dp)
+        .defaultMinSize(0.dp, 50.dp)) {
+        Column(modifier = Modifier
+            .weight(1.0f)
+            .align(Alignment.CenterVertically)) {
+            Row(modifier = Modifier.alpha(0.75f)) {
+                Icon(
+                    painterResource(kind.icon()),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .align(Alignment.CenterVertically)
+                        .size(16.dp)
+                )
+
+                Spacer(modifier = Modifier.width(8.dp))
+
+                Text(
+                    kind.kindTitle(),
+                    modifier = Modifier.align(Alignment.CenterVertically),
+                    style = TextSmallStyle
+                )
+            }
+
+            Spacer(modifier = Modifier.height(10.dp))
+
+            Text(
+                selection,
+                style = TextBodyRegularMlStyle
+            )
+
+        }
+        Icon(
+            Icons.Default.ArrowForward,
+            contentDescription = null,
+            modifier = Modifier
+                .align(Alignment.CenterVertically)
+                .size(44.dp)
+                .padding(10.dp)
+        )
+    }
+}
+
+@Composable
+fun LayoutConfigurable(
+    name: String,
+    active: Boolean
+) {
+    Row(modifier = Modifier
+        .padding(start = 16.dp, end = 6.dp)
+        .height(44.dp)) {
+        Text(
+            name,
+            style = TextBodyRegularMlStyle,
+            modifier = Modifier.align(Alignment.CenterVertically)
+        )
+
+        Spacer(modifier = Modifier.weight(1.0f))
+
+        Switch(checked = active, onCheckedChange = {}, modifier = Modifier.align(Alignment.CenterVertically))
+        Spacer(modifier = Modifier.width(8.dp))
+
+        IconButton(onClick = { /*TODO*/ }, modifier = Modifier.align(Alignment.CenterVertically)) {
+            Icon(painterResource(id = R.drawable.trash), contentDescription = null)
+        }
+    }
+}
+
+@Composable
+fun ActionableItem(
+    icon: Painter,
+    text: String,
+    color: Color
+) {
+    TextButton(onClick = { /*TODO*/ }, colors = ButtonColors(
+        containerColor = Color.Transparent,
+        contentColor = color,
+        disabledContainerColor = Color.Transparent,
+        disabledContentColor = color.copy(alpha = 0.75f)
+    ), modifier = Modifier
+        .fillMaxWidth()
+        .height(44.dp)) {
+        Row {
+            Icon(icon, contentDescription = null, modifier = Modifier.align(Alignment.CenterVertically))
+            Spacer(modifier = Modifier.width(8.dp))
+            Text(text, modifier = Modifier.align(Alignment.CenterVertically), style = Typography.labelLarge)
+        }
+    }
+}
+
+@Composable
+fun LanguageSurface(item: LanguageItem, modifier: Modifier = Modifier) {
+    Column(
+        modifier
+            .padding(start = 32.dp, end = 32.dp)
+            .widthIn(296.dp, 400.dp)
+            .background(
+                color = MaterialTheme.colorScheme.secondaryContainer,
+                shape = RoundedCornerShape(size = 16.dp)
+            )
+            .padding(top = 14.dp, bottom = 12.dp)
+    ) {
+        CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSecondaryContainer) {
+            Text(item.languageName, modifier = Modifier.padding(start = 16.dp, end = 16.dp), style = TextHeadingMediumMlStyle)
+            Spacer(modifier = Modifier.height(32.dp))
+
+            LanguageConfigurable(kind = FileKind.VoiceInput, selection = item.options.voiceInputModel ?: "(None)")
+            LanguageConfigurable(kind = FileKind.Dictionary, selection = item.options.dictionary ?: "(None)")
+            LanguageConfigurable(kind = FileKind.Transformer, selection = item.options.transformerModel ?: "(None)")
+
+            Spacer(modifier = Modifier.height(24.dp))
+
+            Text(
+                "Keyboard Layouts",
+                modifier = Modifier
+                    .alpha(0.75f)
+                    .padding(start = 16.dp, end = 16.dp),
+                style = TextSmallStyle
+            )
+
+            Spacer(modifier = Modifier.height(9.dp))
+
+            item.layouts.forEach {
+                LayoutConfigurable(name = it, active = true)
+                Spacer(modifier = Modifier.height(4.dp))
+            }
+
+            Spacer(modifier = Modifier.height(21.dp))
+
+            ActionableItem(
+                icon = painterResource(id = R.drawable.plus_circle),
+                text = "Add Keyboard Layout",
+                color = MaterialTheme.colorScheme.primary
+            )
+
+            Spacer(modifier = Modifier.height(10.dp))
+
+            ActionableItem(
+                icon = painterResource(id = R.drawable.trash),
+                text = "Remove Language",
+                color = MaterialTheme.colorScheme.error
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun LanguageSurfacePreview() {
+    UixThemeWrapper(colorScheme = DynamicDarkTheme.obtainColors(LocalContext.current)) {
+        LanguageSurface(item = LanguageItem(
+            languageName = "Language Name",
+            options = LanguageOptions(
+                "Model Name",
+                "Model Name",
+                "Model Name"
+            ),
+            layouts = listOf(
+                "Keyboard Name",
+                "Keyboard Name"
+            )
+        ))
+    }
+}
+
 data class LanguageOptions(
     val voiceInputModel: String?,
     val dictionary: String?,
@@ -138,7 +341,7 @@ data class DeleteInfo(
     val kind: FileKind
 )
 
-@Preview
+@Preview(showBackground = true)
 @Composable
 fun LanguagesScreen(navController: NavHostController = rememberNavController()) {
     val context = LocalContext.current
@@ -173,7 +376,7 @@ fun LanguagesScreen(navController: NavHostController = rememberNavController())
             isCurrentlySet = runBlocking { ResourceHelper.findFileForKind(context, info.locale, info.kind)?.exists() == true }
         )
     }
-    LazyColumn {
+    LazyColumn(horizontalAlignment = Alignment.CenterHorizontally) {
         item {
             ScreenTitle("Languages & Models", showBack = true, navController)
         }
@@ -214,6 +417,25 @@ fun LanguagesScreen(navController: NavHostController = rememberNavController())
                 transformerModel = transformerName
             )
 
+            /*
+            Spacer(modifier = Modifier.height(12.dp))
+
+            LanguageSurface(
+                LanguageItem(
+                    languageName = name,
+                    options = options,
+                    layouts = subtypes.map {
+                        Subtypes.getLayoutName(
+                            context,
+                            it.getExtraValueOf(Constants.Subtype.ExtraValue.KEYBOARD_LAYOUT_SET) ?: "default"
+                        )
+                    }
+                ),
+            )
+
+            Spacer(modifier = Modifier.height(12.dp))
+            */
+
             Row(modifier = Modifier.fillMaxWidth()) {
                 Spacer(modifier = Modifier.width(16.dp))