Feed + Comment Polish (#99)

This diff is a quick design pass to solidify what feed items, comments, and all the general components look like. This also addresses loading states and makes sure everything looks good as a v1.
EmergeTools · Aug 8, 2024 · 903dcf3 · 903dcf3
1 parent dba68b4
commit 903dcf3
Show file tree

Hide file tree

Showing 9 changed files with 528 additions and 316 deletions.
diff --git a/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt b/android/app/src/main/java/com/emergetools/hackernews/AppActivity.kt
@@ -79,7 +79,7 @@ fun App() {
             selected = navItem.selected,
             colors = NavigationBarItemDefaults.colors(
               selectedIconColor = MaterialTheme.colorScheme.primary,
-              indicatorColor = MaterialTheme.colorScheme.primaryContainer
+              indicatorColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.2f)
             ),
             onClick = {
               model.actions(AppAction.NavItemSelected(navItem))

diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/bookmarks/BookmarksScreen.kt b/android/app/src/main/java/com/emergetools/hackernews/features/bookmarks/BookmarksScreen.kt
@@ -8,13 +8,15 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.emergetools.hackernews.features.comments.CommentsDestinations
+import com.emergetools.hackernews.features.stories.ListSeparator
 import com.emergetools.hackernews.features.stories.StoriesDestinations
 import com.emergetools.hackernews.features.stories.StoryItem
 import com.emergetools.hackernews.features.stories.StoryRow
@@ -40,7 +42,7 @@ fun BookmarksScreen(
       style = MaterialTheme.typography.titleMedium
     )
     LazyColumn {
-      items(items = state.bookmarks, key = { it.id }) { item ->
+      itemsIndexed(items = state.bookmarks, key = {_, item -> item.id }) { index, item ->
         StoryRow(
           item = item,
           onClick = {
@@ -55,6 +57,11 @@ fun BookmarksScreen(
             navigator(BookmarksNavigation.GoToComments(CommentsDestinations.Comments(it.id)))
           }
         )
+        if(index != state.bookmarks.lastIndex) {
+          ListSeparator(
+            lineColor = MaterialTheme.colorScheme.surfaceContainerHighest,
+          )
+        }
       }
     }
   }

diff --git a/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsDomain.kt b/android/app/src/main/java/com/emergetools/hackernews/features/comments/CommentsDomain.kt
@@ -23,6 +23,7 @@ import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
 import java.time.LocalDateTime
 import java.time.ZoneOffset
+import java.time.ZonedDateTime
 
 sealed interface CommentsState {
   val headerState: HeaderState
@@ -40,6 +41,7 @@ sealed interface CommentsState {
     val title: String,
     val author: String,
     val points: Int,
+    val timeLabel: String,
     val body: String?,
     val loggedIn: Boolean,
     val upvoted: Boolean,
@@ -53,6 +55,7 @@ sealed interface CommentsState {
       title = title,
       author = author,
       points = points,
+      timeLabel = timeLabel,
       body = body,
       upvoted = upvoted,
       upvoteUrl = upvoteUrl
@@ -104,6 +107,7 @@ sealed interface HeaderState {
     val title: String,
     val author: String,
     val points: Int,
+    val timeLabel: String,
     val body: String?,
     val upvoted: Boolean,
     val upvoteUrl: String,
@@ -179,6 +183,11 @@ class CommentsViewModel(
             title = searchResponse.item.title ?: "",
             author = searchResponse.item.author ?: "",
             points = searchResponse.item.points ?: 0,
+            timeLabel = relativeTimeStamp(
+              epochSeconds = ZonedDateTime
+                .parse(searchResponse.item.createdAt)
+                .toEpochSecond()
+            ),
             body = searchResponse.item.text,
             loggedIn = loggedIn,
             upvoted = postPage.postInfo.upvoted,