feat: added color support for buttons on WearOS

gradle/libs.versions.toml

@@ -9,9 +9,9 @@ playServicesWearable = "18.0.0"
 material = "1.14.0"
 activityKtx = "1.13.0"
 constraintlayout = "2.2.1"
-kotlin = "2.2.10"
+kotlin = "2.4.0"
 composeBom = "2024.09.00"
-composeMaterial3 = "1.5.6"
+composeMaterial3 = "1.6.2"
 composeFoundation = "1.5.6"
 composeUiTooling = "1.5.6"
 wearToolingPreview = "1.0.0"
@@ -22,6 +22,7 @@ zxingAndroid = "4.3.0"
 lifecycleRuntimeKtx = "2.6.1"
 navigationFragmentKtx = "2.6.0"
 navigationUiKtx = "2.6.0"
+colorpicker = "1.2.0"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@@ -52,6 +53,7 @@ androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecyc
 androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
 androidx-navigation-fragment-ktx = { group = "androidx.navigation", name = "navigation-fragment-ktx", version.ref = "navigationFragmentKtx" }
 androidx-navigation-ui-ktx = { group = "androidx.navigation", name = "navigation-ui-ktx", version.ref = "navigationUiKtx" }
+compose-colorpicker = { module = "com.github.skydoves:colorpicker-compose", version.ref = "colorpicker" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }

mobile/build.gradle.kts

@@ -1,7 +1,6 @@
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.compose)
-    kotlin("plugin.serialization") version "2.2.20"
 }
 
 android {
@@ -12,8 +11,8 @@ android {
         applicationId = "ru.omni_devel.cards"
         minSdk = 30
         targetSdk = 36
-        versionCode = 30 // 0 at end for mobile
+        versionCode = 40 // 0 at end for mobile
-        versionName = "2.0"
+        versionName = "2.1"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
@@ -63,4 +62,5 @@ dependencies {
     implementation(libs.zxing.android)
     implementation("com.google.android.gms:play-services-wearable:18.1.0")
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.9.0")
+    implementation(libs.compose.colorpicker)
 }

mobile/src/main/java/ru/omni_devel/cards/CardInfo.kt

@@ -14,4 +14,5 @@ class CardInfo (
     val name: String,
     val codeType: BarcodeFormat,
     val codeValue: String,
-)
+    val color: String?,
+) {}

mobile/src/main/java/ru/omni_devel/cards/DbHelper.kt

@@ -6,25 +6,28 @@ import android.database.sqlite.SQLiteDatabase
 import android.database.sqlite.SQLiteOpenHelper
 import com.google.zxing.BarcodeFormat
 
-class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?) : SQLiteOpenHelper(context, "omni_cards", factory, 1) {
+class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?) : SQLiteOpenHelper(context, "omni_cards", factory, 2) {
     override fun onCreate(db: SQLiteDatabase?) {
-        db!!.execSQL("CREATE TABLE IF NOT EXISTS cards (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, codeType TEXT, codeValue TEXT)")
+        db!!.execSQL("CREATE TABLE IF NOT EXISTS cards (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, codeType TEXT, codeValue TEXT, color TEXT)")
     }
 
     override fun onUpgrade(
         db: SQLiteDatabase?,
-        p1: Int,
+        oldVersion: Int,
         p2: Int
     ) {
-        db!!.execSQL("DROP TABLE IF EXISTS cards")
+        if (oldVersion < 2) {
+            db!!.execSQL("ALTER TABLE cards ADD COLUMN color TEXT")
+        }
     }
 
-    fun addCard(name: String, codeValue: String, codeType: BarcodeFormat) {
+    fun addCard(name: String, codeValue: String, codeType: BarcodeFormat, color: String?) {
         val values = ContentValues()
 
         values.put("name", name)
         values.put("codeValue", codeValue)
         values.put("codeType", codeType.name)
+        values.put("color", color)
 
         val db = this.writableDatabase
 
@@ -33,12 +36,13 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
         db.close()
     }
 
-    fun editCard(id: Int, name: String, codeValue: String, codeType: BarcodeFormat) {
+    fun editCard(id: Int, name: String, codeValue: String, codeType: BarcodeFormat, color: String?) {
         val values = ContentValues()
 
         values.put("name", name)
         values.put("codeValue", codeValue)
         values.put("codeType", codeType.name)
+        values.put("color", color)
 
         val db = this.writableDatabase
 
@@ -58,7 +62,8 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
                 id = cursor.getInt(cursor.getColumnIndexOrThrow("id")),
                 name = cursor.getString(cursor.getColumnIndexOrThrow("name")),
                 codeType = BarcodeFormat.valueOf(cursor.getString(cursor.getColumnIndexOrThrow("codeType"))),
-                codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue"))
+                codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue")),
+                color = cursor.getString(cursor.getColumnIndexOrThrow("color"))
             ))
         }
 
@@ -84,7 +89,8 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
             id = cursor.getInt(cursor.getColumnIndexOrThrow("id")),
             name = cursor.getString(cursor.getColumnIndexOrThrow("name")),
             codeType = BarcodeFormat.valueOf(cursor.getString(cursor.getColumnIndexOrThrow("codeType"))),
-            codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue"))
+            codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue")),
+            color = cursor.getString(cursor.getColumnIndexOrThrow("color"))
         )
 
         cursor.close()

