use card component to render item list

android/Omnivore/app/build.gradle

@@ -156,6 +156,8 @@ dependencies {
 
     implementation 'com.google.android.gms:play-services-auth:20.2.0'
     implementation "com.google.accompanist:accompanist-systemuicontroller:0.25.1"
+
+    implementation("io.coil-kt:coil-compose:2.2.0")
 }
 
 apollo {

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeView.kt

@@ -6,6 +6,7 @@ import android.net.Uri
 import android.util.Log
 import android.view.ViewGroup
 import android.webkit.*
+import android.widget.Space
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
@@ -50,19 +51,21 @@ fun HomeView(loginViewModel: LoginViewModel, homeViewModel: HomeViewModel) {
       .fillMaxSize()
       .padding(horizontal = 6.dp)
   ) {
-    item {
-      Text("You have a valid auth token. Nice. Go save something in Chrome!")
-    }
 
     item {
-      LogoutButton { loginViewModel.logout() }
+      Row(
+        horizontalArrangement = Arrangement.End
+      ) {
+        Spacer(modifier = Modifier.weight(1.0F))
+        LogoutButton { loginViewModel.logout() }
+      }
     }
 
     items(linkedItems) { item ->
-      Text(item.title, modifier = Modifier.clickable {
-        selectedItemSlug.value = item.slug
-      })
-      Spacer(modifier = Modifier.height(16.dp))
+      LinkedItemCard(
+        item = item,
+        onClickHandler = { selectedItemSlug.value = item.slug }
+      )
     }
   }
 
@@ -134,8 +137,8 @@ fun ArticleWebView(slug: String) {
       CookieManager.getInstance().setAcceptThirdPartyCookies(this, true)
       CookieManager.getInstance().setAcceptCookie(true)
       CookieManager.getInstance().setCookie("https://api-demo.omnivore.app", authCookieString) {
+        loadUrl(url)
       }
-      loadUrl(url)
     }
   }, update = {
     it.loadUrl(url)

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/LinkedItemCard.kt

@@ -0,0 +1,53 @@
+package app.omnivore.omnivore.ui.home
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.Image
+import androidx.compose.material3.Card
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import coil.compose.rememberAsyncImagePainter
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun LinkedItemCard(
+  item: LinkedItem,
+  onClickHandler: () -> Unit,
+  modifier: Modifier = Modifier
+) {
+  Card(
+    onClick = { onClickHandler() },
+    shape = MaterialTheme.shapes.medium,
+    modifier = modifier
+      .fillMaxWidth()
+      .padding(15.dp)
+  ) {
+    Row {
+      Image(
+        painter = rememberAsyncImagePainter(item.imageURLString),
+        contentDescription = "Image associated with linked item",
+        modifier = Modifier.size(100.dp)
+      )
+
+      Column(modifier = Modifier.padding(8.dp)) {
+        Text(
+          text = item.title,
+          style = MaterialTheme.typography.titleMedium,
+          maxLines = 2,
+          overflow = TextOverflow.Ellipsis
+        )
+
+        Text(
+          text = item.descriptionText ?: "",
+          maxLines = 1,
+          overflow = TextOverflow.Ellipsis,
+          style = MaterialTheme.typography.bodyMedium
+        )
+      }
+    }
+  }
+}