Show account picture in applications backup rows

Display each account's profile avatar next to its name in the per-account
applications backup list, falling back to a Person icon (and skipping
network image loading in the offline flavor).

https://claude.ai/code/session_01Gxg5hLcqHqMXCMzJM44E9H

app/src/main/java/com/greenart7c3/nostrsigner/ui/ApplicationsBackupScreen.kt

@@ -1,6 +1,7 @@
 package com.greenart7c3.nostrsigner.ui
 
 import android.widget.Toast
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -8,9 +9,16 @@ import androidx.compose.foundation.layout.Spacer
 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.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
@@ -25,11 +33,14 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 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.res.stringResource
 import androidx.compose.ui.unit.dp
+import coil3.compose.SubcomposeAsyncImage
 import com.greenart7c3.nostrsigner.Amber
+import com.greenart7c3.nostrsigner.BuildFlavorChecker
 import com.greenart7c3.nostrsigner.LocalPreferences
 import com.greenart7c3.nostrsigner.R
 import com.greenart7c3.nostrsigner.models.Account
@@ -37,6 +48,7 @@ import com.greenart7c3.nostrsigner.service.ApplicationBackup
 import com.greenart7c3.nostrsigner.service.RestoreResult
 import com.greenart7c3.nostrsigner.service.toShortenHex
 import com.greenart7c3.nostrsigner.ui.components.AmberButton
+import com.greenart7c3.nostrsigner.ui.theme.fromHex
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
@@ -127,6 +139,7 @@ private fun AccountBackupRow(
     val context = LocalContext.current
     val scope = rememberCoroutineScope()
     val name by account.name.collectAsState()
+    val picture by account.picture.collectAsState()
     var backupEnabled by remember(account.npub) {
         mutableStateOf(LocalPreferences.getBackupApplications(context, account.npub))
     }
@@ -139,6 +152,8 @@ private fun AccountBackupRow(
                 .fillMaxWidth()
                 .padding(vertical = 4.dp),
         ) {
+            AccountAvatar(account = account, picture = picture)
+            Spacer(modifier = Modifier.width(12.dp))
             Column(modifier = Modifier.weight(1f)) {
                 if (name.isNotBlank()) {
                     Text(text = name)
@@ -201,6 +216,37 @@ private fun AccountBackupRow(
     }
 }
 
+@Composable
+private fun AccountAvatar(
+    account: Account,
+    picture: String,
+) {
+    val borderColor = Color.fromHex(account.hexKey.slice(0..5))
+    val fallback: @Composable () -> Unit = {
+        Icon(
+            Icons.Outlined.Person,
+            contentDescription = null,
+            modifier = Modifier
+                .size(40.dp)
+                .border(2.dp, borderColor, CircleShape),
+        )
+    }
+
+    if (picture.isNotBlank() && !BuildFlavorChecker.isOfflineFlavor()) {
+        SubcomposeAsyncImage(
+            model = picture,
+            contentDescription = null,
+            modifier = Modifier
+                .clip(RoundedCornerShape(50))
+                .size(40.dp),
+            loading = { CenterCircularProgressIndicator(Modifier) },
+            error = { fallback() },
+        )
+    } else {
+        fallback()
+    }
+}
+
 @Composable
 fun RestoreBackupDialog(accountStateViewModel: AccountStateViewModel) {
     val state by accountStateViewModel.restorePrompt.collectAsState()