mobile/src/main/java/ru/omni_devel/cards/EditCardActivity.kt

@@ -4,6 +4,7 @@ import android.app.Activity
 import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.ComponentActivity
+import androidx.activity.compose.LocalActivity
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
@@ -15,12 +16,17 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Button
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -29,8 +35,13 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.core.graphics.toColorInt
+import com.github.skydoves.colorpicker.compose.ColorEnvelope
+import com.github.skydoves.colorpicker.compose.HsvColorPicker
+import com.github.skydoves.colorpicker.compose.rememberColorPickerController
 import com.google.zxing.BarcodeFormat
 import com.journeyapps.barcodescanner.ScanContract
 import com.journeyapps.barcodescanner.ScanOptions
@@ -65,11 +76,17 @@ fun CardEditable(
     cardName: String,
     onCardNameChange: (String) -> Unit,
     codeValue: String,
-    oncodeValueChange: (String) -> Unit,
+    onCodeValueChange: (String) -> Unit,
     codeType: BarcodeFormat,
-    onCodeTypeChange: (BarcodeFormat) -> Unit
+    onCodeTypeChange: (BarcodeFormat) -> Unit,
+    color: String?,
+    onColorChange: (String?) -> Unit
 ) {
     var isCodeTypeDropdownExpanded by remember { mutableStateOf(false) }
+    var isColorPickerExpanded by remember { mutableStateOf(false) }
+    var isColorEnabled by remember { mutableStateOf(color != null) }
+
+    val colorPickerController = rememberColorPickerController()
 
     val fieldModifier = Modifier.fillMaxWidth()
 
@@ -77,7 +94,7 @@ fun CardEditable(
         contract = ScanContract()
     ) { result ->
         if (result.contents != null) {
-            oncodeValueChange(result.contents)
+            onCodeValueChange(result.contents)
 
             result.formatName?.let { formatName ->
                 try {
@@ -98,7 +115,7 @@ fun CardEditable(
     ) {
         OutlinedTextField(
             value = codeValue,
-            onValueChange = oncodeValueChange,
+            onValueChange = onCodeValueChange,
             modifier = Modifier.weight(1f),
             label = { Text("Value") }
         )
@@ -151,6 +168,44 @@ fun CardEditable(
             }
         }
     }
+
+    Row(
+        modifier = fieldModifier,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        Button(
+            enabled = isColorEnabled,
+            onClick = {
+                isColorPickerExpanded = !isColorPickerExpanded
+            }
+        ) {
+            Text("Choose color")
+        }
+        Switch(
+            checked = isColorEnabled,
+            onCheckedChange = {
+                isColorEnabled = it
+
+                if (!isColorEnabled) {
+                    onColorChange(null)
+                }
+            }
+        )
+    }
+
+    if (isColorPickerExpanded && isColorEnabled) {
+        HsvColorPicker(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(450.dp)
+                .padding(10.dp),
+            initialColor = color?.let { Color(it.toColorInt()) },
+            controller = colorPickerController,
+            onColorChanged = { colorEnvelope: ColorEnvelope ->
+                onColorChange("#${colorEnvelope.hexCode.substring(2)}")
+            }
+        )
+    }
 }
 
 @Composable
@@ -158,23 +213,27 @@ fun AddCard(innerPadding: PaddingValues, getDbFun: () -> DbHelper) {
     var cardName by remember { mutableStateOf("") }
     var codeValue by remember { mutableStateOf("") }
     var codeType by remember { mutableStateOf(BarcodeFormat.QR_CODE) }
+    var color by remember { mutableStateOf<String?>(null) }
 
-    val context = LocalContext.current as Activity
+    val context = LocalActivity.current
 
     Page(
         "New card",
         innerPadding
     ) {
         Column(
+            modifier = Modifier.verticalScroll(rememberScrollState()),
             verticalArrangement = Arrangement.spacedBy(8.dp)
         ) {
             CardEditable(
                 cardName = cardName,
                 onCardNameChange = { cardName = it },
                 codeValue = codeValue,
-                oncodeValueChange = { codeValue = it },
+                onCodeValueChange = { codeValue = it },
                 codeType = codeType,
-                onCodeTypeChange = { codeType = it }
+                onCodeTypeChange = { codeType = it },
+                color = color,
+                onColorChange = { color = it }
             )
 
             Button(
@@ -183,8 +242,8 @@ fun AddCard(innerPadding: PaddingValues, getDbFun: () -> DbHelper) {
                     val err = checkCardData(cardName, codeValue)
 
                     if (err == null) {
-                        getDbFun().addCard(cardName, codeValue, codeType)
+                        getDbFun().addCard(cardName, codeValue, codeType, color)
-                        context.finish()
+                        context!!.finish()
                     } else {
                         Toast.makeText(context, err, Toast.LENGTH_SHORT).show()
                     }
@@ -201,23 +260,27 @@ fun EditCard(cardInfo: CardInfo, innerPadding: PaddingValues, getDbFun: () -> Db
     var cardName by remember { mutableStateOf(cardInfo.name) }
     var codeValue by remember { mutableStateOf(cardInfo.codeValue) }
     var codeType by remember { mutableStateOf(cardInfo.codeType) }
+    var color by remember { mutableStateOf(cardInfo.color) }
 
-    val context = LocalContext.current as Activity
+    val context = LocalActivity.current
 
     Page(
         "Editing card id${cardInfo.id}",
         innerPadding
     ) {
         Column(
+            modifier = Modifier.verticalScroll(rememberScrollState()),
             verticalArrangement = Arrangement.spacedBy(8.dp)
         ) {
             CardEditable(
                 cardName = cardName,
                 onCardNameChange = { cardName = it },
                 codeValue = codeValue,
-                oncodeValueChange = { codeValue = it },
+                onCodeValueChange = { codeValue = it },
                 codeType = codeType,
-                onCodeTypeChange = { codeType = it }
+                onCodeTypeChange = { codeType = it },
+                color = color,
+                onColorChange = { color = it }
             )
 
             Button(
@@ -226,8 +289,8 @@ fun EditCard(cardInfo: CardInfo, innerPadding: PaddingValues, getDbFun: () -> Db
                     val err = checkCardData(cardName, codeValue)
 
                     if (err == null) {
-                        getDbFun().editCard(cardInfo.id, cardName, codeValue, codeType)
+                        getDbFun().editCard(cardInfo.id, cardName, codeValue, codeType, color)
-                        context.finish()
+                        context!!.finish()
                     } else {
                         Toast.makeText(context, err, Toast.LENGTH_SHORT).show()
                     }

mobile/src/main/java/ru/omni_devel/cards/Elements.kt

@@ -2,14 +2,18 @@ package ru.omni_devel.cards
 
 import android.content.Intent
 import androidx.compose.foundation.background
-import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+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.width
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.DropdownMenu
@@ -23,21 +27,23 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.graphics.toColorInt
 
 @Composable
 fun Page(name: String, innerPadding: PaddingValues, content: @Composable () -> Unit) {
-    Column(
+    Column() {
-        modifier = Modifier.padding(innerPadding)
+        TopBar(name, innerPadding)
-    ) {
-        TopBar(name)
 
         Column(
-            modifier = Modifier.padding(horizontal = 16.dp)
+            modifier = Modifier
+                .padding(horizontal = 16.dp)
+                .background(MaterialTheme.colorScheme.background)
         ) {
             content()
         }
@@ -45,12 +51,16 @@ fun Page(name: String, innerPadding: PaddingValues, content: @Composable () -> U
 }
 
 @Composable
-fun TopBar(text: String) {
+fun TopBar(text: String, innerPadding: PaddingValues) {
     Row(
-        modifier = Modifier.fillMaxWidth().background(MaterialTheme.colorScheme.primaryContainer).padding(horizontal = 12.dp, vertical = 16.dp)
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(MaterialTheme.colorScheme.primaryContainer)
+            .padding(innerPadding)
     ) {
         Text(
             text,
+            modifier = Modifier.padding(vertical = 4.dp, horizontal = 12.dp),
             fontSize = 24.sp,
             color = MaterialTheme.colorScheme.onPrimaryContainer
         )
@@ -58,7 +68,7 @@ fun TopBar(text: String) {
 }
 
 @Composable
-fun CardButton(cardInfo: CardInfo, onDeleteCard: (Int) -> Unit, getDbFun: () -> DbHelper) {
+fun CardButton(cardInfo: CardInfo, onDeleteCard: (Int) -> Unit) {
     val context = LocalContext.current
     var menuExpanded by remember { mutableStateOf(false) }
 
@@ -82,15 +92,31 @@ fun CardButton(cardInfo: CardInfo, onDeleteCard: (Int) -> Unit, getDbFun: () ->
             color = MaterialTheme.colorScheme.primaryContainer,
             tonalElevation = 2.dp
         ) {
-            Text(
+            Row(
-                cardInfo.name,
+                modifier = Modifier.fillMaxWidth().height(IntrinsicSize.Min),
-                fontSize = 16.sp,
+                horizontalArrangement = Arrangement.SpaceBetween
-                color = MaterialTheme.colorScheme.onPrimaryContainer,
+            ) {
-                modifier = Modifier
+                Box(
-                    .padding(vertical = 16.dp, horizontal = 16.dp)
+                    modifier = Modifier
-                    .fillMaxWidth(),
+                        .fillMaxHeight()
-                textAlign = TextAlign.Start
+                        .width(32.dp)
-            )
+                        .background(
+                            if (cardInfo.color == null) MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.625f)
+                            else Color(cardInfo.color.toColorInt()).copy(alpha = 0.625f)
+                        )
+                )
+
+                Text(
+                    cardInfo.name,
+                    fontSize = 16.sp,
+                    color = MaterialTheme.colorScheme.onPrimaryContainer,
+                    modifier = Modifier
+                        .padding(16.dp)
+                        .fillMaxWidth()
+                        .weight(1f),
+                    textAlign = TextAlign.Start
+                )
+            }
         }
 
         DropdownMenu(

mobile/src/main/java/ru/omni_devel/cards/MainActivity.kt

@@ -100,7 +100,7 @@ fun MainPage(
                     Text("Add new card to get started")
                 } else {
                     for (card in cards) {
-                        CardButton(card, onDeleteCard, getDbFun)
+                        CardButton(card, onDeleteCard)
                     }
                 }
             }

wear/build.gradle.kts

@@ -1,7 +1,6 @@
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.compose)
-    kotlin("plugin.serialization") version "2.2.20"
 }
 
 android {
@@ -14,7 +13,6 @@ android {
         targetSdk = 36
         versionCode = 41 // 1 at end for WearOS
         versionName = "1.1"
-
     }
 
     buildTypes {

wear/src/main/java/ru/omni_devel/cards/presentation/CardInfo.kt

@@ -9,4 +9,5 @@ class CardInfo (
     val name: String,
     val codeType: BarcodeFormat,
     val codeValue: String,
+    val color: String?
 )

wear/src/main/java/ru/omni_devel/cards/presentation/DbHelper.kt

@@ -6,17 +6,19 @@ import android.database.sqlite.SQLiteDatabase
 import android.database.sqlite.SQLiteOpenHelper
 import com.google.zxing.BarcodeFormat
 
-class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?) : SQLiteOpenHelper(context, "omni_cards", factory, 1) {
+class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?) : SQLiteOpenHelper(context, "omni_cards", factory, 2) {
     override fun onCreate(db: SQLiteDatabase?) {
-        db!!.execSQL("CREATE TABLE IF NOT EXISTS cards (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, codeType TEXT, codeValue TEXT)")
+        db!!.execSQL("CREATE TABLE IF NOT EXISTS cards (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, codeType TEXT, codeValue TEXT, color TEXT)")
     }
 
     override fun onUpgrade(
         db: SQLiteDatabase?,
-        p1: Int,
+        oldVersion: Int,
         p2: Int
     ) {
-        db!!.execSQL("DROP TABLE IF EXISTS cards")
+        if (oldVersion < 2) {
+            db!!.execSQL("ALTER TABLE cards ADD COLUMN color TEXT")
+        }
     }
 
     fun clearDatabase() {
@@ -37,6 +39,7 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
             values.put("name", card.name)
             values.put("codeValue", card.codeValue)
             values.put("codeType", card.codeType.name)
+            values.put("color", card.color)
 
             db.insert("cards", null, values)
         }
@@ -55,7 +58,8 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
                 id = cursor.getInt(cursor.getColumnIndexOrThrow("id")),
                 name = cursor.getString(cursor.getColumnIndexOrThrow("name")),
                 codeType = BarcodeFormat.valueOf(cursor.getString(cursor.getColumnIndexOrThrow("codeType"))),
-                codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue"))
+                codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue")),
+                color = cursor.getString(cursor.getColumnIndexOrThrow("color"))
             ))
         }
 
@@ -81,7 +85,8 @@ class DbHelper(val context: Context, val factory: SQLiteDatabase.CursorFactory?)
             id = cursor.getInt(cursor.getColumnIndexOrThrow("id")),
             name = cursor.getString(cursor.getColumnIndexOrThrow("name")),
             codeType = BarcodeFormat.valueOf(cursor.getString(cursor.getColumnIndexOrThrow("codeType"))),
-            codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue"))
+            codeValue = cursor.getString(cursor.getColumnIndexOrThrow("codeValue")),
+            color = cursor.getString(cursor.getColumnIndexOrThrow("color"))
         )
 
         cursor.close()

wear/src/main/java/ru/omni_devel/cards/presentation/Elements.kt

@@ -0,0 +1,78 @@
+package ru.omni_devel.cards.presentation
+
+import android.content.Intent
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+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.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.core.graphics.toColorInt
+import androidx.wear.compose.material3.Button
+import androidx.wear.compose.material3.ButtonDefaults
+import androidx.wear.compose.material3.MaterialTheme
+import androidx.wear.compose.material3.Text
+
+@Composable
+fun CardButton(cardInfo: CardInfo) {
+    val context = LocalContext.current
+
+    Box(modifier = Modifier.fillMaxWidth()) {
+        Button(
+            modifier = Modifier.fillMaxWidth(),
+            colors = ButtonDefaults.buttonColors(
+                containerColor = MaterialTheme.colorScheme.primaryContainer
+            ),
+            contentPadding = PaddingValues(0.dp),
+            onClick = {
+                val intent = Intent(context, ShowCardActivity::class.java)
+
+                intent.putExtra("cardId", cardInfo.id)
+
+                context.startActivity(intent)
+            }
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(IntrinsicSize.Min)
+                    .clip(ButtonDefaults.shape)
+            ) {
+                Box(
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .width(32.dp)
+                        .background(
+                            if (cardInfo.color == null)
+                                MaterialTheme.colorScheme.secondaryContainer.copy(alpha = 0.625f)
+                            else
+                                Color(cardInfo.color.toColorInt()).copy(alpha = 0.625f)
+                        )
+                )
+                Text(
+                    cardInfo.name,
+                    fontSize = 16.sp,
+                    color = MaterialTheme.colorScheme.onPrimaryContainer,
+                    modifier = Modifier
+                        .padding(16.dp)
+                        .fillMaxWidth()
+                        .weight(1f),
+                    textAlign = TextAlign.Start
+                )
+            }
+        }
+    }
+}

wear/src/main/java/ru/omni_devel/cards/presentation/MainActivity.kt

@@ -1,27 +1,21 @@
 package ru.omni_devel.cards.presentation
 
 import android.annotation.SuppressLint
-import android.content.Intent
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
-import androidx.wear.compose.material3.Button
 import androidx.wear.compose.material3.Text
+import com.google.zxing.BarcodeFormat
 
 class MainActivity : ComponentActivity() {
     private lateinit var db: DbHelper
@@ -40,8 +34,6 @@ class MainActivity : ComponentActivity() {
 @SuppressLint("UnusedBoxWithConstraintsScope")
 @Composable
 fun App(cards: List<CardInfo>) {
-    val context = LocalContext.current
-
     BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
         val topBottomPadding = maxHeight * 0.4f
 
@@ -63,22 +55,7 @@ fun App(cards: List<CardInfo>) {
             ) {
                 for (card in cards) {
                     item {
-                        Button(
+                        CardButton(card)
-                            modifier = Modifier.fillMaxWidth(),
-                            onClick = {
-                                val intent = Intent(context, ShowCardActivity::class.java)
-
-                                intent.putExtra("cardId", card.id)
-
-                                context.startActivity(intent)
-                            }
-                        ) {
-                            Text(
-                                text = card.name,
-                                modifier = Modifier.fillMaxWidth(),
-                                textAlign = TextAlign.Center
-                            )
-                        }
                     }
                 }
             }