Render profile pictures

composeApp/build.gradle.kts

@@ -57,6 +57,9 @@ kotlin {
             implementation(libs.androidx.room.runtime)
             implementation(libs.androidx.sqlite.bundled)
 
+            implementation("io.coil-kt.coil3:coil-compose:3.4.0")
+            implementation("io.coil-kt.coil3:coil-network-ktor3:3.4.0")
+
             implementation(libs.compose.runtime)
             implementation(libs.compose.foundation)
             implementation(libs.compose.material3)

composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/widgets/feed/EventListView.kt

@@ -5,6 +5,7 @@ import ac.aux.compose.database.model.Profile
 import ac.aux.compose.database.model.Repost
 import ac.aux.compose.database.model.intermdiate.LocalNostrEvent
 import ac.aux.compose.extensions.toFormattedTimeAndDateString
+import ac.aux.compose.ui.composable.widgets.profile.ProfileAvatar
 import ac.aux.compose.ui.theme.AuxTheme
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -162,16 +163,17 @@ private fun TextNoteFeedItem(
                 Row(
                     modifier = Modifier.fillMaxWidth().clickable(
                         onClick = {
-                            onNavigateToEvent.invoke(profile?.nostrEventId ?: nostrEvent.id)
+                            onNavigateToEvent.invoke(profile.nostrEventId)
                         }
                     ),
                     horizontalArrangement = Arrangement.spacedBy(10.dp, Alignment.Start),
                     verticalAlignment = Alignment.CenterVertically
                 ) {
-                    Icon(
-                        Icons.Default.Person,
-                        contentDescription = "Profile picture",
+                    ProfileAvatar(
+                        publicKey = nostrEvent.pubKey,
+                        profile = profile
                     )
+
                     Text(
                         modifier = Modifier.weight(1f),
                         text = profile.displayName ?: profile.userName ?: nostrEvent.pubKey,

composeApp/src/commonMain/kotlin/ac/aux/compose/ui/composable/widgets/profile/ProfileAvatar.kt

@@ -0,0 +1,83 @@
+package ac.aux.compose.ui.composable.widgets.profile
+
+import ac.aux.compose.database.model.Profile
+import ac.aux.compose.ui.theme.AuxTheme
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccountCircle
+import androidx.compose.material.icons.filled.Face5
+import androidx.compose.material.icons.filled.Face6
+import androidx.compose.material.icons.filled.FaceRetouchingOff
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
+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.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import co.touchlab.kermit.Logger
+import coil3.compose.AsyncImage
+import kotlin.math.abs
+
+@Composable
+fun ProfileAvatar(publicKey: String, profile: Profile?) {
+    val tintColor = Color.hsl(
+        hue = abs(
+            publicKey.hashCode()
+        ).mod(360).toFloat(),
+        saturation = 0.55f,
+        lightness = 0.45f
+    )
+    val imageModifier = Modifier.size(55.dp).clip(shape = CircleShape)
+
+    if (profile?.picture == null) {
+        Icon(
+            modifier = imageModifier,
+            imageVector = Icons.Default.AccountCircle,
+            tint = tintColor,
+            contentDescription = "Profile picture",
+        )
+    } else {
+        // Load image...
+        val placeHolderGraphic = rememberVectorPainter(Icons.Default.Face5)
+        val fallbackGraphic = rememberVectorPainter(Icons.Default.Face5)
+        val errorGraphic = rememberVectorPainter(Icons.Default.FaceRetouchingOff)
+
+        AsyncImage(
+            model = profile.picture,
+            modifier = imageModifier,
+            contentDescription = "Profile picture for ${profile.displayName ?: profile.publicKey}",
+            placeholder = placeHolderGraphic,
+            fallback = fallbackGraphic,
+            error = errorGraphic,
+            contentScale = ContentScale.Crop
+        )
+    }
+    // TODO: Show if we follow user...
+    // TODO: Show cards...
+}
+
+@Preview
+@Composable
+fun ProfileAvatarPreview() {
+    AuxTheme {
+        Surface(
+            modifier = Modifier.padding(20.dp)
+        ) {
+            ProfileAvatar(
+                publicKey = "hwgwefwase",
+                profile = Profile(
+                    publicKey = "",
+                    nostrEventId = "referenced",
+                    displayName = "Frank Talk",
+                    picture = "pictureUrl"
+                )
+            )
+        }
+    }
+}