Update post list item UI

- Added support for clickable post source. Will be useful in filtering posts in home screen

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/bookmarks/ui/BookmarksScreen.kt

@@ -103,11 +103,15 @@ internal fun BookmarksScreen(
             if (post != null) {
               PostListItem(
                 item = post,
+                enablePostSource = false,
                 onClick = { openLink(post.link) },
                 onPostBookmarkClick = {
                   bookmarksPresenter.dispatch(BookmarksEvent.OnPostBookmarkClick(post))
                 },
-                onPostCommentsClick = { openLink(post.commentsLink!!) }
+                onPostCommentsClick = { openLink(post.commentsLink!!) },
+                onPostSourceClick = {
+                  // no-op
+                }
               )
               if (index != bookmarks.itemCount - 1) {
                 Divider(

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedPostItem.kt

@@ -66,7 +66,8 @@ internal fun FeaturedPostItem(
   pagerState: PagerState,
   onClick: () -> Unit,
   onBookmarkClick: () -> Unit,
-  onCommentsClick: () -> Unit
+  onCommentsClick: () -> Unit,
+  onSourceClick: () -> Unit
 ) {
   val isLargeScreenLayout =
     LocalWindowSizeClass.current.widthSizeClass == WindowWidthSizeClass.Expanded
@@ -77,15 +78,17 @@ internal fun FeaturedPostItem(
         page = page,
         pagerState = pagerState,
         onBookmarkClick = onBookmarkClick,
-        onCommentsClick = onCommentsClick
+        onCommentsClick = onCommentsClick,
+        onSourceClick = onSourceClick
       )
     } else {
       DefaultFeaturedPostItem(
         item = item,
         page = page,
         pagerState = pagerState,
         onBookmarkClick = onBookmarkClick,
-        onCommentsClick = onCommentsClick
+        onCommentsClick = onCommentsClick,
+        onSourceClick = onSourceClick
       )
     }
   }
@@ -97,7 +100,8 @@ private fun DefaultFeaturedPostItem(
   page: Int,
   pagerState: PagerState,
   onBookmarkClick: () -> Unit,
-  onCommentsClick: () -> Unit
+  onCommentsClick: () -> Unit,
+  onSourceClick: () -> Unit
 ) {
   Column {
     AsyncImage(
@@ -152,8 +156,10 @@ private fun DefaultFeaturedPostItem(
       postLink = item.link,
       postBookmarked = item.bookmarked,
       commentsLink = item.commentsLink,
+      enablePostSource = true,
       onBookmarkClick = onBookmarkClick,
       onCommentsClick = onCommentsClick,
+      onSourceClick = onSourceClick,
       modifier = Modifier.padding(start = 16.dp, end = 0.dp)
     )
 
@@ -167,7 +173,8 @@ private fun LargeScreenFeaturedPostItem(
   page: Int,
   pagerState: PagerState,
   onBookmarkClick: () -> Unit,
-  onCommentsClick: () -> Unit
+  onCommentsClick: () -> Unit,
+  onSourceClick: () -> Unit
 ) {
   Row(verticalAlignment = Alignment.CenterVertically) {
     AsyncImage(
@@ -223,8 +230,10 @@ private fun LargeScreenFeaturedPostItem(
         postLink = item.link,
         postBookmarked = item.bookmarked,
         commentsLink = item.commentsLink,
+        enablePostSource = true,
         onBookmarkClick = onBookmarkClick,
         onCommentsClick = onCommentsClick,
+        onSourceClick = onSourceClick
       )
     }
   }

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedSection.kt

@@ -96,6 +96,7 @@ internal fun FeaturedSection(
   onItemClick: (PostWithMetadata) -> Unit,
   onPostBookmarkClick: (PostWithMetadata) -> Unit,
   onPostCommentsClick: (String) -> Unit,
+  onPostSourceClick: (String) -> Unit,
 ) {
   Box(modifier = modifier) {
     if (featuredPosts.isNotEmpty()) {
@@ -168,7 +169,8 @@ internal fun FeaturedSection(
           pagerState = pagerState,
           onClick = { onItemClick(featuredPost) },
           onBookmarkClick = { onPostBookmarkClick(featuredPost) },
-          onCommentsClick = { onPostCommentsClick(featuredPost.commentsLink!!) }
+          onCommentsClick = { onPostCommentsClick(featuredPost.commentsLink!!) },
+          onSourceClick = { onPostSourceClick(featuredPost.feedLink) }
         )
       }
     }

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/HomeScreen.kt

@@ -169,6 +169,9 @@ fun HomeScreen(
           onPostClicked = { homePresenter.dispatch(HomeEvent.OnPostClicked(it)) },
           onPostBookmarkClick = { homePresenter.dispatch(HomeEvent.OnPostBookmarkClick(it)) },
           onPostCommentsClick = { commentsLink -> openLink(commentsLink) },
+          onPostSourceClick = {
+            // TODO
+          },
           onNoFeedsSwipeUp = { coroutineScope.launch { bottomSheetState.expand() } },
         )
       },
@@ -245,6 +248,7 @@ private fun HomeScreenContent(
   onPostClicked: (PostWithMetadata) -> Unit,
   onPostBookmarkClick: (PostWithMetadata) -> Unit,
   onPostCommentsClick: (String) -> Unit,
+  onPostSourceClick: (String) -> Unit,
   onNoFeedsSwipeUp: () -> Unit,
 ) {
   val featuredPosts = state.featuredPosts
@@ -270,6 +274,7 @@ private fun HomeScreenContent(
         onPostClicked = onPostClicked,
         onPostBookmarkClick = onPostBookmarkClick,
         onPostCommentsClick = onPostCommentsClick,
+        onPostSourceClick = onPostSourceClick,
         listState = listState,
       )
 

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostList.kt

@@ -43,6 +43,7 @@ import androidx.compose.runtime.ReadOnlyComposable
 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.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import app.cash.paging.compose.LazyPagingItems
@@ -74,6 +75,7 @@ internal fun PostsList(
   onPostClicked: (post: PostWithMetadata) -> Unit,
   onPostBookmarkClick: (PostWithMetadata) -> Unit,
   onPostCommentsClick: (String) -> Unit,
+  onPostSourceClick: (String) -> Unit
 ) {
   val featuredPostsPagerState = rememberPagerState(pageCount = { featuredPosts.size })
 
@@ -101,6 +103,7 @@ internal fun PostsList(
         onItemClick = onPostClicked,
         onPostBookmarkClick = onPostBookmarkClick,
         onPostCommentsClick = onPostCommentsClick,
+        onPostSourceClick = onPostSourceClick
       )
     }
 
@@ -109,9 +112,11 @@ internal fun PostsList(
       if (post != null) {
         PostListItem(
           item = post,
+          enablePostSource = true,
           onClick = { onPostClicked(post) },
           onPostBookmarkClick = { onPostBookmarkClick(post) },
-          onPostCommentsClick = { onPostCommentsClick(post.commentsLink!!) }
+          onPostCommentsClick = { onPostCommentsClick(post.commentsLink!!) },
+          onPostSourceClick = { onPostSourceClick(post.feedLink) }
         )
 
         if (index != posts.itemCount - 1) {
@@ -128,9 +133,11 @@ internal fun PostsList(
 @Composable
 fun PostListItem(
   item: PostWithMetadata,
+  enablePostSource: Boolean,
   onClick: () -> Unit,
   onPostBookmarkClick: () -> Unit,
-  onPostCommentsClick: () -> Unit
+  onPostCommentsClick: () -> Unit,
+  onPostSourceClick: () -> Unit
 ) {
   Column(
     modifier =
@@ -139,23 +146,24 @@ fun PostListItem(
         .padding(postListPadding)
   ) {
     Row(
-      modifier = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp),
+      modifier = Modifier.padding(start = 24.dp, top = 20.dp, end = 24.dp),
       horizontalArrangement = Arrangement.spacedBy(16.dp),
-      verticalAlignment = Alignment.CenterVertically
     ) {
       Text(
-        modifier = Modifier.weight(1f),
+        modifier = Modifier.weight(1f).align(Alignment.Top),
         style = MaterialTheme.typography.titleSmall,
         text = item.title,
-        color = AppTheme.colorScheme.textEmphasisHigh,
+        color = Color.White,
         maxLines = 2
       )
 
       item.imageUrl?.let { url ->
         AsyncImage(
           url = url,
           modifier =
-            Modifier.requiredSize(width = 128.dp, height = 72.dp).clip(RoundedCornerShape(12.dp)),
+            Modifier.requiredSize(width = 128.dp, height = 72.dp)
+              .clip(RoundedCornerShape(12.dp))
+              .align(Alignment.CenterVertically),
           contentDescription = null,
           contentScale = ContentScale.Crop
         )
@@ -168,8 +176,10 @@ fun PostListItem(
       postLink = item.link,
       postBookmarked = item.bookmarked,
       commentsLink = item.commentsLink,
+      enablePostSource = enablePostSource,
       onBookmarkClick = onPostBookmarkClick,
       onCommentsClick = onPostCommentsClick,
+      onSourceClick = onPostSourceClick,
       modifier = Modifier.padding(start = 24.dp, end = 12.dp)
     )
   }

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostMetadata.kt

@@ -15,14 +15,14 @@
  */
 package dev.sasikanth.rss.reader.home.ui
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredSize
-import androidx.compose.foundation.layout.requiredWidthIn
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -32,6 +32,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.capitalize
+import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -51,7 +53,9 @@ internal fun PostMetadata(
   commentsLink: String?,
   onBookmarkClick: () -> Unit,
   onCommentsClick: () -> Unit,
-  modifier: Modifier = Modifier
+  modifier: Modifier = Modifier,
+  enablePostSource: Boolean,
+  onSourceClick: () -> Unit,
 ) {
   Row(
     modifier =
@@ -60,31 +64,42 @@ internal fun PostMetadata(
           bottom = 8.dp,
         )
         .then(modifier),
-    horizontalArrangement = Arrangement.spacedBy(8.dp),
     verticalAlignment = Alignment.CenterVertically
   ) {
-    Text(
-      modifier = Modifier.requiredWidthIn(max = 72.dp),
-      style = MaterialTheme.typography.bodySmall,
-      maxLines = 1,
-      text = feedName,
-      color = AppTheme.colorScheme.textEmphasisMed,
-      overflow = TextOverflow.Ellipsis
-    )
+    Box(modifier = Modifier.weight(1f)) {
+      val postSourceClickableModifier =
+        if (enablePostSource) {
+          Modifier.clip(RoundedCornerShape(50))
+            .clickable(onClick = onSourceClick)
+            .background(color = Color.White.copy(alpha = 0.12f))
+            .padding(horizontal = 12.dp, vertical = 4.dp)
+        } else {
+          Modifier
+        }
 
-    Text(
-      style = MaterialTheme.typography.bodySmall,
-      maxLines = 1,
-      text = "•",
-      color = AppTheme.colorScheme.textEmphasisMed
-    )
+      val postSourceTextColor =
+        if (enablePostSource) {
+          Color.White
+        } else {
+          AppTheme.colorScheme.onSurfaceVariant
+        }
+
+      Text(
+        modifier = postSourceClickableModifier,
+        style = MaterialTheme.typography.bodySmall,
+        maxLines = 1,
+        text = feedName.capitalize(Locale.current),
+        color = postSourceTextColor,
+        overflow = TextOverflow.Ellipsis
+      )
+    }
 
     Text(
-      modifier = Modifier.weight(1f),
+      modifier = Modifier.padding(horizontal = 8.dp),
       style = MaterialTheme.typography.bodySmall,
       maxLines = 1,
       text = postPublishedAt,
-      color = AppTheme.colorScheme.textEmphasisMed,
+      color = Color.White,
       textAlign = TextAlign.Start
     )
 

shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/search/ui/SearchScreen.kt

@@ -124,11 +124,15 @@ internal fun SearchScreen(
             if (post != null) {
               PostListItem(
                 item = post,
+                enablePostSource = false,
                 onClick = { openLink(post.link) },
                 onPostBookmarkClick = {
                   searchPresenter.dispatch(SearchEvent.OnPostBookmarkClick(post))
                 },
-                onPostCommentsClick = { openLink(post.commentsLink!!) }
+                onPostCommentsClick = { openLink(post.commentsLink!!) },
+                onPostSourceClick = {
+                  // no-op
+                },
               )
 
               if (index != searchResults.itemCount - 1) {